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>
原文http://www.cnblogs.com/iaoc/p/4113683.html
