代码其实也简单,插件代码:
调用代码:
后续找个时间把 Ajax load 函数和 createHtmlItem 也纳入进来,这样调用就方便多了。
已经不记得是多久没有写过了,最近的状态还不错,因为各种考试的缘故,很多技术文章都是看了,没有往上面写。在亚马逊购了一些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 中的某些方法完全无法支持了。解决方案如下。
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 有大量与此有关的插件,以下插件无疑是最佳的。
由 CSS-Tricks 的 Chris Coyier 设计,功能齐全,应用十分广泛。
这个 Content Slider 插件既包含传统前后导航模式,又包含页码式导航。
Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。
二、图片库
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过,借助 jQuery,这种效果已经可以在本地实现,以下是本年度备受欢迎的几个 jQuery 图片库插件。
这是一个基于 jQuery 的图片库,可以逐个加载图片并显示缩略图。
一个可以高度定义的图片库插件,无需对单个图片进行任何处理,这个插件会帮你完成一切。
slideViewer 会检查你的图片列表中的编号,动态创建各个图片的页码浏览导航。
一个令人惊讶的图片循环展示插件,包含各种变换效果和预加载选项,会对图片自动改变尺寸以适应浏览器窗口。
三、导航
我们相信,作为网站的导航系统,应该越简单,越易用越好,然而,假如你确实希望实现一些更炫的效果,jQuery 就是最好的选项,以下插件是09年最好的 jQuery 导航插件。
Horizontal Scroll Menu with jQuery
四、表单和表格
在 Web 设计中,表单和表格都是不是很讨人喜欢的东西,但你不得不面对,本年度出现几个不错的 jQuery 插件帮你完成这些任务。
顾名思义,一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制。
Uploadify
实现多个文件同时上传。
在网上闲逛的时候,发现了这个好网站,特地和大家共享一下.
http://www.open-open.com/ajax/ajax20091110201018.htm
Jquery 能够快速方便的被开发人员使用,我发现众多设计师MM也喜欢用JQUERY来完成一些平常看起来非常难完成的特效。无论在质感和质量上JQUERY的插件都能扣上“专业”这个大帽子,看网上有一些画廊插件的介绍,收录过来,方便使用。
小手册对于初学者来说是相当有用,本文总结了:HTML, CSS, JAVA, PHP, Database SQL, WordPress, Aspx, SEO等技术,相信总有一种是你需要的!
ML/XHTML/XML
CSS
JavaScript