使用sui实现的选择控件【性别、日期、省市级联】

时间：2022-08-01 18:52:39

使用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

相关文章