jquery.mobiscroll仿Iphone ActionSheet省市区联动

浏览数：1367 / 时间：2015年06月09日

  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修改增加中文支持 [email protected] )</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>