127.0.0.1: ページの作成:「スマホ画面が簡単に作れます。 ==helloworld== <html> <head> <meta charset=utf-8 /> <link rel="s...」

2015-05-19T17:58:31Z

ページの作成:「スマホ画面が簡単に作れます。 ==helloworld== <!DOCTYPE html> <<nowiki />html> <<nowiki />head> <<nowiki />meta charset=utf-8 /> <<nowiki />link rel="s...」

新規ページ

スマホ画面が簡単に作れます。

==helloworld==
<!DOCTYPE html>
<<nowiki />html>
<<nowiki />head>
<<nowiki />meta charset=utf-8 />
<<nowiki />link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<<nowiki />script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<<nowiki />script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<<nowiki />body>
<<nowiki />div data-role="page">
<<nowiki />div data-role="header">
<<nowiki />h1>Page Title</h1>
</div>
<<nowiki />div data-role="content">
<<nowiki />p>Hello, world !</p>
</div>
<<nowiki />div data-role="footer">
<<nowiki />div align="center">(c) abc</div>
</div>
</div>
</body>
</html>

==日本語リファレンス==
http://dev.screw-axis.com/doc/jquery_mobile/

==ボタン==
<<nowiki />a href="#top" data-role="button" data-inline="true">ボタン１</a>

==トグルボタン==
<<nowiki />div data-role="collapsible" data-collapsed="true">
<<nowiki />h3>ＯＮ</h3>
<<nowiki />p>ＯＦＦ</p>
</div>

==トグルスライド==
<<nowiki />select data-role="slider">
<<nowiki />option value="off">ＯＦＦ</option>
<<nowiki />option value="on">ＯＮ</option>
</select>

==多段リスト==
<<nowiki />ul data-role="listview">
<<nowiki />li>あ行
<<nowiki />ul>
<<nowiki />li>あ</li>
<<nowiki />li>い</li>
<<nowiki />li>う</li>
</ul>
</li>
<<nowiki />li>か行
<<nowiki />ul>
<<nowiki />li>か</li>
<<nowiki />li>き</li>
<<nowiki />li>く</li>
</ul>
</li>
</ul>

==ボタングループ化==
<<nowiki />div data-role="controlgroup" data-type="horizontal">
<<nowiki />a href="index.html" data-role="button" data-icon="star">お気に</a>
<<nowiki />a href="index.html" data-role="button" data-icon="back">前</a>
<<nowiki />a href="index.html" data-role="button" data-icon="arrow-u">上</a>
<<nowiki />a href="index.html" data-role="button" data-icon="arrow-d">下</a>
<<nowiki />a href="index.html" data-role="button" data-icon="forward">次</a>
</div>

==ボタンアイコン一覧==
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/anatomy_page/#/doc/jquery_mobile/components/buttons/buttons_icons/

==ボタンテーマ（色==
<<nowiki />a href="/" data-role="button" data-theme="a">Theme a</a>

==ajaxを使わないリンク==
<<nowiki />a rel="external" href="hoge.html">ページ名</a>

=ajaxを使わないリンク（全体=
*custom-scripting.js
$(document).bind("mobileinit", function(){
$.mobile.ajaxLinksEnabled = false; // Ajaxを使用したページ遷移を無効
$.mobile.ajaxFormsEnabled = false; // Ajaxを使用したフォーム遷移を無効
});
*script読み込み位置
<<nowiki />script src="jquery.js"></script>
<<nowiki />script src="custom-scripting.js"></script>
<<nowiki />script src="jquery-mobile.js"></script>

==ボタンを並べる方法==
<<nowiki />div>
<<nowiki />a href="#hoge" data-role="button" data-inline="true">ボタン1</a>
<<nowiki />a href="#hoge" data-role="button" data-inline="true">ボタン2</a>
</div>

==リスト表示==
<<nowiki />ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<<nowiki />li data-role="list-divider">タイトル</li>
<<nowiki />li><<nowiki />a href="/data1/">データ1</a></li>
<<nowiki />li><<nowiki />a href="/data2/">データ2</a></li>
</ul>

==ボタンの右寄せ==
<<nowiki />div data-role="header">
<<nowiki />h1>カテゴリー検索</h1>
<<nowiki />a href="index.html" data-icon="info" class="ui-btn-right">検索</a>
</div>

==検索フォーム==
<<nowiki />form action="/search2ch/word">
<<nowiki />input type="search" name="key" value="" />
</form>

==ページテンプレ==
<<nowiki />table width="100%"><<nowiki />tr><<nowiki />td width="33%" align="center">
<<nowiki />a href="/?page=1" data-role="button" data-icon="arrow-l">前</a>
</td><<nowiki />td width="34%" align="center">
2㌻
</td><<nowiki />td width="33%" align="center">
<<nowiki />a href="/?page=3" data-role="button" data-icon="arrow-r" data-iconpos="right">次</a>
</td></tr></table>

==フッターナビゲーション==
項目名は7バイト以下は省略されない(検証:android-is04
<<nowiki />div data-role="navbar">
<<nowiki />ul>
<<nowiki />li><<nowiki />a href="/" data-icon="home" class="ui-btn-active">ホーム</a></li>
<<nowiki />li><<nowiki />a href="/hot" data-icon="grid">新人気</a></li>
<<nowiki />li><<nowiki />a href="/my" data-icon="gear">マイ</a></li>
<<nowiki />li><<nowiki />a href="/ranking" data-icon="star">ランク</a></li>
<<nowiki />li><<nowiki />a href="/comment" data-icon="plus">新コメ</a></li>
</ul>
</div>

==ヘッダーメニューを作る==
ヘッダーのmenuボタンをクリックするとサイトマップのような一覧が開く

<!DOCTYPE html>
<<nowiki />html>
<<nowiki />head>
<<nowiki />meta charset=utf-8 />
<<nowiki />title>jqeurymobilemenu</title>
<<nowiki />link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<<nowiki />script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<<nowiki />script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<<nowiki />script type="text/javascript">
<<nowiki />!--
$(function() {
$("#menubtn").toggle(function() {
$("#menulist").slideDown("fast");
//$("#menulist").css("display","block");
},function() {
$("#menulist").slideUp("fast");
//$("#menulist").css("display","none");
});
});
//-->
</script>
</head>
<<nowiki />body>
<<nowiki />div data-role="page" id="home">
<<nowiki />div data-role="header">
<<nowiki />h1>Home</h1>
<<nowiki />a href="javascript:void()" id="menubtn">menu</a>
</div>
<<nowiki />div id="menulist" style="display:none">
<<nowiki />ul data-role="listview" data-theme="c" data-dividertheme="b">
<<nowiki />li><<nowiki />a href="/data1/">データ1</a></li>
<<nowiki />li><<nowiki />a href="/data2/">データ2</a></li>
</ul>
</div>
<<nowiki />div data-role="content">
maincontents
</div>
</div>
</body>
</html>

==フッターその他ナビを作成==
フッターナビのその他ボタンを押すと、フッターナビ下にぬるっとリンク集が開く

<!DOCTYPE html>
<<nowiki />html>
<<nowiki />head>
<<nowiki />meta charset=utf-8 />
<<nowiki />title>jqeurymobileothernav</title>
<<nowiki />link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<<nowiki />script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<<nowiki />script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<<nowiki />script type="text/javascript">
<<nowiki />!--
$(function() {
$("#othernavbtn").toggle(function() {
$("#othernavlist").slideDown("fast");
//$("#othernavlist").css("display","block");
$(this).blur();
$('html,body').animate({ scrollTop: $('#othernavlist').offset().top }, 'slow');
},function() {
$("#othernavlist").slideUp("fast");
//$("#othernavlist").css("display","none");
});
});
//-->
</script>
</head>
<<nowiki />body>
<<nowiki />div data-role="page" id="home">
<<nowiki />div data-role="header">
<<nowiki />h1>Home</h1>
</div>
<<nowiki />div data-role="content">
maincontents<<nowiki />br />
maincontents<<nowiki />br />
maincontents<<nowiki />br />
maincontents<<nowiki />br />
maincontents<<nowiki />br />
</div>
<<nowiki />div data-role="navbar">
<<nowiki />ul>
<<nowiki />li><<nowiki />a href="/" data-icon="home" class="ui-btn-active">ホーム</a></li>
<<nowiki />li><<nowiki />a href="/ranking" data-icon="grid">ランキング</a></li>
<<nowiki />li><<nowiki />a href="javascript:void()" id="othernavbtn" data-icon="arrow-d">その他</a></li>
</ul>
</div>
<<nowiki />div id="othernavlist" style="display:none">
<<nowiki />ul data-role="listview" data-theme="c" data-dividertheme="b">
<<nowiki />li><<nowiki />a href="/data1/">データ1</a></li>
<<nowiki />li><<nowiki />a href="/data2/">データ2</a></li>
</ul>
<<nowiki />span id="othernavlistfooter"></span>
</div>
</div>
</body>
</html>

==テーマデザインカスタマイズ==
#http://jquerymobile.com/themeroller/のサイトからカスタムcssを作成

Javascript/jquerymobile - 変更履歴

127.0.0.1: ページの作成:「スマホ画面が簡単に作れます。 ==helloworld== <html> <head> <meta charset=utf-8 /> <link rel="s...」