首页 > 代码库 > jquery.mobiscroll仿Iphone ActionSheet省市区联动
jquery.mobiscroll仿Iphone ActionSheet省市区联动
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>
jquery.mobiscroll仿Iphone ActionSheet省市区联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。