weui2
<!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>javascript
</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>
css
<!--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-->html
<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");java
var flag = true;
div_list.each(function(){
var _val = $(this).find("input").val();jquery
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>app
</body>
</html>
ide
-
每一个你不满意的现在，都有一个你没有努力的曾经。