<!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>
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
