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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- 原生js之四步走搞定Ajax
说到Ajax,不得不先提一下HTTP(HTTP,HyperText Transfer Protocol)协议,中文名:超文本传输协议,是互联网上应用最为广泛的一种网络协议.所有的WWW文件 ...
- u-boot源码汇编段简要分析
Hi,大家好!我是CrazyCatJack,你们可以叫我CCJ或者疯猫.今天我给大家带来的是u-boot的源代码汇编段分析,以后还会给大家讲解后续的C代码,请持续关注哦^_^ 先简单说一下u-boot ...
- ENGLISH抠脚童鞋的福利--GitHub汉化插件
今天在某前端群看到一个插件,激动万分啊!我就把插件使用实现的步骤分享一下! 打开chrome浏览器输入地址:chrome://extensions/ : 跳转到其他页面,点击左上角--扩展程序: 将T ...
- 12.JAVA之GUI编程打开与保存文件
功能:java图形用户界面开发,练习打开保存文件 代码如下: import java.awt.FileDialog; import java.awt.Frame; import java.awt.Me ...
- 用SignalR 2.0开发客服系统[系列1:实现群发通讯]
前言 交流群:195866844 先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,) 前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客 ...
- ASP.NET Core 中文文档 第三章 原理（5）错误处理
原文:Error Handling 作者:Steve Smith 翻译:谢炀(Kiler) 校对:高嵩(jack2gs).何镇汐 当你的ASP.NET应用发生错误的时候, 你可以采用本文所述的各种方法 ...
- 浅玩JavaScript的数据类型判断
前言 平常在需要进行类型判断时,随手拿起typeof就像手枪一样只管突突突...也没有仔细的去了解它的具体特性. 所以这里就利用空闲时间,来做一个较为详细的了解. 首先我们来全面看一遍typeof类型 ...
- 【无私分享：ASP.NET CORE 项目实战（第七章）】文件操作 FileHelper
目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在程序设计中,我们很多情况下,会用到对文件的操作,在 上一个系列 中,我们有很多文件基本操作的示例,在Core中有一些改变,主 ...
- Java终止线程
Thread提供了stop()方法终止线程,但是该方法是强行终止,容易产生一些错误,已经被废弃. 可以使用退出标志来终止线程,在run()函数里面设置while循环,把退出标志作为while的条件,当 ...
- php函数获取真实客户端IP地址
function getIPaddress(){ $IPaddress=''; if (isset($_SERVER)){ if (isset($_SERVER["HTTP_X_FORWAR ...