使用sui mobile做的选择控件，其中sm.js有修改，增加自定义api，详情请看index.html的注释，不多说了，上代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <meta name="apple-mobile-web-app-capable" content="no">

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <title>sui mobile</title>

    <link rel="stylesheet" href="sui/sm.css" />

</head>

<body>

    <div class="page">

        <input type="text" class="J-choose-sex" value="男" placeholder="请选择性别" />

        <input type="text" class="J-choose-birth" value="" placeholder="请选择出生日期" />

        <input type="text" class="J-choose-address" value="" placeholder="请选择所在地" />

    </div>

    <script type="text/javascript" src="sui/zepto.js"></script>

    <script type="text/javascript" src="sui/sm.js"></script>

    <script type="text/javascript" src="sui/sm-city-picker.js"></script>

    <script type="text/javascript">

        /**

         * 因为Zepto和jQuery框架的$冲突，又不想清掉jQuery的重置，所以改用Zepto调用

         * 其中sm.js有修改

         * 其中的dataPicker在官方文件中不存在，是自己加的

         */

        Zepto(function () {

            'use strict';

            var _$ = Zepto;

            _$(".J-choose-address").cityPicker({

                value: ['四川', '内江', '东兴区']

            });

            _$(".J-choose-sex").picker({

                toolbarTemplate: '<header class="bar bar-nav">\

              <button class="button button-link pull-right close-picker">确定</button>\

              <h1 class="title">请选择性别</h1>\

              </header>',

                cols: [

                    {

                        textAlign: 'center',

                        values: ['男', '女']

                    }

                ]

            });

            _$(".J-choose-birth").datePicker({

                value: ["2000", "01", "01"]

            });

            Zepto.init();

        });

    </script>

</body>

</html>

Code

引用文件及demo：http://pan.baidu.com/s/1i5tuuzz

使用sui实现的选择控件【性别、日期、省市级联】的更多相关文章

  1. 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

    本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...

  2. Windows Phone 8.1 新特性 - 控件之列表选择控件

    本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件. 在Windows Phone 8 时代,大家都会使用 LongListSelector 来实现列表选择控件,对数据进行分组显 ...

  3. SNF开发平台WinForm之三-开发-单表选择控件创建-SNF快速开发平台3.3-Spring.Net.Framework

    3.1运行效果: 3.2开发实现: 3.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...

  4. js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  5. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  6. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  7. android中选择控件与选择界面自然过度效果的实现--一种新的交互设计

    转载请标明出处: http://blog.csdn.net/jianghejie123/article/details/40648931 在安卓中经常遇到须要选择一个东西的功能,比方选择日期.选择文件 ...

  8. Swift - 日期选择控件（UIDatePicker）的用法

    1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...

  9. Swift - 分段选择控件（UISegmentedControl）的用法

    1,选择控件的创建,并监听控件选择值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 class ViewController: UIVie ...

随机推荐

  1. php连mssql中文乱码问题

    我在将一个aspx+mssql的系统做成php+mssql的系统时,感觉架构大不一样,aspx多是aspx页面+aspx.cs后台协同开发,多用可视化空间开发,而php我则选用了smarty模板,感觉 ...

  2. 实现GetHashCode时要遵循的规则

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实现GetHashCode时要遵循的规则.

  3. cluster模块实现多进程-让我的代理服务速度飞起来了

    cluster模块实现多进程 现在的cluster已经可以说完全做到的负载均衡,在做代理服务和http服务器的时候能够讲服务器性能发挥到最大.来看一下具体的实现吧 var cluster = requ ...

  4. mysql查询语句举例

    1. 基础数据表 学生成绩表(stuscore): 姓名:name 课程:subject 分数:score 学号:stuid 张三 数学 89 1 张三 语文 80 1 张三 英语 70 1 李四 数 ...

  5. JSF学习四 标签

    commandButton:提交.重置或下压button button:用于公布GET请求的按钮

  6. iOS开发之地图代理不起作用(提示vImage decode failed, falling back to CG path.)

    项目中用到了地图相关的东西,就把曾经的demo搬了出来,结果发现直接执行之前的demo没有问题,在xcode5下新建项目再把代码粘贴过来就会提示 May 5 11:36:21 infomedia-iP ...

  7. ListBox获取行字符串

    ListBox获取行字符串 关键点 获取ListBox第1行的字符串 获取ListBox第2行的字符串 获取ListBox第n行的字符串 CListBox::GetText int GetText( ...

  8. 【剑指Offer学习】【面试题19 ：二叉树的镜像】

    题目:请完毕一个函数,输入一个二叉树,该函数输出它的镜像. 二叉树结点的定义: /** * 二叉树的树结点 */ public static class BinaryTreeNode { int va ...

  9. SilkTest天龙八部系列1-初始化和构造函数

    SilkTest没有提供专门的构造函数机制,但是在类对象生成的过程中,会先初始化在类中申明的变量.我们可以在初始化该变量的时, 调用某些函数完成对象初始化工作,看上去好像是调用了构造函数一样.不过要记 ...

  10. Could not find class &#39;****&#39;, referenced from method #####

    找不到类,多半也是和第三方的jar包有关. 将找不到的类.在下图中的地方勾选出来.假设jar太多.有的类有冲突的话,须要明白其先后顺序. 请外一篇和第三方jar有关的异常的文章. Conversion ...