話してきました | Home | SwapSkills doubbbleに参加してきた
2011/07/02 0:34 | 印刷

以前ブログで書いた『スマホ対策してみた』ですが、 ご覧の通りかなり、かなりゴリゴリでした。

原因は、jquery mobileを動的に生成したHTML要素に対してうまく適用できなかったからなんですが・・・よく調べたら意外と簡単にその辺の問題が解決できたので、ご紹介します。

まずは、before afterでソースを比較してみましょう。

before

DEMO

$(window).load(function(){
	$.ajax({
		type: "GET",
		url: "/4_1/rss.xml",
		dataType: "xml",
		async: true,
		success: parseXml
	});
});
function parseXml(xml){
	var entryList = "";
	var creatContents = "";
	$(xml).find("item").each(function(i){
		i = i+1;
		entryList += "<li class='ui-btn ui-btn-icon-right ui-li ui-btn-up-c' role='option' data-theme='c'><div class='ui-btn-inner'><div class='ui-btn-text'><a href='#no" +i+ "' class='ui-link-inherit'>" + $("title",this).text() + "</a></div><span class='ui-icon ui-icon-arrow-r'></span></div></li>";
		creatContents += "<div data-role='page' class='ui-page ui-body-c' id='no" + i + "'><div date-role='header' class='ui-bar-a ui-header' role='banner'><a href='#home' class='ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-b' data-rel='back' data-icon='arrow-l' data-theme='c'><span class='ui-btn-inner ui-btn-corner-all'><span class='ui-btn-text'>BACK</span><span class='ui-icon ui-icon-arrow-l ui-icon-shadow'></span></span></a><h1 role='heading' class='ui-title'>半人前ウェブディレクターの奮闘記</h1></div><div data-role='content' class'ui-content' role='main'><h2>" +$("title",this).text()+ "</h2><p>" + $("encoded",this).text() +"</p></div></div>";
	});
	$("#entryList").append(entryList);
	$("#creatContents").append(creatContents);
}

after

DEMO

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "/4_1/rss.xml",
		dataType: "xml",
		async: true,
		success: parseXml
	});
});
function parseXml(xml){
	var entryList = "";
	var creatContents = "";
	$(xml).find("item").each(function(i){
		i = i+1;
		entryList += "<li><a href='#no" +i+ "'>" + $("title",this).text() + "</a></li>";
		creatContents += "<div data-role='page' id='no" + i + "' data-url='no"+i+ "'><div data-role='header'><h1>半人前ウェブディレクターの奮闘記</h1></div><div data-role='content'><h2>" +$("title",this).text()+ "</h2><p>" + $("encoded",this).text() +"</p></div></div>";
	});
	$("#entryList").append(entryList).listview("refresh");
	$("#home").after(creatContents).page();
}

こんな感じです。
afterもそんなにスマートではないんですが、大きく変わったところは、
まず、コンテンツを生成する部分

entryList += "<li><a href='#no" +i+ "'>" + $("title",this).text() + "</a></li>";
 creatContents += "<div data-role='page' id='no" + i + "' data-url='no"+i+ "'><div data-role='header'><h1>半人前ウェブディレクターの奮闘記</h1></div><div data-role='content'><h2>" +$("title",this).text()+ "</h2><p>" + $("encoded",this).text() +"</p></div></div>"

jquery mobileで生成される要素は含めずに、純粋なタグ構造になっています。

beforeではこれではうまくいかず、挫折してしまったんですが・・・

$("#entryList").append(entryList).listview("refresh");
$("#home").after(creatContents).page();

この部分で解決しています。
まず、上段の部分。ここでは最初のページのリストを表示しています。最後の.listview("refresh")というのがポイントで、"refresh"とつける事で、jquery mobileで装飾してくれます。(ただし、liの場合のみ)

下段では、エントリーの本体を生成しています。
こちらは当然liではないので、"refresh"は使えません。かわりに.page()とつけることで、動的に生成した要素に対してjquery mobileで装飾が可能になります。

ちなみに、ちょっとはまってしまったのですが、同一ページ内に複数のページを書く場合、ページの構成単位は

<div data-role="page" id="home">
<div data-role="header">
<h1>半人前ウェブディレクターの奮闘記</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="entryList">
</ul>

</div>
</div>

となります。
なので、今回のサンプルを作るときも、div data-role='page' id='noX'とページを作っていたのですが、うまく動きませんでした。どうやら、実際にはページの構成トリガーとなるのはdata-url='noX'の部分のようです。

静的なページのサンプルをfirebugとかで見てもらえば分かると思いますが、jquery mobileがidと同じ値をdata-urlとして生成して、それがページのurlとして利用されるというしくみのようです。(ややこしい・・・)

DEMO[静的なバージョン]

で、同じ事を動的にしようとするとうまく動きません。
それは、.page()ではdata-urlを追加してくれないためです。なので、同じような事をするためには、data-urlは自分で書かないといけないという訳です。

もう少し精進が必要ですね。明日、勉強してきます。

いつもタイトルを入れ忘れて投稿してしまう・・・せっかくtwitterと連携しているのに(涙)

via:house tect jQueryMobileのかゆいところに手が届くお作法メモ

動的生成でBeforeのようなコード書かなくてはいけないとなるとちょっと億劫ですので安心しました。urlについては静的ページとAJAXで読んだ時のような動的とで違うってことですよね。難しいなあ。
urlについては、静的と動的で違うというより動的な場合にdata-urlがうまく生成されないのが原因のようですね。
(リファレンスで読んだ訳ではないので憶測ですが・・・)
その辺の事も明日、教えてもらえればいいんですけどね。
まー、まだベータ版なので、正式版でfixしてくれれば、よいかと(^^;
はじめまして。xmlからリストとコンテンツを作って表示させる方法はないかと探しているうち、このサイトに行き着きました。本当にすごいです!
この手法を使いたいのですが、どうすればいいでしょう。もしよかったらe-mailに返信いただけるとありがたいです。よろしくお願いします。
こんばんわ。ご質問いただいたxmlの読み込みですが、ブログのRSSですか?
外部のサイトからの読み込みの場合、java scriptだけでやろうとすると、google feed APIを使ったりしないとできません。
同一ドメインならもっと簡単ですので、jqueryのajaxなどで実現できます。

前者なら下記の例を参考にしてもらえばいいかと思います。
http://meusonho41.com/blog/?p=74
デモのソースをそのまま使えば大丈夫だと思います。
ありがとうございます!!
HP内の処理で、ここで紹介されているソースや、前者で紹介されているソースを参考に使わせていただきたいと思います。ありがとうございました。

コメント追加

タイトル
名前
E-mail
Webサイト
本文
情報保存 する  しない
  • 情報保存をすると次回からお名前等を入力する手間が省けます。
  • E-mailは公開されません - このエントリーの新規コメント通知が必要なら記入します。