というわけで、ついこの前下記の機能を追加したのですが・・・

今までは、ファイルリストの上にある<< >>のボタンで改ページ（続きのファイルリストを取得）して貰っていたのですが、今回改ページボタンを廃止し、ファイルリストの末尾に”continue…”を用意し、これをクリックすることで、既存のファイルリストに追加されるようにしました。

引用元: NAL-6295の舌先三寸 » Blog Archive » #pogoplug accessの改ページのUIを変更した.

 

continue…リンクをクリックするのもめんどくさいので、自動で連続的に読み込むようにしました。

昨日、#pogoplug accessを実装するときに、一回のファイルリスト取得リクエストで取得出来なかった分を、矢印キーではなく、リストのcontinue…ボタンで再度リクエストして既存のリストに追加するようなUIに変更しようとしました。
しかしながら、jquery mobileは表示をする際に、かなりDOM操作をして最初のDOMのカタチを維持していませんので、

    //失敗例（かなり単純化して書いてあります。）
    var 既存のリスト = $("#既存のリストのID");

    新しくできたliオブジェクト.appendTo(既存のリスト);

    既存のリスト.listview();

とやると、たしかに新しく追加した要素は綺麗に表示されるのですが、既に存在していたliオブジェクトの表示がおかしくなってしまう事が分かりました。

そこで一旦諦めようかと思ったのですが、ちょっと考えて下の方法で試したらうまく行くことが分かりました。
説明すると、

新しくulオブジェクトを作って、
そちらに一旦新しいliオブジェクトを追加し、
新しいulオブジェクトをlistview()で表示用に変換した後、
liオブジェクトを既存のulオブジェクトに追加する。

という手順になります。

    //成功例(かなり単純化して書いてあります。)
    //新しいリストをつくって
    var 新しいリスト = $('<ul />');

    //新しいliオブジェクトを追加して
    新しいliオブジェクト.appendTo(新しいリスト);
    //listviewで表示用に変換して
    新しいリスト.listview();

    //既存のリストに追加する
    新しいリスト.find('li').appendTo($("#既存のリストのID")); 

これで、既存のオブジェクトも新しいオブジェクトも綺麗に表示されるようになりました。

今までは、ファイルリストの上にある<< >>のボタンで改ページ（続きのファイルリストを取得）して貰っていたのですが、今回改ページボタンを廃止し、ファイルリストの末尾に”continue…”を用意し、これをクリックすることで、既存のファイルリストに追加されるようにしました。

とりあえず、こんばんはカンタンな告知のみ。
ちょっと苦労したので、明日以降、jquery mobileに関しての記事を書こうかな。