常用JS代码段

最近尝试封装一些常用的JS功能，算是一种锻炼吧

页面跳转开始/
/*
	Dom结构:
	<h3 class="link-single" data-src="www.baidu.com">
		点击我,这个是访问本站点的链接，不可以外链
	</h3>

	Js:
	pageJump(".link-single","src");
*/
	function pageJump(className,dataName)
	{
		$(className).css({
			"cursor":"pointer"
		}).on("click",function(){
			window.location.assign( $(this).data(dataName) );
		});
	}
页面跳转结束/

选项卡开始/

/*
	Dom结构:
	<div class="tab">
		<div class="tab-nav">
			<a class="on" href="javascript:;">标题1</a>
			<a href="javascript:;">标题2</a>
			<a href="javascript:;">标题3</a>
		</div>
		<div class="tab-content">
			<div>标题1 内容区域在此</div>
			<div style="display:none;">标题2 内容区域在此</div>
			<div style="display:none;">标题3 内容区域在此</div>
		</div>
	</div>

	Js:
	tabCard(".tab",".tab-nav",".tab-content","on");
*/
	function tabCard(cardName,cardNavName,cardContentNane,activeClass)
	{
		cardNavName = cardName + ' ' + cardNavName;
		cardContentNane = cardName + ' ' + cardContentNane;

		$(cardNavName).children().on("click",function(){

			$(this).addClass(activeClass).siblings().removeClass(activeClass);
			$(cardContentNane).children().eq( $(this).index() ).show().siblings().hide();
		});
	}
选项卡结束/

全选、反选开始/
/*
	Dom结构:
	<div class="check-block">
		<label>
			全选：<input class="all" type="checkbox">
		</label>
		<label>
			单选：<input class="single" type="checkbox">
		</label>
		<label>
			单选：<input class="single" type="checkbox">
		</label>
		<label>
			单选：<input class="single" type="checkbox">
		</label>
		<label>
			单选：<input class="single" type="checkbox">
		</label>
	</div>

	Js:
	checkAll(".check-block",".all",".single");
 */
function checkAll(parent,cheakAll,checkSingle)
{

	var $cheakAll = $(parent+' '+cheakAll );//全选复选框
	var $checkSingle =$(parent+' '+checkSingle );//单个复选框

	// 全选复选框
	$cheakAll.click(function(){
		$(this).prop("checked") ? $checkSingle.prop("checked",true):$checkSingle.prop("checked",false);
	});
	// 单个复选框
	$checkSingle.click(function(){
		var isCheckAll = true;
		if( $(this).prop("checked") )
		{
			$checkSingle.each(function(){
				if( !$(this).prop("checked") )
					isCheckAll = false;
			});
			if( isCheckAll )
				$cheakAll.prop("checked",true);
		}
		else
			$cheakAll.prop("checked",false);
	});
}
全选、反选结束/

遮罩层开始/
/*
	样式:
	.hide{display:none;}
	.pop-box{position:absolute;left:0;top:0;background:rgba(0,0,0,0.5);z-index:999;}
	.pop-box .pop-main{position:fixed;z-index:1000;}
	.pop-box .pop-width{width:px;height:px;}

	Dom结构:
	<button class="pop-btn" data-pop-index=".pop-orange">橘子弹出层</button>
	<div class="pop-box pop-orange hide">
		<div class="pop-main pop-width">
			<a class="close-btn" href="javascript:;">橘子取消</a>
		</div>
	</div>

	Js:
	PopBoxInit( ".pop-btn","pop-index",".close-btn" );
*/
// 居中
function setElementCenter(element)
{
	var $window  = $(window);
	var $element = $(element);
	var left = ($window.width()  - $element.outerWidth()) / 2  + $window.scrollLeft();
	var top  = ($window.height() - $element.outerHeight()) / 2 + $window.scrollTop();
	$element.css({
		left: left,
		top: top
	});
}
// 全屏
function setFullPage(element)
{
	var $document = $(document);
	var width  = $document.width();
	var height = $document.height();
	$(element).css({
		width: width,
		height: height
	});
}
// 初始化
function PopBoxInit( BtnToPop, popIndent,closePopName )
{
	$(BtnToPop).on("click",function(){

		// 遮罩层 以及遮罩层主体
		var $PopElem =$( $(this).data(popIndent) );
		var $popMain = $PopElem.children().first();

		// 遮罩层显示
		$PopElem.show().on("click",function(){
			$(this).hide();
		});

		// 这里要注意，本来函数接收的是字符串，这里是对象
		setFullPage($PopElem);
		setElementCenter($popMain);

		// 关闭弹窗按钮
		$PopElem.on("click",closePopName, function() {
			$(this).hide();
		});

		// 阻止事件冒泡
		$popMain.on("click", function(event) {
			event.stopPropagation();
		});
	});
}
遮罩层结束/