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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

零零水 2016-04-25 00:00:00 浏览635
展开阅读全文

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

(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属性中)


网友评论

登录后评论
0/500
评论
零零水
+ 关注