IInterest » jQuery

IInterest » jQuery http://www.iinterest.net Design & Develope 关注用户体验,追求以用户为中心的设计. Thu, 26 Aug 2010 15:17:54 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery图片放大预览插件 cloud-zoom http://www.iinterest.net/2010/06/11/jquery-image-zoom-cloud-zoom/ http://www.iinterest.net/2010/06/11/jquery-image-zoom-cloud-zoom/#comments Fri, 11 Jun 2010 08:27:03 +0000 Bell http://www.iinterest.net/?p=877 Continue reading →]]>

分享一个jquery的图片放大预览插件:cloud-zoom.

cloud-zoom DEMO

部署步骤:

1.加载jquery-1.4.js 和 cloud-zoom.1.0.2.min.js

2.加入样式表(DEMO中<style>部分)

3.为需要放大预览效果的缩略图添加超链接<a>并将类命名为”cloud-zoom” class=”cloud-zoom”

4.在超链接<a>的rel属性中加入需要的参数实现不同的效果

实例:

<a href=”images/大图.jpg” class=”cloud-zoom” rel=”position:’inside’ ,showTitle:false, adjustX:-2, adjustY:-2″><img src=”images/缩略图.jpg” title=”iinterest” /></a>

cloud-zoom参数说明:

Parameter	Description (from V1.0.0)	Default Value
zoomWidth	The width of the zoom window in pixels. If ‘auto’ is specified, the width will be the same as the small image.	‘auto’
zoomHeight	The height of the zoom window in pixels. If ‘auto’ is specified, the height will be the same as the small image.	‘auto’
position	Specifies the position of the zoom window relative to the small image. Allowable values are ‘left’, ‘right’, ‘top’, ‘bottom’, ‘inside’ or you can specifiy the id of an html element to place the zoom window in e.g. position: ‘element1′	‘right’
adjustX	Allows you to fine tune the x-position of the zoom window in pixels.	0
adjustY	Allows you to fine tune the y-position of the zoom window in pixels.	0
tint	Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. ‘#aa00aa’. Does not work with softFocus.	false
tintOpacity	Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque.	0.5
lensOpacity	Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.	0.5
softFocus	Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.	false
smoothMove	Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.	3
showTitle	Shows the title tag of the image. True or false.	true
titleOpacity	Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.	0.5

]]> http://www.iinterest.net/2010/06/11/jquery-image-zoom-cloud-zoom/feed/ 0 jQuery插件:实现类twitter的文本字数限制效果 http://www.iinterest.net/2010/01/29/jquery-plugin-charcount/ http://www.iinterest.net/2010/01/29/jquery-plugin-charcount/#comments Fri, 29 Jan 2010 07:59:49 +0000 Bell http://www.iinterest.net/?p=723 Continue reading →]]> 之前也介绍过一个类似效果的JQ插件jQuery文本字数限制插件-maxlength,不过这次的charcount部署更简单,而且有超出数字提示的功能.

简单的部署:

1.载入js:

<script type=”text/javascript” src=”http://www.iinterest.net/demo/js/jquery.js”></script>

<script type=”text/javascript” src=”http://www.iinterest.net/demo/js/charCount.js”></script>

2.Html结构:

<form id=”form” method=”post” action=”">

<h2>Default Usage</h2>

<div>

<label for=”message”>Type your message</label>

<textarea id=”message1″ name=”message1″></textarea>

</div>

<h2>Custom Usage</h2>

<div>

<label for=”message”>Another message (limited to 30, warning at 10)</label>

<textarea id=”message2″ name=”message2″></textarea>

</div>

</form>

3.charCount插件设置:

<script type=”text/javascript”>

$(document).ready(function(){

//default usage

$(“#message1″).charCount();

//custom usage

$(“#message2″).charCount({

allowed: 30,

warning: 10,

counterText: ‘剩余字数: ‘

});

});

</script>

搞定:)

]]> http://www.iinterest.net/2010/01/29/jquery-plugin-charcount/feed/ 0 jQuery in 15 minutes [快速入门] http://www.iinterest.net/2009/12/24/jquery-in-15-minutes/ http://www.iinterest.net/2009/12/24/jquery-in-15-minutes/#comments Thu, 24 Dec 2009 02:12:03 +0000 Bell http://www.iinterest.net/?p=642 jQuery in 15 minutes

View more documents from simon.

]]> http://www.iinterest.net/2009/12/24/jquery-in-15-minutes/feed/ 0 2009 年度最佳 jQuery 插件 http://www.iinterest.net/2009/12/14/2009-best-jquery-plug/ http://www.iinterest.net/2009/12/14/2009-best-jquery-plug/#comments Mon, 14 Dec 2009 02:53:34 +0000 Bell http://www.iinterest.net/?p=659 Continue reading →]]> 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 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

本文来源：http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009
中文翻译来源：COMSHARP CMS 企业网站内容管理系统官方站

]]> http://www.iinterest.net/2009/12/14/2009-best-jquery-plug/feed/ 4 IxEdit:可视化jQuery开发工具 http://www.iinterest.net/2009/11/14/ixedit-jquery-develop/ http://www.iinterest.net/2009/11/14/ixedit-jquery-develop/#comments Sat, 14 Nov 2009 13:31:48 +0000 Bell http://www.iinterest.net/?p=592 IxEdit是一款基于jQuery的,专门面向Web程序员和设计师量身定制的可视化交互设计工具.
官方网站:http://www.ixedit.com/
虽然目前IxEdit还处于beta阶段,但功能已经非常强大了.

IxEdit的界面:
IxEdit

IxEdit功能介绍:

IxEdit配置步骤:
1.安装Gears. [Gears 百度百科]
2.下载IxEdit 1.0 Public Beta 5
3.在需要启用IxEdit的html文档中载入IxEdit所需的JS,CSS和图片(你可以在readme.html中找到相应的代码)

4.开始使用~

注:测试中发现IxEdit不支持gb2312编码,所以使用前请将你的HTML文档编码改为UTF-8.

IxEdit具体功能目前还在体验中~

]]> http://www.iinterest.net/2009/11/14/ixedit-jquery-develop/feed/ 0