JQuery插件开发简单实例
经常使用Jquery的各种插件,却对如何开发插件一无所知,以为是一件很麻烦的事儿?其实不然,下面通过一个简单的实例,来看一下Jquery Plugin的开发。
先看DEMO:动画菜单
不用插件如何实现以上效果:
$(document).ready(function() { $('ul#menu li:even').addClass('even'); $('ul#menu li a').mouseover(function() { $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 }); }).mouseout(function() { $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 }); }).click(function() { $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
}); });
我们希望封装成插件:
$(document).ready(function() { $(#menu).animateMenu({
padding:20
}) });
JQuery插件结构
(function($){
//定义JQuery插件
$.fn.extend({ //插件名称
pluginname: function() {
//对选择出的每个Jquery对象执行操作
return this.each(function() { //插件代码 });
}
}); })(jQuery);
带有选项的插件结构
(function($){
$.fn.extend({ //传递选项
pluginname: function(options) {
//默认选项
var defaults = {
padding: 20,
mouseOverColor : '#000000',
mouseOutColor : '#ffffff'
} var options = $.extend(defaults, options);
return this.each(function() {
var o = options; //插件代码
//访问选项值
alert(o.padding); });
}
}); })(jQuery);
动画菜单插件代码
(function($){
$.fn.extend({
//插件名 - animatemenu
animateMenu: function(options) {
//默认设置
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee'
}; var options = $.extend(defaults, options); return this.each(function() {
var o =options; //当前菜单
var obj = $(this); //所有菜单项
var items = $("li", obj); //设置背景色
$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor); //添加鼠标事件
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300); }).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);
}); });
}
});
})(jQuery);
全部测试代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function($){
$.fn.extend({
animateMenu: function(options) {
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee',
}; var options = $.extend(defaults, options); return this.each(function() {
var o =options;
var obj = $(this);
var items = $("li", obj); $("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor); items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300); }).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300); });
});
}
});
})(jQuery); </script> <script type="text/javascript">
$(document).ready(function() {
$('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
});
</script>
<style>
body {font-family:arial;font-style:bold}
a {color:#666; text-decoration:none}
#menu {list-style:none;width:160px;padding-left:10px;}
#menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Posts</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
JQuery插件开发简单实例的更多相关文章
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- jQuery简单实例
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...
- jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
- jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
- 【转】简单的jQuery插件开发方法
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用 ...
- jquery翻页turnjs简单实例
jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...
- PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
随机推荐
- 11.ok6410之led驱动程序编写
led驱动程序编写 本文主要包含三部分,led驱动程序led.c编写,编译驱动程序的makefile的编写,以及使用驱动程序的应用程序led_app的编写 一.led.c编写 #include < ...
- 注解:【基于主键的】Hibernate1->1关联
参考:http://blog.sina.com.cn/s/blog_674b23220100hjb5.html Husband.java package org.crazyit.app.domain; ...
- POJ 3261 Milk Patterns 后缀数组求 一个串种 最长可重复子串重复至少k次
Milk Patterns Description Farmer John has noticed that the quality of milk given by his cows varie ...
- HDU 2045 不容易系列之(3)―― LELE的RPG难题(递推)
题意:有排成一行的n个方格,用红(Red).粉(Pink).绿(Green)三色涂每个格子,每格涂一色,要求任何相邻的方格不能同色,且首尾两格也不同色.求全部的满足要求的涂法. 题解:本来当n=1时, ...
- 将android模拟器上的db文件拷贝到电脑上
1. db文件在android手机中的存储地址一般都是/data/data/packname/databases/db_file. 2.打开cmd,运行 adb shell ,使用root权限 3.通 ...
- Linux学习笔记(5)-hello world
经过三天的熟悉,我已经将教程中那些常用命令都使用了一遍,所以,从今天起,我已经从一直Linux菜鸟蜕变成了大雕-- Linux的命令无穷多,要想背下来那肯定是不可能的,所以我的目标便是混个手熟,那些常 ...
- 逗号分割符--字段中含逗号等情况的解析方法Java实现
最近在处理文本字符串时,没一行数据都是按照逗号分割的,每个字段值一般情况是带有双引号的,但是有的字段值里面还包含逗号,甚至有的字段就没有双引号,这个分割起来就有点麻烦了 下面说一下我解决方法,如果谁有 ...
- JAVE not work in linux
1, it will print out exception, but still can convert the audio 2, it works in windows not linux, ne ...
- Windows中使用OpenBLAS加速R语言计算速度
在使用R的时候会发现R对CPU的利用率并不是很高,反正当我在使用R的时候,无论R做何种运算R的CPU利用率都只有百分子几,这就导致一旦计算量大的时候计算时间非常长,会给人一种错觉(R真的在计算吗?会不 ...
- php 执行程序分析
记录程序运行细节 记录程序运行时间 <?php $start = microtime(true); //index.php $end = microtime(true); $time = num ...