狠狠撸

狠狠撸Share a Scribd company logo
YUI
YUI って何だ?
Y ahoo!  U ser  I nterface Library Yahoo! が提供する CSS と JavaScript のライブラリ
何が出来るの?
カレンダー リッチテキストエディタ アップローダー ドラッグ&ドロップ タブ切り替え スライドショー サジェスト(入力補完) グラフ ソート可能なテーブル
メリット
?見た目がカッコイイ ?開発時間の短縮 ?名前の衝突がない ? クロスブラウザ 対応
?
デメリット
?読み込むファイルが多い ?読込みが重いかな?
使ってみましょう ( ? ω ? ) ?
ドラッグ&ドロップ
<script type=“text/javascript”>    new YAHOO.util.DD(&quot; ddImg &quot;);  </script> <img id=&quot; ddImg &quot; src=/sasata299/yui/&quot;nekomurasan.jpg&quot;>
タブ切り替え
<script type=“text/javascript”>    var tab = new YAHOO.widget.TabView(&quot; myTab &quot;); </script> <div id=&quot; myTab &quot; class=&quot;yui-navset yui-navset-top&quot;> <ul class=&quot;yui-nav&quot;></ul> <div class=&quot;yui-content&quot;></div> </div>
<script type=“text/javascript”>    var tab = new YAHOO.widget.TabView(&quot; myTab &quot;); </script> <div id=&quot; myTab &quot; class=&quot;yui-navset yui-navset-top&quot;> <ul class=&quot;yui-nav&quot;> <li><a href=&quot;#&quot;><em> tab-title1 </em></a></li> <li><a href=&quot;#&quot;><em> tab-title2 </em></a></li> <li><a href=&quot;#&quot;><em> tab-title3 </em></a></li> </ul> <div class=&quot;yui-content&quot;> <div> content1 </div> <div> content2 </div> <div> content3 </div> </div> </div>
<button onclick=&quot; addtabs ()&quot;> タブを追加 </button> <script type=“text/javascript”> var tab = new YAHOO.widget.TabView(&quot; myTab &quot;); var  addtabs  = function() { tab.addTab( new YAHOO.widget.Tab( { label: ‘ ラベル’ , content: ‘ 内容’ } ));  }  </script>
リッチテキスト エディタ
<script type=“text/javascript”> var myConfig = { height: '200px', width: '520px', handleSubmit: true,   autoHeight: true }; var myEditor =  new YAHOO.widget.SimpleEditor(' yuieditor ', myConfig); myEditor. render() ; </script> <textarea id=&quot; yuieditor &quot;   name=&quot; yuieditor &quot;> </textarea>
アップローダー ※ 複数ファイルの同時アップロード可能
<div id=&quot; yuiuploader “></div> <script type=“text/javascript”> YAHOO.widget.Uploader.SWFURL = &quot;uploader.swf&quot;; var uploader = new YAHOO.widget.Uploader(&quot;  yuiuploader &quot;); uploader.addListener('fileSelect',onFileSelect); uploader.addListener('uploadError',onUploadError); uploader.addListener('uploadComplete',onUploadComplete); uploader.addListener('uploadProgress',onUploadProgress); uploader.addListener('uploadStart',onUploadStart); uploader.upload(fileID, 'upload.cgi'); </script>
こんなことも 出来ます(???)
スライドショー ※ slideshow.js というものを使っています。
<script type=“text/javascript”> var ssConfig = { effect: YAHOO.myowndb.slideshow.effects.slideRight, interval: 3000  }; var ss = new YAHOO.myowndb.slideshow(&quot; yuislide &quot;, ssConfig); </script> <div id=&quot; yuislide &quot; class=&quot;yui-sldshw-displayer&quot;> <img class=&quot; yui-sldshw-frame &quot; src=/sasata299/yui/&quot;neko.jpg&quot; /> <div class=&quot; yui-sldshw-frame &quot;> <p>HTML を表示することもできます </p> </div> <div class=&quot; yui-sldshw-frame &quot;> <iframe width=&quot;312&quot; height=&quot;176&quot; src=“…&quot;></iframe> </div> </div>
まとめ
① ID を付ける。 ② コンストラクタに ID を渡す これだけ
YUI++ YUI を利用して、短時間でカッコイイ Web ページを作っちゃいましょう
Ad

Recommended

141115 making web site
141115 making web site
Himi Sato
?
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
?
J query place
J query place
sayoko miura
?
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
?
?箩蚕耻别谤测をおぼえよう!その2
?箩蚕耻别谤测をおぼえよう!その2
Nishida Kansuke
?
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
?
SEOとJava Script。 ?文書構造とチームと、時々、闇?
SEOとJava Script。 ?文書構造とチームと、時々、闇?
Yuki Minakawa
?
nanocのhelper 利用実例
nanocのhelper 利用実例
Go Maeda
?
何なの肠?
何なの肠?
Mutsumi IWAISHI
?
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
Jun Fukaya
?
环境构筑から始める顿箩补苍驳辞チュートリアル
环境构筑から始める顿箩补苍驳辞チュートリアル
sakihohoribe
?
Java script
Java script
sayoko miura
?
闯蚕耻别谤测入门
闯蚕耻别谤测入门
sayoko miura
?
BMXUG つきじ#4
BMXUG つきじ#4
K Kimura
?
闭じタグを超えた先に僕が见た景色とは
闭じタグを超えた先に僕が见た景色とは
Muyuu Fujita
?
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
?
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
?
(きっと)あなたにも出来る!Hyperledger composer でブロックチェーンアプリを動かしてみた
(きっと)あなたにも出来る!Hyperledger composer でブロックチェーンアプリを動かしてみた
K Kimura
?
顿箩补苍驳辞のチュートリアル
顿箩补苍驳辞のチュートリアル
sakihohoribe
?
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
?
小规模案件て?作られた秘伝のタレ
小规模案件て?作られた秘伝のタレ
Muyuu Fujita
?
プロダクト開発してわかったDjangoの深?いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深?いパーミッション管理の話 @ PyconJP2017
hirokiky
?
モテる JavaScript
モテる JavaScript
Osamu Monoe
?
まだ顿翱惭操作で消耗してるの?
まだ顿翱惭操作で消耗してるの?
IRI MO
?
颁丑补谤迟.箩蝉て?简単にク?ラフを描画する
颁丑补谤迟.箩蝉て?简単にク?ラフを描画する
iPride Co., Ltd.
?
からあげとビーチと私
からあげとビーチと私
Tatsuya Sasaki
?
メタプログラミングで顿厂尝を书こう
メタプログラミングで顿厂尝を书こう
Tatsuya Sasaki
?

More Related Content

What's hot (20)

何なの肠?
何なの肠?
Mutsumi IWAISHI
?
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
Jun Fukaya
?
环境构筑から始める顿箩补苍驳辞チュートリアル
环境构筑から始める顿箩补苍驳辞チュートリアル
sakihohoribe
?
Java script
Java script
sayoko miura
?
闯蚕耻别谤测入门
闯蚕耻别谤测入门
sayoko miura
?
BMXUG つきじ#4
BMXUG つきじ#4
K Kimura
?
闭じタグを超えた先に僕が见た景色とは
闭じタグを超えた先に僕が见た景色とは
Muyuu Fujita
?
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
?
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
?
(きっと)あなたにも出来る!Hyperledger composer でブロックチェーンアプリを動かしてみた
(きっと)あなたにも出来る!Hyperledger composer でブロックチェーンアプリを動かしてみた
K Kimura
?
顿箩补苍驳辞のチュートリアル
顿箩补苍驳辞のチュートリアル
sakihohoribe
?
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
?
小规模案件て?作られた秘伝のタレ
小规模案件て?作られた秘伝のタレ
Muyuu Fujita
?
プロダクト開発してわかったDjangoの深?いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深?いパーミッション管理の話 @ PyconJP2017
hirokiky
?
モテる JavaScript
モテる JavaScript
Osamu Monoe
?
まだ顿翱惭操作で消耗してるの?
まだ顿翱惭操作で消耗してるの?
IRI MO
?
颁丑补谤迟.箩蝉て?简単にク?ラフを描画する
颁丑补谤迟.箩蝉て?简単にク?ラフを描画する
iPride Co., Ltd.
?
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
Jun Fukaya
?
环境构筑から始める顿箩补苍驳辞チュートリアル
环境构筑から始める顿箩补苍驳辞チュートリアル
sakihohoribe
?
闯蚕耻别谤测入门
闯蚕耻别谤测入门
sayoko miura
?
BMXUG つきじ#4
BMXUG つきじ#4
K Kimura
?
闭じタグを超えた先に僕が见た景色とは
闭じタグを超えた先に僕が见た景色とは
Muyuu Fujita
?
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
?
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
?
(きっと)あなたにも出来る!Hyperledger composer でブロックチェーンアプリを動かしてみた
(きっと)あなたにも出来る!Hyperledger composer でブロックチェーンアプリを動かしてみた
K Kimura
?
顿箩补苍驳辞のチュートリアル
顿箩补苍驳辞のチュートリアル
sakihohoribe
?
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
?
小规模案件て?作られた秘伝のタレ
小规模案件て?作られた秘伝のタレ
Muyuu Fujita
?
プロダクト開発してわかったDjangoの深?いパーミッション管理の話 @ PyconJP2017
プロダクト開発してわかったDjangoの深?いパーミッション管理の話 @ PyconJP2017
hirokiky
?
モテる JavaScript
モテる JavaScript
Osamu Monoe
?
まだ顿翱惭操作で消耗してるの?
まだ顿翱惭操作で消耗してるの?
IRI MO
?
颁丑补谤迟.箩蝉て?简単にク?ラフを描画する
颁丑补谤迟.箩蝉て?简単にク?ラフを描画する
iPride Co., Ltd.
?

Viewers also liked (20)

からあげとビーチと私
からあげとビーチと私
Tatsuya Sasaki
?
メタプログラミングで顿厂尝を书こう
メタプログラミングで顿厂尝を书こう
Tatsuya Sasaki
?
からあげエンジニアについて
からあげエンジニアについて
Tatsuya Sasaki
?
クックパッドでの别尘谤利用事例
クックパッドでの别尘谤利用事例
Tatsuya Sasaki
?
マーケティングのための贬补诲辞辞辫利用
マーケティングのための贬补诲辞辞辫利用
Tatsuya Sasaki
?
Wimba
Wimba
jvonharz
?
Kc2
guestb508b8
?
UXHK 2015 Presentation Designing the Context for Design
UXHK 2015 Presentation Designing the Context for Design
Ted Kilian
?
Customer Experience for SMEs Key Person of Influence Talk
Customer Experience for SMEs Key Person of Influence Talk
Ted Kilian
?
The rules of indices
The rules of indices
Yu Kok Hui
?
800万人の&辩耻辞迟;食べたい&辩耻辞迟;を贬补诲辞辞辫で分散処理
800万人の&辩耻辞迟;食べたい&辩耻辞迟;を贬补诲辞辞辫で分散処理
Tatsuya Sasaki
?
Uxhk 2015art of start workshop share.key
Uxhk 2015art of start workshop share.key
Ted Kilian
?
贬补诲辞辞辫を业务で使ってみた
贬补诲辞辞辫を业务で使ってみた
Tatsuya Sasaki
?
贬补诲辞辞辫を业务で使ってみました
贬补诲辞辞辫を业务で使ってみました
Tatsuya Sasaki
?
961万人の食卓を支えるデータ解析
961万人の食卓を支えるデータ解析
Tatsuya Sasaki
?
Transitioning into UX: General Assembly Hong Kong 2015
Transitioning into UX: General Assembly Hong Kong 2015
Ted Kilian
?
颁翱翱碍笔础顿での贬补诲辞辞辫利用
颁翱翱碍笔础顿での贬补诲辞辞辫利用
Tatsuya Sasaki
?
狈辞厂蚕尝データベースが登场した背景と特徴
狈辞厂蚕尝データベースが登场した背景と特徴
Tatsuya Sasaki
?
搁耻产测で顿厂尝
搁耻产测で顿厂尝
Yukimitsu Izawa
?
Hadoop導入事例 in クックパッド
Hadoop導入事例 in クックパッド
Tatsuya Sasaki
?
からあげとビーチと私
からあげとビーチと私
Tatsuya Sasaki
?
メタプログラミングで顿厂尝を书こう
メタプログラミングで顿厂尝を书こう
Tatsuya Sasaki
?
からあげエンジニアについて
からあげエンジニアについて
Tatsuya Sasaki
?
クックパッドでの别尘谤利用事例
クックパッドでの别尘谤利用事例
Tatsuya Sasaki
?
マーケティングのための贬补诲辞辞辫利用
マーケティングのための贬补诲辞辞辫利用
Tatsuya Sasaki
?
UXHK 2015 Presentation Designing the Context for Design
UXHK 2015 Presentation Designing the Context for Design
Ted Kilian
?
Customer Experience for SMEs Key Person of Influence Talk
Customer Experience for SMEs Key Person of Influence Talk
Ted Kilian
?
The rules of indices
The rules of indices
Yu Kok Hui
?
800万人の&辩耻辞迟;食べたい&辩耻辞迟;を贬补诲辞辞辫で分散処理
800万人の&辩耻辞迟;食べたい&辩耻辞迟;を贬补诲辞辞辫で分散処理
Tatsuya Sasaki
?
Uxhk 2015art of start workshop share.key
Uxhk 2015art of start workshop share.key
Ted Kilian
?
贬补诲辞辞辫を业务で使ってみた
贬补诲辞辞辫を业务で使ってみた
Tatsuya Sasaki
?
贬补诲辞辞辫を业务で使ってみました
贬补诲辞辞辫を业务で使ってみました
Tatsuya Sasaki
?
961万人の食卓を支えるデータ解析
961万人の食卓を支えるデータ解析
Tatsuya Sasaki
?
Transitioning into UX: General Assembly Hong Kong 2015
Transitioning into UX: General Assembly Hong Kong 2015
Ted Kilian
?
颁翱翱碍笔础顿での贬补诲辞辞辫利用
颁翱翱碍笔础顿での贬补诲辞辞辫利用
Tatsuya Sasaki
?
狈辞厂蚕尝データベースが登场した背景と特徴
狈辞厂蚕尝データベースが登场した背景と特徴
Tatsuya Sasaki
?
Hadoop導入事例 in クックパッド
Hadoop導入事例 in クックパッド
Tatsuya Sasaki
?
Ad

Recently uploaded (7)

やってみた!OpenAI Function Calling 入門 .
やってみた!OpenAI Function Calling 入門 .
iPride Co., Ltd.
?
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
NTT DATA Technology & Innovation
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
Protect Your IoT Data with UbiBot's Private Platform.pptx
Protect Your IoT Data with UbiBot's Private Platform.pptx
ユビボット 株式会社
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?
色について.pptx .
色について.pptx .
iPride Co., Ltd.
?
やってみた!OpenAI Function Calling 入門 .
やってみた!OpenAI Function Calling 入門 .
iPride Co., Ltd.
?
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
NTT DATA Technology & Innovation
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
Protect Your IoT Data with UbiBot's Private Platform.pptx
Protect Your IoT Data with UbiBot's Private Platform.pptx
ユビボット 株式会社
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?
Ad

YUI