Dangbao's Blog

做一个专题页需求是点击后弹出一个层，然后再层上点关闭。弄个插件觉得不太值得，就写了个简易弹出层，原理是通过点击事件显示和隐藏新层，新层通过绝对定位显示在水平居中位置。
点击查看简单jquery弹出层
<script type="text/javascript">
$(document).ready(function () {
  $("#clickbox").click(function(){
     $(".showbox").addClass("block")
  });
  $("#closebox").click(function(){
     $(".showbox").removeClass("block")
  });
});
</script>


<script type="text/javascript">
$(function () {
  $(".fixedtable").fixedtableheader();
});        
</script>
fixedtableheader在线演示

语法：
$(function(){
    $('.ad-gallery').adGallery({
    thumb_opacity:'0.8',
    effect:'none'
  });  
});
ad-gallery在线演示
查看全文…

简洁，易用。
想要鼠标滑过切换内容的话，把click改成hover就可以了。
点击查看效果：jquery简易选项卡DEMO

不多说了，常见的效果。
slideUp和slideDown在有边框的情况下导致内容块短暂抽搐，可以改为hide无特效隐藏内容。
点击查看效果：juqery竖向折叠菜单DEMO

老问题了，IE6的BUG，selcet的z-index值比较大，div得z-index设多大都无法盖住它，而iframe的默认z-index值比selcet大,刚好能遮住selcet,而div设置z-index值就能盖住iframe。selcet < iframe < div

由于需求是一个头部弹出层，涉及的项目多，所以在每个页面都加个iframe不现实。所以找到了bgiframe这个jquery插件，原理是在弹出层后面插入一个iframe来遮盖住selcet。网上有人反映这个插件在IE9下会报错，那么就需要加个IE6的条件判断。
<!--[if IE 6]>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>  
<script type="text/javascript" >      
    $(function() {        
        $('弹出层ID).bgiframe();          
     });        
</script>
< ![endif]-->

bgiframe官方插件地址

关于“加入收藏”的代码，很多人都不会重视，一般情况是随便在网上搜一个代码放在页面里得了。前几天群里的一个朋友说要找一个全兼容的收藏代码，说是为了统计加入收藏夹的人数用。这下可是犯了难，都知道google chrome没有这个功能，无奈之下只好祭出弹对话框提示Ctrl+D了。

jQuery的加入收藏

JS:
$("h3").click(function() {
var ctrl = (navigator.userAgent.toLowerCase()).indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL';
if (document.all){
window.external.addFavorite('http://www.dangbao.net','Dangbao's Blog');
}else if (window.sidebar){
window.sidebar.addPanel('Dangbao's Blog', 'http://www.dangbao.net, "");
}else {
alert('您可以尝试通过快捷键' + ctrl + ' + D 加入到收藏夹!');
}
});
HTML:

加入收藏

jQuery版的在HTML里干净的页面代码，把事件处理都交给jQuery来处理了。

两种颜色交替的条纹比较常见，用jQuery写比较简单，这也得益于jQuery的两个内置的odd和even的奇偶函数。想想用纯JS要写多少代码，用jQuery才4行而已

$(document).ready(function() {
  $('li:odd').addClass('odd');
  $('li:even').addClass('even');
});

三色交替条纹：利用索引将3个类指定3个数字，然后求模运算，得出每行的数值和对应的类。

$(document).ready(function() {
  var className = {
      0: 'first',
      1: 'second',
      2: 'third'
   };
   $('li').each(function(index) {
    $(this).addClass(className[index % 3]);
   });
});

当然，对应的扩展到4、5、6或更多条的背景颜色，就需要给className添加对应的数字和类,并添加模运算的除数即可。