Tagged

jquery

A collection of 28 posts

dribbble

超酷的响应式dribbble设计作品瀑布流布局效果

相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西。 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件: isotope : 一个魔术布局插件,可以帮助你构建瀑布流的页面布局方式(注意不免费的哦) Jribbble :一个帮助你方便调用dribbble API的jQuery插件 imagesloaded:一个帮助你预先加载图片的jQuery插件 先看下在线演示 第一步:使用jribbble来取得最受欢迎的dribbble设计内容 首先呢,我们需要使用jribbble来取得最受欢迎的设计作品,代码如下: $.jribbble.getShotsByList("popular", function(data){ $.each(data.shots, function (i, shot) { /* 这里我们取得dribbble中的作品,注意我们得到所有的“最受欢迎”作品列表 */ }); }, {page: pagenum, per_page: 10}); 使用以上代码,我们可以分页取得dribbble的最新设计,

javascript

10个超棒jQuery表单操作代码片段

jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器。可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!如果你也有相关的代码,请大家积极分享! 代码片段1: 在表单中禁用“回车键” 大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助: 在线调试  在线演示 $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); 代码片段2: 清除所有的表单数据 可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。 在线调试  在线演示 function clearForm(form) { // iterate over all of the inputs for the form // element that

jquery

最新jQuery Mobile 1.2版本新特性

大家还记得在jQuery 1.0 RC版本发布的时候我们曾经发布过一个jQuery Mobile RC版本介绍文章介绍主要的特性。就在前不久,jQuery Mobile团队又发布了jQuery Mobile 1.2。新版本中带来了一些非常不错的特性。在今天的这篇文章中我们将继续介绍1.2版本的一些新的widget,及其一些针对老版本widget的功能加强。希望大家喜欢! Widgets jQuery Mobile最核心的地方就在于widgets。提供了与用户交互的界面。在最新的版本中,加入了一个全新的widget:popup modal。 Popups (弹出层) 弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏,显示照片,地图或者其它内容。在jQuery mobile 1.2中,实现了这个超棒的widgets。 在本篇文章中,我们将使用如下代码框架来演示代码: <!DOCTYPE html> <html> <head> <meta

javascript

另外一款超棒的响应式布局jQuery插件 - Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage 和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元素大小 内建算法允许你很容易的自定义插入的位置,满足不同喜好的展示方式。例如,向左或者向右对齐,或者接近特定元素。 智能的动画方式能够很好的判断是否需要动画特效。例如,刚加入的元素和不可见的元素。 只要使用Assemblage 和 Assemblage Plus模板的网站都在使用它,所以说非常稳定。 如何使用 基本使用方式: $('#container').freetile(); 启用动画特效: $('#container').freetile({ animate: true, elementDelay: 30 }); 指定一个自定义的元素选择器: $('#container').freetile(

javascript

帮助你生成翻页效果的jQuery插件 - bookblock

在线演示  本地下载 今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock,使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢! 这个插件依赖于jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件。 HTML代码 主要html代码如下,生成需要展示的图片内容: <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt=

javascript

轻量级的jQuery表单验证插件 - HAPPY.js

在线演示  本地下载 功能强大的表单验证插件很多,以前我们介绍过validation engine,但是如果你希望使用简单轻量级的表单验证插件的话,你可以考虑使用HAPPY.js。 主要特性 支持jQuery和Zepto.js 使用简单,支持日期,数字,电子邮件,最大/最小数和手机号码等验证 拥有很多自定义的选项 支持IE6-8,FF3.6,Chrome7和safari5 如何使用 HTML代码: <form id="login" action="index.html"> <div class="loginPic"> <input id="loginEmail" class=

javascript

使用jQuery开发超酷波浪动画背景的单页面网站导航菜单

在线演示  本地下载 在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢! 主要开发使用插件: jQuery one page nav:用来生成单页面网站典型的滚动效果 jQuery scrollTo.js:单页面插件依赖类库 jQuery background position:用来生成动画背景效果 jquery.animate-shadow-min.js:用来生成背景阴影效果 jQuery easing 1.3.js:用来添加更多生成动画效果 Cufon-yui.js:cufon类库,用来生成更加漂亮的字体 fixie.js:用来辅助自动生成网站中的文字 本篇文章最后将生成一个单页面的网站设计,并且生成漂亮的动态导航按钮,调试环境firefox和Chrome,如果你使用其它的浏览器,可能无法工作。请自己调试。 如何生成按钮的背景波浪动画特效? 在这里,我们将使用动画背景图片来生成波浪的动画效果,在之前的“使用jQuery background-position插件来创建超酷的导航条效果教程”中,

javascript

帮助你自动生成已经过去时间的jQuery插件 - Smart Time Ago

在线演示  本地下载 如果大家经常开发web应用的话,肯定会遇到需要计算相对现在过去的时间的情况,在今天的jQuery插件介绍中,我们将介绍一个方便的jQuery插件 – Smart Time Ago。使用这个插件可以自动帮助你生成类似:“3小时之前”,“2分钟之前”的相对时间格式。希望大家喜欢! 主要特性 自动的计算相对时间 基于另外一个插件: http://timeago.yarp.com/. 支持国际化和本地化 如何使用 在node.js下使用,调用如下命令: $ npm install -g smart-time-ago 可以作为jQuery插件,设置为全局: $('body').timeago(); 或者指定范围: <div> <time datetime="2012-07-18T07:51:50Z">about 8 hours

javascript

【简报】使用oriDomi折纸效果的HTML元素

oriDomi是一款超酷的JavaScript类库,可以把页面中任何HTML元素生成折叠效果。此类库不依赖于任何JavaScript框架(但对于jQuery可以有选择性支持)并使用CSS 3D创建过渡效果。 在线演示  本地下载 主要特性 图片小于15K 可选择性支持jQuery/Ender 可以在iOS环境下工作 支持折叠效果,页面字体和动画图片 这里有一些动画演示的折叠效果,包括横向/竖向折叠、切片式,阴影等,并且所有的内容都可以自定义。此款特效还包括:手风琴、卷曲、折叠、缩放等。oriDomi兼容所有现代浏览器(包括移动设备) 如何使用 HTML <div> <h1>Hello.</h1> <h4>my name is oriDomi.</h4>

jquery

jQuery data() tmpl() 的一个小坑

工作中经常用 jQuery 的 data() 和 tmpl() 搭配使用,很方便。不过最近遇到一个很隐蔽的问题。 使用 data() 和 tmpl() 时,类似于 6.0 这种小数点后为零的数据都是显示为 6 这种类型的。jQuery 用了也有挺长一段时间了,这个问题之前还真得从来没有注意到。 一开始仅仅怀疑是 jQuery 的 data() 方法对字符串做了处理。测试了一下确实如此。后来发现不仅是 data() 方法, jQuery template 的 tmpl() 对字符串同样也做了处理。 看 demo ,一个是取的 #bd 上事先存好的 data-*,一个是直接给 tmpl() 传入假数据。 ![](//www.qianduan.net/img/

css3

在IE中使用高级CSS3选择器

别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的制作高可维护性的页面。 然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过,虽然我们无法左右浏览器的市场份额,却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术,让IE可以变相支持CSS3选择器。 一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。 用法 你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入,如下: 支持的选择器 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty ie-css3的一些限制 样式表必须通过标签引入。页面级的样式表或者内联的样式表将无效。不过你可以在外部样式文件中使用@import 导入其它样式文件; 样式表文件必须和页面放在同一个域名下面; 使用file://路径的样式文件将由于浏览器的安全问题而不起作用; :not()选择器尚不支持; 该方法不是动态的,样式被应用之后再改变DOM,将会无效。 如何工作的?

jquery 1.4 发布
jquery

jquery 1.4 发布

时隔一年,jquery在今天正式发布了 1.4版本。事实上,今天也是jquery发布四周年,先祝jquery生日快乐。jquery每年周年的时候都会发布一个新的版本,比如1.3版本是09年1月14号发布的。 OK,言归正传。jquery 1.4其实已经发布了两个alpha版本和一个RC版本,相信关注jquery的同学已经有所了解。 jquery团队为了发布1.4,专门启动了一个 jquery 1.4的网站,计划在14天内逐步揭开jquery1.4的神秘面纱。该网站的内容包括文章和在线视频。 本文就先不简述jquery 1.4带来的新的改进了,在稍后,我们将推出几篇比较好的介绍jquery 1.4的比较详细的文章,敬请期待。 jQuery Minified (23kb Gzipped) jQuery 未压缩版 (154kb) jQuery 1.4 文档 PS:从上面的列表可以看出,jquery1.4胖了很多,当然性能和功能肯定提升了不少。

jquery

20多个漂亮的使用jQuery交互的网站设计欣赏

jQuery是使用最多的JS库之一,它有很多优点,比如轻量、易用、完善的Ajax、良好的浏览器兼容,以及它有健壮的选择器等。这些优点使得jQuery成为帮助前端开发人员的有力工具。越来越多的大型网站开始使用jQuery及其插件实现其前端交互。 这里,前端观察收集了20多个使用jquery交互的漂亮网站设计,它们不仅交互效果比较酷,界面设计的也很棒,希望能够给你的设计提供某些参考。当然,使用jQuery的优秀的网站并不只这些,如果你知道有很不错的基于jQuery的网站设计,欢迎与我们共享,多谢。 翻页、滑动、lightbox – serialcut.com 滑动、导航 – tearoundapp.com 滑动、导航 – mtvsticky.com 滑动、动画 – worldofmerix.com 滑动、拖拽 – icondock.com 滑动、导航 – directdesign.it 翻页、弹出 – jumpstartforbusiness.co.uk 滑动,

jquery

jQuery视觉手册

jQuery视觉手册(jQuery Visual Cheat Sheet)是国外知名前端专家Woork制作的对网站设计师和开发人员都灰常有用且实用的参考手册,针对jQuery 1.3。该手册(共6页)包含了全部的附有较详细描述jQuery API参考和部分示例代码。 手册的设计风格简洁,模块化的组织结构可以让你很方便的找到自己想要的内容。 预览: 下载: 从box下载 本视觉手册官方地址为 http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/ 目前由于某些众所周知的原因,暂时不能访问。另外,如果你发现上面的下载地址无法下载,请通过留言告诉我们,多谢。 PS:update to 1.4.2 @2010-12-20

jquery

jQuery文字变色

很久很久以前,我翻译了《jQuery 链接变色》,原作者是大名鼎鼎的Mootools和jQuery高手David Walsh,那个链接变色比较优雅一些。今天我要给大家带来一款更酷的文字变色效果。 看一下demo先. 正如你看到的那样,当你将鼠标放到文字上去的时候,文字就会变成五颜六色的。 其实这种效果来自于知名开源微博chyrp,它实现起来也并不难。基本原理是使用charAt()函数将文字打散并逐个设置字体颜色,当然,也要用到jquery的选择器和相关函数。 定义色彩数组先,这里定义了7个,当然可以定义更多。 var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"] 核心函数: function colorize(text) { var colorized

jquery

15个最佳jQuery幻灯插件和教程

原文:[15个最佳jQuery幻灯插件和教程](http://www.qianduan.net/15-jquery-content-sliders.html) 译自:[ 15 Best Examples of Free jQuery Content Sliders ](http://visionwidget.com/inspiration/web/295-jquery-content-sliders.html) 版权所有,转载请注明出处,多谢!! - - - - - - 在网站前端中使用jQuery库已经变得越来越流行,前端开发人员发布或撰写的相关的插件和教程也与日俱增。 幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。你是否也对在自己的网站上实现类似的效果感兴趣?那就看一下本文列出的jQuery插件吧! 1. jFlow 官方网站 | 演示 一个漂亮而整洁的图片幻灯,被nettut推荐,

jquery

10个最佳jQuery Lightbox效果插件收集

原文:[10个最佳jQuery Lightbox效果插件收集](http://www.qianduan.net/top-10-jquery-lightbox-scripts.html) 译自:[Rounding Up the Top 10 jQuery Lightbox Scripts](http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts) 版权所有,转载请注明出处,多谢! - - - - - - 大家都很喜欢Lightbox弹框效果,这种效果在很多地方都很有用。而原始的Lightbox脚本已经被无数次的克隆到了所有的流行Javascript库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… jQuery Lightbox Plugin 支持的媒体类型: Images 演示 下载 Fancybox 支持的媒体类型: Images, Inline HTML,

jquery

10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件 LavaLamp 相信很多人都见过这个很酷的菜单插件,也有很多网站成功的应用了这个插件。 插件主页 jquery Kwicks 插件 如果你多Mootools有些了解,或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效果,很酷,也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单,制作某些步骤演示也非常合适——比如购物流程的演示。插件主页 查看演示 | 下载 仿Mac的停靠菜单插件 这是个仿苹果机的停靠菜单的一个jQuery插件,支持水平和竖直两种。查看插件页面。 查看演示 | 下载 jquery滑动菜单 一个和LavaLamp很像的菜单,而且脚本只有不到1kb(lavalamp也是这么小),也比较容易使用。该菜单的原理是,通过在当前ul元素的下面(或者说”后面”更合适些?)添加一个额外的div,用position定位该div。然后用jquery和插件来控制这个div的大小和位置,并实现动画效果。 查看演示 | 下载 教程 CSS Sprites2 – 使用jquery制作动画菜单

jquery

使用jQuery创建个性化链接样式

在上一篇《使用CSS选择器创建个性化链接样式》中,我们使用css的选择器标签来实现相关功能。但是css 选择器虽然被绝大部分浏览器支持,但是不被该死的IE6支持,那么怎么办呢?是的,我们可以通过jQuery来实现。 还是看一下演示,点击图片可打开演示页面。 你可以看到,使用jQuery实现的样式和使用css选择器实现的一模一样,而且它在IE6中被支持。 原理是很简单的——通过jQuery的选择器来匹配相关条件,然后动态为该链接添加一个class。比如,jQuery匹配到mailto类型的链接,然后我们在该链接上添加一个mailto的class。 jQuery的属性选择器和CSS的基本一致,用法也很类似: $("a[href^='mailto']").addClass("mailto"); 这里就不再多介绍jQuery的属性选择器了,如果你还不了解,可以查看jQuery官方参考文档。 样式方面,我们只需将原来的选择器语法改为class就OK了。 最终的样式: a { background:url(a.gif) no-repeat right 4px; padding-right:18px;color:#369;

jquery

看电影时请关灯——一个很酷的页面效果

译自:jankoAtWarpSpeed 原文:看电影时请关灯——一个很酷的页面效果 版权所有,转载请注明出处,多谢! YouTube 上的一些视频有个很酷的功能叫做”关灯”(Turn the lights down)。基本上来说,当你关灯,整个页面全部变黑,就像在电影院的效果一样。本教程将向你展示如何使用jQuery实现这个效果。 查看演示 下载源文件 问题 正如你在演示页面看到的那样,这个实例的结构是很简单的 – 它只包括头部、视频、“关灯”链接和侧栏。在下面的代码中你将看到包含了开关转换链接的“command”层,包含视频的”movie”层以及实现侧栏的”description”层 : # 前端观察 看电影时请关灯- 演示 <div id="container"> <div id=

jquery

6个jQuery图表Web应用扩展

随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支持,除去页面中Flash的应用之外,图表应用变的越来越广泛实用。本文为你整理了6个实用性强的jQuery图表插件,概述了它们各自的功用和优势。 1、Flot 从交互性的层面来说,jQuery实现的 Flot图表和Flash实现的图表效果已经是非常的接近。图表输出效果相当的流畅光滑,注重视觉效果。你也可以和data points数据节点配合使用,当鼠标hover到某个数据节点时,会得到对应节点的数值说明内容的反馈信息。 如上图所示,你也可以选择图表的一部分内容,获得这些特殊区域的数据;同时,你还可以对数据节点进行放大处理。 **优势: **线条、节点、区域填充、柱状图以及以上功能的组合。 2,Sparklines Sparklines 是我最欣赏的微型图表实现工具。真正实现了仪表风格的图表样式(登录到你的 Google Analytics 就知道什么样子了)。另外一个好的功用就是,可以帮助在所有的图表插件中实现 self-refresh 的能力。 优势: 楔形、线条、柱状图以及以上功能的组合。 3, Google Charts Plugin

jquery

jQuery1.3发布暨jQuery发布3周年

今天,是jQuery3岁生日,2006年1月14日,John Resig 在BarCampNYC上第一次发布了jQuery。 在此向jQuery表示祝贺。 同时jQuery宣布了四件事情,包括发布jQuery新版本,介绍sizzle,宣布api改版和成立基金会。之前,jQuery发布了1.3beta2供测试,今天借三周年之际,正式发布了1.3版本。新版本加入了很多新的实用的功能,其中最主要的就是加入了sizzle这个CSS选择器引擎。Sizzle是CSS Selector Engine,这个选择器引擎目前成为jQuery新一代的默认选择器引擎,相比原来的jQuery引擎,速度有很大提升。 另外,Sizzle作者就是jQuery之父:John Resig。 同时,jQuery的api网站http://api.jquery.com也改版了,新版的界面更加简洁易用,由Remy Sharp开发。 最后,jQuery宣布成立一个基金会,这主要是因为jQuery的创始人和jQuery UI的主要开发人员都有各自的项目要维护,不能在jQuery上花费太多的时间,而更多的人和组织开始向jQuery捐助。但是貌似他们在jQuery的所有权方面有些分歧,所哟索性成立一个基金会来领导这个项目的运作。

jquery

jQuery 链接变色

我们都知道,我们可以设置一个链接的:hover颜色,但如果我们要添加更多的花样呢? jQuery可以让你不仅指定一种特定的颜色,而且还可以让你添加(动态显示)一组随机的颜色。 $(document).ready(function() { var randomLinks = $('a.random-color'); var original = randomLinks.css('color'); randomLinks.hover(function() { //mouseover var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $(this)