使用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. LLVM在静态分析上的增强 @ WWDC 2013

    在代码还没有真正跑起来的时候,可以利用Clang对代码进行静态分析. 1. 可以应用快捷键Shift+Command+B对项目代码进行分析: 2. 也可以针对某个文件进行分析(现有版本貌似不能针对特定 ...

  2. JavaScript- 获得TreeView CheckBox里选中项的值

    获得TreeView CheckBox里选中项的值,对JSDOM控制还不是很熟,感觉不太容易.试了很多次终于成功了. 代码如下 <body> <form id="form1 ...

  3. SIGGRAPH

    这两天看了一些文章,今天来说说SIGGRAPH. 对于搞图形学的人来说,SIGGRAPH绝对是如雷贯耳.SIGGRAPH是计算机图形界(也包含图像)最顶级的会议,没有之中的一个,是全世界的图形学者公认 ...

  4. js select onchange事件

    <select id='a' name='a' onchange="javascript:alert('测试');">

  5. nginx 安装手记 分类： Nginx 服务器搭建 2015-07-14 14:28 15人阅读 评论(0) 收藏

    Nginx需要依赖下面3个包 gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) zlib-1.2.8.tar.gz rewrite 模块需要 pcre 库 ( ...

  6. 分布式助手Zookeeper（一）

    分布式助手Zookeeper(一)博客分类: Zookeeper   Zookeeper最早是Hadoop的一个子项目,主要为Hadoop生态系统中一些列组件提供统一的分布式协作服务,在2010年10 ...

  7. careercup-排序和查找 11.4

    11.4 设想你有一个20GB的文件,每一行一个字符串.请说明将如何对这个文件进行排序. 解法: 当面试官给出20GB大小的限制时,实际上在暗示些什么.就此题而言,这表明他们不希望你将数据全部载入内存 ...

  8. 开启、关闭数据库mysql

    1.命令行 net start mysql net start mysql 2.点控制面板→管理→服务 招到mysql 3.找到安装目录下的bin目录

  9. C#泛型比较大小

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. Java基础知识强化之IO流笔记48：IO流练习之 复制单级文件夹案例

    1. 复制单级文件夹     数据源:e:\\demo     目的地:e:\\test 分析: A:封装目录 B:获取该目录下的所有文本的File数组 C:遍历该File数组,得到每一个File对象 ...