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
jquery.mobiscroll仿Iphone ActionSheet省市区联动的更多相关文章
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- 仿iphone日历插件(beta)
前言 小伙伴们好,很久不见了.最近工作进入正常期了,所以慢慢的悠闲的时间久没有了,所以不能每天水一篇了. 最近也在听师傅(http://home.cnblogs.com/u/aaronjs/)的教导开 ...
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...
- JS省市区联动
JS省市区使用文档 一:服务器返回JSON格式要求如下网址里面data的格式:(拿KISSY组件data格式来做的) http://gallery.kissyui.com/cityselector/d ...
- JS省市区联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...
- [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
什么是 AngularJs?网上一大堆资料,没能真正说明白. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式, 有双向绑定,指令等特性,这是具有革命性 ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- ASP.NET Web API 配置 JSONP
之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...
- JavaScript instanceof vs typeof
Use instanceof for custom typesvar ClassFirst = function () {};var ClassSecond = function () {};var ...
- Linux A机器免密码SSH登录B机器
一.问题 如上,A机器经常需远程操作B机器,传输文件到B机器,每次输入帐号密码过于繁琐,下文通过ssh公钥能解免密码操作问题. 二.解决 1.方案 SSH认证采用公钥与私钥认证方式. 2.步骤 1) ...
- jQuery-1.9.1源码分析系列（十六）ajax——jsonp原理
json jsonp 类型 "json": 把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...
- Java对象序列化剖析
对象序列化的目的 1)希望将Java对象持久化在文件中 2)将Java对象用于网络传输 实现方式 如果希望一个类的对象可以被序列化/反序列化,那该类必须实现java.io.Serializable接口 ...
- 纯C#的ini格式配置文件读写
虽然C#里都是添加app.config 并且访问也很方便 ,有时候还是不习惯用他.那么我们来做个仿C++下的那种ini配置文件读写吧,其他人写的都是调用非托管kernel32.dll.我也用过 但是感 ...
- [C1] 仿 Excel 实现(C1FlexGrid)
一 分析阶段 根据 Excel 表格区域的划分,如下图,基本上以4行*3列的框架搭建: 第一行为列头区域 ==> C1FlexGrid.ColumnHeaders 第二行为单元格区域 ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- EF6.0 Code First使用mysql的各种错误和解决办法!!
1.修改或者添加connectionStrings <connectionStrings> <add name="MvcDBContext" connection ...
- Open DS
0: 1. Develope OpenDS from here: eu.opends.main --> Simulator.java --> main()