标签归档:JS

onpropertychange功能的兼容

IE的onpropertychange十分的好用,可惜的是只兼容IE,非IE就悲剧了。还好现在HTML5中的oninput已经兼容了这个功能。下面写了个测试页面,大家可以试试。

Demo:lab/onpropertychange/onpropertychange.html

看到这里,你需要知道onpropertychange的作用,还有onchange/onkeyup/onkeydown/onkeypress这几个属性的不同作用。

另外,前辈们已经写了个JS来完美支持这个特性,在Demo中也加入了进去,代码看下面


function immediately(){
	var element = document.getElementById("mytext");
	if("\v"=="v"){//判断IE
		element.onpropertychange = webChange;
	}else{//非IE
		element.addEventListener("input",webChange,false);
	}
	function webChange(){
		if(element.value){document.getElementById("test").innerHTML = element.value};
	}
}

使用建议

如果是只开发移动项目,只用oninput就OK了,如果是非移动项目,用onpropertychange+oninput基本就OK,我使用这2个方法测试了Chrome15、Opear12、IE6、IE7、IE8,均兼容,对于低版本的Chrome和Opear未测试。如果你的浏览器和我测试的不同,欢迎测试并反馈给我,万分感谢。

其他资源:

《js监听输入框值的即时变化》

《哥俩好:oninput & onpropertychange》

《A HTML5 Browser maze, oninput support》

js实现选中文字分享到腾讯新浪微博

参考来源:《js页面文字选中后分享到新浪微博实现》

补充信息:腾讯微博视觉素材 / 腾讯微博分享接口

主要思路:在zxx的demo中添加上分享到腾讯微博的功能,并且把选定文字限制在正文范围内,以太平洋电脑网文章页为例

实现过程中遇到问题:IE下腾讯微博分享的url中含有中文会引起实际分享内容乱码

解决方案:选中部分和url的中文部分使用encodeURIComponent()方法

实际效果如图:

演示地址:演示地址

核心方法:

var eleImgShare = document.getElementById("imgSinaShare");  //新浪微博图标
var eleImgShare2 = document.getElementById("imgQqShare");  //腾讯微博图标
var artMain = document.getElementById("artMain");  //限定在的id容器
 
var $miniBlogShare = function(eleShare,eleShare2,eleContainer) {  //实现方法
	var eleTitle = document.getElementsByTagName("title")[0];
	eleContainer = eleContainer || document;
	var funGetSelectTxt = function() {  //获取选中文字
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {  //限定容器若有文字被选中
		e = e || window.event;
		var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
		if (txt) {
			eleShare.style.display = "inline";
			eleShare.style.left = left + "px";
			eleShare.style.top = top + "px";
			eleShare2.style.display = "inline";
			eleShare2.style.left = left + 30 + "px";
			eleShare2.style.top = top + "px";
		} else {
			eleShare.style.display = "none";
			eleShare2.style.display = "none";
		}
	};
	eleShare.onclick = function() {  //点击新浪微博图标
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);	
		}
	};
	eleShare2.onclick = function() {  //点击腾讯微博图标
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open( 'http://v.t.qq.com/share/share.php?appkey=93807795cd1948718beee8c9677a864a&title=' + encodeURIComponent(txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href));	
		}
	};
}(eleImgShare,eleImgShare2,artMain);

大家在使用分享时可以先申请一个来源字段,这样以来,在从本站分享出去的微博都会在微博的来源中显示转自哪,如此可带来回访流量。以腾讯微博为例,在http://open.t.qq.com/中登录,选择网站主,再进入选择一键转播,填写资料,此时会显示出代码,在代码中找到【var _appkey = “801118079” || “801000271”; //你从腾讯微博开放平台获得的appkey】第一个数字串就是appkey,更换上面代码中appkey=后面的值(jucelin使用的是旧版的应用的appkey,所以比较长),同时上面会提示需要提交审核,来源字段才能生效,提交吧。通过后就OK了。腾讯通过率高,新浪的似乎比较严格。

来源字段相关说明:链接很长,点这里就行

原文转自:http://www.ryanbay.com/?p=198

jquery.bgiframe使用方法

jquery.bgiframe是用来处理IE6下select的z-index最高无法被透明层遮罩的BUG,原理也是利用IE6下的BUG,iframe可以遮罩住select,而DIV可以遮罩iframe,这样DIV也就遮罩住了select。

网上转载这个插件的文章很多,但大多都是复制过来的,来基本的错别字都没有修改。jucelin看到这个插件时就下载到了JS代码,但不知道初始化时对谁操作,于是网络中找了一会,很是失望的是,没有找到,也许是我找到的太匆忙。最后还是下载的官方包(在明河的博客上下载的),演示有,但代码中连jQuery地址错了,八成不是官方的演示代码。

OK,不发牢骚了。

插件官网及介绍原地址  https://github.com/brandonaaron/bgiframe

下载地址太长,点这里  ||  网盘下载 (都为2.1.3-pre版本)

官方演示http://sandbox.runjs.cn/show/dooztchz(下载地址中的test.html)

使用方法:

<!--[if lte IE 6]>

<script type="text/javascript" src="Js/jquery.bgiframe.min.js"></script>

<script language="javascript">

$(document).ready(function(){

$("#bg").bgiframe();//#bg是遮罩层,即设置半透明的那个DIV,其他都没用

});

</script>

<![endif]-->

使用后

jucelin在使用后,因为设置position的问题,导致遮罩层打开后select不可见,关闭时可见,这个也没去深究。另外,有网友说此插件也有BUG,详情可看这里:bgiframe的bug

2012.8.22更新

看很多朋友都有在搜索这个插件,我给下我最后的解决方法,方法很简单,在有遮罩层打开的时候将后面的select的visibility设置为hidden,关闭时可见,一般而言,我们可以专门设置IE6下的JS来设置。因为我没有使用这个插件,所以没有深入探究上面的BUG。

如果你有好的方法也可以留言。

2012.11.29更新

将官方的演示文档放在了runjs.cn上,供大家直接测试使用。演示地址:http://sandbox.runjs.cn/show/dooztchz,源码地址:http://runjs.cn/code/dooztchz

推荐一个在线JS压缩加密的工具

以前一直在使用雅虎的YUICompressor压缩,本地,速度快,压缩后的代码基本上都是成功的,不足的地方就是需要先安装java环境,在安装YUICompressor,否则使用不了。想我这种不喜欢系统慢的人,重装系统是经常的事,每次都得配置环境,累,还拖累系统。

使用在线工具,便成了理所当然的事了。使用过百度应用里面的几个压缩工具,压缩或基本都会调试失败,这点可能是应用的算法存在不同的问题,这里推荐一个在线JS压缩加密的工具。

传送地址:http://www.jb51.net/tools/packer.htm

官方网站:http://dean.edwards.name/packer/

下载地址:http://dean.edwards.name/download/#packer

jucelin这边的压缩现在基本上都是用jb51的packer,原因是jb51在我这边方式速度快,哈哈。其他的关于css的压缩,百度应用里面的应用基本上都能满足。这里特别提示下,在压缩之前需要对代码进行检查,如是否缺少分号(;),基本上只要缺少1个,压缩后的代码就会出错,更可恨的是,这是往往不能被发现的。

使用JS和正则表达式限制输入

为了保证数据的有效性,防止用户输入的不是“理想”的内容,对输入框进行限制,应该算是客户端首先判断的内容,提交后再有服务器端验证。下面是找到的一些常用的使用正则表达式进行限制的代码,供参考。需要客户端支持JS

正则表达式限制只能输入中文:(双击代码复制)

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符:(双击代码复制)

onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字:(双击代码复制)

onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文:(双击代码复制)

onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

上面是客户端的判断,在服务器端依然可以是用正则表达式进行数据验证,切记,一定需要双重验证。

演示:(只能输入数字和英文)

用JS实现表格行合并

在我们现在做的OA系统中,表格已经成为不可缺少的重要组成部分,如果没有表格,我们的工作可能会增加很多。为了美观表格,常常需要将表格中相同内容的行进行合并,表格中的专用标签就是rowspan,描述一下就是将相邻2行或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里jucelin写了个用JS实现表格行合并的代码,主要使用ID来判断的,不足是出现了相同的ID,但如果调用getElementById的话,在合并之后调用即可。

整个代码都比较简单,jucelin加入了各种判断,主要是为了匹配各种情况,也没找到相关的优化方案。

核心代码(双击代码可以编辑复制):

<script language="javascript">
function TableRowsSpan(tableID, ColList) {
	var ColArray = ColList.split(",");
	var TableName = document.getElementById(tableID);
	var TableRowsCount = TableName.rows.length;
	for (j = ColArray.length - 1; j >= 0; j--) {
		PreId = "";
		CurId = "";
		TempCount = 1;
		for (i = 0; i <= TableRowsCount; i++) {
			if (i != TableRowsCount) {
				CurId = TableName.rows[i].cells[ColArray[j]].id;
				if (CurId != "") {
					if (CurId == PreId) {
						TempCount += 1;
					}
					 else {
						if (TempCount > 1) {
							SpanRows(TableName, i, j, TempCount, ColArray[j]);
						}
						PreId = CurId;
						TempCount = 1;
					}
				}
				 else {
					if (TempCount > 1) {
						SpanRows(TableName, i, j, TempCount, ColArray[j]);
					}
					PreId = CurId;
					TempCount = 1;
				}
			}
			 else {
				if (TempCount > 1) {
					SpanRows(TableName, i, j, TempCount, ColArray[j]);
				}
				PreId = CurId;
				TempCount = 1;
			}
		}
	}
}
function SpanRows(TableName, i, j, TempCount, ColArrayj) {
	TableName.rows[i - TempCount].cells[ColArrayj].rowSpan = TempCount;
	for (m = i - TempCount + 1; m <= i - 1; m++) {
		TableName.rows[m].deleteCell(ColArrayj);
	}
}
</script>

参数说明

tableID : 表格的ID,即选择要被操作的表格

ColList : 被选表格中需要需要合并的列,从第0个开始,即第一列则填0,以半角逗号分割,超出最大值出错

演示页面

https://jucelin.com/wp-content/uploads/2012/01/TableRowsSpan.html

版权说明

JS实现表格行合并的代码是手敲的,思路是自己想的,如果你觉得有必要,就在适当的位置添加上jucelin的名字或网址。本代码自由转载,自由修改,自由使用,如果你有改进,发我一份则十分感谢。

最后声明

用JS实现表格行合并的代码你可以自由使用,但建议你根据实际需求修改后再应用到实际生产中去,避免不必要的资源浪费。越强大越智能,功能越强的代码都是以消耗资源为前提的,并不是每个产品都需要写个jQuery类型的功能库。

jQuery插件初识:Title提示插件jTipsShow

jQuery插件多如牛毛,jQuery的高手也是随处可见,作为目前主流javascript框架,jQuery已经是无孔不入。咱也跟上时髦,做点特效,自己观赏观赏,并作为以后参考。高手有时间帮忙指导指导,先谢过。

一、写在前面的话:

jucelin也是初学者,写这么个小插件用了一个上午的时间,真是会者不难,难者不会。虽说Title提示类插件已经有很多高手写出来了,如张鑫旭的jQuery万能浮动框插件,功能很强大,但就是有些代码还看不懂,所以自己用最简单的方法,自己学习写了个。

再者工作中经常要用到使用表格来显示数据,但苦于界面宽度及页面美观的限制,一些内容只能显示部分,显示全部则用title来显示,可惜的是IE的一个怪毛病,鼠标放上去之后一段时间后显示,显示一段时间后就会消失,如果内容较多,使用者准备仔细阅读时,显示的title就消失了。鉴此需求,写个脚本,应该还算值,原本用在单页面的,在对jQuery插件的好奇心下,就封装成一个插件。

二、jQuery插件的基础知识

jQuery为开发插件提拱了两个方法,分别是jQuery自身类的拓展和给jQuery对象添加方法。

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法

//插件定义
(function($) {
	$.extend({
		trim: function(obj) {
			return (obj + ' trim');
		}
	})
})(jQuery);

//调用
alert($.trim('aa'));

2.jQuery.fn.extend(object);给jQuery对象添加方法

//插件定义

(function($) {

$.fn.alertWhileClick = function() {

$(this).click(function (){

alert($(this).val() + "2");

});

}

})(jQuery); //页面上为:<input id="input1" type="button" value="test"/>

//调用

$('#input1').alertWhileClick();

三、上代码

请直接访问这里:jQuery-tipsShow

四、插件使用方法

1.先引入jQuery,在引入jTipsShow

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery-tipsshow.js"></script>

2.调用插件

<script language="javascript">

$(document).ready(function(){

//span-title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'title'

});

//span-rel,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'rel'

});

//td=title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'td',

tipsTitle: 'title'

});

});

</script>

3.初始化参数说明

titleValue: '',//title的默认值,这个基本上没什么用,初始化了也会被替换掉,添加在插件中主要是全局使用

tipsTag: 'span',//需要显示内容的容器

tipsTitle: 'title',//显示框中要显示的内容

delaytime:500//延时,特效用的

另外被查找的容器tipcontain会被定义成position:relative,所以需要注意样式。

五、总结下

原本参考着别人的插件写的,没有查看jQuery插件的基础知识,导致两种方法弄混了,怎么调试都出错,不会走,就想跑了,呵呵,惭愧下。这个插件还是可以继续拓展的,而且效率方面可能也不是最优的,因为我还没学习到这块的内容,以后再看看能不能优化,也希望你能停下脚步,帮俺看看。

下载插件JShttps://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js

在线演示文档:https://jucelin.com/wp-content/uploads/2012/01/jTipsShow.html

六、参考资料:

jQuery插件开发:http://www.zhuoda.org/irini/112855.html

jQuery插件开发全解析:http://www.iteye.com/topic/545971

jquery插件开发范例—A Plugin Development Pattern:http://www.iteye.com/topic/349020

更多参考资料请google:http://www.google.com

网页下雪JS代码

圣诞节了,看到网易的活动页面上有个下雪的特效,就下下来看看,使用的是JS特效,看的比较浅,目前只会简单的使用下,不知道有没有高手能解析下。这里贴出来网页下雪JS代码,如果需要的朋友可以玩玩。

显示样式

正如你在我的博客上看到的,全屏,背景建议不是纯白,否则看不到雪花,你不可能把雪花调彩色吧,哈哈。(好吧,我的博客背景有些白,看的不明显,正考虑要不要调成彩色的,可找了半天没彩色的雪花,如果你有,记得给我个哦,蓝色的就算了,因为我链接的颜色的是蓝色的)

使用方法:

直接复制下面的代码粘贴到你博客页面底部模版。

<script type="text/javascript" language="javascript">

(function(){function k(a,b,c){if(a.addEventListener)a.addEventListener(b,c,false);else a.attachEvent&&a.attachEvent("on"+b,c)}function g(a){if(typeof window.onload!="function")window.onload=a;else{var b=window.onload;window.onload=function(){b();a()}}}function h(){var a={};for(type in{Top:"",Left:""}){var b=type=="Top"?"Y":"X";if(typeof window["page"+b+"Offset"]!="undefined")a[type.toLowerCase()]=window["page"+b+"Offset"];else{b=document.documentElement.clientHeight?document.documentElement:document.body; a[type.toLowerCase()]=b["scroll"+type]}}return a}function l(){var a=document.body,b;if(window.innerHeight)b=window.innerHeight;else if(a.parentElement.clientHeight)b=a.parentElement.clientHeight;else if(a&&a.clientHeight)b=a.clientHeight;return b}function i(a){this.parent=document.body;this.createEl(this.parent,a);this.size=Math.random()*5+5;this.el.style.width=Math.round(this.size)+"px";this.el.style.height=Math.round(this.size)+"px";this.maxLeft=document.body.offsetWidth-this.size;this.maxTop=document.body.offsetHeight- this.size;this.left=Math.random()*this.maxLeft;this.top=h().top+1;this.angle=1.4+0.2*Math.random();this.minAngle=1.4;this.maxAngle=1.6;this.angleDelta=0.01*Math.random();this.speed=2+Math.random()}var j=false;g(function(){j=true});var f=true;window.createSnow=function(a,b){if(j){var c=[],m=setInterval(function(){f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));!f&&!c.length&&clearInterval(m);for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)if(c[d])if(c[d].top<e||c[d].top+c[d].size+1>e+n){c[d].remove(); c[d]=null;c.splice(d,1)}else{c[d].move();c[d].draw()}},40);k(window,"scroll",function(){for(var e=c.length-1;e>=0;e--)c[e].draw()})}else g(function(){createSnow(a,b)})};window.removeSnow=function(){f=false};i.prototype={createEl:function(a,b){this.el=document.createElement("img");this.el.setAttribute("src",b+"http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif");this.el.style.position="absolute";this.el.style.display="block";this.el.style.zIndex="99999";this.parent.appendChild(this.el)},move:function(){if(this.angle< this.minAngle||this.angle>this.maxAngle)this.angleDelta=-this.angleDelta;this.angle+=this.angleDelta;this.left+=this.speed*Math.cos(this.angle*Math.PI);this.top-=this.speed*Math.sin(this.angle*Math.PI);if(this.left<0)this.left=this.maxLeft;else if(this.left>this.maxLeft)this.left=0},draw:function(){this.el.style.top=Math.round(this.top)+"px";this.el.style.left=Math.round(this.left)+"px"},remove:function(){this.parent.removeChild(this.el);this.parent=this.el=null}}})();

createSnow("", 80);

</script>

注意看下最后一句话,上面的是函数,打乱了,createSnow(“”, 80);就是调用上面的函数,共2个参数,第二个参数就是密度,简单点就是页面上显示多少个雪花,切记不要调的太高,不然可能导致硬件不好的电脑卡死;第一个我也不知道是干嘛的,JS我了解的也不是很多,随便给个值的话,雪花图片被修改了,可给定雪花地址,显示依然出错,望高手解析。

或者直接在页面模版末尾添加下面的代码

<script type="text/javascript" src="http://hd3.mail.163.com/christmas/js/snow.js"></script>
<script language="javascript">
createSnow("", 800);
</script>

注意的地方

1. JS中指定了雪花图片的链接,记得修改为自己的雪花图片哦,否则人家图片地址换了,就没了。

2. 记得放在</body>前面,避免JS的下载影响了前面正文内容的下载,这样做基本上可以实现页面已经加载完成,雪花才开始飘。

3. 不知道怎么在模版里面添加?以WP为例,后台-外观-编辑-右侧选择“底部(footer.php)”-看到</body>没?就在之前回车,在空行上直接添加调用snow.js,也可以直接把上面最长的代码复制上去。

4. 删除的方法:请参照3,但要求倒着操作。

相关资料

JS来自页面:http://quan.163.com/activity/index.do

JS链接地址:http://hd3.mail.163.com/christmas/js/snow.js(这里只是JS的函数,需要createSnow(“”, 800);来调用)

雪花图标:http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif(如果修改请在上面的JS上直接替换就行,建议绝对地址)

jucelin雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow.gif(圣诞节过后会撤掉)

蓝色的雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow_blue.png(适合博客背景色为纯白色的)

圣诞节快到了,jucelin提前恭祝各位我认识的、认识我的、以及不认识的天天发财,身体倍棒。

省市县城市联动JS库

插件名称:PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.02 完整版

官方地址:http://www.popub.net/script/pcasunzip.html

使用说明:

演示地址:http://www.popub.net/script/pcasunzip.html

下载地址:http://www.popub.net/script/pcasunzip.js

应用说明:页面包含<script type=”text/javascript” src=”pcasunzip.js” charset=”gb2312″></script>

省市联动

new PCAS("Province","City")

new PCAS("Province","City","吉林省")

new PCAS("Province","City","吉林省","吉林市")

省市地区联动

new PCAS("Province","City","Area")

new PCAS("Province","City","Area","吉林省")

new PCAS("Province","City","Area","吉林省","松原市")

new PCAS("Province","City","Area","吉林省","松原市","宁江区")

new PCAS("Province","City","Area","","","")

省、市、地区对象取得的值均为实际值。

注:省、市、地区提示信息选项的值为””(空字符串)

使用案例:

<script type="text/javascript" src="pcasunzip.js" charset="gb2312"></script>

<select name="Province" ></select>

<select name="City"></select>

<select name="Area"></select>

<script language="javascript">

new PCAS("Province","City","Area","","","");

</script>

省:市:县:

 JS库下载:pcasunzip

IE下使用JavaScript画直线

因为项目的需求,需要在客户端绘制直线,以达到2点连线的情况。首先想到的就是使用JS了。百度里面Google了下,用JS画直线可以实现,但问题比较大,最简单的就是使用IE的VML画直线,在非IE下基本上都是使用HTML5画直线或形状。

先看下下面的例子

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><!--这里需要引入vml-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
    v\:*{behavior:url(#default#VML);}/*这里需要定义样式,IE8下有所改变,下文提到*/
</style>
</head>
<body>
<v:line
from='200,200' <!--说是直线,实际上是线段,通过2个点来确定直线,这里是始点-->
to='600,100' <!--指定线段的终点-->
style='position:absolute;z-index:8'> <!--CSS样式-->
<v:stroke EndArrow="Classic"/><!--这里指定终点的样式,Classic就是箭头-->
</v:line>
</body>
</html>

测试上面的代码,放在IE下浏览,应该看到了一条带箭头的直线。看了上面的注释,应该多少了解一点。这里是使用的纯HTML方式画的直线。

什么是VML

VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间。VML不仅可以用来画直线,对于矩形、圆形、图像等都可以简单的实现。具体的可以参考下面的几个文档:

VML基本概念:http://www.cnblogs.com/zr824946511/archive/2010/02/25/1673520.html

VML中文手册:http://www.itlearner.com/code/vml/(须使用IE访问,否则不能看到实例效果)

特别的IE8+

jucelin也是刚刚能基本实现画直线的效果,可测试时发现IE8下面居然一片空白,百度里面Google了一下,发现IE8对VML进行了修改,所以蛋疼的问题又出来了。本来不同内核的浏览器下实现方式就不同,不同的IE还有不同的设计要求。伤不起。。。

IE8修改的地方:E文 http://ajaxian.com/archives/the-vml-changes-in-ie-8

译文:http://www.cnblogs.com/mingle/archive/2009/10/18/1585651.html

JS实现画直线

既然在IE8+下会有不同的设计方法,那么在写的时候也一起加上吧。实际上JS实现比较简单,下面是jucelin写的一段,贴出来分享下,希望得到高手的指导。

<html xmlns:v= "urn:schemas-microsoft-com:vml ">
<head>
<title>IE下使用JavaScript画直线-Power by jucelin</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
v\:*{behavior:url(#default#VML);}
</style>
<script language="javascript">
function showline(){
	var v=document.createElement("<v:line></v:line>");
	var t=document.createElement("v:Stroke");
	//v.style="z-index:5;position:absolute;left:200;top:200";
	v.to="150,100";
	v.from="0,0"
	v.strokecolor="red";
	v.strokeweight="2px";
	t.EndArrow="Classic";
	v.appendChild(t);
	document.getElementById("id1").appendChild(v);
}
</script>
</head>
<body onLoad="showline()">
<div id="id1">
<!-- 上面的JS就是根据下面这段代码原型写的
	<v:line style="z-index:5;position:absolute;left:200;top:200" to= "0,150" strokecolor= "red" strokeweight= "2px">
	<v:Stroke dashstyle="shortdot" endarrow='classic'/>
	</v:line>
-->
</div>
<div style="font-size:22px; z-index:99">
<span style="z-index:100">123</span><span style="color:green; z-index:101; margin-left:-15px;">好</span>
</div><
</body></html>

为了使IE8下有效果,就在上面的代码上加了下面的一句话,以强制IE8+下显示IE7下的效果

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

上面的代码在IETest中测试通过,非IE下无效果(虽然知道不能实现,但还是抱着一点运气,呵呵)。

上面的代码中我还注释掉了一段代码,v.style在设置之后会提示找不到属性,jucelin现在不明白到底怎么回事。另外测试上面的代码还发现了奇怪的问题,我并没设置直线的style,而它的z-index属性仍然是最高的,而且<div id=”id1″>的position的属性是absolute。

再修改<div id=”id1″>的CSS属性

<div id="id1" style=" background:#000000; border:10px solid #000;">

显示的就是上面图2 的内容,具体是意义,其实也只是证实上一段的内容。

非IE浏览器下实现JS画直线

今天test到现在其实也就测试了IE下的,非IE下的基本上都是说通过HTML5来实现,具体的可以参考下面的一些文档:

在Firefox下画直线:http://www.cnblogs.com/youring2/archive/2009/07/25/1530862.html

HTML5教程:http://www.w3school.com.cn/html5/index.asp

HTML5绘图元素Canvas的使用说明:http://www.w3school.com.cn/html5/html_5_canvas.asp
上面提供的代码jucelin在chrome11.0,Firefox3.0,Opera11.52下均测试可以,因为这些浏览器都已经支持HTML5了,IE8目前还不支持HTML5的全部元素,希望IE9众望所归。

使用jQuery画直线

既然上面讨论了不同的浏览器有不同的设计方式,特别是蛋疼的IE,那么大虾们肯定会想到兼容所有的代码,jucelin首先想到的就是jQuery,呵呵,主要是jQuery可以解决很多兼容性的问题。

这里也不多说,因为我也还没研究,发现很多的插件很强大,如果只是用来画直线,都有点大材小用了。有时间的朋友可以参考下面写jQuery插件,我也会再看看,俺只要画直线,呵呵。

10 jQuery Drawing Plugins:http://www.jquery4u.com/plugins/10-jquery-drawing-plugins/

写在最后的话

1. 痛恨IE9之前的版本,因为它很蛋疼。

2. 在找资料的时候看到有点人提供了纯JS的方式,其实就是画点成线的原理来画“直线”,这样的方式很容易理解,写起来也比较简单,但关键是效率比较低,如果直线很长,就会很明显的增加IE的劳动量,用户体验很差。这个方法只能说在短距离,直线数目少的情况下考虑使用。

3. IE独有的VML很强大,使用起来速度一流,但多版本的设计确实让设计者很头疼。如果产品只是在IE下使用,jucelin还是推荐使用VML画直线。

4. 突然突然突然发现IETest和DW8有冲突,为了测试IE8下效果,电脑死机了2次,泪奔啊。。。

html+css判断各个IE浏览器版本

在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了。

HTML代码中,区别各种浏览器的代码如下(以ie6为例,这时目前国内用户最多的,得益于盗版xp系统的广泛流传….不过这玩意也是绝大部分兼容性问题的根源,因为其标准化程度实在是….):

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

<!--[if lte IE 6]> IE6及其以下版本可识别 <![endif]-->

<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6及其以上版本可识别 <![endif]-->

<!--[if gt IE 6]> IE6以上版本可识别 <![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

lte:就是Less than or equal to的简写,也就是小于或等于的意思。

lt :就是Less than的简写,也就是小于的意思。

gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

gt :就是Greater than的简写,也就是大于的意思。

! :就是不等于的意思,跟javascript里的不等于判断符相同

以上这些代码写法都是针对ie各版本浏览器的,在其他浏览器中这些代码都会被解释为Html注释而直接无视掉,所以要想些针对firefox之类的非ie浏览器,需要这么写:

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>

—————————————————————————————————————————————

CSS代码中,则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码,例如为IE系列浏览器可读[\9],而IE6和IE7可读[*],另外IE6可辨识[ _ ](下划线);由于CSS读取时是按从上到下来的,同样属性靠后写的生效,因此可以依照顺序写下来,就会让每个浏览器正确的读取到自己看得懂得CSS语法,有效区分各类型或版本:

.classname{

background:blue; /*Firefox等非IE浏览器背景变蓝色*/

background:red \9; /*IE8 背景变红色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

类似的还有:

.classname {

background:black !important; /*非IE6 背景变黑色*/

background:orange; /*IE6 背景变橘色*/

}

解释下!important属性:!important意思是将该css样式提权,优先级别加高,而只有IE6以上版本才支持这个属性,所有可以用来区别IE6与其他版本的IE。