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 ...
随机推荐
- 【前端】Vue.js实现实例搜索应用
实例搜索应用 实现效果: 实现代码与注释: <!DOCTYPE html> <html> <head> <title>实例搜索</title> ...
- Go第八篇之包的使用
Go 语言的源码复用建立在包(package)基础之上.Go 语言的入口 main() 函数所在的包(package)叫 main,main 包想要引用别的代码,必须同样以包的方式进行引用,本章内容将 ...
- luogu P1880石子归并
石子归并 luogu1880 传送门 noi1995 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得 ...
- 试着用React写项目-利用react-router解决跳转路由等问题（三）
转载请注明出处:王亟亟的大牛之路 本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink和 onlyActiveOnIndex ...
- 51NOD 1087 1 10 100 1000
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1087 暴力大法 #include<bits/stdc++.h> ...
- C# 获取SQL Server所有的数据库名称
参考文章:http://www.cnblogs.com/Abel_cn/archive/2008/12/09/1351425.html http://blog.csdn.net/friendan/ar ...
- Java I/O学习 文件读写工具
import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundException; import jav ...
- python ros 使用launch文件启动脚本
目录结构 在包里面新建scripts文件夹,里面放运行的脚本文件,记得设置执行权限 然后新建launch文件夹,新建launch文件按照如下格式写: <node pkg="initia ...
- shell until 循环
until 循环 格式: until condition do command done #输出0-9 #!/bin/bash a=0 until [ ! $a -lt 10 ] do echo ...
- jsonp跨域远离
http://blog.csdn.net/sky_beyond/article/details/54096275 function ajax( obj ){ // 默认参数 由于 jsonp 原理是 ...