使用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中的$_SERVER从哪来

    前几个月学了个tcpdump抓包命令,遇到任何问题总想试试,真是程序员的终级武器呀,它像显微镜一下,把任何的丑陋的bug都显示在你的面前. 为什么有题目中所说的疑问呢?因为我发现在不同的环境下面,我获 ...

  2. 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错

    做足准备工作之后进行安装oracle,运行runInstall的时候别的时候输出如下错误 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错.请确保此目录是可写 ...

  3. Python实现二叉树的前序遍历、中序遍历

    计算根节点到叶子节点的所组成的数字(1247, 125, 1367)以及叶子节点到根节点组成的数字(7421, 521, 8631),其二叉树树型结构如下 计算从根节点到叶子节点组成的数字,本质上来说 ...

  4. 【JAVA - SSM】之MyBatis查询缓存

    为了减轻数据压力,提高数据库的性能,我们往往会需要使用缓存.MyBatis为我们提供了一级缓存和二级缓存. (1)一级缓存是SqlSession级别的缓存,在操作数据库的时候需要创建一个SqlSess ...

  5. 3D案例，导航，导航升级版

    /*****************************百度钱包旋转变内容******************************/ <!DOCTYPE html> <htm ...

  6. hdu4486 Pen Counts(水题)

    Pen Counts Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  7. dubbo资料

    http://blog.csdn.net/morning99/article/details/40426781http://blog.csdn.net/ruishenh/article/details ...

  8. TCP并发server，每个客户一个子进程

    今天笔者带来的是server型号第一,这是最经常使用的模型的最基本的一个–TCP并发server,每个客户一个子进程. 首先简单介绍:TCP并发server,每个客户一个子进程,并发server调用f ...

  9. 打造强大的BaseModel（2）：让Model实现自动映射，将字典转化成Model

    打造强大的BaseModel(1):让Model自我描述 这篇文章将讲述Model一项更高级也最常用的功能,让Model实现自动映射–将字典转化成Model(所有代码全由Swift实现) 将JSON转 ...

  10. sbit命令行中运行scala脚本

    一般sbit编译器采成了scala运行工具.启动sbit命令行,输入console,命令行自动切换到scala编辑器面. scala>:paste 然后手动将XXX.scala中的代码拷贝到界面 ...