Yamaguchi webgroup02 jQueryUI

1,992 views

Published on

第2回山口県Web勉強会資料

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,992
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yamaguchi webgroup02 jQueryUI

  1. 1. 「jQuery UI」入門<br />第2回山口県Web勉強会 2010.06.05<br /> @mikage014<br />
  2. 2. アジェンダ<br /><ul><li>What’s jQuery UI?
  3. 3. jQuery UIを使ってみよう</li></li></ul><li>What’s jQuery UI?<br />JavaScript Library「jQuery」と「jQuery UI」、CSSのセット<br />Accordion, Tab,Button, Icon等のインターフェース作成<br />アニメーション、エフェクトをサポート<br />
  4. 4. jQuery UIを使ってみよう<br /><ul><li>ダウンロード
  5. 5. ヘッダで読み込む
  6. 6. HTMLを書く
  7. 7. JavaScriptでjQuery UIを適用
  8. 8. Demo</li></li></ul><li>ダウンロード<br />jQueryUI<br />http://jqueryui.com/<br />Themes でテンプレートを選ぶ<br />Web上でカスタマイズも可<br />jQuery本体も一緒にダウンロードされる<br />
  9. 9. CSS, jQuery, jQuery UIを読み込む<br /><head><br /> …<br /> <link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> <br /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><br /> <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script><br /> …<br /></head><br />
  10. 10. jQuery UIの書式に従ってHTMLを書く<br />■ Tabsの例<br /><body><br /> …<br /><div id="tabs"><br /> <ul><br /> <li><a href="#tabs-1">First</a></li><br /> <li><a href="#tabs-2">Second</a></li><br /> </ul><br /> <div id=“tabs-1“>1つ目のタブの内容</div><br /> <div id=“tabs-2“>2つ目のdivブロックの内容</div><br /> </div><br /> …<br /></body><br />
  11. 11. JavaScriptコードでjQuery UIを適用<br />■ Tabsの例<br /><head><br /> …<br /> <script type="text/javascript"><br /> $(function(){ <br /> // Tabs<br /> $('#tabs').tabs();<br /> …<br /> });<br /> </script><br /> …<br /></head><br />CSSのセレクタを書く<br />
  12. 12. jQuery UI Demo<br />http://granite.jp/demo/jquery_ui/<br />

×