标签归档:前端

用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类型的功能库。

CSS换行的那些事

CSS网页布局中,常常会遇到这样的问题,强制文字换行,而不是在一行内显示撑开容器影响布局。而有些时候可能会强制内容不换行,多出的

部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性52CSS.com作一些整理,希望能给大家的工作和学习提供参考。

先了解以下几个属性:

强制不换行

p.xx {

white-space:nowrap;

}

自动换行

p.xx {

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

p.xx {

word-break:break-all;

}

CSS设置不换行:

overflow:hidden 溢出隐藏

white-space:nowrap 不换行

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

CSS设置强制换行:

word-break:break-all 强制断开实现转行

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

几个重要属性的补充阅读:

white-space:http://www.52css.com/css/c_whitespace.html

word-wrap:http://www.52css.com/css/c_wordwrap.html

word-break:http://www.52css.com/css/c_wordbreak.html

overflow:http://www.52css.com/css/c_overflow.html

欢迎大家补充,52css.com提供了更多实例供大家参考。

原文摘自52css.com,原文地址:http://www.52css.com/article.asp?id=767

IE BUG:内联的图片超链接失效

BUG描述下先:在标签<a>下加入<span>和<img>标签,并将<a>和<span>标签定义为display:block,设定大小,测试发现鼠标放在图片是不会显示手型,图片的链接也“失效”了(其实未失效,下面解释),点击没有任何效果,但点击<a>标签的空白位置,链接依然有效。

适用平台

IE6-8下出现,IE9未测试,Chrome正常。

BUG重现

下面是专门写的一个测试页面,有兴趣的可以测试下。

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE BUG:内联的图片超链接失效 - Design by jucelin.com</title>

<style>

.test-a{display:block; width:100px; height:100px; background:#eee;}

.test-a .test-img{display:block; width:50px; height:50px; background:yellow;}

.test-a .test-title{display:block;}

</style>

</head><body>

<div>

<a href="https://jucelin.com" target="_blank">

<span><img src="Images/form.png" border="0" /></span>

<span>jucelin.com</span>

</a>

</div>

<div>

<a href="https://jucelin.com" target="_blank" class="test-a">

<span class="test-img"><img src="Images/form.png" border="0" /></span>

</a>

</div>

</body></html>

下面是测试的截图(图片丢失):

图中的鼠标应该是正常的鼠标,单截图没办法截下鼠标的样式,就随便找了个样式演示下。

从测试可以看出来,图片的链接实际上仍然存在的,鼠标放上去之后在IE的状态栏中显示了链接的地址,但单击时,则链接无法相应。jucelin也解释不了这其中的原因,只能记下来自己以后注意下。

解决办法

有BUG 就找个Hack的方法补补,将img所在的span添加position:relative; z-index:-1;样式,就是将span的层级放到a的下方,此时的要求是a不能有背景色,否则img就看不到了。另外使用JS也可以很好的解决。

相关文档

IE6,7中, 图片导致超链接失效的bug:http://blog.163.com/thinker_creator/blog/static/101933149200941994831531/

网页下雪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

网站到底还需不需要兼容IE6?

现在的网站到底还需不需要兼容IE6?wordpress宣布将在下一代版本中不再兼容IE6,如此消息相信会让很多中国用户放弃对WP的进一步升级。前几日看到某设计师出售的最新主题,非常不错,唯一不足是不兼容IE6,留言问其原因,得到的回复是放弃对IE6兼容,而其主题在IE6下可谓是错乱不堪,一塌糊涂。

从CNZZ的统计数据来看,IE6在国内的使用率还是第一,如果加上那些穿上马甲的IE6,IE6依然位居榜首。让我很是困惑的是很多的前端设计师都在选择放弃兼容IE6,现在放弃是否是时候?jucelin在设计网站的时候,总是在思考兼容IE6,因为IE6确实是让人蛋疼的事,看到这么多牛人都在放弃IE6,是否也应该响应他们的号召?

实际上我们应该做的还是以用户为主,不应该让用户因为我们而改变,正如QQ和360打架的时候强制要求卸载360的动作让很多用户感到反感一样。这也算是用户体验了吧。

从网站的用户分别出发,对于国内用户,用户的浏览器主要以IE为主,此时IE6的用户应该仍然占主流,对应国外的用户,IE6则早已成过去时,外贸网站则不用考虑兼容IE6了,其他面向国内的,你是否该考虑下。

从网站的主题来看,什么技术类的,计算机专业类的,这些网站的用户基本都会为自己升级浏览器,IE6估计早已成为他们唾弃的对象。其他像什么食谱类的,散文类的,用户还是以普通大众为主,他们是能用就行,因为他们不知道还有更好的,如此一来,也是得考虑兼容了。

如此说来,基本上都得兼容IE6,你还有其他理由不兼容吗?IE9确实是未来的趋势,IE6也正在走向消亡的道路,但路漫漫其修远兮,哥们为你的用户想想吧。一打开网站,就和百度快照一样,还是加了样式的快速版,用户看了早走了。

话说,兼容归兼容,咱有不一定要求在其他浏览器一样的效果,咱至少让IE6用户看到头部导航还在画的圈子里面待着就行。加速IE6消亡的不应该是小网站,应该让大的门户网去做,想想360的软件管家,IE6直接被提示要更新,这样的提示每天可以干掉多少IE6?要是哪天QZONE的右下角提示“升级IE6,看更美的空间”,又会有一大票IE6被升级掉。

高效 CSS 指南

避免通用类

确保选择器不是以通用类结束。

不要用标签名或class来描述ID类

如果你有一个选择器是以ID类作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。

差 – button#backButton { }
差 – .menu-left#newMenuIcon { }
好 – #backButton { }
好 – #newMenuIcon { }

不要用标签名来描述 class 类

和上一条类似,所有的 class 也是唯一的。你应该把标签名包含在 class 名中。

差 – treecell.indented { }
好 – .treecell-indented { }

尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。

差 – treeitem[mailfolder="true"] > treerow > treecell { }
好 – .treecell-mailfolder { }

避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。

差 – treehead treerow treecell { }
好一点,但还是不行(参照下一条) – treehead > treerow > treecell { }

标签类中不要包含子选择符

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)

差 – treehead > treerow > treecell { }
最好 – .treecell-header { }

留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。

差 – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

好 – .tree-folderpane-icon[IsImapServer="true"] { }

运用继承

理解哪个属性会继承,并允许他们这么做!我们已经清楚地建立了 XUL widgetry(?) ,所以你可以把 list-style-image 或 font 属性设置在父标签上,然后他会渗透到匿名内容里。这样,你就不需要浪费时间在匿名内容上直接写声明了。

差 – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
好 – #bookmarkMenuItem { list-style-image: url(blah); }

在上面的例子中,定义匿名内容样式的需求(不用去搞明白 list-style-image 是如何继承的)导致需要一个 class 类的选择器,而这条规则实际上更应该以最唯一的 ID 类结尾。
请记住,特别是在匿名内容中,他们都拥有相同的 class 。上面那条不好的选择器写法导致每个菜单的图标都会被检查是否包含在收藏夹菜单栏目中。这是非常耗资源的(因为有很多菜单);这个选择器应该不要被收藏夹以外的菜单检查。

使用 -moz-image-region

把很多图片组合在一张图片里,然后用 -moz-image-region 来选择他们,会比每张图片分开存储,执行效率上高很多。

原文转自css88:http://www.css88.com/archives/402

[转]CSS常用的hack技巧

在iteye上看到一篇介绍CSS常用的Hack的技巧,转过来自己Mark下。

color:red; /* 所有浏览器都支持 */
 color:red !important;/* 除IE6外 */
 _color:red; /* IE6支持 */
 *color:red; /* IE6、IE7支持 */
 +color:red;/*IE7支持*/
 *+color:red; /* IE7支持 */
 color:red\9; /* IE6、IE7、IE8、IE9支持 */
 color:red\0; /* IE8、IE9支持 */
 color:red\9\0;/*IE9支持*/

/* webkit and opera */
 @media all and (min-width: 0px){ div{color:red;} }

/* webkit */
 @media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
 @-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
 }

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

其他还有使用注释的方式对IE进行判断的方法也应该算是Hack的方法,这个可以参考前面的一篇文章:html+css判断各个IE浏览器版本