张经纬的博客-分享互联网

jQuery Select(单选) 模拟插件 V1.3.5

08月29日更新 V1.3.5

a、修正safari下的样式问题
b、使用其他的方法生成select后面的下拉箭头
c、增加对鼠标滚轮的支持。
d、一些细节上的写法。

Demo:http://www.zhangjingwei.com/demo/jQuery.Select/index.html

您可以自由的使用这个开源项目在任何项目上。(商业、非商业)
希望您可以补充完善这个插件。

 

08年12月写的插件,好像有一些朋友在用,那个时候写的东西,现在看来写的很烂很烂,因为工作原因也没有时间去修改。
今天看到回复中的很多问题,兼并解决了一些,因为写的不好,所以各位使用者在遇到问题并修正后,还请直接回馈给我,我修改下。

插件勉强能用,多多包涵了,工作是在太忙了,3年了….

原文链接(30 views)|评论 (4)

动态加载js

本文让js动态加载,这样原本串行加载的js就变成并行了。

先看两个demo

demo_00:http://www.zhangjingwei.com/loadscript/demo_00/

demo_00

再看demo_01:http://www.zhangjingwei.com/loadscript/demo_01/

demo_01

很明显,demo_01中,js异步加载,没有阻挡图片的下载

让我们看看他是如何实现的。

var loadscript =
{
	$$:function(id){return document.getElementById(id)},
	tag:function(element){return document.getElementsByTagName(element)},
	ce:function(element){return document.createElement(element)},
	js:function(url)
	{
		s = loadscript.ce('script');
		s.type = "text/javascript";
		s.onreadystatechange = ready;
		s.onerror = s.onload = complete;
		s.src = url;
		loadscript.tag('head')[0].appendChild(s);
		function ready(){}
		function complete(){}
	}
}

代码很简单,但我们忽略了一个很重要的问题。
虽然JS是异步加载了,但他们下载的顺序却不确定,万一B先与A加载,并且B调用了A内的函数呢?
这种情况在IE里经常出现。
2009-08-17_004534

2->1->3->4->6->5 就是这些js的加载顺序,现在我们想让他们变成1->2->3->4->5->6。怎么办?

我们增加一个回调,让他在第一个加载完成后再加载第二个。

var loadscript =
{
	$$:function(id){return document.getElementById(id)},
	tag:function(element){return document.getElementsByTagName(element)},
	ce:function(element){return document.createElement(element)},
	js:function(url,callback)
	{
		s = loadscript.ce('script');
		s.type = "text/javascript";
		s.onreadystatechange = ready;
		s.onerror = s.onload = callback;
		s.src = url;
		loadscript.tag('head')[0].appendChild(s);
		function ready(){
			if (s.readyState == 'loaded' || s.readyState == 'complete') {
				callback();
			}
		};
	}
}

这样写得到了我们想要的结果。
demo_02:http://www.zhangjingwei.com/loadscript/demo_02/

02

可是加载它的方法很臃肿。

loadscript.js('js1.js',function(){
  loadscript.js('js2.js',function(){
	loadscript.js('js3.js',function(){
	  loadscript.js('js4.js',function(){
		loadscript.js('js5.js',function(){
		  loadscript.js('js6.js',function(){
		  });
		});
	  });
	});
  });
});

改进一下 (同步加载)
demo_03:http://www.zhangjingwei.com/loadscript/demo_03/

var loadscript =
{
	$$:function(id){return document.getElementById(id)},
	tag:function(element){return document.getElementsByTagName(element)},
	ce:function(element){return document.createElement(element)},
	ls:function (url){
		var req = this.createXmlHttp();
		req.open('GET',url, false);
		req.send(null);
		//alert (req.status);
		if (req.status == 200 || req.status == 0) {
			window.eval(req.responseText);
		};
	},
	createXmlHttp: function (){
		var xmlHttp;
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}else if (window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
		return xmlHttp;
	}
}

看看效果如何。
03

js确实是串行下载了,可问题又来了,因为是同步加载又将图片的加载阻止了。

鱼与熊掌不可兼得么?有知道的朋友还请留言赐教。

干活去了! :)

原文链接(323 views)|评论 (7)