第一个jquery插件(jquery插件)
目录
用 [TOC]
来生成目录:
jquery准备知识
第一步:引入插件,注意依赖项,先引入 jquery
第二步:通过插件提供的 API 实现我们所要的业务
Module模式
var HelloWorld = function(objId){
var get_dom = function(Id){
return $("#"+objId);
}
var _aim_obj = _get_dom(objId);
var _say_hello = function(str){
_aim_obj.innerHTML = str;
}
return{
sayHello:_say_hello
}
}
(function(){})();//自执行
基础代码
var plugin =(function(){
//执行方法
function _firstFunc(str){
console.log(str);
};
//返回方法
return{
firstFunc: _firstFunc,
};
})();
展示成果
展开后的
折叠后的
展示代码
js代码
//model模式
var Fold = function (objId){
//封装获取对象的方法
var get_dom = function(Id){
return $("#"+objId);
}
//声明全局变量
var get_div =null;
var get_btn =null;
var dataValue =null;
//遍历div对象
get_dom(objId).ready(function(){
get_div = $('#'+objId+' div').attr("class");
dataValue = $('#'+objId+' div').attr("dataValue");
get_btn = $('#'+objId+' button').attr("class");
});
//执行方法
var flod = function(){
if(dataValue =="open"){
$("."+get_div).attr("style","display:none");
$("."+get_div).attr("dataValue","close");
$("."+get_btn)[0].innerHTML = "展开";
}
if(dataValue =="close"){
$("."+get_div).attr("style","display:block");
$("."+get_div).attr("dataValue","open");
$("."+get_btn)[0].innerHTML = "折叠";
}
}
//返回执行方法
return {
flod : flod
}
}
html代码
<div id="left-flod">
<div class="display-content" dataValue="open">
折叠区
</div>
<button class="flod-btn" onclick="zhedie()" style="float: left;">折叠</button>
</div>
html 调用代码
function zhedie(){
Fold("left-flod").flod();
}
插件学习,加油
这里讲的比较详细:http://www.cnblogs.com/cboyce/p/6029782.html