教你开发Jquery插件-Jquery插件开发教程
开发jquery插件之前首先要调用Jquery,这个可以去http://jquery.com下载得到.然后我们看一下我写的这个例子:
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
(function($){
$.fn.examp=function(_opt){
//配置参数
alert(_opt._a+' | '+_opt._b);
onBackCell();
function onBackCell(_cell){
if(_opt.onBack!=null){_opt.onBack(_cell);}
}
}欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
//特殊參數傳遞方法
$.examp1 = function(opt){
alert(opt.typ+' | '+opt.hid);
}
})(jQuery)
//插件調用
$(function(){
$("img").examp({
_a:"AAA",
_b:"BBB",
onBack:function(cell){
alert('回調函數');
}
});
$.examp1({
'typ':'show',
'hid':'id1'
});
});
</script>
上边的这个例子我采用了两种方式,第一种是捆绑对象,第二种方法你可以把它理解成是function就好了.上边的两个例子可以拆分为以下两个例子,请看代码:
第一个:绑定对象
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
(function($){
$.fn.examp=function(_opt){
//配置参数
alert(_opt._a+' | '+_opt._b);
onBackCell();
function onBackCell(_cell){
if(_opt.onBack!=null){_opt.onBack(_cell);}
}
}
})(jQuery)
//插件調用
$(function(){
$("img").examp({
_a:"AAA",
_b:"BBB",
onBack:function(cell){
alert('回調函數');
}
});
});
</script>
第二个:不绑定对象
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
(function($){
//特殊參數傳遞方法
$.examp1 = function(opt){
alert(opt.typ+' | '+opt.hid);
}
})(jQuery)
//插件調用
$(function(){
$.examp1({
'typ':'show',
'hid':'id1'
});
});
</script>
通过上边的三个例子我们不难发现,插件的代码需要放置在
(function($){
和
})(jQuery)
之间
而jquery的普通代碼需要放在
$(function(){
和
})
之间.
教你开发Jquery插件-Jquery插件开发教程相关推荐
- 40个新鲜出炉的 jQuery 插件和免费教程【上篇】 转载自:梦想天空
40个新鲜出炉的 jQuery 插件和免费教程[上篇] 转载于:https://www.cnblogs.com/chenjunLovefan/archive/2012/07/23/2605003.ht ...
- 推荐60个jQuery插件及使用教程
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- 分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen
在线演示 在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能. 这个插件基于Full Screen A ...
- 一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top
日期:2011/11/17 来源:GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置.它能快速的将页面里的元素添加滚动到顶端的功能.而且只在滚动时才出现,当滚动到顶端自动消失. ...
- Google分析用户页面滚动深度分析jQuery插件 - jQuery Scroll Depth
日期:2012-4-29 来源:GBin1.com Google Analytics(Google分析)对于广大站长来说,肯定不是一个陌生的工具,它能提供给我们众多的网站访问相关信息及其用户使用情况 ...
- idea如何自制插件_Minecraft插件开发教程-开发环境配置 [原创]
Hello 各位小阔爱们好 时隔2个多月 我又回来了 这一期专栏有些特别 让我们一起来制作一个简单的Minecraft插件吧~ 本教程为原创作品 不得随意转载 求硬币 收藏 点赞 关注! 写专栏是贞德 ...
- 设置div圆角的jquery插件-jquery.corner.js
代码 /*! * jQuery corner plugin: simple corner rounding * Examples and documentation at: http://jque ...
最新文章
- Ubuntu16.04菜单栏侧边栏不显示
- XML实现Android动画效果anim
- “榕树下·那年”移动app ( hybrid ) 开发总结
- linux 匹配文本中的ip,linux文本三剑客匹配网卡IP地址大PK(CentOS 7系统)
- 机器人写诗项目——递归神经网络(RNN)
- 不知道如何选择的时候,付诸行动比选择更重要
- php 输出缓冲区清理
- 10 张令人喷饭的程序员漫画
- 【论文阅读】Deep Neural Networks for Learning Graph Representations | day14,15
- 速度挑战 - 2小时完成HTML5拼图小游戏
- 庆祝我的第一个WebGis完成-c#+MapXtreme2004
- NAT技术与代理服务器
- 错误码应该如何设计?
- 安装UWB定位系统设备需要注意什么?
- 书评精益创业-新创企业的成长思维 (上)
- 运筹说第38期“迟到“的毕业证-趣闻轶事(三)
- mysql ibd恢复数据_mysql通过ibd恢复数据
- 基于SSM的设备租赁管理系统
- PS系列 -- 颜色替换
- 【托福考场考点1】山东大学托福考点详情及考友评价
热门文章
- Windows下使用taskkill 命令批量结束进程
- Soul网关源码阅读番外篇(一) HTTP参数请求错误
- android 布局变化动画效果,使用LayoutTransition实现布局变化时的动画
- mpandroidchart组合图_使用MpAndroidChart组合图,如何将图表分成上下两部分?
- request.getRequestDispatcher().forward(request,response)和response.sendRedirect()的区别
- JavaScript中的 in 操作符
- linux 关闭rsync服务器,linux下配置rsync服务器和实时同步
- SecureCRT 连接Win10内置ubuntu问题层层突围
- 自建latex服务器,通过在线服务器编译LaTeX
- yum php5.6源码,5.2 YUM升级PHP5.6