该插件被广泛应用于各种需要评分的页面当中，今天作为学习，把源码拿出来分析一下，顺便学习其使用方法。 一、插件使用一览。 代码如下: 第一个例子 代码如下: $(function () { $(".myRating").jRating({ length:10 }); }); 执行效果： 可以看到，上面的例子中，有10颗星，是参数length的作用。其中，默认总分是20分，就是10颗星都选择。这里我们着重注意的id16_1，其中16被用来初始化评分插件默认选择的比例，16/20 *...
在jquery中，extend其实在做插件时还是用的比较多的，今天同时小结jquery和ext js中 的extend用法，先来看jquery中的。 1） extend(dest,src1,src2,src3...); 代码如下: var start = { id: 123, count: 41, desc: this is information, title: Base Object, tag: uncategorized, values: [1,1,2,3,5,8,13]}; var more = { name: Los Techies, tag: javascript}; var extra = { count: 42, title: null, desc: undefined, values: ...
功能：zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog，该插件对背景进行遮罩，然后弹出信息显示框，信息显示种类包括： 一、信息种类说明： 1.1、操作成功信息1.2、错误信息1.3、警告信息1.4、通知信息二、使用说明 代码如下: Insert title here var options = { 'dialogType' : 'info', 'theme' : 'info', 'message' : '数据加载完成！', 'refresh' : false }; $("#test").showInfoDialog(options...
1.开发jQuery 插件的基本格式 代码如下:(function ($) { $.extend($.fn, { }) })(jQuery) 2.开发全局函数的基本格式 代码如下: (function ($) { $.extend($, { }) })(jQuery) 开发示例： 代码如下: (function ($) { $.extend($, { subtract: function (a, b) { return a-b; } , add: function (a, b) { return a+b; }, multiplication: function (a, b) { return a*b; }, divisi...
1、图片局部放大 jQZoom Evolution (演示 | 下载)2、信息提示框
模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式。通过模态窗口，可以提高网站的可用性。正好项目的需要，有个客户想要模态弹出的窗体来提交网站的反馈，经过一番测试实现了，我使用jQuery fancybox插件来创建一个漂亮的模态窗体，提交表单的数据在服务器端实现Ajax调用。你可以在你的邮件里收到用户发送的反馈消息html代码 header部分主要的JS文件如下引入jquery代码和fancybox代码 代码如下: 演示首先，从官网...
因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码。 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟文本框一样 maxheight: 150, //提示框的最大高度 top: 6, //与文本框的上下距离 url: "", //ajax 请求地址 ...
这个插件的名字elevatezoom，网址为http://www.elevateweb.co.uk/image-zoom，在github上的项目首页为https://github.com/elevateweb/elevatezoom，建议去github下载，这个网速比较快。 实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。 下面给出一个例子(在github下载的代码中...
引入下方的jquery.rotate.js文件，然后通过$("选择器").rotate(角度);可以旋转任意角度， 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度。 不过，貌似在Chrome中总是不显示。 唉，找了两个小时，才发现Chrome太坑爹了，没法获取图片的长宽。 解决办法是，把$("#rotate-image").rotate(45);放在 $(window).load(function(){ });中，因为在Chrome中图片在...
在Web中用到多选项卡功能的网站有很多，比如163和126邮箱，用过的人知道。本人在那么多的类似插件中，目前碰到这个比较好，花了点时间调试出来了，请看效果图：这款插件叫jqueryMagicTabs，上图实现了基本功能，如添加选项卡，选择指定的选项卡。当添加的选项卡超过一定长度时会出现左右滑动的按钮，同时支持鼠标滑动选项卡。 这段代码如下所示： 代码如下:pageEncoding="UTF-8"%> MagicTabs的基础用法 $(function(...
代码如下: // 下面的插件部分建议放在js文件中， 方便调用 //-------------- 插件 begin ------------------ (function ($) { //屏蔽，适合单个元素. $.fn.mask = function () { var divHtml = ' '; $(this).wrap(''); $(this).parent().append(divHtml); $(this).data("mask","true"); } //取消屏蔽 $.fn.unmask = function () { $(this).parent().find(".divMask").remove(); $(this).unwrap(); $(this).data("mask", "f...
之前做一个项目，感觉里面的弹出层做的挺好，但是代码结构有问题，这次用到了，重构了一下，改成jQuery的插件形式，并增加了reLoad的功能，感觉还不错，代码如下： 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width=$(document).width()+"px"; if(this.coverLayer.length>0){ this.coverLayer.css({"visibility"...
代码如下: // $(function () {// $('#a').validate({// rules: {// username: { required: true, minlength: 6, maxlength: 12 },// email: { required: true, email: true }// },// errorshow: function (error, element) {// error.appendTo(element.siblings('span'));// ...
代码如下: $(function () { $('#form1').validate({ rules: { txtUser: { required: true, minlength: 6 }, txtPassword: { required: true, minlength: 6 }, txtConfirm: { required: true, minlength: 6, equalTo: "#password" }, txtHomePage: { required: true, url: true }, txtBirt...
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内...