这是我自己写的一个jquery插件,由功能相同的纯JS版LixTabs改造而来。这也是我的第一个jquery插件,嘿嘿。

所以,jquery.lixtabs.js的参数和原版LixTabs一模一样,不过多了一个参数:how,规定tab内容区出现的方式,值是jQuery自带的变化效果,如fadeIn,slideDown,show等等(其实全部的值就这三个);另外,去掉了原来的两个参数:hdtag与bdtag,即tab头部与内容区的html标签,因为我觉得对于强大的jQuery来说,这两个标签已经不必要了。

lixtabs插件使用效果预览继续阅读

LixTabs.js是我之前因为工作原因而写的一个小JS类,主要作用是批量实现Tab切换效果。之前已经在博客园发布过两个版本了,虽然依然有缺点但还是在艰难地改进着。
snipaste_20170628_113206
2013/9/17更新:
原来的tabs.js有一个漏洞,替换class的时候用的是字符串,有bug,比如此标签有content on两个class,本来只想去掉on,却变成了ctent ,把content里的on也去掉了。

这是个很低级的错误,但我一直都没发现真是奇迹。现在改成了正则表达式,且优化了替换class的函数,减少了计算量,且Tabs.js的整体代码量还变小了,<3Kb.

另外废话几句,其中的cutover(切换样式)函数,里面有些值得学习的地方,想提高JS水平的可以看下,如果不明白欢迎联系我。

LixTabs最新版(0.5)特性说明:

  1. 在同一网页方便的实现多个tab选项卡切换效果
  2. 也可以用来实现简单的图片切换效果
  3. 整体封装,但调用时不用写new
  4. 可以设置触发延迟,所以当鼠标飞速的移入移出tab标签不会触发切换
  5. 代码精简,迄今为止代码大小:3.3KB
  6. 因为精简,所以切换没有特效(如淡入淡出等)

LixTabs效果示例页

继续阅读

非原创,但我把他改得兼容了。日历地址:http://jo2.org/rili.html

这个javascript日历非常强大,支持农历,天干地支,日期切换,所有节日,包括阳历与农历的节日。所以它的源代码用的很广,包括百度,Lingoes都在用。但因为年成有点久了,所以代码有点不兼容,主要表现是在firefox等非IE浏览器下,点击上一年下一月等不能跳转,点下拉框也是这样。继续阅读

又是一个IE莫名其妙的bug:IE下的iframe默认会有一个白色的背景,所以当iframe的外围背景并不是白色的时候,这个iframe就会显得非常的“与众不同”,但我们并不需要它如此的出风头。

这个背景是iframe本身的,不是iframe内的html元素的,所以,只对iframe进行相关设置就能去掉这个背景。

iframe有一个并不常用的属性:allowTransparency,意思是是否允许透明——蛋疼的是IE下好像默认是false,很多大网站的iframe上也没有加上这一条,所以这讨厌的白色背景经常会看到。继续阅读

示例代码如下:

.d1{color:#f00;}

<div id=”d1″class=”d1″>kljdslfkj</div>

此时使用JS的style获取他的color属性:

var d1=document.getElementById(‘d1’);

alert(d1.style.color);

奇怪的是,弹出一个空值,没有任何内容,也不报错。但如果用d1.style.color=”#00f”来设置d1的CSS却正确执行。继续阅读

自从使用了jquery.cycle.js,我觉得再也不用自己写javascript的图片切换效果了,因为一想到它,我就会有一种深深的无力感,就好像面对着一座翻不过去的大山…

吐槽完毕,如标题所诉,jquery.cycle.js是jquery的一个插件,主要用来实现千奇百怪的图片切换效果——当然,不是图片也能切换,只是它经常被用来做图片切换而已。

没使用过jQuery.Cycle.js的同学,可以点这里去摸摸底,看看有没有被震一下的感觉。

jquery.cycle.js能实现的切换效果非常复杂,相伴而来的就是它也有不简单的参数设置,不过我会给大家一一描述清楚的。继续阅读

这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop!

看前辈们的文章,纷纷表示如果有文档声明(即网页第一句的docType)的情况下,标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.继续阅读

今天突然有兴趣研究一下javascript中scrollWidth,clientWidth,offsetWidth等的区别,但在firefox与IE中测试却发现了很大差距.在网上搜索了一下,发现大部分都是转载的同一篇文章,而这篇文章还是2007年的,当时firefox才1.0,IE5还活在世上….所以我觉得我现在有必要重写一篇文章了.

CSS代码

*{margin:0;padding:0;}
#wrap{width:480px;height:300px;background:#eee;padding:5px;border:5px solid #f00;margin-left:20px;overflow:auto;display:block;}

这段CSS代码中定义了元素的width,padding,margin,border,可以全面地测试这些属性与scrollWidth,clientWidth,offsetWidth之间的关系.继续阅读