从零开始学_JavaScript_系列（12）——jquery<2>（高度自适应，哈希地址及检测，单页面技术）

前注：我在练习的时候，函数命名比较随意，以修改起来简单的简短无意义函数名为主，实际使用时，请使用更易阅读、规范的命名方式

（ps：这篇算是上周的）

（26）让某块随着浏览器的高度变化而自动变化

假设该块的标签名为section

于是：

    function ge()
    {
       var m =document.documentElement.clientHeight;
       $("section").css("height",m-100);
    }
window.onresize = function(){ge();}    //浏览器高度变化时触发事件
$(document).ready(function(){ge();});

效果：

①初始时自适应；

②浏览器高度变化时自适应。

③假如需要根据id来选择，更改$("section")即可。

④m-100是因为该块的上部有一个高度为100px的块。

 

 

(27)按钮和标签绑定（按顺序绑定）触发事件

前提：

假设有5个按钮，有5个事件。按钮的类名相同，事件的类名相同。按第一个按钮触发第一个事件，依次类推。

代码：

$(document).ready(function()
{
	$(".side").click(function()
	{
		$(".iframe").css("display","none");
		sles = document.getElementsByClassName("side");
		var a;
		for(a=0;a<sles.length;a++)
		{
			if(sles[a].id==this.id)
			{
				break;
			}
		}
		var oo = document.getElementsByClassName("iframe");
		oo[a].style.display="block";
	})
})

 

（28）初始不赋值src属性，后续触发事件时加载

适用范围：给标签添加src属性、单页面结构

思路：

①首先，我们需要获得一个src的链接地址；

②某一个标签（例如iframe）需要使用这个链接（但不是即时使用，比如在点击某个按钮时使用）；

③我们通过javascript的class选择器（或者类似的），获取其标签（document.getElementsByClassName(xxxxx)），然后给标签添加一个value属性（即使该标签本身没有value属性），用于在使用该src地址之前，保存该链接地址；

④当触发事件时，将value属性赋值给src属性，即可。

 

代码：（使用了jquery库）

$(document).ready(function()	
{
	var oo = document.getElementsByClassName("iframe");
	oo[0].value="http://www.baidu.com";
	oo[1].value="https://www.so.com";
})

$(document).ready(function()	
{
	$(".side").click(function()
	{
		$(".iframe").css("display","none");
		sles = document.getElementsByClassName("side");
		var a;
		for (a = 0; a<sles.length; a++)
		{
			if(sles[a].id == this.id)
			{
				break;
			}
		}
		var oo = document.getElementsByClassName("iframe");
		if(oo[a].src.indexOf(oo[a].value)<0)	//当索引值小于0时，说明src和value值不匹配
		{
			oo[a].src=oo[a].value;	//将value值赋给src值
		}
	})
})

 

解释：

①第一个函数用于模拟：当文档加载完毕后，给标签赋值（或者是触发事件，添加了该标签后赋值）；需要注意的是，标签个数是不确定的，确定的是，在导入标签时，一个iframe标签对应一个src地址和一个按钮；

 

②由于需要在按钮点击时，才触发事件，赋给对应的iframe标签src值。因此，首先要确定点击的是哪个按钮，然后找到该按钮对应的iframe标签；（就是第二个函数的a变量的值表示是第a+1个按钮/标签，

 

③然后确定该标签目前的src值，通过.indexOf()和value值进行匹配。

如果不匹配（返回值-1），那么将value值赋给该src（即加载链接地址，注意，其他的是没有被加载的）；

如果匹配（返回值大于0），那么跳过。

 

④于是实现了在触发事件才加载链接地址。

⑤更优办法请参照（29）和（30）的哈希地址的检测

 

 

（29）监视hashchange

①什么是hashchange？

简单来说，假设我们设置一个超链<ahref="#top">m1</a>

这个超链的作用，是跳转到页内id="top"处（注意，不是指页面顶端，而是页面内标签等于top的地方）

此时，在浏览器的地址处，最后会添加一个#top

 

②所谓的hashchange，就是监视这个链接的变化。

具体如下：

$(window).on("hashchange",function(){回调函数});

 

③效果是：当hashchange事件触发后，将调用回调函数。

 

④查看当前后缀地址（指的是例如点击上面的超链接后，在浏览器地址后面所加的#top），使用代码：

window.location.hash

以上面为例，返回值是：#top

 

⑤由于我们有时候不想要第一个“#”字符，于是，我们再使用命令：

x=window.location.hash.substr(1);

返回的是去除#之后的所有字符串。

 

 

 

（30）利用hashchange()监测，实现单页面技术

代码：

$(window).on("hashchange",function()
{
   x=window.location.hash.substr(1);
   y="iframe_"+x;
   m=document.getElementById(y);
   if(m==null)		//如果找不到，则添加该标签
   {
   	$("#iframe_section").append(function(){return "<iframe id='" + y + "' class='iframe' src='http://www." + x + ".com'>ff</iframe>"});
   }
   $(".iframe").css("display","none");	//设置所有为none
   $("#"+y).css("display","block");	//读取id，修改css属性
});

 

解释：

①加入的iframe框架，都在一个id为iframe_section的块之下。（所以必须要有这个块，或者修改这个id）；

 

②监测hash地址的变化，如果有变化，首先检查是否有等于该地址的id的块（例如地址是#abc，那么监测是否有id="abc"的块）；

 

③如果没有，创造一个这样的块，并给其赋予链接（链接地址是id，具体格式见src，可以根据实际需要修改）；

 

④有、或者创建之后，设置所有类名为.iframe的块的display属性为隐藏（倒数第二行代码）；

 

⑤然后设置id为hash地址（实际上这个id有一个前缀iframe_ ，是在前面加入的）的块的display属性为block（显示这个块）。

 

⑥综合效果是：点击一个链接，哈希地址变化，显示对应的iframe或者创造他，不符合的被隐藏。切换不同的哈希地址时，不会导致之前操作的哈希地址的页面被重新加载。

 

另一种实现方式：

简单解释一下，是iframe和其按钮按顺序一一对应。不需要影响哈希地址，但相对实现就更复杂一些。（这是（27）和（28）综合起来的办法）

JS代码：

/*功能是点击某个标签，显示该标签对应的iframe
原理：
1.先隐藏其他的，标签对应iframe逐个对应（即标签1对应1#iframe），然后利用其对应顺序，先找到标签是第N个，然后找到第N个iframe，并显示他
2.需要标签的类名是side，iframe的类名是iframe
3.假如标签开始没有被加载的话，读取其value属性，将其值赋给src属性
4.可能存在的缺陷：假如某iframe打开后，其链接地址在操作过程中被改变，name返回时，再重新加载原链接
*/
/*$(document).ready(function()	
{
	$(".side").click(function()
	{
		$(".iframe").css("display","none");
		sles = document.getElementsByClassName("side");
		var a;
		for (a = 0; a<sles.length; a++)
		{
			if(sles[a].id == this.id)
			{
				break;
			}
		}
		var oo = document.getElementsByClassName("iframe");
		if(oo[a].src.indexOf(oo[a].value)<0)
		{
			oo[a].src=oo[a].value;
		}
		oo[a].style.display="block";
	})
})

//这个是【模拟】在加载iframe标签的时候，给iframe标签赋值（value）
$(document).ready(function()	
{
	var oo = document.getElementsByClassName("iframe");
	oo[0].value="http://www.baidu.com";
	oo[1].value="https://www.so.com";
})*/

HTML代码①按钮部分：

<div class="side" id="nav_pane">
	<img src="11.png" class="aside_icon">
	<span>我的工作台</span>
</div>
<div class="side" id="aside_newcase">
	<img src="13.png" class="aside_icon">
	<span>新建案件</span>
</div>

HTML 代码② iframe 部分：

<section id="iframe_section">
	<iframe class="iframe none" src="">
</section><span style="color:#7030a0;">
</span>

CSS部分：

.display_block
{
	display:block;
}
.display_none
{
	display:none;
}

注：实际使用的话，可能需要调整一下布局问题。并且本代码省略掉了实时创建iframe标签部分的代码，如果需要实时创建的话，需要在创建后，将src地址赋值给对应的iframe标签（通过获得标签对象后，加入到其value属性中）