jQuery函数:getScript()

Posted by & filed under Uncategorized.

转载于http://qianduanblog.com/post/jquery-getscript-1.html 目前做的主题,含有大量的js,以前是全部压缩到2个文件里的,两个文件都很大,在现代浏览器中运行毫无压力。但是,对于残疾的ie来说,那简直就是受罪。会随机出现以下状况: 1、js加载无任何错误,但就是没有特效。 2、js加载总是失败。 3、js加载过慢,导致用户失去耐心。 4、js加载过多,导致浏览器性能下降不少。 目前这款主题,是越做越杂了,超过了当时简洁的想法,几乎涵盖了所有能想到的内容。所以,在对待所有浏览器相同的待遇时,ie的表现让人蛋疼不已。所以有了以下几个方法: 1、屏蔽ie的部分特效。 2、异步加载js文件,用到该文件再加载,并且不重复加载。 目前已修改完毕,等待测试。 当然,这里主要讲的就是getScript方法,这个方法是$.ajax的高级方法,就像$.post,$.get一样是封装好的ajax特殊用法。getScript可以这么用: if($.fn.cookie)//这里以jquery-cookie.js插件为例 { Read more […]

jQuery函数getScript()优缺点以及遇到的问题

Posted by & filed under Uncategorized.

转载于http://qianduanblog.com/post/jquery-getscript-2.html 1、getScript方法介绍  Load a JavaScript file from the server using a GET HTTP request, then execute it. ——官方如是说 有两个特征,一是能够使用get的http请求服务器资源下载到本地,二是能够在加载完毕之后并执行这个脚本。它的深层次的写法是这样的: $.ajax({ url: url, dataType:”script”, success: success }); getScript是它的高级用法,如get、post、getJSON差不多,都是基于ajax的运用和延伸。可以这么用: $.getScript(“ajax/test.js”,function(data, textStatus, jqxhr){ console.log(data);//data returned console.log(textStatus);//success console.log(jqxhr.status);//200 console.log(‘Load was performed.’); }); 完整使用方法是这样的: $.getScript(“ajax/test.js”) .done(function(script, Read more […]

wordpress简单页面载入进度条实现方法

Posted by & filed under Uncategorized.

转载于http://qianduanblog.com/post/wordpress-simple-progress-bar.html 谷歌一下进度条,99%的内容都是这么说的,在页面头部写一个进度条移动到10%,然后在页面中部使进度条移动到50%,然后在页面尾部使进度条移动到100%,这么做看起来很完美很符合常理,但这么做有个弊端,因为图片的加载是异步加载的,有时候图片什么的没有加载完毕,进度条就已经100%了。所以判断进度条到100%就必须在页面所有元素全部载入之后才可以。 下面是我写的方法,只需要添加一处js就可以了,并且是在页面全部加载完毕之后才跳到100%的。许多朋友要我写进度条,不是我不想写,是因为之前有些错误,现在是已经修正了,所以就贴出来了。代码很少,部分地方已经注释了。 最后更新:2013年3月28日 Read more […]

jquery:点击回到顶部以及定点滚动

Posted by & filed under Uncategorized.

转载于http://qianduanblog.com/post/jquery-click-to-scroll-to-top.html 1、思路 DOM的每个标签以及浏览器本身都有一个scrollTop属性,这不是CSS可以控制的(目前),这个值指的是在一个指定的容器内当前可视顶部距离内容顶部的距离,如果这个容器是浏览器的话,那么滚动条的上边距就是这个值。 那么,如果想要回到顶部的话,设置scrollTop的值为0即可,滚动到指定位置也可以设置这个值为指定的数值。 设置scrollTop为0: $(window).scrollTop(0); 设置scrollTop为指定数值: var T=200;//这个是number类型,不需要带px $(window).scrollTop(T);  2、方法 如1设置的话,浏览器会在瞬间改变滚动条的位置,没有滚动的效果。如果要滚动的话,我们就需要慢慢的改变scrollTop的值就好。那么如何来做呢? 依照上面的经验,我们可能这么写: var Read more […]

jquery 1.7和1.9的position方法对固定(fixed)元素的区别

Posted by & filed under Uncategorized.

转载于http://qianduanblog.com/post/jquery-1-7-and-1-9-position-position-fixed.html 在jquery的position方法,官方是这样说明的: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element. 大致意思是获得匹配元素相对于最近定位父级的距离,返回left、top值。 在CSS中有一个定位属性是比较特殊的,那就是固定属性(fixed),固定元素是相对于文档的,与页面滚动的距离无关。这一点,在jquery的1.9版本之前与1.9版本是有2种不同的解释的。关于这个区别,没有在官方的jquery升级指南里指出来,这里就抛钻引玉一下下啦。 jquery Read more […]

内边距、滚动条、内容、client的暧昧尺寸关系之边框盒模型

Posted by & filed under Uncategorized.

http://qianduanblog.com/post/css-learning-20-padding-scrollbar-content-client-relationship.html 二、边框盒模型 在css3中,推出的边框盒模型与css2中的内容盒模型,更加增加了计算各种宽度的难度。在css2中,css中的width指定的是content内容区域的宽度,然后是内边距和边框;而在css3中为了适应更多的实际需求,边框盒模型的width指定的是border+padding+content的宽度。诚然,除了内容盒模型、边框盒模型,还有内边距盒模型,目前只有火狐支持,该模型实际使用频率不高,可能会被未来放弃。 可以使用box-sizing来指定盒模型: /*边框盒模型*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: Read more […]

内边距、滚动条、内容、client的暧昧尺寸关系之内容盒模型

Posted by & filed under Uncategorized.

转载至http://qianduanblog.com/post/css-learning-20-padding-scrollbar-content-client-relationship.html 一、内容盒模型 1、无内边距无滚动条   如上图,鼠标指向的蓝色区域的宽度是100px,是如何计算的呢? contentWidth(内容宽度)= cssWidth(css宽度)- scrollBarWidth(垂直滚动条的宽度) =100-0 =100 clientWidth(可视宽度)= cssWidth(css宽度) + paddingLeft(左内边距)+ paddingRight(右内边距)- scrollBarWidth(垂直滚动条的宽度) =100+0+0-0 =100 styleWidth(样式计算后宽度)= cssWidth(css宽度)- scrollBarWidth(垂直滚动条的宽度) =100-0 =100 demo1:http://demo.qianduanblog.com/2944/1.html 2、无内边距有滚动条   如上图,鼠标指向的蓝色区域的宽度是88px,是如何计算的呢? contentWidth(内容宽度)= Read more […]

DOM元素的prev、next和siblings

Posted by & filed under Uncategorized.

转载至http://qianduanblog.com/post/yquery3-dom-elements-prev-next-and-siblings.html 1、this访问控制 $.fn._access =function(){ if(this.length)return callback.call(this); elsereturnthis; }; 只在当元素集合长度大于0的时候才执行回调,否则返回this。我们约定,下划线开始的对方法、属性为私有方法、私有属性。 2、prev,前一个兄弟 /** * 获取当前元素的前一个兄弟元素 * @return new this * @version 1.0 * 2013年12月29日2:06:02 */ $.fn.prev =function(){ returnthis._access(function(){ return $(this[0].previousElementSibling); }); }; 3、next,后一个兄弟 /** * 获取当前元素的后一个兄弟元素 * @return new this * @version 1.0 * 2013年12月29日2:06:02 Read more […]

初识Highcharts

Posted by & filed under Uncategorized.

转载至http://www.cnblogs.com/lanmaoluliu/archive/2013/03/12/2955092.html (1)去掉或更改图片右下角的链接 在highcharts.js文件中搜索credits字符串,找到如下的字符串, enabled:设置是否显示链接 text:设置链接显示的名称 href:设置链接的url (2)去掉图片右上角的打印及导出按钮 在js中设置以下代码: exporting: { enabled: false //用来设置是否显示‘打印’,’导出’等功能按钮,不设置时默认为显示 }, Highcharts图表呈现数据以后,用户也许会根据实际项目需要打印或者导出这个图表,那么Highcharts图表控件右上角的打印、导出按钮该如和实现呢? 搜首先引入<script src=”JavaScript/exporting.js”></script> 这个文件,这里我已经将这个js复制到本地了. /** * Read more […]

js鼠标滑轮滚动事件绑定(兼容主流浏览器)

Posted by & filed under Uncategorized.

转自http://qiaolevip.iteye.com/blog/1673396 /** Event handler for mouse wheel event.          *鼠标滚动事件          */         var wheel = function(event) {             var delta = 0;             if (!event) /* For IE. */                 event = window.event;             if (event.wheelDelta) { /* IE/Opera. */                 delta = event.wheelDelta / 120;             } else if (event.detail) {                 /** Mozilla case. */                 /** In Mozilla, sign of delta is different than in IE.                  * Also, delta is multiple of 3.                  */                 delta = -event.detail / 3;             }             /** If delta is nonzero, handle it.              * Basically, delta is now positive if wheel was scrolled up,              * and negative, if wheel was scrolled down.              */             if (delta)                 handle(delta);             /** Prevent default actions caused by mouse wheel.              * That might be ugly, but we handle scrolls somehow              * anyway, so don’t bother here..              */             if (event.preventDefault)                 event.preventDefault();             event.returnValue = false;         }         /** Initialization code.           * If you use your own event management code, change it as required.          */         if (window.addEventListener) {             /** DOMMouseScroll is for mozilla. */             window.addEventListener(‘DOMMouseScroll’, wheel, false);         }         /** IE/Opera. */         window.onmousewheel = document.onmousewheel = wheel;         /** This is high-level function.          * It must react to delta being more/less than zero.          */         var handle = function(delta) {             var random_num = Math.floor((Math.random() * 100) + 50);             if (delta < 0) {                 // alert(“鼠标滑轮向下滚动:” + delta + “次!”); // 1                 $(“btn_next_pic”).onclick(random_num);                 return;             } else {                 // alert(“鼠标滑轮向上滚动:” + delta + “次!”); // -1                 $(“btn_last_pic”).onclick(random_num);                 return;             }         } Read more […]