文档章节

weui2

steven
 steven
发布于 2016/07/09 11:21
字数 414
阅读 117
收藏 1

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
    
    
</head>
<body ontouchstart>
    
    <div class="weui_cells_title">表单</div>
    <div class="weui_cells weui_cells_form" >
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">qq</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
            </div>
            <div class="weui_cell_ft" style="display:none;">
                <i class="weui_icon_warn"></i>
            </div>
        </div>
        
        <div class="weui_cell">
            <div class="weui_cell_hd"><label for="" class="weui_label">卡号</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
            </div>
               <div class="weui_cell_ft" style="display:none;">
                <i class="weui_icon_warn"></i>
            </div>
        </div>
        
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">银行卡</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入银行卡号"/>
            </div>
               <div class="weui_cell_ft" style="display:none;">
                <i class="weui_icon_warn"></i>
            </div>
        </div>

    </div>
    <div class="weui_cells_tips">底部说明文字底部说明文字</div>
    <div class="weui_btn_area">
        <a class="weui_btn weui_btn_primary" href="javascript:" id="showTooltips">确定</a>
    </div>
    

    <!--BEGIN toast-->
    <div id="toast" style="display:none;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <i class="weui_icon_toast"></i>
            <p class="weui_toast_content">已完成</p>
        </div>
    </div>
    <!--end toast-->


    <script src="./zepto.min.js"></script>
    <script src="./router.min.js"></script>
    <script src="./example.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    
    
        <script>
            $(document).ready(function(){
                //绑定文本框事件
                $("input").focus(function(){
                    var class_val = $(this).parent().parent().attr("class");
                    if(class_val != 'weui_cell'){
                        $(this).parent().parent().attr("class", "weui_cell");
                        $(this).parent().siblings(".weui_cell_ft").css("display","none");    
                    }
                    
                });            
            
               $('#showTooltips').click(function() {
                    //检查表单数据是否填写完整
                    var div_list = $(".weui_cells, .weui_cells_form").children("div");
                    //var div_list_first = div_list.first();
                    //div_list_first.attr("class", "weui_cell weui_cell_warn");
                    //div_list_first.children().last().css("display","block");

                    var flag = true;
                    
                    div_list.each(function(){
                        var _val = $(this).find("input").val();

                        if(_val == ''){
                            $(this).attr("class", "weui_cell weui_cell_warn");
                            $(this).children().last().css("display","block");    
                            flag = false;
                        }
                        
                    });
                    
                    
                    
                    
                    /**
                     *1.delay函数是jquery 1.4.2新增的函数
                     *2.hide函数里必须放一个0,不然延时不起作用
                     */
                    if(flag)
                        $('#toast').show().delay(500).hide(0);
                    //$('#toast').fadeIn().delay(3000).fadeOut();
                });
            });
        </script>

</body>
</html>
 

© 著作权归作者所有

下一篇: weui
steven
粉丝 14
博文 77
码字总数 58589
作品 0
深圳
私信 提问

暂无文章

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
4
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部