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

最新推荐文章于 2023-07-28 11:15:59 发布

星旅zl

最新推荐文章于 2023-07-28 11:15:59 发布

阅读量780

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/nzzl54/article/details/88226731

版权

这篇技术文章介绍了HTML中上标``和下标``的用法，并展示了如何实现自定义Tab切换、自定义CheckBox的样式以及light7框架的无限滑动和下拉刷新功能。内容包括HTML标签的使用示例，自定义Tab和CheckBox的HTML与CSS代码，以及light7滑动刷新的初始化操作。

摘要由CSDN通过智能技术生成

这是一篇记录型的技术杂文，记录了这段时间做的一些小模块样式，正文之前先记录一下html上下标的写法，转载自

https://blog.csdn.net/bingle14/article/details/53817037

HTML标签：上标

在HTML语言中， 标签可定义上标文本。例如：要求显示：2个氧离子，在html代码中则需要写成：2O2-。 2O2-

包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
　　提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。

HTML标签：下标

在HTML语言中， 标签可定义下标文本。例如：要求显示：H20的2为下标记，在html代码中则需要写成：H20。H2O

包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

一、自定义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-shad