标签归档:站长

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》

CSS制作小箭头

在西门大哥的博客中看到一篇文章:CSS实用小技巧,利用border属性实现一个标签做箭头,西门使用的是border,这里jucelin介绍另一种方法,用到的是一个特殊字符:◆。

演示DEMO

代码:请狂击DEMO,然后右键,查看源代码(写得应该还算规范)。

主要用途:制作tips等。

实现原理:方法很简单,特殊字符◆就已经有了箭头的效果,那么用2个◆,用相对或绝对定位将他们完全重合,如果想做成向上的箭头,则再将下一层的◆向上移动1px。设置下颜色:下一层的使用的是下面内容部分的边框色,而上一层的◆使用的是内容部分的背景色,这样就出现一个想要的样式。

兼容性:用的position定位,兼容性你懂的(DEMO中未测试,用于生产需自测)。

比较下

西门大哥的方法并不好实现border同一色的问题,当然如果使用上面的方法也是可以实现的。

最后说明

如果一个页面中用了很多tips箭头,我仍然建议使用图片,减少浏览器的渲染时间,当然似乎要很多很多,才能看出浏览器有卡的效果。

相关资源

另一种实现小箭头的方法:CSS实用小技巧,利用border属性实现一个标签做箭头

WP修改自带jquery加载方式

调用自带jquery方法

<?php wp_enqueue_script("jquery"); ?>

但要注意的是: wp_enqueue_script(“jquery”); 务必加在 wp_head(); 的前面。

同时,需要注意的是wordpress自带的jquery和官方的jquery是有区别的,自带的jquery则需要这样使用:

jQuery(document).ready(function($) {
// "$"符号在这里才能被识别
});

WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了 jQuery.noConflict();这个noConflict() 就是为了与其它的library 兼容性, 如:Prototype, MooTools, 或 YUI。

调用其他jquery方式

1.最直接的:

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/jquery.js”></script>

2.调用谷歌 Google 的 API库:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
//最好再加上以下代码,一边在连接google的API库是失效时调用本地的jQuery文件:
<script>
!window.jQuery && document.write('<script src="jquery-1.6.1.min.js"><\/script>');
</script>

取消使用自带jquery

网上最多的方法是在/wp-includes/script-loader.php的119行,将

$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' );

//修改为

if(is_admin()){
 $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' );
}

这个方法不支持wp升级,因为升级后会将这个文件修改回来。另外jucelin想到的最简单的方法就是,将官方的jquery替换自带的jquery文件(这个方法会导致后台无法使用自带jQuery!)当然这也应该不支持wp的升级,升级后会被新的jquery覆盖掉。

参考来源:

1.在WordPress调用jQuery的方法及注意事项

2.去掉wordpress自带的jquery 及 附属信息

奇怪的浮动Float

在百度知道搜资料的时候看到一个网友问了关于CSS浮动的问题,问题地址在这里,直接看代码:

<body>
<div style="background:red; height:100px; width:200px; float:left;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

看了上面代码很简单,相信从理论上你也应该看出会是什么样的一个显示方式。但问题就在于你没想到的地方。看下面的效果:

111111111111111
222222222222222

再试试不同的浏览器,我使用的IE和Chrome,可以明显的看出两者的不同之处。为了更明显的看出区别在哪,你可以本地新建一个文档,贴入下面的代码:

<body>
<div style="background:red; height:100px; width:200px; float:right;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

然后收到缩小浏览器窗口的宽度,看看两者是怎么个float方式。

之前也没遇见过,当然也可以为第二个div加个float就能解决,但问题在于我没想清楚这样的不兼容到底怎么去解释。不过从理论上IE的渲染结果比较符合我的理解,Chrome的结果有点让我出乎意料。

请问各位高手,如此问题你如何解释?

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个,压缩后的代码就会出错,更可恨的是,这是往往不能被发现的。

Mysql存储过程教程PDF版

自从Mysql5.0版本后,Mysql就增加了存储过程,在MSSQL上肯定大家用过存储过程,知道它的强大,虽然jucelin也没查到Mysql上存储过程能带来多大的效率,但我坚信肯定会提高效率,哪怕是以后的版本才能。至于你信不信,反正我信了。

Mysql存储过程官方教程文档:http://dev.mysql.com/doc/refman/5.1/zh/stored-procedures.html

俺表示俺对全大写的E文很反感,本来英文水平就不行,看到大写的基本上都是心里默拼下才知道是什么单词,汗颜。OK,下面的PDF文档也是类似的情况,因此,看了好一会,好一会。

MySQL存储过程PDF文档【来自网络】下载地址:

源下载地址:http://net.ytu.edu.cn/share/%D7%CA%C1%CF/MySQL%B4%E6%B4%A2%B9%FD%B3%CC.pdf

DBank下载地址:http://dl.dbank.com/c0bzsslzff

115网盘下载地址:http://115.com/file/dnmr5pn7

另外今天有几个问题待解决,列出来,以后问下前辈们:

1.Mysql存储过程中代码是否区分大小写?平时写sql的时候是不区分的。

2.判断为空咋个写法。如查询出来的结果为空或者没有结果如何判断。

3.等等头疼的问题。

其他参考资料:

跟我学MySQL存储过程:http://www.blogjava.net/sxyx2008/archive/2009/11/24/303497.html

mysql 5.0存储过程学习总结:http://www.ccvita.com/100.html

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

jucelin恭祝各位龙年大吉

2012来了,龙年也这么来了。对于飞快的时间,反抗不了就好好享受吧。

昨天和一朋友聊到了结婚,于是感慨了下时间之快,现在回首,依然在目。虽然知道了那些年我们一起追的女孩已经结婚,也虽然知道自己也不会再趴在地上玩耍自己的“宝贝”,但我们依然保留着少年的美好记忆,因为不会再有。失去了才会更珍惜。

我也不再年少,面临的也将是现现实实的问题,结婚生子,养家糊口,买房买车,生老病死。但这些都将被解决,我坚信。人不能太悲观,更不能没有了信仰,“生气就是拿别人的错误惩罚自己”,怨天尤人,抱怨社会的不公,并不能给自己带来快乐,也不会给这个社会带来多大的改进,人都是自私的,正如有的人抱怨别人走后门同时,自己却想法设法的找后门。

社会的不公从进入封建社会就已经开始,我相信未来的社会也不会消失,我不是老马,我也写不出来让人信服的理由,或者借口,反抗不了就好好享受吧。

算了,我还是不吞吐这些社会话题了,这些也将永远都是话题。废话那么多,一来凑篇日志喂蜘蛛,二来发泄下昨晚上知道朋友结婚给我的失落感。

jucelin恭祝各位龙年大吉!

网站恢复,入住miao.in

Hello world again!

昨天赶上了美国最不喜欢的数字,网站原空间到期,可惜的是没有邮件提醒,接着就是突如其来的帐号被停,也因为原空间是在代理商哪买的,所以悲催的是代理商自己的空间到期,网站数据库从justhost官网那边也要不到。

接着就是找空间,本想着换个香港的,速度快点,接着悲催的是关注的几个空间服务商的香港空间都没货,有货的都买不起,于是就是联系miao.in买个空间入住了和尚庙。用习惯了cpanel,用Plesk直接就有点不习惯,界面丑,功能少(虽然也用不了多少功能),不过想图个稳定,希望如我所愿,这里感谢大猫の意淫白忙之中提供的帮助。

因为数据是上个月备份的,也算是最新的备份了,就拿来用了,以前备份的是放在原空间的,懒,忘下载,也就悲催了。网站恢复后就在快照里面找了自己的文章,恢复过来的,这里要感谢百度快照,soso快照,google快照,感谢他们基本上隔夜收录,不然真找不回来了。评论是肯定找不回来了,这里向评论过的朋友说明下,俺没有对你们评论怎么着啊。

吃了不备份的亏,还是做好备份的工作吧,写个mark,给自己提个醒,别以后自己都忘了怎么备份法了。

安装插件BackWPup插件,新建3个任务

①数据库备份,每天一次,每日4点;

②upload文件夹备份,每日一次,每日5点;

③全站(除了上面内容)的备份,每周一次,备份当日6点;

备份时间可以选择访问量较少,服务器空闲的时间去备份。另外我选择了远程FTP备份,FTP嘛,用的朋友的,也算是异地备份了,20M的东西传送过去只用了8秒,两边好像都是100M共享的带宽,羡慕啊。如果网站大,每月流量小,备份频率可得调低点了,不然肯定不够用。

最后提醒一句,快给你的网站备备份吧!

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