Yamaguchi webgroup02 jQueryUI
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,403
On Slideshare
2,399
From Embeds
4
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 4

http://www.slideshare.net 2
http://s.deeeki.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 「jQuery UI」入門
    第2回山口県Web勉強会 2010.06.05
    @mikage014
  • 2. アジェンダ
    • What’s jQuery UI?
    • 3. jQuery UIを使ってみよう
  • What’s jQuery UI?
    JavaScript Library「jQuery」と「jQuery UI」、CSSのセット
    Accordion, Tab,Button, Icon等のインターフェース作成
    アニメーション、エフェクトをサポート
  • 4. jQuery UIを使ってみよう
    • ダウンロード
    • 5. ヘッダで読み込む
    • 6. HTMLを書く
    • 7. JavaScriptでjQuery UIを適用
    • 8. Demo
  • ダウンロード
    jQueryUI
    http://jqueryui.com/
    Themes でテンプレートを選ぶ
    Web上でカスタマイズも可
    jQuery本体も一緒にダウンロードされる
  • 9. CSS, jQuery, jQuery UIを読み込む
    <head>

    <link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

    </head>
  • 10. jQuery UIの書式に従ってHTMLを書く
    ■ Tabsの例
    <body>

    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id=“tabs-1“>1つ目のタブの内容</div>
    <div id=“tabs-2“>2つ目のdivブロックの内容</div>
    </div>

    </body>
  • 11. JavaScriptコードでjQuery UIを適用
    ■ Tabsの例
    <head>

    <script type="text/javascript">
    $(function(){
    // Tabs
    $('#tabs').tabs();

    });
    </script>

    </head>
    CSSのセレクタを書く
  • 12. jQuery UI Demo
    http://granite.jp/demo/jquery_ui/