前回、jQueryを拡張するという予定でしたが、ページ遷移やアイコンの都合上断念しました・・・＜(._.)＞
しかし、何もしてなかったわけでないです！
jQuery Mobileの拡張を行ってました。
jQueryMobileはレンダラーやjQuery Mobileの規約、バージョンを意識しなければいけないので使い勝手が悪い。。
（特にバージョンによってHTMLのコード自体が変わるのはいけてない）
アップロードは面倒なのでコードを部分的に乗せていきます。
※投稿の際に不正文字列と出たので全角にしてる文字列があります。
まず、jQuery Mobile（1.4）のテンプレ的な書き方。
＜div data-role=”page” id=”page1”＞
＜header data-role=”header”＞
＜h1＞ヘッダー＜/h1＞
＜/header＞
＜div class=”ui-content” role=”main”＞
コンテンツ
＜/div＞
＜footer data-role=”footer” data-position=”fixed”＞
＜h1＞フッター＜/h1＞
＜/footer＞
＜/div＞
モバイルではページを複数作る時は１ファイルで納めると良いよってことなので、
その場合はこれをコピペすることになります。
ただ、このやり方だと気になることがいくつか。。
・ヘッダー・フッターをわざわざページ分書かなければいけない
・ページが増えることによってJS側でレンダラーを行う量が多くなる（処理が増える）
・１ファイルだとしてもページ遷移の際にヘッダー・フッターが一度消える
細かいですがこんなとこでしょうか。
そこで少しでも処理を減らすために”１ページ内に複数のコンテンツを作る”ということを思いつきました。
上のコードのコンテンツ部分をこう書きます。
＜div class=”ui-content” role=”main” data-content-id=”1”＞
コンテンツ１
＜/div＞
＜div class=”ui-content” role=”main” data-content-id=”2”＞
コンテンツ２
＜/div＞
＜div class=”ui-content” role=”main” data-content-id=”3”＞
コンテンツ３
＜/div＞
そしてスタイルを次のように設定します。
div[data-content-id] {
display:none;
}
div[data-content-id=”1”] {
display:block;
}
初期表示はこれで１ページのみ表示できます。
ページ切り替えの場合は
function changePage(contentId){
$('div[data-content-id]').hide();
$('div[data-content-id=”' + contentId + '”]').show();
}
みたいな感じでできます。
CSSもそうですが、セレクタの指定がとても便利ですね。
こうやるとページのhiddenだけ取れたりします。
var hdn = $('input[type=”hidden”]');
for(var i = 0; i ＜ hdn.length; i++){
console.debug(hdn[i].value);
}
これで特定の値を持つコンポーネントを取り出すことも出来ます。
内部でどう処理してるのわかりませんが、コード的にも処理的にも良くなさそうですがね。。
var el = $('＊[value=””]');
本当はもっといろいろあるんですが思ったより長くなったので今日はこのへんで。。。
ちなみにレンタルサーバーの方ですが、CakePHPの動作確認、DBの接続確認ができました。
あとはごりごりコード書いてけばWebサイトは容易に運用できそうです！
ただアップロードが遅くて、Cakeのプロジェクトあげるだけで1時間近くかかりました＾＾；；