左侧菜单

左侧菜单

左侧菜单放置在.current里，在.nav上面即可。

<div class="view">
    <div style="" class="page">
        <div class="current">
            <!-- 左侧菜单 -->
            <div id="leftMenu" class="left_menu">
                <div class="nav">
                    <div class="center" style="transform: translate3d(0px, 0px, 0px);">Tui FrameWork</div>
                </div>
                <div class="content">
                    <div class="left_menu_content">
                        <ul>
                            <li><a href="javascript:;" class="link_item">
                                <div class="item">
                                    <!--<div class="item_left"></div>-->
                                    <div class="item_center">
                                        <div class="item-title">With switch</div>
                                        <!--<div class="item_after"></div>-->
                                    </div>
                                </div>
                            </a></li>
                            <li><a href="javascript:;" class="link_item">
                                <div class="item">
                                    <!--<div class="item_left"></div>-->
                                    <div class="item_center">
                                        <div class="item-title">With switch</div>
                                        <!--<div class="item_after"></div>-->
                                    </div>
                                </div>
                            </a></li>
                            <li><a href="javascript:;" class="link_item">
                                <div class="item">
                                    <!--<div class="item_left"></div>-->
                                    <div class="item_center">
                                        <div class="item-title">With switch</div>
                                        <!--<div class="item_after"></div>-->
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 顶部导航栏 -->
            <div class="nav">
                <div class="left">
                    <a href="javascript:;" class="back link">
                        <i class="icon icon-back"></i><span>back</span>
                    </a>
                </div>
                <div class="center" style="left: -6.5px; transform: translate3d(0px, 0px, 0px);">Tui FrameWork</div>
                <div class="right">
                    <a id="menuBtn" href="javascript:;" class="menu_left"><i class="icon icon-bars"></i></a>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="content">
                <div class="head-pull"></div>
                <div class="page-content">
                    <!-- 具体页面内容，ui组件 -->
                </div>
                <div class="page-content-bottom"></div>
            </div>
            <script>
                t("#menuBtn").sideMenu("leftMenu");  //设置按钮menuBtn所要打开的左侧菜单。
            </script>
        </div>
    </div>
</div>

左侧菜单html代码结构与current结构类似，也包含.nav（头部导航栏）和.content（具体内容）。根据我们的业务不同，可能会出现多组菜单，所以提供了可以滑出指定菜单的功能，

    t("#menuBtn").sideMenu("leftMenu");  //设置按钮menuBtn所要打开的左侧菜单。

绑定id为menuBtn的a标签的滑出菜单id为leftMenu的菜单。

表单

文本

    <input type="text" placeholder="Your text">

多行文本

    <textarea rows="10" cols="10"></textarea>

email

    <input type="email" placeholder="Your email">

密码

    <input type="password" placeholder="Your password">

网址

    <input type="url" placeholder="Your url">

电话

    <input type="tel" placeholder="Your tel">

下拉

    <select>
        <option>Male</option>
        <option>Female</option>
    </select>

开关

    <label class="label-switch">
        <input type="checkbox">
        <div class="checkbox"></div>
    </label>

多选

    <li class="link_item checkbox">
        <div class="item">
            <div class="item_left">
                <input id="checkbox1" type="checkbox" class="ck">
                <label for="checkbox1" class="lb-ck"></label>
            </div>
            <div class="item_center">
                <div class="item-input">
                    多选样式1
                </div>
                <!--<div class="item_after"></div>-->
            </div>
        </div>
    </li>
    <li class="link_item checkbox">
        <div class="item">
            <div class="item_left">
                <input id="checkbox2" type="checkbox" class="ck">
                <label for="checkbox2" class="lb-ck-badge"></label>
            </div>
            <div class="item_center">
                <div class="item-input">
                    多选样式2
                </div>
                <!--<div class="item_after"></div>-->
            </div>
        </div>
    </li>

单选

    <li class="link_item radio">
        <div class="item">
            <div class="item_center">
                <div class="item-input col-90">
                    单选样式1
                </div>
                <div class="item_btn middle col-10">
                    <input type="radio" value="1" id="radio1" name="radio" class="rd" checked="checked">
                    <label for="radio1" class="lb-rd"></label>
                </div>
            </div>
        </div>
    </li>
    <li class="link_item radio">
        <div class="item">
            <div class="item_center">
                <div class="item-input col-90">
                    单选样式2
                </div>
                <div class="item_btn middle col-10">
                    <input type="radio" value="2" id="radio2" name="radio" class="rd">
                    <label for="radio2" class="lb-rd"></label>
                </div>
            </div>
        </div>
    </li>

日期

    <input type="date" placeholder="2016-04-11">

时间

    <input type="time" placeholder="11:11">

日期时间

    <input type="datetime-local" placeholder="2016-04-11">

表单验证

表单验证实例

	t("#form_validate").validate({
		"rules": {
			"username": {require: {message: "请输入姓名"}, length: {max: 10, min: 3, message: "长度必须小于10大于1；"}},
			"gender": {require: {message: "请输选择性别"}},
			"remark": {require: {message: "请输入备注"}},
			"phone": {phone: {message: "手机号不合法"}},
			"cd": {cd: {message: "身份证不合法"}},
			"number": {type: {type: "number", message: "不是整数"}},
			"float": {type: {type: "float", message: "不是小数"}},
		},
		"onerror": function(error){
			alert(error.join(";"));
		}
	});

调用form方法.validate(params)来实现对表单的验证。 params参数说明，params总共由3个对象组成：rules，onerror，onsuccess。rules为验证规则、其他两个是成功和失败的事件。rules中的每一个对象都是form表单元素的name属性值。 rules中验证说明 ======

参数名称 类型 默认 描述
require json 不能为空。
length json 长度，其中包括`max`最大长度和`min`最小长度。
phone json 验证手机号。
cd json 验证身份证号
type json 验证类型，其中type类型包括：`number`整数型,`+number`正整数型,`-number`负整数型,`float`浮点型,`+float`正浮点型,`-float`负浮点型,`decimal`金钱类型
regex Regexp 正则表达式验证，regex为正则表达式例如：/^-[0-9]*[1-9][0-9]*$/
message string 为错误提示信息！`通用`

事件

事件名称 事件参数 事件描述
onerror message：错误信息数组 当验证失败时触发。
onsuccess 当验证成功时触发。

©2018 . Powered by Jekyll, theme by Scott Emmons under Creative Commons Attribution