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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- Core Java 总结（字符和字符串类问题）
所有代码均在本地编译运行测试,环境为 Windows7 32位机器 + eclipse Mars.2 Release (4.5.2) 2016-10-17 整理 字符,字符串类问题 正则表达式问题 J ...
- Android 中关于Fragment嵌套Fragment的问题
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5802146.html 问题描述: 在项目中Activity A中嵌套Fragment B,Fragment ...
- WebGIS中快速整合管理多源矢量服务以及服务权限控制的一种设计思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在真实项目中,往往GIS服务数据源被其他多个信息中心或者第三方 ...
- 你所不知道的linq
问题的提出 昨天在qq群问了一个linq的问题被人鄙视了.题目大概类似于 var reuslt=from s in new List<string>() select s; 问from.. ...
- Razor语法中绑定一个值给checkbox
在ASP.NET MVC开发中,需要绑定一个值给checkbox标签,如下面写法,它们运行时是没有问题,照样能跑. 看看上面的语法,在绑定时,它却出现绿浪线.提不绑定的值is not a valid ...
- 解决mysql too many connections的问题
由于公司服务器上的创建的项目太多,随之创建的数据库不断地增加,在用navicat链接某一个项目的数据库时会出现too many connections ,从而导致项目连接数据库异常,致使启动失败. 为 ...
- 保持Qt GUI响应的几种方法
最开始使用Qt时就遇到过QT Gui失去响应的问题,我是用多线程的方式解决的,然而通常来说,多线程是会降低程序的运行速度. 之后,在使用QSqlQuery::execBatch()函数时,Qt Gui ...
- MySQL动态字符串处理DYNAMIC_STRING
MySQL中,常常会看到一些关于动态字符串的处理,列如:DYNAMIC_STRING. 为了记录动态字符串的实际长度,缓冲区的最大长度,以及每次字符串需要调整时,及时分配新的内存,以及调整长度.MyS ...
- sea.js详解
Seajs相关知识 seajs.Use 引入入口文件 第一个参数表示模块id 字符串表示一个模块id 数组,数组每个成员表示一个模块 第二个参数表示回调函数(可有可无的) 作用就是当模块加载完成执行回 ...
- 一步步实现ABAP后台导入EXCEL到数据库【3】
在一步步实现ABAP后台导入EXCEL到数据库[2]里,我们已经实现计划后台作业将数据导入数据库的功能.但是,这只是针对一个简单的自定义结构的导入程序.在实践应用中,面对不同的表.不同的导入文件,我们 ...