jquery组件和插件写法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script> $.fn.toRed = function(){
//插件里面的this 是jquery对象
this.css("background","red");
}; $.fn.toGreen = function(){
//插件里面的this 是jquery对象
this.css("background","green");
}; $(function(){
$("#div1").toggle(function(){
$(this).toRed();
},function(){
$(this).toGreen();
});
});
</script>
</head> <body> <div id="div1"></div> </body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script> $.fn.extend({
toRed:function(){
this.css("background","red");
},
toGreen:function(){
this.css("background","green");
}
}); $(function(){
$("#div1").toggle(function(){
$(this).toRed();
},function(){
$(this).toGreen();
});
});
</script>
</head> <body> <div id="div1"></div> </body>
</html>
<!--
智能社© - http://www.zhinengshe.com/ 微博：@北京智能社
微信：zhi_neng_she 最具深度的前端开发培训机构 HTML+CSS/JS/HTML5
--> <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能社</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.7.2.js"></script>
<script src="slide.js"></script>
<script>
$(function(){
$("#play").slide();
$("#play2").slide();
});
</script>
</head> <body> <div class="play" id="play">
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/5.jpg" alt="广告五" /></a></li>
</ul>
</div> <div class="play" id="play2">
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
</body>
</html>
//版权 北京智能社©, 保留所有权利
$.fn.slide = function (){
var $aBtn =this.find("ol li");
var $oUl = this.find("ul");
var $aLi = this.find("ul li");
var iNow = ;
var timer = setInterval(next,);
this.hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(next,);
});
function next(){
iNow++;
if(iNow == $aLi.length){
iNow = ;
}
tab();
}
$aBtn.mouseover(function(){
iNow = $(this).index();
tab();
});
function tab(){
$aBtn.removeClass("active");
$aBtn.eq(iNow).addClass("active");
$oUl.stop().animate({top:-$aLi.height()*iNow});
}
};
jquery组件和插件写法的更多相关文章
- Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
- jQuery组件写法
知识点: 什么是插件 jQuery插件的模式 jQuery插件的Lightweight Start模式(入门级插件模式) 8.1 插件(Plug-in) “插件”这个关键字,估计大家在日常生活中经常有 ...
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- 封装两个简单的Jquery组件
Jquery给我们提供了很大的方便,我们把他看成是一个公共库,以致在这个公共库上延伸出了很多Jquery插件:在项目过程中,有些插件总是不那么令人满意: 主要说两个项目用途: 1. 遮罩层,跟一般的 ...
- jQuery组件开发之表格隔行选中效果实现
一.效果展示如下 jQuery组件之表格插件源码 //表格选中插件 //方式一 (function($){ var chosTabBgColor = function(options){ //设置默认 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- 10 个免费的 jQuery 可视化编辑器插件
富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...
随机推荐
- 20144303石宇森《网络对抗》注入shellcode和Return-to-libc攻击
20144303石宇森<网络对抗>PC平台逆向破解 实验1:shellcode注入 实验基础 1.Linux下有两种基本构造攻击buf的方法:retaddr+nop+shellcode,n ...
- Android 实践项目开发 总结
Android 实践项目开发 总结 课程:移动平台应用开发实践 班级:201592 姓名:杨凤 学号:20159213 成绩:___________ 指导老师:娄嘉鹏 ...
- 利用.bat(批处理)来删除KEIL编译生成的无用文件
新建一个.txt文件. 在里面输入如下内容: del *.bak /s del *.ddk /s del *.edk /s del *.lst /s del *.lnp /s del *.mpf /s ...
- RSA加密解密中pkcs1与pkcs8格式私钥互相转换
net,ios中rsa加解密使用的是pkcs1,而java使用的是pkcs8 如果是按1024取模(通常都是1024),pkcs1格式的私钥长度应该是812.如果是pkcs8的格式的密钥长度为861. ...
- hdu6446 网络赛 Tree and Permutation（树形dp求任意两点距离之和）题解
题意:有一棵n个点的树,点之间用无向边相连.现把这棵树对应一个序列,这个序列任意两点的距离为这两点在树上的距离,显然,这样的序列有n!个,加入这是第i个序列,那么这个序列所提供的贡献值为:第一个点到其 ...
- 网络量化——Quantized Convolutional Neural Networks for Mobile Devices
论文地址:https://arxiv.org/abs/1512.06473 源码地址:https://github.com/jiaxiang-wu/quantized-cnn 1. 主要思想 这篇文章 ...
- python从字符串解析方法名
方法如下 import requests func_name = 'get' fn_obj = getattr(requests,func_name) fn_obj('http://www.baidu ...
- lncRNA研究利器之"TANRIC"
http://bioinformatics.mdanderson.org/main/Main_Page http://ibl.mdanderson.org/tanric/_design/basic/i ...
- python ros 回充demo
#!/usr/bin/env python #coding=utf- import rospy from std_msgs.msg import String i= def talker(): glo ...
- python filter函数
number_list = range(-, ) less_than_zero = list(filter(lambda x: x < , number_list)) print(less_th ...