标签归档:Jquery

tabs复习(jQuery)

已经不记得是多久没有写过了,最近的状态还不错,因为各种考试的缘故,很多技术文章都是看了,没有往上面写。在亚马逊购了一些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的问题。

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 攻略》读书笔记

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

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

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

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

Jquery easy UI & Slidedeck

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

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 框架下,设计了数不清的插件,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 画廊插件

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

Jquery 的插件库(转载)收录下来,方便以后查找。

jQuery是JavaScript语言的一个新的资源库(框架)

jQuery能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式.

使用下面这些插件,可以实现很多、新、酷的效果!

File upload-文件上传

Ajax File Upload
jQUploader
Multiple File Upload plugin
jQuery File Style
Styling an input type file
Progress Bar Plugin

Form Validation-表单验证

jQuery Validation
Auto Help
Simple jQuery form validation
jQuery XAV – form validations
jQuery AlphaNumeric
Masked Input
TypeWatch Plugin
Text limiter for form fields
Ajax Username Check with jQuery

Form – Select Box stuff-表单、选择框

jQuery Combobox
jQuery controlled dependent (or Cascadign) Select List
Multiple Selects
Select box manipulation
Select Combo Plugin
jQuery – LinkedSelect
Auto-populate multiple select boxes
Choose Plugin (Select Replacement)

Form Basics, Input Fields, Checkboxes etc.-表单,输入栏,复选框等

jQuery Form Plugin
jQuery-Form
jLook Nice Forms
jNice
Ping Plugin
Toggle Form Text
ToggleVal
jQuery Field Plugin
jQuery Form’n Field plugin
jQuery Checkbox manipulation
jTagging
jQuery labelcheck
Overlabel
3 state radio buttons
ShiftCheckbox jQuery Plugin
Watermark Input
jQuery Checkbox (checkboxes with imags)
jQuery SpinButton Control
jQuery Ajax Form Builder
jQuery Focus Fields
jQuery Time Entry

Time, Date and Color Picker-时间、日期及颜色选择

jQuery UI Datepicker
jQuery date picker plugin
jQuery Time Picker
Time Picker
ClickPick
TimePicker
Farbtastic jQuery Color Picker Plugin
Color Picker by intelliance.fr

Rating Plugins-评论相关

jQuery Star Rating Plugin
jQuery Star Rater
Content rater with asp.net, ajax and jQuery
Half-Star Rating Plugin

Search Plugins-搜索相关

jQuery Suggest
jQuery Autocomplete
jQuery Autocomplete Mod
jQuery Autocomplete by AjaxDaddy
jQuery Autocomplete Plugin with HTML formatting
jQuery Autocompleter
AutoCompleter (Tutorial with PHP&MySQL)
quick Search jQuery Plugin

Inline Edit & Editors-编辑器

jTagEditor
WYMeditor
jQuery jFrame
Jeditable – edit in place plugin for jQuery
jQuery editable
jQuery Disable Text Select Plugin
Edit in Place with Ajax using jQuery
jQuery Plugin – Another In-Place Editor
TableEditor
tEditable – in place table editing for jQuery

Audio, Video, Flash, SVG, etc-视频、Flash等

jMedia – accessible multi-media embedding
JBEdit – Ajax online Video Editor
jQuery MP3 Plugin
jQuery Media Plugin
jQuery Flash Plugin
Embed QuickTime
SVG Integration
jQuery Multimedia Portfolio
jQuery YouTube Plugin

Photos/Images/Galleries-图像

ThickBox
jQuery lightBox plugin
jQuery FancyBox
jQuery Multimedia Portfolio
jQuery Image Strip
jQuery slideViewer
jQuery jqGalScroll 2.0
jQuery – jqGalViewII
jQuery – jqGalViewIII
jQuery Photo Slider
jQuery Thumbs – easily create thumbnails
jQuery jQIR Image Replacement
jCarousel Lite
jQPanView
jCarousel
Interface Imagebox
Image Gallery using jQuery, Interface & Reflactions
simple jQuery Gallery
jQuery Gallery Module
EO Gallery
jQuery ScrollShow
jQuery Cycle Plugin
jQuery Flickr
jQuery Lazy Load Images Plugin
Zoomi – Zoomable Thumbnails
jQuery Crop – crop any image on the fly
Image Reflection

Google Map-Google地图

jQuery Plugin googlemaps
jMaps jQuery Maps Framework
jQmaps
jQuery & Google Maps
jQuery Maps Interface forr Google and Yahoo maps
jQuery J Maps – by Tane Piper

Games-游戏

Tetris with jQuery
jQuery Chess
Mad Libs Word Game
jQuery Puzzle
jQuery Solar System (not a game but awesome jQuery Stuff)
jQuery Memory

Tables, Grids etc.-表格、网格等

UI/Tablesorter
jQuery ingrid
jQuery Grid Plugin
Table Filter – awesome!
TableEditor
jQuery Tree Tables
Expandable “Detail” Table Rows
Sortable Table ColdFusion Costum Tag with jQuery UI
jQuery Bubble
TableSorter
Scrollable HTML Table
jQuery column Manager Plugin
jQuery tableHover Plugin
jQuery columnHover Plugin
jQuery Grid
TableSorter plugin for jQuery
tEditable – in place table editing for jQuery
jQuery charToTable Plugin
jQuery Grid Column Sizing
jQuery Grid Row Sizing

Charts, Presentation etc.-图表、演示等

Flot
jQuery Wizard Plugin
jQuery Chart Plugin
Bar Chart
Accessible Charts using Canvas and jQuery

Border, Corners, Background-边、角、背景

jQuery Corner
jQuery Curvy Corner
Nifty jQuery Corner
Transparent Corners
jQuery Corner Gallery
Gradient Plugin

Text and Links-文本、超链接

jQuery Spoiler plugin
Text Highlighting
Disable Text Select Plugin
jQuery Newsticker
Auto line-height Plugin
Textgrad – a text gradient plugin
LinkLook – a link thumbnail preview
pager jQuery Plugin
shortKeys jQuery Plugin
jQuery Biggerlink
jQuery Ajax Link Checker
Chili jQuery code highlighter plugin
jScroller

Tooltips-工具提示

jQuery Plugin – Tooltip
jTip – The jQuery Tool Tip
clueTip
BetterTip
Flash Tooltips using jQuery
ToolTip

Menus, Navigations-菜单、导航

jQuery Tabs Plugin – awesome! [demo nested tabs]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin)
jQuery idTabs
jdMenu – Hierarchical Menu Plugin for jQuery
jQuery SuckerFish Style
jQuery Plugin Treeview
treeView Basic
FastFind Menu
Sliding Menu
Lava Lamp jQuery Menu
jQuery iconDock
jVariations Control Panel
ContextMenu plugin
clickMenu
CSS Dock Menu
jQuery Pop-up Menu Tutorial
Sliding Menu

Accordions, Slide and Toggle stuff-手风琴、幻灯及标签切换效果

jQuery Plugin Accordion
jQuery Accordion Plugin Horizontal Way
haccordion – a simple horizontal accordion plugin for jQuery
Horizontal Accordion by portalzine.de
HoverAccordion
Accordion Example from fmarcia.info
jQuery Accordion Example
jQuery Demo – Expandable Sidebar Menu
Sliding Panels for jQuery
jQuery ToggleElements
Coda Slider
jCarousel
Accesible News Slider Plugin
Showing and Hiding code Examples
jQuery Easing Plugin
jQuery Portlets
AutoScroll
Innerfade
CodaSlider

Drag and Drop-拖拽

UI/Draggables
EasyDrag jQuery Plugin
jQuery Portlets
jqDnR – drag, drop resize
Drag Demos

XML XSL JSON Feeds

XSLT Plugin
jQuery Ajax call and result XML parsing
xmlObjectifier – Converts XML DOM to JSON
jQuery XSL Transform
jQuery Taconite – multiple Dom updates
RSS/ATOM Feed Parser Plugin
jQuery Google Feed Plugin

Browserstuff

Wresize – IE Resize event Fix Plugin
jQuery ifixpng
jQuery pngFix
Link Scrubber – removes the dotted line onfocus from links
jQuery Perciformes – the entire suckerfish familly under one roof
Background Iframe
QinIE – for proper display of Q tags in IE
jQuery Accessibility Plugin
jQuery MouseWheel Plugin

Alert, Prompt, Confirm Windows-提示框、窗口

jQuery Impromptu
jQuery Confirm Plugin
jqModal
SimpleModal

CSS

jQuery Style Switcher
JSS – Javascript StyleSheets
jQuery Rule – creation/manipulation of CSS Rules
jPrintArea

DOM, Ajax and other jQuery plugins

FlyDOM
jQuery Dimenion Plugin
jQuery Loggin
Metadata – extract metadata from classes, attributes, elements
Super-tiny Client-Side Include Javascript jQuery Plugin
Undo Made Easy with Ajax
JHeartbeat – periodically poll the server
Lazy Load Plugin
Live Query
jQuery Timers
jQuery Share it – display social bookmarking icons
jQuery serverCookieJar
jQuery autoSave
jQuery Puffer
jQuery iFrame Plugin
Cookie Plugin for jQuery
jQuery Spy – awesome plugin
Effect Delay Trick
jQuick – a quick tag creator for jQuery
Metaobjects

elementReady