已经不记得是多久没有写过了,最近的状态还不错,因为各种考试的缘故,很多技术文章都是看了,没有往上面写。在亚马逊购了一些H5,CSS3以及移动互联网开发的书,等驾照考过之后就又要开启学习模式了。

今天闲来无聊,也就把jQuery里面的几个点复习了一边,写了一个小DEMO。复习点是jQuery的自定义事件。

直接帖代码上来了。

jQuery.fn.tabs = function (control) {
    var element = $(this);
    control = $(control);
    //初始化完毕

    element.delegate("li", "click", function () {
        //找到需要修改的目标
        var tabName = $(this).attr("data-tab");
        //点击选项卡触发自定义事件
        element.trigger("change.tabs", tabName);
    });

    element.bind("change.tabs", function (e, tabname) {
        element.find("li").removeClass("active");
        element.find(">[data-tab='" + tabname + "']").addClass("active");
    });

    element.bind("change.tabs", function (e, tabname) {
        control.find(">[data-tab]").removeClass("active");
        control.find(">[data-tab='" + tabname + "']").addClass("active");
    });

    var firstName = element.find("li:first").attr("data-tab");
    element.trigger("change.tabs",firstName);

    return this;
}

自定义事件在日常的WEB开发中是非常常见的功能,用于封装自有组件定义自有API。实在是居家旅行,开发面试必备技能。

Rails 配置 Jquery 为默认JS框架之后是存在一些问题的。公共函数 Rails.js 中的某些方法完全无法支持了。解决方案如下。

  1. 修改配置文件,config/application.rb 去掉?config.action_view.javascript_expansions[:defaults] = %w(jquery rails) 前的#号。
  2. 删除Prototype,安装Jquery.js。
  3. 访问:https://github.com/rails/jquery-ujs/blob/master/src/rails.js
  4. 使用上述地址中的Rails.js替换原有项目的Rails.js。

Ruby版本:1.8.7

Rails版本: 3.0.5

Gem版本: 1.7.2

 

上个礼拜收到倒了图灵公司寄过来的样书,包得还不错哈,花了时间把书读了一边,整体感觉还不错。作者基本上把 Jquery 中间核心的 API 都用代码和详细的文字说明过了一次。对 Jquery 来说算是一个比较好的使用案例和 API 介绍吧。

整本书的结构非常适合新手阅读。引入了问题描述,解决方案,知其然知其所以然这样一问一答的形式对网页中可能遇到的开发问题。详细的解决了一遍,并且有完整可运行的代码案例,让读者对案例的使用环境以及处理方案有深刻的认识。几乎涵盖了绝大部分网页上需要处理的问题。比如,自动点击,添加返回顶部链接,图片预览效果,折叠段落和菜单,自动点击,数组处理,数据排序,XML,JSON处理,Ajax,表单验证等。完全可以称得上是一本“网页需求问题解决大全”。

Jquery 本身是一个比较优秀的框架,大量的第三方插件给予其大力的支持,蓬勃的社区发展也是 Jquery 能够得到快速推广的原因。当然,这个里面的代码也是有好有差。本书介绍的插件也是抛砖引玉。

总结:本书适合 JavaScript 新手阅读。全书不涉及 JavaScript 的知识体系讨论,案例都比较经典也是网页常用的问题处理小手册。也建议美工MM可以看看此书,扩展一下自己的设计思路。作为 Jquery 的入门与进阶读物还是不错。

最近在论坛上闲逛,发现了一些好东西,写在自己的博客里面方便以后使用。

1. ?Jquery easy UI

Jquery 一直是我比较喜欢使用的“工具”且不说它是框架,因为它确实还是达不到我所谓的框架级别。不过随着JavaScript各个领域的不断完善,Jquery总有一天会要成为一个优秀的框架的。它的easy UI 做的很 Ext ?!!!! 实现了基础的 ext 框架中的 grid,messagebox,menubutton,linkbutton,还有基础的 layou 。相对的来说,因对小型的系统开发加上Jquery活跃的社区组件,应该是绰绰有余了。最让人满意的一点是他的运行速度,相对 ext 来说,还是非常赞的。大小是117k,使用版本是 jquery 1.4(74k)。速度上很赞。。因为相对ext来说还是很“瘦小”的。

下载地址

2. 很多时候都要做首页上的幻灯片效果。之前的幻灯片效果已经有很多了。帕兰印象等前辈的网站也搜罗了很多幻灯片特效和画廊插件。在之前的Google reader中间发现了一个还算简单又不错的风琴效果的幻灯片介绍家使用一下。

下载地址

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。

一、拉洋片

在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。

AnythingSlider


由 CSS-Tricks 的 Chris Coyier 设计,功能齐全,应用十分广泛。

Easy Slider


这个 Content Slider 插件既包含传统前后导航模式,又包含页码式导航。

Coda-Slider 2.0


Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

二、图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过,借助 jQuery,这种效果已经可以在本地实现,以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria


这是一个基于 jQuery 的图片库,可以逐个加载图片并显示缩略图。

jQuery Panel Gallery


一个可以高度定义的图片库插件,无需对单个图片进行任何处理,这个插件会帮你完成一切。

slideViewer


slideViewer 会检查你的图片列表中的编号,动态创建各个图片的页码浏览导航。

Supersized


一个令人惊讶的图片循环展示插件,包含各种变换效果和预加载选项,会对图片自动改变尺寸以适应浏览器窗口。

三、导航

我们相信,作为网站的导航系统,应该越简单,越易用越好,然而,假如你确实希望实现一些更炫的效果,jQuery 就是最好的选项,以下插件是09年最好的 jQuery 导航插件。

jquery mb.menu

Horizontal Scroll Menu with jQuery

AutoSprites

四、表单和表格

在 Web 设计中,表单和表格都是不是很讨人喜欢的东西,但你不得不面对,本年度出现几个不错的 jQuery 插件帮你完成这些任务。

Password Strength


这个插件帮你评估用户输入的密码是否足够强壮。

Ajax Fancy Capcha


顾名思义,一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制。

Chromatable


这个插件可以帮助你在表格上实现滚动条。

jqTransform


一个式样插件,帮助你对表单中的控件进行式样控制。

Uploadify


实现多个文件同时上传。

jExpand


一个很轻量的 jQuery 插件,使你的表格可以扩展,在一些商业应用中,可以让表格更容易组织其中的内容。

Jquery 能够快速方便的被开发人员使用,我发现众多设计师MM也喜欢用JQUERY来完成一些平常看起来非常难完成的特效。无论在质感和质量上JQUERY的插件都能扣上“专业”这个大帽子,看网上有一些画廊插件的介绍,收录过来,方便使用。

1.?slideJS

Preview

2.?Sidewways Jquery Fullscreen Image Gallery

Preview

3.?CarouFredSel

Preview

4.?Orbit: A Slick jQuery Image Slider Plugin

Preview

5.?Shine Time

Preview

6.?Supersized

Preview

7.?Yox View

Preview

8.?Nivo Slider

Preview

9.?jQuery Image Scale Carousel

Preview

10.?Full Page Image Gallery

Preview

11.?A jQuery Flickr Feed Plugin

Preview

12.?Thumbnails Navigation Gallery with jQuery

Preview

13.?Interactive Photo Desk with jQuery and CSS3

Preview

14.?Beautiful Photo Stack Gallery with jQuery and CSS3

Preview

15.?Animated Portfolio Gallery with jQuery

Preview

16.?Polaroid Photobar Gallery with jQuery

Preview

17.?Micro Image Gallery: A jQuery Plugin

Preview

18.?Sponsor Flip Wall With jQuery & CSS

Preview

19.?Presentation Cycle: Cycle with a progressbar

Preview

20.?Merging Image Boxes with jQuery

Preview

21.?Create Beautiful jQuery slider tutorial

Preview

22.?Jquery Popeye 2.0

Preview

23.?Fancy Hover Effect

Preview

24.?Slide Thumbs

Preview

25.?jQuery Plugin – Feature List

Preview

26.?Creating a polaroid photo viewer with CSS3 and jQuery

Preview

27.?GalleryView: A jQuery Content Gallery Plugin

Preview

28.?Profolio

Preview

29.?Create an Image Rotator with Description (CSS/jQuery)

Preview

30.?Galleriffic

Preview

31.?Loopedslider

Preview

32.?Sliding Image Gallery

Preview


小手册对于初学者来说是相当有用,本文总结了:HTML, CSS, JAVA, PHP, Database SQL, WordPress, Aspx, SEO等技术,相信总有一种是你需要的!

ML/XHTML/XML

CSS

JavaScript