jQuery Mobile用のいくつかのプラグイン

最近、 jQuery Mobileに興味を持ち、その上で何か深刻なことを書きたいと思った。 まず、「カルーセル」などのコンポーネントを作成するというアイデアが生まれました。 その後、私の視線はTwitterに落ちました...一般的に、作業は続き、最終的に2つのプラグインと小さなプロジェクトを手に入れました。これについては、トピックの最後で説明します。



私が言ったように、最初のプラグインはカルーセルです。 それは何だと思います、私はすべてを知っていますが、いずれにせよデモはここで見つけることができます 。



このプラグインの使用方法。 まず、 githubからダウンロードしてcarousel.jsとcarousel.cssを接続します。



次に、次のhtmlコードを作成します。

<div id="content" style="height:100%;width:300px;"> <div style="height:100%;width:300px;"> <div style="height:460px;width:300px;"> <div id="carousel" class="carousel"> <div id="carousel_scrollpane" class="carousel-content"> <div id="carousel_content" class="carousel-content-scroller"> </div> </div> <div id="carousel_nav" class="carousel-nav"> <div id="carousel_mid" class="carousel-mid"></div> </div> </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、カルーセルのマークアップが作成されます。 次に、各タブのコンポーネントを表示するためのテンプレートが必要です。 前のコードの直後にコードを書きます

 <div id="carousel_template" style="display:none"> <div class="carousel-item"> <div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div> <div id="carousel_item_@{id}" > <div style="float:left;width:100%"><img src="@{image}" /></div> </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@ {id}、@ {title}、@ {image}とは何ですか。 これらは、名前に従って入力から取得される値です。

カルーセル自体のJavaScriptコード：

 var carousel = new $.widgets.Carousel( { uuid : "carousel", args : { "scrollInterval" : 600,"itemWidth":290}, value : [ { "title" : "Tron.Legacy", "image" : "images/1.jpg" }, { "title" : "Yogi Bear", "image" : "images/2.jpg" }, { "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader", "image" : "images/3.jpg" }, { "title" : "The Fighter", "image" : "images/4.jpg" }, { "title" : "Tangled", "image" : "images/5.jpg" } ] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

完了すると、カルーセルがページに表示されます。



次のコンポーネントはLoadUpリストです。 このようなコンポーネントは、すべてのFourSquareユーザーに見られました。 これは、最後の（最初の）要素をドラッグすると、データがロードされるリストです。



タッチデバイスの実際の例は、 こちらをご覧ください 。



使用するには、 gitaからjquery.loadup-list.jsスクリプトをダウンロードします。



次に、idを設定する必要があるリストを作成します。

 <div data-role="content" > <ul data-role="listview" data-inset="true" data-theme="a" id="long-list" style="position:relative;top:0px;"> </ul> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、onloadmoveとonloadfinishの2つの関数を作成する必要があります。



onloadmoveは、最後のリストアイテムを取得したときにトリガーされます

 var onloadmove = function(){ $('#loader').remove(); $("#long-list").parent().append("<div id='loader' style=' margin-left: 45% ; margin-right: 49% ;'><img src='images/loader.gif' alt='Loading...'/></div>"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、アニメーションGIFが追加されます。



リストの最後の要素を解放するとすぐに、onloadfinishが起動します。 したがって、すべてのリクエストを書き込みます

 var onloadfinish = function(){ $("#long-list li:last-child").removeClass("ui-corner-bottom"); $("#long-list li:last-child").attr("tabindex","-1"); $("#long-list").append('<li role="option" tabindex="0" class="ui-li ui-li-static ui-btn-up-a ui-corner-bottom">2</li>'); $("#long-list").animate({ top: 0}, "fast"); $('#loader').remove(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして今、1行だけが残っています

 $("#long-list").loadup(onloadmove,onloadfinish);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

できました。



そして最後に、サービスについて。 それは「要するに...」と呼ばれ、長く退屈な映画レビューを読むのが嫌いな人に必要です。 すべてがシンプルです。目的の映画を選択し、そのポスターをクリックして、Twitterからレビューを読みます。 実際、モバイル版のサイトでは、これらのプラグインのうち2つが作成されました。 プロジェクトはより楽しくなり、すべてのデータは静的になりました（IEでは動作しません）。 しかし、彼が誰かに興味を持っているなら、彼は協力して彼をさらに促進する準備ができています。 将来的には、映画の自動追加/削除だけでなく、スケジュールの発行により最寄りの映画館を検索する機能を追加したいと思います。



UPD ：jQueryブログに移植されました。