自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新

编程语言 2019-03-06 15:17:52 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nzzl54/article/details/88226731

这是一篇记录型的技术杂文，记录了这段时间做的一些小模块样式，正文之前先记录一下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="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()，可返回指定字符串在字符串中首次出现的位置，若没有找到指定字符串，则会返回-1
				     var 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;

        // 设置flag
        loading = 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");
 });

猜你喜欢

转载自blog.csdn.net/nzzl54/article/details/88226731
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022