jquery插件

下面的实例说明都只是我这几天下载后分析，而且我也是个新手，所以难免会有不少错误，这些都只是我个人的分享，希望有人能指出其中的错误，这样大家可以一起学习一起进步。 （ 实例的完整代码会在文章最后分享，图片地址要修改的哦） 一、第一个先从简单下手，讲渐变轮播图。对了，这个是文字的，不过原理和图片一样。 这是轮播图部分的html代码： <div class="newlist br-bg" id="hnews"> <h3 class="ti"> 厂房设备 <a href="Workshop/" title="厂房设备" class="more">更多>></a> </h3> <div class="newtextlist" id="hnewsitems"> <li class='list top'><a href='Workshop/Workshop6.html' title='空气净化器生产厂房' target='_self'>空气净化器生产厂房</a><span class='time'>2013-05-30</span></li> <li class='list '><a href='Workshop/Workshop9.html' title=' 旋风式除尘设备生产厂房' target='_self'> 旋风式除尘设备生产厂房</a><span class='time'>2013

最近整理了之前写过的一个jquery插件，该插件主要功能实现类似于相册的功能，在图片网站上很常见。也有一些比较流行的图片预览组件比如fancybox。 但是fancybox依然有它无法解决的问题，比如它不支持缩放，只能弹出一个经过它计算后觉得合适的固定宽高图片。还有另外一个痛点，我找了一个可以缩放的组件，但是当我大图加载出来的时候，图片不是从头开始显示的，而是从图片中间开始。这对用户体验来说有点糟糕，我需要把图片重新拖到顶部再来欣赏图片。另外我的平台为设计师服务，绝大部多数图片都是手机上的长图或者pc上拼接起来的设计稿。因此，我决定自己写一个组件，解决这两个问题。 zoomimg基于以上的背景产生了，它解决问题： 图片不能自由缩放，即固定宽高问题； 大图加载出来不从头部开始显示，而从中间开始显示 github地址 ： https://github.com/jacoobwang/zoomImg （ 大家如果觉得还可以，希望可以给个star ） Gif演示 ，由于压缩原因，质量受到一定影响 使用方法： <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="zoom-img.min.js" ></script> <script type="text

日期：2012-4-21 来源： GBin1.com 在线演示1 在线演示2 本地下载 单 页面设计最近越来越流行了，使用单页面的网站简单优雅并且易于维护，你不需要修改很多文件来做日常维护，而且使用超酷的动态滚动方式来展示你的个人网站或 者公司网站，的确是一个非常不错的选择，今天这里我们将介绍给大家一款非常不错的单页面滚动式导航jQuery插件 - jQuery one page nav ，希望大家能够应用到自己的网站设计和开发中，如果你也喜欢这个插件，请给我们留言，谢谢！！ 主要特性 支持jQuery 需要scrollTo插件 使用简单 支持主流浏览器 使用简单 如何使用 HTML标签： <ul id="nav"> <li class="current"><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li"><a href="#section-3">Section 3</a></li> </ul> <div id="section-1"> <strong>Section 1</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

日期：2011/12/26 来源： GBin1.com 在线演示 本地下载 今天分享一款jQuery的UI插件 - Ninja UI ， 这个插件使用jQuery本身的语法来开发界面元素，而且你不需要关注CSS样式相关设定，因为整个CSS样式都被直接写到了插件中，不过坏处是，你需要 在开发前就确定好CSS，同时目前提供俩个类型的主题。插件使用简单，如果你会写jQuery代码，使用起来得心应手，支持的组件不是特别多，不过比较实 用，整个类库非常小，可以考虑使用其中某些组件。 支持组件： 自动补齐 autocomplete 按钮 button 对话框 Dialog 抽屉层 drawer 图标 icon 菜单 menu 星级评级 Rating 滑动器选择 Slider 标签 Tabs 支持主题： 缺省 DOJO 支持浏览器（HTML5浏览器）： Chrome Safari Firefox Internet Explorer* Opera 注释：IE9不支持Gradients，IE6-8不支持透明背景及其圆角 来源： 分享一款jQuery的UI插件：Ninja UI 来源： oschina 链接： https://my.oschina.net/u/156697/blog/37952

10个帮助你创建超棒jQuery插件的小技巧 日期：2012/02/29 来源： GBin1.com 这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件，很多开发人员都开发了很多不错的jQuery插件，但是对我们这些插件的使用者来说，很多jQuery插件的使用都不是那么直 接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说，如果你有一个非常好的架构，将会给你的开发带来极 大的益处。所以在正式开发前，进过深思熟虑还是非常有必要的。 1. 插件开发需要做到独立 这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作，如下： $("#gbin1-container").wTooltip(); 一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。 我曾经看到过了一些插件要求你配置div和属性id和class，然后要求你通过插件来参考。这样的配置应该在插件内处理，提供可开关的选项 2. 提供缺省的设置 很少有插件不提供任何的配置设定。和前面观点类似，我们肯定需要提供用户一些选项，这样可以帮助用户自己配置自己需要的效果并且扩展需求，更重要的在于帮助你推广你的插件 var…

jQuery插件能够增强网站的可用性，有效地改善用户体验，还可以大大减少创建一个新站点的开发时间。现在的jQuery插件很多，尽可以根据您的项目要求来选择，不过也有一些插件很好用，几乎各种项目都能够用得上。这里就为您介绍12款开发中最常用的jQuery插件。 1.jQuery BBCode Editor 下载地址： http://www.w3theme.com/jquery-bbedit/ Bbcode简单易用，它是BBS、论坛、Blog等网络应用上的一种常用输入语法。jQuery BbCode Editor提供自定义设置，可以打造出很个性化的bbcode编辑器，它的源代码都可以根据需求灵活修改。 2.Exposure 下载地址： http://plugins.jquery.com/project/Exposure/ Exposure是一个图片预览插件，用于创建丰富，自定义的视觉体验，可以处理海量图片。 3.jQuery YouTube Plugin 下载地址： http://www.tikku.com/jquery-youtube-tubeplayer-plugin 这个插件基本上是个标准的YouTube播放器API了。开发者省略了一些功能，但足够用了。 4.PoshyTip Tooltips 下载地址： http://vadikom.com/tools/poshy-tip

日期：2012-4-4 来源： GBin1.com 是不是想创建更加吸引眼球的网站和web应用？是不是想让你的网站和应用让用户感觉更加与众不同？如果你想让你的网站显得鹤立鸡群的话，绝对应该看 看今天我们给大家推荐的这8个超酷的javascript类库。这些类库可能我们在以前的文章中也介绍过。如果你能够有效地整合到你的网站和web应用 中，肯定会让你的网站充满乐趣和创意。我们包含了特种超酷特效，时间线(timeline)等，非常适合创建但页面的网站。大家来看看吧！希望我们的文章 请务必给我们留言，谢谢！ Timelinr jQuery Timelinr 是一个简单高效的jQuery插件帮助你提高时间轴的展现方式。绝对会让你的网站显得富有创意并且酷炫无比。这个时间轴同时支持垂直和水平方向的展示。 Timeline Timeline 在前面GBin1的文章中我们也介绍过，非常酷的一个时间轴的实现，支持整合各种不同的来源的内容，例如，图片，视频，iframe站外内容及其各种社交站点来源，twitter，youtube等。整个时间轴使用幻灯显示，非常拥有个性。 原文来自： 分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 来源： oschina 链接： https://my.oschina.net/u/156697/blog/52375

官方网址： validform.rjboy.cn Validform：一行代码搞定整站的表单验证！ 1 $ ( ".demoform" ) . Validform ( ) ; 为什么能如此方便？插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素，让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符，这样你可以随便添加或者去掉任一表单元素而不必修改验证代码，从而使仅用一行代码去完成整站的表单验证的梦想成为现实！ 功能简介： 囊括11种常见的格式验证形式，如果这些类型还不够，可以方便的传入自定义datype【可以是正则或函数】，实现几乎任何您需要的验证形式。 任何你想要的信息提示效果。tiptype可以传入1、2或函数，传入函数几乎可以实现任何你想要的提示效果，如元素右侧出现提示信息、弹出信息框等。另外还附加了$.Showmsg()、$.Hidemsg()全局弹出/关闭信息框方法以便整站有一个统一的信息提示效果【只要引入了该js文件就能调用这两个全局方法】； 当前版本外调插件可以实现文件上传检测、密码强度检测和日期控件效果； 支持ajax提交表单数据，也支持ajax实时反馈验证结果（如常见的用户注册表单下的用户名检测）； 支持开启网速慢时的二次提交防御（有时连续的点击提交表单按钮会产生多次的表单提交结果）； 指定表单下任一元素在单击时触发表单提交事件；

日期：2012-4-20 来源： GBin1.com 如果你使用jQuery进行Ajax开发的话，你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML 。它是一款能够帮助你提高ajax开发效率的辅助插件，能够将你的ajax开发时间缩短为正常的60%。如果你没有尝试过这款插件，现在就下载一个试试吧！ 主要特性 开发简单，能够有效地缩短ajax代码的长度 支持表单递交和文件上传 支持浏览器的历史记录，可以回到上一次递交的页面状态 支持基本所有的主流浏览器包括IE6+，firefox，chrome，safari 如何使用 你需要下载如下js文件： AjaxML的类库 jQuery类库 jQuery hashchange plugin Ajax loading animations 倒入类库： <head> <script src="jquery.js"></script> <script src="jquery.hashchange.js"></script> <script src="ajaxml.js"></script> </head> 使用jQuery开发的ajax代码： <html> <head> <script src="jquery.js"></script> <script> function sayHello(){ $("#target").html(

日期：2012/02/06 来源： GBin1.com 在线演示 在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen，它能够帮助网站实现针对阅读内容的全屏显示功能。 这个插件基于 Full Screen API .，目前有半数的浏览器支持这个API。 支持 Firefox 10 , Safari and Chrome ; 使用requestFullScreen() 方法触发; 可以支持任何元素的全屏显示，而不仅仅是页面 由于安全原因，只支持用户触发全屏 也由于安全原因，输入被严格控制，除了方向键其它按键不能使用 API还不完善，只能使用浏览器指定方法（前缀为 moz and webkit） jQuery代码 jQuery(document).ready(function($){ if($.support.fullscreen){ $('#fullscreen').click(function(e){ $('#content').fullScreen(); e.preventDefault(); }); } }); 来源： 分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen 来源： oschina 链接： https://my.oschina.net/u/156697/blog/40090