自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新
2024-06-05 19:01:29
这是一篇记录型的技术杂文，记录了这段时间做的一些小模块样式，正文之前先记录一下html上下标的写法，转载自
https://blog.csdn.net/bingle14/article/details/53817037
HTML标签：上标
在HTML语言中， <sup> 标签可定义上标文本。例如：要求显示：2个氧离子，在html代码中则需要写成：2O<sup>2-</sup>。 2O2-
包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。
HTML标签：下标
在HTML语言中， <SUB>标签可定义下标文本。例如：要求显示：H20的2为下标记，在html代码中则需要写成：H<SUB>2</SUB>0。H2O
包含在 <SUB>标签和其结束标签 </SUB>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
一、自定义Tab切换:index.html，这里把样式都写成了一个单独的文件index-style.css
1、index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試</title>
<link href="css/index-style.css" rel="stylesheet" />
<style>
body{margin:0; padding:0;background-color:#f0eef5;overflow: hidden;
}
</style>
</head><body>
<div id="nav"><ul id="navmain"></ul>
</div><div class="swf" id = "welcome">
<embed src="data:images/welcom-cat.gif" type="" width="712px" height="428px">
<div style="margin-top:10px" align="center">
<button type="button" class="yongyin" onclick="funtest()" >welcome to test</button>
</div>
</div>
<div class="mainif" id="tabselect">
<!--scrolling="no"-->
<iframe style="height:500px;width:100%;" src="#" id="myiframe" name="myiframe" marginheight="0" marginwidth="0" frameborder="0" onload='iFrameHeight("indexFrame")'>
</iframe>
</div>
</body>
<script src="jq/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[ */
var dataInfo = '{"menus":[{"menuid":"1","icon":"icon-sys","menuname":"测试需要","url":"test-content.html"},{"menuid": "8","icon": "icon-sys","menuname": "勾选框","url":"test-ranking.html"},{"menuid": "15","icon": "icon-sys","menuname": "无限滚动","url":"test-rolling.html"}]}';
$(function () {//changeFrameHeight();_menus = $.parseJSON(dataInfo);InitTopMenu();//$("#navmain li").first().addClass("active");$('#navmain li').click(function () {$('#navmain li').removeClass("active");$(this).addClass("active");$("#welcome").hide();$("#tabselect").show();var menuId = $("#navmain li.active").attr("menuId");//设置对应的下方显示$.each(_menus.menus, function(i, n) { if(menuId == n.menuid){console.log("url = "+n.url);if(n.url == $("#myiframe").attr('src')){return;}$("#myiframe").attr('src', n.url);}});});
});//初始化顶部菜单
function InitTopMenu(){var topMenu = "";$.each(_menus.menus, function(i, n) {topMenu += "<li class=\"inactive\" menuid=\""+n.menuid+"\"><a href=\"javascript:void(0)\">"+n.menuname+"</a></li>"});$("#navmain").html(topMenu);console.log("_menus.menus.lenght = "+_menus.menus.length);if(_menus.menus.length <= 1){$("#nav").hide();}else{$("#nav").show();}
}function funtest(){alert("这是欢迎页面");
}function iFrameHeight(id) {}
/*]]>*/
</script>
</html>2、index-style.css
.swf {position: absolute;left:30%;top:50%;margin-left: -356px;margin-top: -215px;}.mainif{height:auto;width:100%;clear:both;margin-top:-16px;display:none;}.yongyin {width:100px;text-align:center;line-height:100%;padding:0.3em;font:16px Arial,sans-serif bold;font-style:normal;text-decoration:none;margin:2px;vertical-align:text-bottom;zoom:1;outline:none;font-size-adjust:none;font-stretch:normal;border-radius:50px;box-shadow:0px 1px 2px rgba(0,0,0,0.2);text-shadow:0px 1px 1px rgba(0,0,0,0.3);color:#ffffff;border:0.2px solid #d4d4d4;background-repeat:repeat;background-size:auto;background-origin:padding-box;background-clip:padding-box;background: linear-gradient(to bottom, #d4d4d4 0%,#363636 100%);
}
.yongyin:hover {background: #a1a1a1;
}
a{text-decoration:none;}
#nav { position:relative; width: 100%; clear: both; height:25px; margin-left:1px;}
#nav ul { float:left; margin:0px 10px; padding:0px;}
#nav ul li {cursor:pointer; float: left; min-width:82px;width:auto; height:25px; line-height:25px; text-align: center; *margin-bottom:-2px; list-style-type:none;}.inactive { //background-image:url(images/imgbg02.png) !important;//background: none; width:auto;line-height:100%;padding:0.1em;text-decoration:none;zoom:1;outline:none;font-size-adjust:none;font-stretch:normal;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0px 1px 2px rgba(0,0,0,0.2);text-shadow:0px 1px 1px rgba(0,0,0,0.3);color:#ffffff;border:0.1px solid #aebbef;background-repeat:repeat;background-size:auto;background-origin:padding-box;background-clip:padding-box;background: linear-gradient(to bottom, #DDECFF 0%,#BBD8FF 100%);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/admin/nav_bg_inactive2.png);
}
.inactive a {color: #000; font-weight:bold; line-height:25px;padding:5px;}
.inactive a:hover {color: #0b4bc2; font-weight:bold; line-height:25px;}
.active {//background:url(images/admin/nav_bg_active2.png) !important;//background: none; width:auto;line-height:100%;padding:0.1em;text-decoration:none;zoom:1;outline:none;font-size-adjust:none;font-stretch:normal;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0px 1px 2px rgba(0,0,0,0.2);text-shadow:0px 1px 1px rgba(0,0,0,0.3);color:#ffffff;border:0.1px solid #d4d4d4;background-repeat:repeat;background-size:auto;background-origin:padding-box;background-clip:padding-box;background: linear-gradient(to bottom, #d4d4d4 0%,#363636 100%);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/admin/nav_bg_active2.png);
}
.active a {color:#fff; font-weight:bold; line-height:25px; padding:5px;}
.active a:hover {color: #fff; font-weight:bold; line-height:25px;}
.blankgray {background:#bbb; height:2px; width:100%; margin:0; padding:0; clear:both; font-size:2px;}3、其中包含的的第一个子页面test-content.html代码如下
<html>
<head>
<style>
body{background:#FFF;padding:10px;
}
p { text-indent:2em; }
font-test { color:#F00; }
.div-contract { height: 80px;}
.div-content { }
.inpt{ border:none;border-bottom:1px solid #999;}
.inpt-red { border:none; border-bottom:1px solid #F00}
.noborder { border:none; }
.bold { font-weight:bold }
</style>
</head><body>
<div class ="body-div-all">
<font style="color:#FF0000">测试</font>
<div class = "div-contract">
<table class = "noborder" align="left">
<tr >
<td class = "bold" align="left">测试编号：<input type="text" name="contractCode" class="inpt"></td>
</tr>
<tr >
<td class = "bold" align="left">测试地点：<input type="text" name="contractSignPlace" class="inpt"></td>
</tr>
<tr >
<td class = "bold" align="left">测试时间：<input type="text" name="contractSignYear" class="inpt">年
<input type="text" name="contractCode" class="inpt">月
<input type="text" name="contractSignDay" class="inpt">日</td>
</tr>
</table></div>
<br><div class = "div-content"><table border="1" cellpadding="1" cellspacing="0" bordercolor = "#333333">
<tr >
<td class = "bold" align="center">测试名称</td>
<td class = "bold" align="center">测试单位</td>
<td class = "bold" align="center">单价（元）</td>
<td class = "bold" align="center">金额（元）</td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr><tr font-weight = "normal">
<th colspan="8" align="left" > 合计金额：￥<input type="text" class = "inpt" > 元（人民币大写）：<input type="text" class = "inpt" > </th>
</tr>
</table>
<br/>
<p>結束--H<SUB>2</SUB>0，平方米（m<sup>2</sup>）</p>
</div>
</div>
</body>
</html>二、自定义CheckBox以及其勾选逻辑
1、test-ranking.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>勾选框</title>
<link rel="stylesheet" href="css/test-style.css"/>
<style>
body{background:#FFF;padding:10px;
}
h3{text-align:left;}
</style>
</head><body>
<div class ="body-div-all">
<div class = "item">
<h3>4 测试评分方法</h3>
<p><b>4.0.1</b> 测试内容及评分</p>
</div>
<!--表格区域-->
<div>
<table id ="table_test" width="100%">
<tbody id="Tb_test1">
<tr>
<td colspan="2">
测试项目
</td>
<td style="width:50px">
实得分数
</td>
</tr>
<tr>
<td style = "width:60px">
1、安卓端测试
</td>
<td >
<div class="float-left">
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb1-1"></input> </label> <span>测试要点1未通过，扣8分</span> <br />
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb1-2"></input> </label><span>测试要点2未通过，扣3分</span><br />
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb1-3"></input> </label><span>测试要点3未通过，扣2~8分</span><br />
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb1-4"></input> </label><span>测试要点4未通过，扣2~8分</span>
</div>
</td>
<td>
<input type="text" value= "50" id ="sdfs1" class ="al-center bzxm-sd" disabled></input>
</td>
</tr>
<tr>
<td style = "width:60px">
1、IOS端测试
</td>
<td >
<div class="float-left">
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb2-1"></input> </label> <span>测试要点1未通过，扣9分</span> <br />
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb2-2"></input> </label><span>测试要点2未通过，扣2分</span><br />
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb2-3"></input> </label><span>测试要点3未通过，扣2~9分</span><br />
<label><input type="checkbox" class = "input-cblistener b1-input-cb1" name = "b1-input-cb2-4"></input> </label><span>测试要点4未通过，扣2~9分</span>
</div>
</td>
<td>
<input type="text" value= "50" id ="sdfs2" class ="al-center bzxm-sd" disabled></input>
</td>
</tr>
<tr>
<td colspan="2">
合计
</td>
<td>
<input type="text" value= "100" id ="sdfshj" class ="al-center bzxm-sd-hj" disabled></input>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 遮罩层 -->
<div id="cover"></div><!-- 弹窗 -->
<div id="showdiv"><!-- 标题 --><div id = "showDialogTitle" > 确认扣分分数</div><!-- 内容 --><div id = "showDialogContent">请输入扣分分数:<input type="text" placeholder="" id ="kjfs-score" name="kjfs-score" style="width:100px; text-align:center;" oninput = "value=value.replace(/[^\d.]/g,'')" onkeyup="clearNoNum(this)" /></div><!-- 按钮 --><div class="showDialogBtnDiv"><input type = "button" value = "确定" class= "showDialogBtnOk" onclick = "kfDetailConfirm()"/><input type = "button" value = "取消" class= "showDialogBtnOk" onclick = "closeWindow(true)"/></div>
</div>
</body><script src="jq/jquery.min.js"></script>
<!--<script src="light7/dist/js/light7.min.js" charset='utf-8'></script>-->
<script src="jq/InputDecimalFormat.js"></script>
<script type="text/javascript">
/*<![CDATA[ */
var kfItemName = []; //扣分名
var kfItemValue = []; //扣分数
var kfItemCheck = []; //是否勾选，默认都是没有勾选
var itemSDFSMap = { sdfs1:50,sdfs2:50,sdfshj:100}; //这里定死，实际上需要和上面的真实数据联动var positionCache = 0;
var indexCache = 0;
var kfMaxCache = 0;
var kfMinCache = 0;
var isCloseWindowClickCancel = false;
// 弹窗function showWindow(index,kfMinRange,kfMaxRange,isFreedomInput) {$('#showdiv').show(); //显示弹窗,$('#cover').css('display','block'); //显示遮罩层$('#cover').css('height',(document.body.clientHeight+10)+'px'); //设置遮罩层的高度为当前页面高度indexCache = index;kfMinCache = kfMinRange;kfMaxCache = kfMaxRange;$("#kjfs-score").val("");}// 关闭弹窗function closeWindow(isRestoreWithoutChangeSF) {$('#showdiv').hide(); //隐藏弹窗$('#cover').css('display','none'); //显示遮罩层if(isRestoreWithoutChangeSF){//关闭的要还原未勾选状态-不用改变分数状态isCloseWindowClickCancel = true; //为了区别是弹框了取消的还是直接取消勾选的var id = kfItemName[positionCache];$("input[name="+id+"]").click();}else{isCloseWindowClickCancel = false;}}$(function(){kfItemName = [];kfItemValue = [];kfItemCheck = [];$(".input-cblistener").each(function(){var name = $(this).attr("name");kfItemName.push(name);kfItemValue.push(0);kfItemCheck.push(false);$(this).click(function(){var name = $(this).attr("name");var val = $('input[name="'+name+'"]:checked').val(); //拿到对应的console.log("name = "+name+",val = "+val);positionCache = 0;positionCache = getItemPosition(name);var index = name.split("-")[2];index = index.split("cb")[1];indexCache = index;if(val != undefined && val == "on"){var content = $(this).parent().next().text();setKFScoreOprShowWindow(index,"0",0,0,content);}else{if(isCloseWindowClickCancel){console.log("由于没有分数加成，不需要还原任何数据");isCloseWindowClickCancel = false;}else{//加回分数countSDFS(kfItemValue[positionCache],1);}}});});
});function getItemPosition(name){var position = -1;for (var i = 0;i<kfItemName.length;i++){if(name == kfItemName[i]){return i;}}return position;
}function setKFScoreOprShowWindow(index,kfRangeString,kfMinRange,kfMaxRange,content){var isFreedomInput = true;if(content.indexOf("，扣") >= 0){isFreedomInput = false; //扣分确定的，需要精确分数if(content.split("，扣").length > 1){var tempString = content.split("，扣")[1];kfRangeString = tempString.trim().split("分")[0];if(kfRangeString == undefined || kfRangeString == ""){kfRangeString = "0";}console.log("kfRangeString = "+kfRangeString);var containSpecial= new RegExp("[~]"); if(containSpecial.test(kfRangeString)){//indexOf()，可返回指定字符串在字符串中首次出现的位置，若没有找到指定字符串，则会返回-1var indexRange = kfRangeString.indexOf("~");console.log("包含特殊字符kfRangeString"+kfRangeString+","+kfRangeString.substring(0,indexRange)+","+kfRangeString.substring(indexRange+1,kfRangeString.length));kfMinRange = eval(kfRangeString.substring(0,indexRange));kfMaxRange = eval(kfRangeString.substring(indexRange+1,kfRangeString.length));console.log("kfMinRange = "+kfMinRange+",kfMaxRange = "+kfMaxRange);}else{kfMinRange = eval(kfRangeString);kfMaxRange = eval(kfRangeString);console.log("kfMinRange = "+kfMinRange+",kfMaxRange = "+kfMaxRange);} }}if(kfMinRange == kfMaxRange){//相等的时候证明分数唯一，直接扣减countSDFS(kfMaxRange,2);return;}showWindow(index,kfMinRange,kfMaxRange,isFreedomInput);
}function kfDetailConfirm(){var kfScore = 0;kfScore = $("#kjfs-score").val();if(kfScore == undefined || kfScore == ""){alert("请先填写扣减分数");return;}else if(eval(kfScore) > kfMaxCache || eval(kfScore) < kfMinCache){alert("当前选项的评分范围为:"+kfMinCache+"~"+kfMaxCache);return;}console.log("indexCache = "+ indexCache+",kfScore = "+kfScore);countSDFS(eval(kfScore),2);closeWindow();
}function countSDFS(score,addOrSubFlag){var sdfsId = "sdfs"+indexCache;console.log("统计分数啦,addOrSubFlag = "+addOrSubFlag);var sumTotal = 0;var sdfs = itemSDFSMap[sdfsId];if(addOrSubFlag == 1){ //加var sdfsNew = eval(sdfs)+eval(score);itemSDFSMap[sdfsId] = sdfsNew;$("#"+sdfsId).val(sdfsNew);//还原kfItemValue[positionCache] = 0;kfItemCheck[positionCache] = false;}else if(addOrSubFlag == 2){ //减var sdfsNew = eval(sdfs)-eval(score);itemSDFSMap[sdfsId] = sdfsNew;$("#"+sdfsId).val(sdfsNew);kfItemValue[positionCache] = score;kfItemCheck[positionCache] = true;}$(".bzxm-sd").each(function(){sumTotal += eval($(this).val());});itemSDFSMap.sdfshj = sumTotal;$(".bzxm-sd-hj").val(sumTotal);console.log(JSON.stringify(itemSDFSMap)+",kfItemValue = "+kfItemValue);}
/*]]>*/
</script>
</html>2、勾选样式集中在test-style.css文件
@charset "utf-8";
/* CSS Document */
#cover{background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index:2;
}
#showdiv{width: 98%; margin: 0 auto; border: 1px solid #999; display: none; position: fixed; top: 2%; left: 1%; bottom: 2%;z-index: 3; background: #fff;
}
#showDialogTitle{background: #F8F7F7; width: 100%; height: 2rem; font-size: 1.5rem; line-height: 2rem; border: 1px solid #999; text-align: center;
}
#showDialogContent{text-indent: 2px; min-height: 20rem; height:80%;font-size: 1.5rem; padding: 0.5rem; line-height: 2rem;
}
.showDialogIframe{width:98%;height:100%;
}
.showDialogBtnDiv{width: 90%; margin: 0 auto; height: 2rem; line-height: 2rem; text-align: center;color: #fff;margin-top: 0.5rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: 1.5rem;
}
.showDialogBtnOk{background: #418BCA;color: #fff;height: 2rem;
}
.showDialogBtnCancel{background: #418BCA;color: #fff;height: 2rem;
}
.body-div-all{padding-left:2px;padding-right:2px;
}
table{border-collapse: collapse;border-spacing: 0; }
table td{position: relative;align:left;padding:10px 10px;min-height: 16px;line-height: 21px;font-size: 17px;border:1px solid #2c2c2c; text-align:center;}
input[type="text"]{ width:26px;}
span{margin-left:20px}
input{font-size:17px; border:none; font:17px/1.5 \5B8B\4F53}
.al-center{ text-align:center;}
.al-left{text-align:left;}
.float-left{float:left; text-align:left;}
label{position: absolute;display: inline-block;border: 1.1px solid #2c2c2c;width:17px;height:17px;border-radius: 5px;}
label input[type="checkbox"] {appearance: none;-webkit-appearance: none;outline: none;margin: 0;background-color: transparent;background: transparent;
}
label input[type="checkbox"]:after {display: inline-block;position: absolute;content:"";background-color: transparent;background: transparent;
}label input[type="checkbox"]:checked:after {//content:"\2714";//text-align: center;appearance: none;-webkit-appearance: none;font-size:15px;font-family:Sans-serif;background: transparent;background-color: transparent;left: 4px;top:-4px;content:"L";transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
}input[type="text"]:disabled{appearance: none;-webkit-appearance: none;background-color:#fff;color:#000;opacity:1;-webkit-opacity:1;
}
.ydfs-display-none,.kjfs-display-none{display:none;width:0px;
}
.ydfs-table-td,.kjfs-table-td{padding:0px 0px;border:0px solid #2c2c2c;
}
td textarea {outline: 0 none;border:none;display: block;overflow: hidden;width: 100%;min-width: 100%;max-width:100%;font-size: 14px;font: 14px/0.5;line-height: 20px;padding:2px;resize: none;
}三、最后是light7无限滑动/下拉刷新，详细看http://light7.cn/getting-started/
test-rolling.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新增记录</title>
<link rel="stylesheet" href="mui/css/light7-swiper.min.css"/>
<link rel="stylesheet" href="mui/css/light7.min.css"/>
<link rel="stylesheet" href="mui/css/light7-swipeout.css"/>
<script type='text/javascript' src='jq/jquery.min.js' charset='utf-8'></script>
<script type='text/javascript' src='mui/js/light7.min.js' charset='utf-8'></script>
<script type='text/javascript' src='mui/js/light7-swiper.js' charset='utf-8'></script>
<script type="text/javascript" src='mui/js/light7-swipeout.js' charset='utf-8'></script>
<style type="text/css">
.infinite-scroll-preloader {margin-top:-20px;
}
</style>
</head><body>
<div class="page">
<header class="bar bar-nav"><h1 class='title'>新增记录-无限滚动测试</h1>
</header>
<div class="content pull-to-refresh-content" data-ptr-distance="55"><div class="pull-to-refresh-layer"><div class="preloader"></div><div class="pull-to-refresh-arrow"></div></div><!--<div class="card"><div class="card-header">card</div><div class="card-content"><div class="card-content-inner">Hello there! I am a card;</div></div></div>--><div class="content infinite-scroll" id = "container" data-distance="100"><div class="list-block"><ul class="list-container"></ul></div><!-- preloader --><div class="infinite-scroll-preloader"><div class="preloader"></div></div></div></div><!--<div class="list-block"><ul><li><div class="item-content"><div class="item-inner"><div class="item-title label">检查评分名称：</div><div class="item-input"><input type="text" id ="jcpfmc" placeholder=""></div></div></div></li><li><div class="item-content"><div class="item-inner"><div class="item-title label">单位工程名称：</div><div class="item-input"><input type="text" id ="dwgcmc" placeholder=""></div></div></div></li><li><div class="item-content"><div class="item-inner"><div class="item-title label">建筑面积（m<sup>2</sup>）：</div><div class="item-input"><input type="text" id ="jzmj" placeholder=""></div></div></div></li><li><div class="item-content"><div class="item-inner"><div class="item-title label">结构类型：</div><div class="item-input"><input type="text" id ="jglx" placeholder=""></div></div></div></li><li><div class="item-content"><div class="item-inner"><div class="item-title label">检查单位：</div><div class="item-input"><input type="text" id ="jcdw" placeholder=""></div></div></div></li><li><div class="item-content"><div class="item-inner"><div class="item-title label">负责人：</div><div class="item-input"><input type="text" id ="fzr" placeholder=""></div></div></div></li><li><div class="item-content"><div class="item-inner"><div class="item-title label">项目经理：</div><div class="item-input"><input type="text" id ="xmjl" placeholder=""></div></div></div></li></ul></div><div class="content-block"><div class="row"><div class="col-50"><a href="#" class="button button-big button-fill button-danger" onclick = "addRecord()">取消</a></div><div class="col-50"><a href="#" class="button button-big button-fill button-success" onclick = "closeWindow()">新增</a></div></div></div>-->
</div>
</body>
<script type="text/javascript">
/*<![CDATA[ */
$(document).ready(function (){$.initPullToRefresh(".pull-to-refresh-content");$.attachInfiniteScroll("#container");});var loading = false;var maxItems = 100;var itemsPerLoad = 20;function addItems(number, lastIndex) {var html = '';for (var i = lastIndex + 1; i <= lastIndex + number; i++) {html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';}$('.list-container').append(html);}addItems(itemsPerLoad, 0);var lastIndex = 20;$(document).on('infinite', '.infinite-scroll',function() {console.log("$(document).on('infinite', '.infinite-scroll'...");// 如果正在加载，则退出if (loading) return;// 设置flagloading = true;setTimeout(function() {loading = false;if (lastIndex >= maxItems) {$.detachInfiniteScroll($('.infinite-scroll'));$('.infinite-scroll-preloader').remove();return;}addItems(itemsPerLoad, lastIndex);lastIndex = $('.list-container li').length;}, 1000);});$(document).on('refresh', '.pull-to-refresh-content',function(e) {setTimeout(function() {var cardHTML = '<div class="card">' +'<div class="card-header">New Card</div>' +'<div class="card-content">' +'<div class="card-content-inner">' +'Hello! I am the new card!'+(Math.random()*1000000)+'</div>' +'</div>' +'</div>';cardHTML = '<div class="list-block"> <ul class="list-container"></ul></div><div class="infinite-scroll-preloader"><div class="preloader"></div></div>';$(e.target).find('#container').html(cardHTML);$.attachInfiniteScroll("#container");// done$.pullToRefreshDone('.pull-to-refresh-content');itemsPerLoad = 20;loading = false;lastIndex = 20;addItems(itemsPerLoad, 0);}, 2000);
});/*]]>*/
</script>
</html>
效果图如下：
首页：Tab全部为未点击状态
点击Tab"勾选框"
点击Tab "无限滚动",默认显示前20条，滑动到最后一条后往下展示后20条，注意生效要加载完页面后进行初始化操作：
$(document).ready(function (){
$.attachInfiniteScroll("#container");
});
自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新相关推荐
- 修改源码自定义SwipeRefreshLayout样式——高仿微信朋友圈下拉刷新
上一篇文章里把SwipeRefreshLayout的原理简单过了一下,大致了解了其工作原理,不熟悉的可以去看一下:http://blog.csdn.net/u011443509/article/det ...
- 微信小程序自定义导航栏与自带下拉刷新冲突
在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求.而问题就一而再 ...
- jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果 显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
- AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...
- Android自定义控制(五)仿新浪微博的下拉刷新
网上有很多很有名的开源框架,这里就来拉拉PullToRefresh这个框架,也就是我们平时用的下拉刷新啦,当然你问我这个有什么用啊?别人已经写好了,这里主要是学习以及练习,练习的次数多了,一切就顺其自 ...
- Android ListView 疯狂之旅 之 《自定义下拉刷新功能的ListView》
效果图: 一 首先创建一个类,继承ListView,编写其构造方法 public class RefreshListView extends ListView {public RefreshListV ...
- 安卓小程序 自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
- android中上拉下滑布局,3年以上勿进！最简单的Android自定义ListView下拉刷新与上拉加载，代码直接拿去用~...
本文主要针对开发新手,手写实现一个最简单Android自定义listview下拉刷新和上拉加载demo. 不喜可喷,欢迎大佬留言指点. 效果图 一:编写需要在ListView中增加头加载的布局文件,与 ...
- 自定义下拉刷新之仿AcFun下拉刷新
俗话说好记性不如烂笔头,决定以后将研究过的东西写到博客里,方便自己以后查找,也方便技术分享.第一篇从基础的自定义下拉刷新开始.这里说下,我是在大神的肩膀上进行自定义的,因为自己重写下拉刷新的话会有很多 ...
最新文章
- BERT模型从训练到部署全流程
- 利用JavaScript在ASP.NET中动态生成系统菜单
- 月份对比_6月份钢坯市场或将高位回落
- window.open参数完全手册
- MacOS12.3M1出现程序killed的一些想法
- 设计灵感|色彩叠加！这样的海报层次感更强
- Ubuntu安装tensorflow报错：tensorflow-xx.whl not a supported wheel on this platform
- VirusTotal 共享8000万勒索软件样本分析数据库
- python爬虫什么意思-Python爬虫是什么意思有啥用 python爬虫原理实例介绍
- 如何将一个String和多个String值进行比较
- 牛客网算法题目-最优乘车题解
- PLSQL导出表结构
- 积分墙广告平台接入指路
- python四种方法求最大公约数（枚举法，辗转相除法，更相减损术，短除法）
- 股票爆仓有几种情况?股票爆仓具体怎么预防?
- python装饰器原理wraps(method)(self)_理解Python中装饰器最佳方法~
- Python使用numpy获取列表行数与列数
- InetAddress类常用方法
- asp 遇到过的问题集锦,附加asp语句添加数据库和生成表,asp命令更改指定文件的文件名,asp值传递的应用091116小结...
- Iphone手机企业邮箱设置 九步轻松搞定
热门文章
- Python 中 'unicodeescape' codec can't decode bytes in position XXX: trun错误解决方案
- 计算机应用基础 机考,计算机应用基础机考答案
- gitgerrit配置
- 如何显示密件抄送人员地址_什么是密件抄送，以及为什么不使用它会成为一个可怕的人...
- Android Jetpack 六大架构组件全面了解
- （load和initialize）不要被你的log迷惑了你对问题的判断
- 十八. 项目采购管理
- Android之Realm详解(非原创）
- 每日codingame小游戏练习[2021.3.29]（python3入门学习之rstrip方法）
- Exp6 信息搜集与漏洞扫描 20164302 王一帆