从零开始学_JavaScript_系列(12)——jquery<2>(高度自适应,哈希地址及检测,单页面技术)
来源:互联网 发布:2015nba西部决赛数据 编辑:程序博客网 时间:2024/05/19 00:43
前注:我在练习的时候,函数命名比较随意,以修改起来简单的简短无意义函数名为主,实际使用时,请使用更易阅读、规范的命名方式
(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的类名是iframe3.假如标签开始没有被加载的话,读取其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属性中)
- 从零开始学_JavaScript_系列(12)——jquery<2>(高度自适应,哈希地址及检测,单页面技术)
- 从零开始学_JavaScript_系列(30)——NodeList
- 从零开始学_JavaScript_系列(32)——事件广播
- 从零开始学_JavaScript_系列(43)——Symbol简述
- 从零开始学_JavaScript_系列(47)——Reflect
- 从零开始学_JavaScript_系列(58)——Thunk函数
- 从零开始学_JavaScript_系列(59)——async函数
- 从零开始学_JavaScript_系列(49)——Promise(2)then、值、catch
- 从零开始学_JavaScript_系列(54)——Generator函数(2)简单应用、throw和return
- 从零开始学_JavaScript_系列(61)——class(2)私有方法、this
- 从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)
- 从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)
- 从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)
- 从零开始学_JavaScript_系列(15)——js系列<3>(转为字符串,截取字符串)
- 从零开始学_JavaScript_系列(16)——js系列<5>(正则表达式)
- 从零开始学_JavaScript_系列(19)——js系列<6>闭包
- 从零开始学_JavaScript_系列(三)——CSS相关(基础、选择器、position、div)
- 从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)
- Haproxy Tornado笔记
- Leetcode #54. Spiral Matrix 螺旋遍历 解题报告
- LintCode:翻转链表 II
- iOS开发系列--Objective-C之KVC、KVO
- 常用正则表达式
- 从零开始学_JavaScript_系列(12)——jquery<2>(高度自适应,哈希地址及检测,单页面技术)
- Java及Python连接SQL Server数据库
- soj 1034. Forest
- 欢迎使用CSDN-markdown编辑器
- 2016.4.24
- 系统分享和友盟分享的使用
- SJ127 篮球积分器
- 快速计算素数程序
- 338. LeetCode_DP_Counting Bits