使用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. oracle数据库自动备份脚本

    ::通过exp命令导出远程机器(192.168.2.1)上指定服务(orcl)指定用户(pmis)及密码(pmis)的数据 ::运行该脚本的机器必须安装oracle @echo off @echo [ ...

  2. iOS开发 落地消息多的处理办法（仅供参考）

    1.首先要知道一点,你的消息储存是用数据库储存的! 看了一下微信和qq的消息处理,一般情况下第三方(亲加,容云,环信都会有本地的数据库)处理过的! 但是我发现,最近一个需求要求开发@"消息已 ...

  3. 自定义Dictionary支持线程安全

    本文转载:http://www.cnblogs.com/kiddo/archive/2008/09/25/1299089.html 我们说一个数据结构是线程安全指的是同一时间只有一个线程可以改写它.这 ...

  4. SpringMVC经典系列-13使用SpringMVC处理Ajax请求---【LinusZhu】

    注意:此文章是个人原创,希望有转载须要的朋友们标明文章出处,假设各位朋友们认为写的还好,就给个赞哈,你的鼓舞是我创作的最大动力,LinusZhu在此表示十分感谢,当然文章中如有纰漏,请联系linusz ...

  5. php连接oracle数据库(linux)（转）

    php连接访问Oracle是用过oci函数,以下是整理的文档 1.安装Apache和php包 yum install -y httpd php* 2.下载Oracle组件 oracle-instant ...

  6. javaweb之Filter详解(转)

    .概念: Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源: 例如Jsp, Servlet, 静态图片文件 ...

  7. Android AlertDialog 设置setSingleChoiceItems不显示列表的原因【setMessage和setSingleChoiceItems不能同时使用】

    今日写了个如题目的简单功能,结果列表不显示 无奈重写了一次代码发现setMessage和setSingleChoiceItems不能同时使用. 正确的如下: private void mobilePh ...

  8. Andriod:如何卸载模拟器上已经安装的应用程序？

    根据学习对HelloWorld进行手术的时候,遇到了一个问题: 就是在修改了布局后,重新链接模拟器时报错: Installing helloworld.apk... Re-installation f ...

  9. 问题分析探讨 --> 大约有700W数据的表,把当天的10W数据select导入新表,整个原来的表就锁死

    Sun shine  16:15:55 帅哥  我有个手机表 大约有700百数据,,每天新增 大约五万,并且新也有update 大约10万  然后 我每晚 把当天的数据select 导入一个新表中的时 ...

  10. eclipse 中修改 M2_REPO的值--转载

    从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...