使用sui實現的選擇控制項【性別、日期、省市級聯】

-Advertisement-

使用sui mobile做的選擇控制項，其中sm.js有修改，增加自定義api，詳情請看index.html的註釋，不多說了，上代碼引用文件及demo：http://pan.baidu.com/s/1i5tuuzz ...

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

在java中HttpServletResponse響應中文出現亂碼。

以字元串的形式輸出。 1、response.getWriter().write("您好中國hello"); 如果這樣輸出的話。則瀏覽器結果為： 2、加上代碼 response.setCharacterEncoding("UTF-8"); response.getWriter().write("您好中 ...
C++軟體添加dump調試列印日誌

#include <DbgHelp.h> #pragma comment(lib, "dbghelp.lib") LONG WINAPI TopLevelExceptionFilter(struct _EXCEPTION_POINTERS *pExceptionInfo) { //cout << " ...
雲時代運維工程師應該有更高的技能要求

近日，Yelp的SRE工程師Dmitriy Samovskiy發表了一篇標題為《新時代的運維》的文章，文章中他簡要介紹了在雲計算大環境下，運維工作重心和角色的變化。其實在6年前，Dmitriy就寫過一篇關於 DevOps趨勢的文章，在那篇文章中，他認為系統管理人員需要具有簡單腳本之外的開發能 ...
[Effective JavaScript 筆記]第48條：避免在枚舉期間修改對象

for...in迴圈在運行時出錯了錯誤，並沒有要求枚舉對象的修改與當前保持一致。事實上，ES對併發修改在不同js環境下的行為的規範留有餘地。標準規定：如果被枚舉的對象在枚舉期間添加了新的屬性，那麼在枚舉期間並不能保證新添加的屬性能被訪問。上面規範的實際後果：如果我們修改了被枚舉的對象，則不能保證... ...
jQuery簡單入門(三)

3.事件和動畫 A. 事件 Aa. DOM載入 1.為什麼使用jQuery載入DOM方法？以javascript的window.onload（）方法載入DOM的先決條件是：必須等待被請求頁面的資源全部載入完成，才會為DOM元素添加事件行為;而jquery只要DOM元素載入完成，就立刻綁定事件 2. ...
關於在Servelet中如何獲取當前時間的操作

//獲取到當前時間 Date date=new Date(); DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String time=format.format(date); ...
js中的in-for迴圈

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </head> ...
checkbox批量選中，獲取選中的項的值

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </head> ...