作者归档:jucelin

奇怪的浮动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的结果有点让我出乎意料。

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

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

新浪微博短地址接口

jucelin在早前发表的一篇关于新浪微博短地址获取办法的文章简单获取新浪微博短地址接口(API),发现很多开发这都对这个比较感兴趣,这里jucelin写了个小接口,方便没有API KEY的朋友使用。实际上获取新浪微博的短地址非常简单,直接使用curl技术就可以了,详细的方法和获取的源代码可以参考上文

API地址:https://jucelin.com/lab/short.php

老规矩,请使用get方式提交参数,post方式获取不到。

参数说明

type:处理方式,1表示原地址缩短为新浪微博短地址;2表示将新浪短地址还原成原地址。

url:链接地址,根据上面的type方式url为相应的地址。

需要注意的地方

请不要尝试将新浪微博短地址再次缩短,结果会返回错误。

演示地址

长转短:https://jucelin.com/lab/short.php?type=1&url=https://jucelin.com

短转长:https://jucelin.com/lab/short.php?type=2&url=http://t.cn/S4bLBm

服务器在国外,建议寄居国外的朋友使用。有API KEY的朋友建议您为自己建个接口,方便自己站内使用。如果有什么疑问欢迎留言。

jucelin写的源代码下载地址:http://dl.dbank.com/c0xtbyawej

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共享的带宽,羡慕啊。如果网站大,每月流量小,备份频率可得调低点了,不然肯定不够用。

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

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

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