1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 6 7 <title>Mobiscroll 日期時間選擇控件( SnoopyChen修改增加中文支持 ceo@vmeitime.com )</title> 8 9 <script src="dev/jquery-1.9.1.js"></script> 10 11 <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script> 12 <script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> 13 、 14 <link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" /> 15 16 <!-- S 可根據自己喜好引入樣式風格文件 --> 17 <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> 18 <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" /> 19 20 <!-- E 可根據自己喜好引入樣式風格文件 --> 21 22 <script src="dev/js/mobiscroll.list-2.5.1.js" type="text/javascript"></script> 23 <script src="dev/js/mobiscroll.list-2.5.1.js" type="text/javascript"></script> 24 <!--Includes--> 25 26 <style type="text/css"> 27 body { 28 padding: 0; 29 margin: 0; 30 font-family: arial, verdana, sans-serif; 31 font-size: 12px; 32 background: #ddd; 33 } 34 input, select { 35 width: 100%; 36 padding: 5px; 37 margin: 5px 0; 38 border: 1px solid #aaa; 39 box-sizing: border-box; 40 border-radius: 5px; 41 -moz-box-sizing: border-box; 42 -webkit-box-sizing: border-box; 43 -webkit-border-radius: 5px; 44 } 45 .header { 46 border: 1px solid #333; 47 background: #111; 48 color: white; 49 font-weight: bold; 50 text-shadow: 0 -1px 1px black; 51 background-image: linear-gradient(#3C3C3C,#111); 52 background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111)); 53 background-image: -moz-linear-gradient(#3C3C3C,#111); 54 } 55 .header h1 { 56 text-align: center; 57 font-size: 16px; 58 margin: .6em 0; 59 padding: 0; 60 text-overflow: ellipsis; 61 overflow: hidden; 62 white-space: nowrap; 63 } 64 .content { 65 padding: 15px; 66 background: #fff; 67 } 68 .car { 69 position: relative; 70 height: 100%; 71 } 72 .car img { 73 height: 28px; 74 display: block; 75 margin: 0 auto; 76 } 77 .car .img-cont { 78 width: 80px; 79 height: 28px; 80 text-align: center; 81 float: left; 82 position: relative; 83 top: 50%; 84 margin-top: -14px; 85 } 86 .car span { 87 float: left; 88 } 89 </style> 90 91 <script type="text/javascript"> 92 $(function () { 93 94 <!--固定寫法--> 95 var opt = { 96 97 } 98 99 $(".demos").hide(); 100 <!-- 指定省市區對應的 --> 101 opt.tree_list = {preset : 'list', labels: ['Region', 'Country', 'City']}; 102 103 <!--Script--> 104 105 106 <!-- 顯示彈出選擇層 --> 107 $("#demo_tree_list").show(); 108 <!-- 固定寫法 --> 109 $('#test_tree_list').val('').scroller('destroy').scroller($.extend(opt['tree_list'], { theme: 'android-ics light', mode: 'scroller', display: 'bottom', lang: 'zh' })); 110 111 112 113 }); 114 </script> 115 </head> 116 117 <body> 118 <div class="header"> 119 <h1>Mobiscroll</h1> 120 </div> 121 122 <div class="content"> 123 124 125 <div id="demo_default" class="demos"> 126 <label for="test_default">Click here to try</label> 127 <input type="text" name="test_default" id="test_default" /> 128 </div> 129 130 <div data-role="fieldcontain" class="demos fieldcontain" id="demo_tree_list"> 131 <label for="test_tree_list_dummy">Click here to try</label> 132 <ul id="test_tree_list"> 133 <li>廣東省 <!-- 第一層 省 --> 134 <ul> 135 <li>廣州市 <!-- 第二層 市 --> 136 <ul> 137 <li>白雲區</li> <!-- 第三層 區 --> 138 <li>天河區</li> 139 <li>番禺區</li> 140 <li>花都區</li> 141 </ul></li> 142 <li>佛山市 143 <ul> 144 <li>南海區</li> 145 <li>禪城區</li> 146 <li>順德區</li> 147 </ul></li> 148 </ul></li> 149 <li>湖北省 150 <ul> 151 <li>武漢市 152 <ul> 153 <li>漢口市</li> 154 <li>南昌市</li> 155 </ul></li> 156 </ul></li> 157 <li>陝西省 158 <ul> 159 <li>西安市 160 <ul> 161 <li>未央區</li> 162 <li>鍾樓</li> 163 <li>高薪區</li> 164 </ul></li> 165 <li>咸陽市 166 <ul> 167 <li>xx1區</li> 168 <li>xx2區</li> 169 </ul></li> 170 </ul></li> 171 </ul> 172 </div> 173 174 175 <!--Html--> 176 </div> 177 </body> 178 </html>