0
    ひょんなことから、ホームページを作ることになって、
    見た目をよくするために、スライドショーなんか使いたいな〜
    なんて思ったのはいいけれど、そう簡単にうまくいくわけはなく...

    あ〜でもない、こ〜でもないと
    最終的に、jQuery + jQuery UI とやらを使うことになりました

    で、何とかできたものの完全には理解できていないので、
    ブログの更新がてら、一歩ずつ勉強していくことにしました
    ※このブログは、JUGEMを使用しています

    jQuery UI [ホームページへ]
    jQuery UI




    ちなみに、スライドショー作成にはコチラのサイトを参考にしました
    jQuery UI を使ったスライダー[webdeveloperplus.com(英語)]
    記事は古いですが使えました

    下のほうの「View Working Demo」ってところをクリックすると
    デモを見ることができます

    ...

    さてさて、jQuery UI に話を戻しますが、
    今回は、そのものが使えるかどうか?ってことで、
    jQuery UI デモ(Demos & Documentation)の
    一番最初にある「Draggable」を試してみます
    jQuery UI Demo
    jQuery UI >>> Demos & Documentation


    ■ jQuery UI を使うための準備 -----
    まずは、そもそもの準備として、jQuery UI を使えるようにしないといけません

    jQuery は、ず〜〜〜いぶん昔に使えるようにしました
    [過去記事]JUGEMで jQueryを使ってみる

    じゃ、今回も同じようにすればいいんじゃないの?って感じですが、
    ひとつ問題があって、
    jQuery は JUGEM さま に用意していただいている
    のに対して、
    jQuery UI は 自分で用意しないといけない(たぶん)
    のです...

    なんかめんどうだなぁ〜
    と思ったところが、救世主があらわれました

    Google さま が用意している API (意味は分かりませんが)というものを
    利用させていただけば「問題なし!」のようです
    Google Libraries API(中ほどに jQuery と jQuery UI があります)

    難しいことは抜きにして、早速設置してみましょう

    設置場所は、JUGEM管理画面の [デザイン]->[HTML・CSS編集]の
    「HTML編集フォーム」の中です
    <script type="text/javascript" src="./template/js/cookie.js"></script>
    <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

    一行目(黒字)は、JUGEMに最初からある記述なので目印にしてください
    二行目(青字)は、jQuery を使うための記述です(jQuery を使っていない方は記述してください)
    三行目(赤字)は、jQuery UI (Google の API を使用)を使うための記述です

    [補足]
    <script type="text/javascript" src="./template/js/cookie.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

    二行目(青字)の、jQuery も Google API のものに置き換えることができます
    JUGEM じゃない方はこっちにすれば(たぶん)大丈夫!

    以上で準備完了!

    ※最新の jQuery UI は、バージョン1.8.21なのですが、スライドショーがうまく動作しなかったので
     バージョン1.5.3を使用しています(可能なら後日修正します)
    [追記]気になって調べてみたら、あっさり解決してしまったので最新版に修正しておきます




    ■ Draggable を試してみる -----
    では、いよいよ実際に使ってみましょう<br>
    デモの一番目にある「Draggable」を試してみたいと思います
    draggable
    jQuery UI - Draggable


    まずは、ドラッグ用 div要素 の CSS を記述します
    [HTML・CSS編集]画面の「CSS編集フォーム」の中に記述します
    #draggable {
        width: 150px; height: 150px; padding: 0.5em;
        border: 1px solid #999999;
    }
    ※div の枠線を表示する一行(赤字)を追加しています

    次は、jQueryに関する記述を「HTML編集フォーム」の中に...
    <script type="text/javascript">
        $(function() {
            $( "#draggable" ).draggable();
        });
    </script>

    すでに jQuery を使っている方は、赤い行だけ追加、
    使ってなかった方は、5行を jQuery UI の API を追加した後に記述してください

    内容は、
    「#draggable」の要素に draggable を実行する... って感じですかね?
    両方とも draggable で分かりにくいですが、
    後ろの draggable が、jQuery UI の draggable です(混乱しそう)

    さて、それではいよいよ div を本文<HTML>モードに記述して確認してみましょう
    <div id="draggable">
        <p>Drag me around</p>
    </div>
    


    さあ、緊張の一瞬!
    下のボックスを、クリック&ドラッグで移動することができるでしょうか?

    Drag me around


    じゃじゃ〜ん!できました〜!!(か?)

    ちょっと補足したいこともありますが、長くなってしまったので、
    それはまた次回!





    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    Calendar
    S M T W T F S
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
    << October 2017 >>
    My Apps
    有料アプリ

    無料アプリ

    Selected entries
    Categories
    AdSense
    Sponsored Links
    Archives
    Recent comment
    Links
    Profile
    Search this site.
    Others
    Mobile
    qrcode
    powered
    無料ブログ作成サービス JUGEM