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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- Java jacob调用打印机打印word文档
前面说了Java如何生成复杂的Word文档,今年记录下Java如何调用打印机打印word文档. 起初用的是自带的PrintJob,但是系统提供的打印机制并不成熟完整.网上的代码也是千篇一律,在我的打印 ...
- The Java Enum: A Singleton Pattern [reproduced]
The singleton pattern restricts the instantiation of a class to one object. In Java, to enforce this ...
- 深入理解CSS动画animation
× 目录 [1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API 前面的话 transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的:而animation则是通过关键帧 ...
- EF 在controller 带参数跳转到新的网址
参考文章:http://blog.csdn.net/zhensoft163/article/details/7174661 我用到了这一种方式: 跳转到同一Controller 里面的不同Action ...
- 再谈JavaScript闭包及应用
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
- asp.net MVC4——省市三级联动数据库
数据库设计
- 阅读微信支付demo收获
1,公司现有系统有很多,存放重要接口的日志分布在不同的库,每个系统都有单独的日志采集表,日志采集模块: ???? 这些日志可以统一放到一个地方,通过一个组件提供出去 ...
- 分布式文件系统 - FastDFS 简单了解一下
别问我在哪里 也许我早已不是我自己,别问我在哪里,我一直在这里. 突然不知道说些什么了... 初识 FastDFS 记得那是我刚毕业后进入的第一家公司,一个技术小白进入到当时的项目组后,在开发中上传用 ...
- GJM : Unity3D HIAR -【 快速入门 】 一、简介
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- WebService 概念和工作原理(一)
今天我们一起来学习WebService.它到底是干啥用的? Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集) ...