jquery mobile 基本テンプレート
テンプレート内容：
jquery mobile : 1.4.5
Ajax(GET/POST通信用）
ソースコード：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
テンプレート <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script> $(document).ready(function(){ httpGet = function httpGet(){ // GETの場合 $.ajax({ type: 'GET', dataType: 'json', data: { 'name': $("#param").val() }, url: 'http://'+location.host+'/getData', success: function(data) { console.log(data.value); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus); } }); } httpPost = function httpPost(){ // POSTの場合 $.ajax({ type: 'POST', dataType: 'json', data: { 'name': $("#param").val() }, url: 'http://'+location.host+'/getData2', success: function(data) { console.log(data.value); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus); } }); } }); </script> <div id="home" data-role="page"> <div data-role="header"> <h1>ヘッダー</h1> </div> <div class="ui-content"> <h2>content</h2> コンテンツ <a class="ui-btn" href="#p1">P1へ</a> </div> <div data-role="footer"> <h3>フッター</h3> </div> </div> <div id="p1" data-role="page"> <div data-role="header"> <a data-rel="back">Back</a> <h1>ヘッダー</h1> </div> <div class="ui-content"> <h2>content</h2> コンテンツ <a class="ui-btn" href="#home">HOMEへ</a> </div> <div data-role="footer"> <h3>フッター</h3> </div> </div> |
サンプル例：
