使用 dataset 模拟 jQuery toggle event

jQuery 有2个 .toggle(),1个是切换显示或隐藏,另外一个是切换2-3个 functions。但是在 jQuery 1.9 版他们移除了 toggle event

经过搜索一下,找到2个答案:
1)使用 jQuery 的迁移插件( jQuery Migrate plugin on Github)
2)使用 dataset

方法一不解释了,重点是方法二。

$('.selector').on('click', function() {
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'on') {
        $(this).attr('data-toggled', 'off');
        // do stuff when on
    } else if ($(this).attr('data-toggled') == 'off') {
        $(this).attr('data-toggled', 'on');
        // do stuff when off
    }
});

你们有更好的方法吗?

via stack overflow

Zepto.js 手机版的 jQuery

zeptojs-performance

手机版的网站使用 jQuery 未免太浪费手机的宝贵的流量了吧!那么你应该要试试 Zepto.js 了,单靠它的 8.4k(gzipped)size 完全可以代替掉 jQuery 这只庞大的怪物。

jQuery 的 ajax,addClass,find,next,toggle,wrap。主流的 jQuery API 都有了,并且添加了 touch events。可以长按,滑动,就如使用 iOS 或者 Android 一样。

轻触:tap
双击:doubleTap
长按:longTap
滑动:swipe
滑动自定方向:swipeLeft, swipeRight, swipeUp, swipeDown

Continue reading Zepto.js 手机版的 jQuery

滚动固定侧边栏

使用 jQuery 保持滚动对象在窗口的可见范围内的。

例子:苹果在线商店的购物车

演示

方法

添加 CSS

.fixed {   
    position:fixed; /* IE 6 不支持 fixed,只能用 absolute */
    top:20px;   
    background-color:#90EE90 /* 可选 */  
}

添加 jQuery

$(document).ready(function (){

  // 检查对象,这里是 HTML 5 的 "aside",可改为 ".class" 或者 "#id"
  var offset = $("aside").offset();
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    // 视窗还看到这个侧边栏?
    if(offset.top < scrollTop) {
      // 没看到,添加 ".fixed"
      $("aside").addClass("fixed")
    }else {
      // 看到,不需要 ".fixed"
      $("aside").removeClass("fixed")
    }
  })

});

注意:
1、演示基于 HTML5 模板,aside 相等于侧边栏
2、IE 1-8 不支持 HTML5 的标签,需要用到 Modernizr 或者 html5shiv(差别 2KB 左右)
3、如果不用 HTML5 的标签,不需要理会上面2条提示

via stackoverflow.com

PS:
ScrollToFixed 这个 js 插件不错。适合 Firefox 3+,Chrome 10+,IE 8+, Opera 11.60+ 和 Safari 5+。

20个设计师和开发人员的小抄

小抄(Cheatsheets),将所有的讯息集中在一起帮助你快速从新鸟提升到老鸟。

今天,我们有一个收集来自网络的最好的免费 cheatsheets。你会发现像 jQuery 的 cheatsheet 和一些摄影的 cheatsheet。无论你想到什么,可能有它的 cheatsheet!

预览

  • CSS3
  • webkit css3
  • css3 图形
  • css 速记
  • html5
  • html5 canvas
  • jQuery
  • Javascript
  • PHP
  • WordPress
  • 等等总共20个小抄

 

>>> 前往阅读文章(英文)