<commit_before><div class="page-container">
    <b>demo</b>
    <b>搜索</b>
    <div class="searchBar">
        <form class="form-search" method="post" action="">
            <input id="searchKeyword" name="searchKeyword" placeholder="请输入搜索关键词" class="input-text searchTxt">
            <input id="searchBtn" name="searchBtn" type="submit" value="搜索" class="btn btn-default searchBtn" onclick="b_onclick()">
        </form>
    </div>
    <b>checkBox</b>
    <script>
          /* 参考： https://github.com/fronteed/iCheck*/
        /*$('.skin-minimal input').iCheck('check');


        $('input').on('ifChecked', function(event){
            console.info(event);
            alert(event.type + ' callback');
        });*/
        require(['icheckUtils'],function(IcheckUtils){
            IcheckUtils.setICheck($("#radio-1"),'check');
        })
    </script>

    <div class="codeView docs-example">
        <div class="skin-minimal">
            <div class="check-box">
                <input type="checkbox" id="checkbox-1">
                <label for="checkbox-1">复选框</label>
            </div>
            <div class="check-box">
                <input type="checkbox" id="checkbox-2" checked>
                <label for="checkbox-2">复选框 checked状态</label>
            </div>
            <div class="check-box">
                <input type="checkbox" id="checkbox-disabled" disabled>
                <label for="checkbox-disabled">Disabled</label>
            </div>
            <div class="check-box">
                <input type="checkbox" id="checkbox-disabled-checked" checked disabled>
                <label for="checkbox-disabled-checked">Disabled &amp; checked</label>
            </div>
        </div>
        <div class="mt-20 skin-minimal">
            <div class="radio-box">
                <input type="radio" id="radio-1" name="demo-radio1">
                <label for="radio-1">单选按钮</label>
            </div>
            <div class="radio-box">
                <input type="radio" id="radio-2" name="demo-radio1" checked>
                <label for="radio-2">单选按钮 checked状态</label>
            </div>
            <div class="radio-box">
                <input type="radio" id="radio-disabled" disabled>
                <label for="radio-disabled">Disabled</label>
            </div>
            <div class="radio-box">
                <input type="radio" id="radio-disabled-checked" checked disabled>
                <label for="radio-disabled-checked">Disabled &amp; checked</label>
            </div>
        </div>
    </div>

    <b>弹出窗</b>
    <input class="btn radius btn-secondary" onclick="layer.alert('呵呵')" type="button" value="普通弹窗">
    <input class="btn radius btn-secondary" onclick="test2()" type="button" value="询问框">
    <input class="btn radius btn-secondary" onclick="test3()" type="button" value="墨绿深蓝风">
    <input class="btn radius btn-secondary" onclick="test4()" type="button" value="捕获页">
    <input class="btn radius btn-secondary" onclick="test5()" type="button" value="页面层">
    更多弹出窗参考：http://layer.layui.com/
    <script>
        //弹出即全屏
        var index = layer.open({
            type: 2,
            content: 'http://layim.layui.com',
            area: ['320px', '195px'],
            maxmin: true
        });
        //全屏设置
//        layer.full(index);
        function test2(){
            layer.confirm('您是如何看待前端开发？', {
                btn: ['重要','奇葩'] //按钮
            }, function(){
                layer.msg('的确很重要', {icon: 1});
            }, function(){
                layer.msg('也可以这样', {
                    time: 2000, //2s后自动关闭
                    btn: ['明白了', '知道了']
                });
            });
        }
        function test3(){
            layer.alert('墨绿风格，点击确认看深蓝', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0
            }, function(){
                layer.alert('偶吧深蓝style', {
                    skin: 'layui-layer-lan'
                    ,closeBtn: 0
                    ,anim: 4 //动画类型
                });
            });
        }
        function test4(){
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                content: $('#mySwitch'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function(){
                    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 2000, icon:6});
                }
            });
        }
        function test5(){
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '240px'], //宽高
                content: 'html内容'
            });
        }
    </script>
    <b>wangeditor</b>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
    </style>
    <div id="editor1" class="toolbar"></div>
    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
    <div id="editor2" class="text">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>
    <div id="editor">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>
    <div id="mySwitch" class="switch">
        <input type="checkbox" checked />
    </div>
    <script>
        require(['editorUtils','bootstrapswitch','css!bootstrapswitchstyle'],function(EditorUitls){

            var editor = EditorUitls.create("#editor");
            EditorUitls.create("#editor1","#editor2");
            $('#mySwitch').on('switch-change', function (e, data) {
                var $el = $(data.el)
                    , value = data.value;
                EditorUitls.switchOpenOrClose(editor,value);
                alert(EditorUitls.getHtml(editor,true));
            });
        })
    </script>
    <b>图片样式css</b>
    <style>
        .travel-pic{ width:1020px}
        .travel-pic li{display: inline;float: left;margin-right: 20px;overflow: hidden;width: 235px}
        .travel-pic img{border:0; width:235px; height:157px;vertical-align:top;display:block;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease}
        .travel-pic a:hover img{transform:scale(1.04,1.04);-ms-transform:scale(1.04,1.04); -webkit-transform:scale(1.04,1.04)}
    </style>
    <div style="width:1000px; margin:0 auto; overflow:hidden">
        <ul class="travel-pic cl">
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/001.jpg"></a></li>
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/003.jpg"></a></li>
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/003.jpg"></a></li>
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/004.jpg"></a></li>
        </ul>
    </div>

    <b>按钮</b>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入" data-tra="hui-fadein"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从上" data-tra="hui-fadeinT"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从右" data-tra="hui-fadeinR"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从下" data-tra="hui-fadeinB"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从左" data-tra="hui-fadeinL"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出" data-tra="hui-fadeout"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向上" data-tra="hui-fadeoutT"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向右" data-tra="hui-fadeoutR"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向下" data-tra="hui-fadeoutB"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向左" data-tra="hui-fadeoutL"/>

    <div class="text-c mt-30"><input id="text" class="" type="button" value="测试效果"></div>

    <b>代码高亮显示</b>
    <script>
        require(['jquery','css!prettifystyle','prettify'],function ($,prttifstyle,prettify) {
            prettyPrint();
        })
    </script>
    <b>HTML CSS代码</b>
    <pre class="prettyprint linenums">
        pre{display:block;font-family:Monaco,Menlo,Consolas,&quot;Courier New&quot;,monospace；padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;color:#333}
        .prettyprint{margin-bottom:20px；padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
        .prettyprint .com { color: #998;font-style:italic }/*注释*/
        .prettyprint .tag{color:#007}/*标签*/
        .prettyprint .lit { color: #195f91}
        .prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #93a1a1}/*等于*/
        .prettyprint .fun { color: #dc322f}
        .prettyprint .str,.prettyprint .atv { color: #D14}/*值*/
        .prettyprint .kwd,.prettyprint .prettyprint .tag { color: #1e347b}
        .prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: teal}/*文档声明，属性*/
        .prettyprint .pln { color: #48484c}
        .prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
        .pre-scrollable{max-height:340px;overflow-y:scroll}
        pre ol.linenums{list-style:decimal outside none;margin:0 0 0 33px}
        pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}
    </pre>
    <b>树形结构展示</b>
    <div class="zTreeDemoBackground right">
        多棵树之间 的 数据交互
        <ul id="treeDemo2" class="ztree"></ul>
    </div>

    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <input class="btn btn-primary size-XL radius" type="button" value="特大按钮" onclick="bigbutton()"/>
    <script>
        function bigbutton(){
            require(['ztreeUtils'],function(ztreeUtils){
                console.info(ztreeUtils.getAllNodes('treeDemo2'));
            })
        }
        var zNodes =[
            { id:0,name:"zTree 默认样式",pId:-1,chkDisabled:true},
            { id:1, pId:0, name:"展开、折叠 自定义图标不同",checked:true, open:true, iconOpen:"http://www.treejs.cn/v3/img/menuIcon.png", iconClose:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:11, pId:1, name:"叶子节点1"},
            { id:12, pId:1, name:"叶子节点2",checked:true, icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:13, pId:1, name:"叶子节点3", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:false, icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:21, pId:2, name:"叶子节点1", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:22, pId:2, name:"叶子节点2", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:23, pId:2, name:"叶子节点3", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:3, pId:0, name:"不使用自定义图标", open:true },
            { id:31, pId:3, name:"叶子节点1"},
            { id:32, pId:3, name:"叶子节点2"},
            { id:33, pId:3, name:"叶子节点3"},
            {id:44, name:"粗体字", font:{'font-weight':'bold'},isParent:true },
                {id:55, name:"斜体字", font:{'font-style':'italic'}},
                {id:66, name:"有背景的字", font:{'background-color':'black', 'color':'white'}},
                { name:"红色字",fk:'fuck', font:{'color':'red'}},
                { name:"蓝色字", font:{'color':'blue'}},
                { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},
                { name:"zTree 默认样式",pId:-1}
            ];
        require(['ztreeUtils'],function(ztreeUtils){
        ztreeUtils.createTreeAMD($("#treeDemo"),zNodes);
            ztreeUtils.createTreeAMD($("#treeDemo2"),null);


            var child = ztreeUtils.getCheckeds('treeDemo',true);
        console.info(child);
//            ztreeUtils.createTreeCMD($("#treeDemo2"),
//                'http://localhost:63342',
//                {'name':'234asdf'},null);
        })
//        require(['jquery','jqueryztreecore','css!jqueryztreestyle'],function($,jqztree,jqztreecss){
//            var setting = {
//                view: {
//                    fontCss: getFont,
//                    nameIsHTML: true
//                }
//            };
//
//            var zNodes =[
//                {id:1, name:"粗体字", font:{'font-weight':'bold'} },
//                {id:2, name:"斜体字", font:{'font-style':'italic'}},
//                {id:3, name:"有背景的字", font:{'background-color':'black', 'color':'white'}},
//                { name:"红色字", font:{'color':'red'}},
//                { name:"蓝色字", font:{'color':'blue'}},
//                { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},
//                { name:"zTree 默认样式"}
//            ];
//
//            function getFont(treeId, node) {
////                alert(node.id);
//                return node.font ? node.font : {};
//            }
//
//            $(document).ready(function(){
//                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//            });
//
//        })
    </script>
    <b>表格展示</b>
    <table class="table table-border table-bordered table-bg radius">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
    <div id="page3"></div>

    <b>测试国际化</b>
    <i18n key="name">呵呵</i18n><i18n key="name">呵呵</i18n><i18n key="name">呵呵</i18n>

    <b>表单</b>
    <form action="" method="post" class="form form-horizontal" id="form-member-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span><i18n key="name">呵呵</i18n>用户名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="username" name="username">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" id="sex-1" checked>
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" name="sex">
                    <label for="sex-2">女</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-3" name="sex">
                    <label for="sex-3">保密</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="mobile" name="mobile">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="@" name="email" id="email">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">附件：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="btn-upload form-group">
				<input class="input-text upload-url" type="text" name="uploadfile" id="uploadfile" readonly nullmsg="请添加附件！" style="width:200px">
				<a href="javascript:void(0);" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
				<input type="file" multiple name="file-2" class="input-file">
				</span> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">所在城市：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="city">
					<option value="" selected>请选择城市</option>
					<option value="1">北京</option>
					<option value="2">上海</option>
					<option value="3">广州</option>
				</select>
				</span> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="beizhu2" id="beizhu2" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-500" nullmsg="备注不能为空！" onkeyup="$(this).Huitextarealength(this)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">10</em>/500</p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>

    <b>弹窗</b>
    <a href="javascript:$.Huimodalalert('哈哈',0);"><div class="maskWraper" style="width:300px; height:250px; border:solid 1px #ddd;"> <img src="http://images.h-ui.net/www/2.png" width="300" height="250">
        <div class="maskBar text-c">遮罩条</div>
    </div></a>

    <b>流动</b>
    <div id="marquee" class="marquee">
        <div id="holder">
            <ul>
                <li>第一条数据</li>
                <li>第二条数据</li>
                <li>第三条数据</li>
            </ul>
        </div>
    </div>
    <i class="Hui-iconfont Hui-iconfont-lunzi"></i>
    <i class="Hui-iconfont Hui-iconfont-del2"></i>
    <i class="Hui-iconfont Hui-iconfont-user2"></i>
    <div class="four steps">
        <span class="step">第一步</span>
        <span class="active step">第二步</span>
        <span class="disabled step">第三步</span>
        <span class="disabled step">第四步</span>
    </div>
    <div id="tab_demo" class="HuiTab">
        <div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
        <div class="tabCon">内容一</div>
        <div class="tabCon">内容二</div>
        <div class="tabCon">内容三</div>
    </div>
<button class="btn radius btn-primary size-L" onClick="modaldemo()">弹出对话框</button>
    <button class="btn radius btn-primary size-L" onClick="modaldemo2()">弹出对话框2</button>
<button class="btn radius btn-primary size-L ml-20" onclick="modalalertdemo()">消息框，2秒钟自动消失</button>
   <!-- <div class="codeView docs-example">-->
        <p>成功状态</p>
        <div class="Huialert Huialert-success">成功状态提示</div>
        <p>危险状态</p>
        <div class="Huialert Huialert-danger">危险状态提示</div>
        <p>错误状态</p>
        <div class="Huialert Huialert-error">错误状态提示</div>
        <p>信息状态</p>
        <div class="Huialert Huialert-info">信息状态提示</div>
  <!--  </div>-->
    <div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">对话框标题</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void(0);">×</a>
                </div>
                <div class="modal-body">
                    <p>对话框内容…</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="alert('')">确定</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-demo2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">对话框标题</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void(0);">×</a>
                </div>
                <div class="modal-body">
                    <p>对话框内容…</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="codeView docs-example">
        <div class="cl">
            <div class="l" style="width:48%">
            <p><strong>点击效果</strong></p>
            <ul id="Huifold1" class="Huifold">
                <li class="item">
                    <h4>标题<b>+</b></h4>
                    <div class="info"> 内容<br>很多内容 </div>
                </li>
                <li class="item">
                    <h4>标题<b>+</b></h4>
                    <div class="info"><img src="http://images.h-ui.net/www/2.png" width="300" height="150"><br>
                        可以是图片</div>
                </li>
                <li class="item">
                    <h4>标题<b>+</b></h4>
                    <div class="info"><img src="http://images.h-ui.net/www/1.png" width="300" height="150"></div>
                </li>
            </ul>
        </div>
            <div class="r" style="width:48%">
                <p><strong>鼠标经过效果</strong></p>
                <ul id="Huifold4" class="Huifold">
                    <li class="item">
                        <h4>标题<b>+</b></h4>
                        <div class="info"> 内容<br>很多内容 </div>
                    </li>
                    <li class="item">
                        <h4>标题<b>+</b></h4>
                        <div class="info"><img src="http://images.h-ui.net/www/2.png" width="300" height="150"><br>
                            可以是图片</div>
                    </li>
                    <li class="item">
                        <h4>标题<b>+</b></h4>
                        <div class="info"><img src="http://images.h-ui.net/www/1.png" width="300" height="150"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--分页控件使用-->
    <div id="biuuu_city_list"></div>
    <div id="biuuu_city"></div>
    <script>
        //测试数据
        var data_ = [{name:'test',sex:'男',id:2},{name:'test2',sex:null,id:22}];

        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];
        /**
         * 分页控件laypage使用
         * 参考：http://www.layui.com/laypage/?page=5
         *
         * demo
         * //以下将以jquery.ajax为例，演示一个异步分页
         *            function demo(curr){
         *     $.getJSON('test/demo1.json', {
         *       page: curr || 1 //向服务端传的参数，此处只是演示
         *     }, function(res){
         *       //此处仅仅是为了演示变化的内容
         *       var demoContent = (new Date().getTime()/Math.random()/1000)|0;
         *       document.getElementById('view1').innerHTML = res.content + demoContent;
         *       //显示分页
         *       laypage({
         *         cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
         *         pages: res.pages, //通过后台拿到的总页数
         *         curr: curr || 1, //当前页
         *         jump: function(obj, first){ //触发分页后的回调
         *           if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
         *             demo(obj.curr);
         *           }
         *         }
         *       });
         *     });
         *   };
         *            //运行
         *            demo();
         *
         */
        require(['layPageUtils'],function(LayPageUtils){
            LayPageUtils.AjaxUtils.ajaxParam.root.msg = {adminInfo: {}}
            LayPageUtils.dataGride({
                data_:data_,
//                url : LayPageUtils.AjaxUtils.URLS.findUsers,
                params :LayPageUtils.AjaxUtils.ajaxParam,
                type:'json',
                method : 'post',
                tableId:'biuuu_city_list',
                cont: document.getElementById('biuuu_city'),
                skip: true,
                skin: '#00AA91',
                groups: 2 ,
                first:"首页",
                last:"尾页",
                prev:"<",
                next:">",
                data:[
                    {
                        name:'ID',
                        value:'id',
                        align:'text-c',
                        width:'20%',
                        iShow:true
                    },{
                        name:'姓名',
                        value:'name',
                        align:'text-c',
                        width:'20%',
                        iShow:true,
                        formartVal:function(value,data){
                            return value+data.sex;
                        }
                    },{
                        name:'性别',
                        value:'sex',
                        align:'text-c',
                        width:'20%',
                        iShow:true,
                        formartVal:function(value,data){
                            return value;
                        }
                    },{
                        name:'操作',
                        value:'option',
                        align:'text-l',
                        iShow:true,
                        formartVal:function(data){
                            return '<input class="btn btn-success radius" type="button" onclick="alert('+data.name+')" value="成功">';
                        }
                    }
                ]
            });
        })

//        require([
//            'jquery','laypager','css!laypagestyle'],function($,laypager,laypagestyle){
//
//
//            var nums = 5; //每页出现的数量
//            var pages = Math.ceil(data.length/nums); //得到总页数
//
//            var thisDate = function(curr){
//                //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
//                var str = '', last = curr*nums - 1;
//                last = last >= data.length ? (data.length-1) : last;
//                str +='<table class="table table-border table-bordered table-bg radius"><thead><tr><th>表头</th></tr></thead><tbody>';
//                for(var i = (curr*nums - nums); i <= last; i++){
//                    str += '<tr><td>'+ data[i] +'</td></tr>';
//                }
//                str+='</tbody></table>';
//                return str;
//            };
//            console.info("===========*==========")
//            console.info(laypager);
//            laypager({
//                cont: document.getElementById('biuuu_city'), //容器。值支持id名、原生dom对象，jquery对象,
//                pages: pages, //总页数
//                skip: true, //是否开启跳页
//                skin: '#00AA91', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
//                groups: 7 ,//连续显示分页数
//                jump: function(obj){
//                    document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
//                }
//            });
//        })

    </script>
<script>
    require([
        'jquery',
        'url',
        'stringUtils',
        'constant',
        'ajax',
        'tmpl'],function($,url,StringUtils,Constant,AJAX,header,menu,tmpl){
//        alert(AJAX.Constant.Characters.C_BACK_SLASH);
    })

    function modaldemo(){
        $("#modal-demo").modal("show")}
    function modaldemo2(){
        $("#modal-demo2").modal("show")}
    function modalalertdemo(){
        $.Huimodalalert('我是消息框，2秒后我自动滚蛋！',2000)}
    require(['layer','hui','hui_admin_page'],function(layer,hui,huiadminpage){
        $.Huimarquee(22,30,3000);
        /**
         * 折叠
         * 三种类型：分别对应的参数：
         *     1	只打开一个，可以全部关闭
         *     2	必须有一个打开
         *     3	可打开多个
         * */
        $("#Huifold1").Huifold({
            titCell:'.item h4',
            mainCell:'.item .info',
            type:3,
            trigger:'click',
            className:"selected",
            speed:"first",
        });
        $("#Huifold4").Huifold({
            titCell:'.item h4',
            mainCell:'.item .info',
            type:2,
            trigger:'click',
            className:"selected",
            speed:"first",
        });
        $("#tab_demo").Huitab(".tabBar span",".tabCon","current","click","1");
        $('.maskWraper').Huihover();
    })

    /**
     * 使用icheck时需要添加以下代码
     */
    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });

    /**
     * 表单验证对应错误信息显示在jquery.validate.js中的showLabel方法中
     */
    $("#form-member-add").validate({
        rules:{
            username:{
                required:true,
//                isIntEqZero:true,
                rangelength:[5,10]
            },
            sex:{
                required:true,
            },
            mobile:{
                required:true,
                isMobile:true,
            },
            email:{
                required:true,
                email:true,
            },
            uploadfile:{
                required:true,
            },<commit_msg>jquery 表单验证提示信息窗优化<commit_after><div class="page-container">
    <b>demo</b>
    <b>搜索</b>
    <div class="searchBar">
        <form class="form-search" method="post" action="">
            <input id="searchKeyword" name="searchKeyword" placeholder="请输入搜索关键词" class="input-text searchTxt">
            <input id="searchBtn" name="searchBtn" type="submit" value="搜索" class="btn btn-default searchBtn" onclick="b_onclick()">
        </form>
    </div>
    <b>checkBox</b>
    <script>
          /* 参考： https://github.com/fronteed/iCheck*/
        /*$('.skin-minimal input').iCheck('check');


        $('input').on('ifChecked', function(event){
            console.info(event);
            alert(event.type + ' callback');
        });*/
        require(['icheckUtils'],function(IcheckUtils){
            IcheckUtils.setICheck($("#radio-1"),'check');
        })
    </script>

    <div class="codeView docs-example">
        <div class="skin-minimal">
            <div class="check-box">
                <input type="checkbox" id="checkbox-1">
                <label for="checkbox-1">复选框</label>
            </div>
            <div class="check-box">
                <input type="checkbox" id="checkbox-2" checked>
                <label for="checkbox-2">复选框 checked状态</label>
            </div>
            <div class="check-box">
                <input type="checkbox" id="checkbox-disabled" disabled>
                <label for="checkbox-disabled">Disabled</label>
            </div>
            <div class="check-box">
                <input type="checkbox" id="checkbox-disabled-checked" checked disabled>
                <label for="checkbox-disabled-checked">Disabled &amp; checked</label>
            </div>
        </div>
        <div class="mt-20 skin-minimal">
            <div class="radio-box">
                <input type="radio" id="radio-1" name="demo-radio1">
                <label for="radio-1">单选按钮</label>
            </div>
            <div class="radio-box">
                <input type="radio" id="radio-2" name="demo-radio1" checked>
                <label for="radio-2">单选按钮 checked状态</label>
            </div>
            <div class="radio-box">
                <input type="radio" id="radio-disabled" disabled>
                <label for="radio-disabled">Disabled</label>
            </div>
            <div class="radio-box">
                <input type="radio" id="radio-disabled-checked" checked disabled>
                <label for="radio-disabled-checked">Disabled &amp; checked</label>
            </div>
        </div>
    </div>

    <b>弹出窗</b>
    <input class="btn radius btn-secondary" onclick="layer.alert('呵呵')" type="button" value="普通弹窗">
    <input class="btn radius btn-secondary" onclick="test2()" type="button" value="询问框">
    <input class="btn radius btn-secondary" onclick="test3()" type="button" value="墨绿深蓝风">
    <input class="btn radius btn-secondary" onclick="test4()" type="button" value="捕获页">
    <input class="btn radius btn-secondary" onclick="test5()" type="button" value="页面层">
    更多弹出窗参考：http://layer.layui.com/
    <script>
        //弹出即全屏
        var index = layer.open({
            type: 2,
            content: 'http://layim.layui.com',
            area: ['320px', '195px'],
            maxmin: true
        });
        //全屏设置
//        layer.full(index);
        function test2(){
            layer.confirm('您是如何看待前端开发？', {
                btn: ['重要','奇葩'] //按钮
            }, function(){
                layer.msg('的确很重要', {icon: 1});
            }, function(){
                layer.msg('也可以这样', {
                    time: 2000, //2s后自动关闭
                    btn: ['明白了', '知道了']
                });
            });
        }
        function test3(){
            layer.alert('墨绿风格，点击确认看深蓝', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0
            }, function(){
                layer.alert('偶吧深蓝style', {
                    skin: 'layui-layer-lan'
                    ,closeBtn: 0
                    ,anim: 4 //动画类型
                });
            });
        }
        function test4(){
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                content: $('#mySwitch'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function(){
                    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 2000, icon:6});
                }
            });
        }
        function test5(){
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '240px'], //宽高
                content: 'html内容'
            });
        }
    </script>
    <b>wangeditor</b>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
    </style>
    <div id="editor1" class="toolbar"></div>
    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
    <div id="editor2" class="text">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>
    <div id="editor">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>
    <div id="mySwitch" class="switch">
        <input type="checkbox" checked />
    </div>
    <script>
        require(['editorUtils','bootstrapswitch','css!bootstrapswitchstyle'],function(EditorUitls){

            var editor = EditorUitls.create("#editor");
            EditorUitls.create("#editor1","#editor2");
            $('#mySwitch').on('switch-change', function (e, data) {
                var $el = $(data.el)
                    , value = data.value;
                EditorUitls.switchOpenOrClose(editor,value);
                alert(EditorUitls.getHtml(editor,true));
            });
        })
    </script>
    <b>图片样式css</b>
    <style>
        .travel-pic{ width:1020px}
        .travel-pic li{display: inline;float: left;margin-right: 20px;overflow: hidden;width: 235px}
        .travel-pic img{border:0; width:235px; height:157px;vertical-align:top;display:block;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease}
        .travel-pic a:hover img{transform:scale(1.04,1.04);-ms-transform:scale(1.04,1.04); -webkit-transform:scale(1.04,1.04)}
    </style>
    <div style="width:1000px; margin:0 auto; overflow:hidden">
        <ul class="travel-pic cl">
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/001.jpg"></a></li>
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/003.jpg"></a></li>
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/003.jpg"></a></li>
            <li><a href="#"><img src="http://www.h-ui.net/ext/1405081144/images/004.jpg"></a></li>
        </ul>
    </div>

    <b>按钮</b>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入" data-tra="hui-fadein"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从上" data-tra="hui-fadeinT"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从右" data-tra="hui-fadeinR"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从下" data-tra="hui-fadeinB"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡入-从左" data-tra="hui-fadeinL"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出" data-tra="hui-fadeout"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向上" data-tra="hui-fadeoutT"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向右" data-tra="hui-fadeoutR"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向下" data-tra="hui-fadeoutB"/>
    <input class="btn btn-primary radius hui-animation" type="button" value="淡出-向左" data-tra="hui-fadeoutL"/>

    <div class="text-c mt-30"><input id="text" class="" type="button" value="测试效果"></div>

    <b>代码高亮显示</b>
    <script>
        require(['jquery','css!prettifystyle','prettify'],function ($,prttifstyle,prettify) {
            prettyPrint();
        })
    </script>
    <b>HTML CSS代码</b>
    <pre class="prettyprint linenums">
        pre{display:block;font-family:Monaco,Menlo,Consolas,&quot;Courier New&quot;,monospace；padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;color:#333}
        .prettyprint{margin-bottom:20px；padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
        .prettyprint .com { color: #998;font-style:italic }/*注释*/
        .prettyprint .tag{color:#007}/*标签*/
        .prettyprint .lit { color: #195f91}
        .prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #93a1a1}/*等于*/
        .prettyprint .fun { color: #dc322f}
        .prettyprint .str,.prettyprint .atv { color: #D14}/*值*/
        .prettyprint .kwd,.prettyprint .prettyprint .tag { color: #1e347b}
        .prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: teal}/*文档声明，属性*/
        .prettyprint .pln { color: #48484c}
        .prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
        .pre-scrollable{max-height:340px;overflow-y:scroll}
        pre ol.linenums{list-style:decimal outside none;margin:0 0 0 33px}
        pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}
    </pre>
    <b>树形结构展示</b>
    <div class="zTreeDemoBackground right">
        多棵树之间 的 数据交互
        <ul id="treeDemo2" class="ztree"></ul>
    </div>

    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <input class="btn btn-primary size-XL radius" type="button" value="特大按钮" onclick="bigbutton()"/>
    <script>
        function bigbutton(){
            require(['ztreeUtils'],function(ztreeUtils){
                console.info(ztreeUtils.getAllNodes('treeDemo2'));
            })
        }
        var zNodes =[
            { id:0,name:"zTree 默认样式",pId:-1,chkDisabled:true},
            { id:1, pId:0, name:"展开、折叠 自定义图标不同",checked:true, open:true, iconOpen:"http://www.treejs.cn/v3/img/menuIcon.png", iconClose:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:11, pId:1, name:"叶子节点1"},
            { id:12, pId:1, name:"叶子节点2",checked:true, icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:13, pId:1, name:"叶子节点3", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:false, icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:21, pId:2, name:"叶子节点1", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:22, pId:2, name:"叶子节点2", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:23, pId:2, name:"叶子节点3", icon:"http://www.treejs.cn/v3/img/menuIcon.png"},
            { id:3, pId:0, name:"不使用自定义图标", open:true },
            { id:31, pId:3, name:"叶子节点1"},
            { id:32, pId:3, name:"叶子节点2"},
            { id:33, pId:3, name:"叶子节点3"},
            {id:44, name:"粗体字", font:{'font-weight':'bold'},isParent:true },
                {id:55, name:"斜体字", font:{'font-style':'italic'}},
                {id:66, name:"有背景的字", font:{'background-color':'black', 'color':'white'}},
                { name:"红色字",fk:'fuck', font:{'color':'red'}},
                { name:"蓝色字", font:{'color':'blue'}},
                { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},
                { name:"zTree 默认样式",pId:-1}
            ];
        require(['ztreeUtils'],function(ztreeUtils){
        ztreeUtils.createTreeAMD($("#treeDemo"),zNodes);
            ztreeUtils.createTreeAMD($("#treeDemo2"),null);


            var child = ztreeUtils.getCheckeds('treeDemo',true);
        console.info(child);
//            ztreeUtils.createTreeCMD($("#treeDemo2"),
//                'http://localhost:63342',
//                {'name':'2<PASSWORD>'},null);
        })
//        require(['jquery','jqueryztreecore','css!jqueryztreestyle'],function($,jqztree,jqztreecss){
//            var setting = {
//                view: {
//                    fontCss: getFont,
//                    nameIsHTML: true
//                }
//            };
//
//            var zNodes =[
//                {id:1, name:"粗体字", font:{'font-weight':'bold'} },
//                {id:2, name:"斜体字", font:{'font-style':'italic'}},
//                {id:3, name:"有背景的字", font:{'background-color':'black', 'color':'white'}},
//                { name:"红色字", font:{'color':'red'}},
//                { name:"蓝色字", font:{'color':'blue'}},
//                { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},
//                { name:"zTree 默认样式"}
//            ];
//
//            function getFont(treeId, node) {
////                alert(node.id);
//                return node.font ? node.font : {};
//            }
//
//            $(document).ready(function(){
//                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//            });
//
//        })
    </script>
    <b>表格展示</b>
    <table class="table table-border table-bordered table-bg radius">
        <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <th>类别</th>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>
    <div id="page3"></div>

    <b>测试国际化</b>
    <i18n key="name">呵呵</i18n><i18n key="name">呵呵</i18n><i18n key="name">呵呵</i18n>

    <b>表单</b>
    <form action="" method="post" class="form form-horizontal" id="form-member-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span><i18n key="name">呵呵</i18n>用户名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="username" name="username">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" id="sex-1" checked>
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" name="sex">
                    <label for="sex-2">女</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-3" name="sex">
                    <label for="sex-3">保密</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="mobile" name="mobile">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="@" name="email" id="email">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">附件：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="btn-upload form-group">
				<input class="input-text upload-url" type="text" name="uploadfile" id="uploadfile" readonly nullmsg="请添加附件！" style="width:200px">
				<a href="javascript:void(0);" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
				<input type="file" multiple name="file-2" class="input-file">
				</span> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">所在城市：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="city">
					<option value="" selected>请选择城市</option>
					<option value="1">北京</option>
					<option value="2">上海</option>
					<option value="3">广州</option>
				</select>
				</span> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="beizhu2" id="beizhu2" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-500" nullmsg="备注不能为空！" onkeyup="$(this).Huitextarealength(this)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">10</em>/500</p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>

    <b>弹窗</b>
    <a href="javascript:$.Huimodalalert('哈哈',0);"><div class="maskWraper" style="width:300px; height:250px; border:solid 1px #ddd;"> <img src="http://images.h-ui.net/www/2.png" width="300" height="250">
        <div class="maskBar text-c">遮罩条</div>
    </div></a>

    <b>流动</b>
    <div id="marquee" class="marquee">
        <div id="holder">
            <ul>
                <li>第一条数据</li>
                <li>第二条数据</li>
                <li>第三条数据</li>
            </ul>
        </div>
    </div>
    <i class="Hui-iconfont Hui-iconfont-lunzi"></i>
    <i class="Hui-iconfont Hui-iconfont-del2"></i>
    <i class="Hui-iconfont Hui-iconfont-user2"></i>
    <div class="four steps">
        <span class="step">第一步</span>
        <span class="active step">第二步</span>
        <span class="disabled step">第三步</span>
        <span class="disabled step">第四步</span>
    </div>
    <div id="tab_demo" class="HuiTab">
        <div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
        <div class="tabCon">内容一</div>
        <div class="tabCon">内容二</div>
        <div class="tabCon">内容三</div>
    </div>
<button class="btn radius btn-primary size-L" onClick="modaldemo()">弹出对话框</button>
    <button class="btn radius btn-primary size-L" onClick="modaldemo2()">弹出对话框2</button>
<button class="btn radius btn-primary size-L ml-20" onclick="modalalertdemo()">消息框，2秒钟自动消失</button>
   <!-- <div class="codeView docs-example">-->
        <p>成功状态</p>
        <div class="Huialert Huialert-success">成功状态提示</div>
        <p>危险状态</p>
        <div class="Huialert Huialert-danger">危险状态提示</div>
        <p>错误状态</p>
        <div class="Huialert Huialert-error">错误状态提示</div>
        <p>信息状态</p>
        <div class="Huialert Huialert-info">信息状态提示</div>
  <!--  </div>-->
    <div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">对话框标题</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void(0);">×</a>
                </div>
                <div class="modal-body">
                    <p>对话框内容…</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="alert('')">确定</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-demo2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">对话框标题</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void(0);">×</a>
                </div>
                <div class="modal-body">
                    <p>对话框内容…</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="codeView docs-example">
        <div class="cl">
            <div class="l" style="width:48%">
            <p><strong>点击效果</strong></p>
            <ul id="Huifold1" class="Huifold">
                <li class="item">
                    <h4>标题<b>+</b></h4>
                    <div class="info"> 内容<br>很多内容 </div>
                </li>
                <li class="item">
                    <h4>标题<b>+</b></h4>
                    <div class="info"><img src="http://images.h-ui.net/www/2.png" width="300" height="150"><br>
                        可以是图片</div>
                </li>
                <li class="item">
                    <h4>标题<b>+</b></h4>
                    <div class="info"><img src="http://images.h-ui.net/www/1.png" width="300" height="150"></div>
                </li>
            </ul>
        </div>
            <div class="r" style="width:48%">
                <p><strong>鼠标经过效果</strong></p>
                <ul id="Huifold4" class="Huifold">
                    <li class="item">
                        <h4>标题<b>+</b></h4>
                        <div class="info"> 内容<br>很多内容 </div>
                    </li>
                    <li class="item">
                        <h4>标题<b>+</b></h4>
                        <div class="info"><img src="http://images.h-ui.net/www/2.png" width="300" height="150"><br>
                            可以是图片</div>
                    </li>
                    <li class="item">
                        <h4>标题<b>+</b></h4>
                        <div class="info"><img src="http://images.h-ui.net/www/1.png" width="300" height="150"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--分页控件使用-->
    <div id="biuuu_city_list"></div>
    <div id="biuuu_city"></div>
    <script>
        //测试数据
        var data_ = [{name:'test',sex:'男',id:2},{name:'test2',sex:null,id:22}];

        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];
        /**
         * 分页控件laypage使用
         * 参考：http://www.layui.com/laypage/?page=5
         *
         * demo
         * //以下将以jquery.ajax为例，演示一个异步分页
         *            function demo(curr){
         *     $.getJSON('test/demo1.json', {
         *       page: curr || 1 //向服务端传的参数，此处只是演示
         *     }, function(res){
         *       //此处仅仅是为了演示变化的内容
         *       var demoContent = (new Date().getTime()/Math.random()/1000)|0;
         *       document.getElementById('view1').innerHTML = res.content + demoContent;
         *       //显示分页
         *       laypage({
         *         cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
         *         pages: res.pages, //通过后台拿到的总页数
         *         curr: curr || 1, //当前页
         *         jump: function(obj, first){ //触发分页后的回调
         *           if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
         *             demo(obj.curr);
         *           }
         *         }
         *       });
         *     });
         *   };
         *            //运行
         *            demo();
         *
         */
        require(['layPageUtils'],function(LayPageUtils){
            LayPageUtils.AjaxUtils.ajaxParam.root.msg = {adminInfo: {}}
            LayPageUtils.dataGride({
                data_:data_,
//                url : LayPageUtils.AjaxUtils.URLS.findUsers,
                params :LayPageUtils.AjaxUtils.ajaxParam,
                type:'json',
                method : 'post',
                tableId:'biuuu_city_list',
                cont: document.getElementById('biuuu_city'),
                skip: true,
                skin: '#00AA91',
                groups: 2 ,
                first:"首页",
                last:"尾页",
                prev:"<",
                next:">",
                data:[
                    {
                        name:'ID',
                        value:'id',
                        align:'text-c',
                        width:'20%',
                        iShow:true
                    },{
                        name:'姓名',
                        value:'name',
                        align:'text-c',
                        width:'20%',
                        iShow:true,
                        formartVal:function(value,data){
                            return value+data.sex;
                        }
                    },{
                        name:'性别',
                        value:'sex',
                        align:'text-c',
                        width:'20%',
                        iShow:true,
                        formartVal:function(value,data){
                            return value;
                        }
                    },{
                        name:'操作',
                        value:'option',
                        align:'text-l',
                        iShow:true,
                        formartVal:function(data){
                            return '<input class="btn btn-success radius" type="button" onclick="alert('+data.name+')" value="成功">';
                        }
                    }
                ]
            });
        })

//        require([
//            'jquery','laypager','css!laypagestyle'],function($,laypager,laypagestyle){
//
//
//            var nums = 5; //每页出现的数量
//            var pages = Math.ceil(data.length/nums); //得到总页数
//
//            var thisDate = function(curr){
//                //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
//                var str = '', last = curr*nums - 1;
//                last = last >= data.length ? (data.length-1) : last;
//                str +='<table class="table table-border table-bordered table-bg radius"><thead><tr><th>表头</th></tr></thead><tbody>';
//                for(var i = (curr*nums - nums); i <= last; i++){
//                    str += '<tr><td>'+ data[i] +'</td></tr>';
//                }
//                str+='</tbody></table>';
//                return str;
//            };
//            console.info("===========*==========")
//            console.info(laypager);
//            laypager({
//                cont: document.getElementById('biuuu_city'), //容器。值支持id名、原生dom对象，jquery对象,
//                pages: pages, //总页数
//                skip: true, //是否开启跳页
//                skin: '#00AA91', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
//                groups: 7 ,//连续显示分页数
//                jump: function(obj){
//                    document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
//                }
//            });
//        })

    </script>
<script>
    require([
        'jquery',
        'url',
        'stringUtils',
        'constant',
        'ajax',
        'tmpl'],function($,url,StringUtils,Constant,AJAX,header,menu,tmpl){
//        alert(AJAX.Constant.Characters.C_BACK_SLASH);
    })

    function modaldemo(){
        $("#modal-demo").modal("show")}
    function modaldemo2(){
        $("#modal-demo2").modal("show")}
    function modalalertdemo(){
        $.Huimodalalert('我是消息框，2秒后我自动滚蛋！',2000)}
    require(['layer','hui','hui_admin_page'],function(layer,hui,huiadminpage){
        $.Huimarquee(22,30,3000);
        /**
         * 折叠
         * 三种类型：分别对应的参数：
         *     1	只打开一个，可以全部关闭
         *     2	必须有一个打开
         *     3	可打开多个
         * */
        $("#Huifold1").Huifold({
            titCell:'.item h4',
            mainCell:'.item .info',
            type:3,
            trigger:'click',
            className:"selected",
            speed:"first",
        });
        $("#Huifold4").Huifold({
            titCell:'.item h4',
            mainCell:'.item .info',
            type:2,
            trigger:'click',
            className:"selected",
            speed:"first",
        });
        $("#tab_demo").Huitab(".tabBar span",".tabCon","current","click","1");
        $('.maskWraper').Huihover();
    })

    /**
     * 使用icheck时需要添加以下代码
     */
    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });

    /**
     * 表单验证对应错误信息显示在jquery.validate.js中的showLabel方法中
     * 注意：表单中所有输入表单必须配置id
     */
    $("#form-member-add").validate({
        rules:{
            username:{
                required:true,
//                isIntEqZero:true,
                rangelength:[5,10]
            },
            sex:{
                required:true,
            },
            mobile:{
                required:true,
                isMobile:true,
            },
            email:{
                required:true,
                email:true,
            },
            uploadfile:{
                required:true,
            },
{'fraction_non_alphanumeric': 0.18154521307310312, 'fraction_numerical': 0.017883952287463086, 'mean_word_length': 1.6705732035070715, 'pattern_counts': {'":': 0, '<': 1096, '<?xml version=': 0, '>': 1096, 'https://': 2, 'lorem ipsum': 0, 'www.': 36, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4215969', 'n_tokens_mistral': 21324, 'n_tokens_neox': 20800, 'n_words': 3052}