jquery tools系列 expose 学习_jquery
程序员文章站
2022-04-18 12:25:44
...
如overlay的学习,首先给出操作的html目标代码:
expose test!
该功能是通过jqueryObject.expose()方法来实现的,其具体实现方式如下:
$("jquery selector").expose({config object}) //该方法通过配置对象将来定制expose的显示。
以下代码为配置参数说明描述:
对于expose配置对象属性设置及方法调用的具体使用方法如下:
var testApi=$("#test").expose({
color:'#44f',
opacity:0.5,
loadSpeed:2000,
closeSpeed:3000,
closeOnClick:false,
closeOnEsc:false,
api: true,
lazy:true,
onBeforeLoad:function(){
alert("before load!");
},
onLoad:function(){
alert("onLoad!");
},
onBeforeClose:function(){
alert("mask-background:"+this.getMask().css("color")+",exposeId:"+this.getExposed().attr("id")
+"\n expose color:"+this.getConf().color);
//alert("Before close!");
},
onClose:function(){
alert("Close!");
}
});
$("#test").click(function() {
testApi.load();
});
$("#btn_open").click(function(){
testApi.load();
});
$("#btn_close").click(function(){
testApi.close();
});
alert("test is load:"+testApi.isLoaded());
$("#ball").expose({
//此处通过maskId中样式的backgroundcolor来设置color属性
maskId:'mask',
opacity:0.5,
closeSpeed:'slow',
onBeforeLoad:function(){
this.getExposed().animate({width:298});
},
onBeforeClose:function(){
this.getExposed().animate({width:130});
}
}).click(function(){
$(this).expose().load();
});
最后,给出完整示例代码及该功能得部分demo图片:
BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
expose test!
复制代码 代码如下:
expose test!
该功能是通过jqueryObject.expose()方法来实现的,其具体实现方式如下:
$("jquery selector").expose({config object}) //该方法通过配置对象将来定制expose的显示。
以下代码为配置参数说明描述:
方法 | 返回值 | 详细描述 |
load() | API | 触发expose(突出显示)效果,该方法只有expose(突出显示)被初始化后才能调用成功。 |
close() | API | 关闭expose(突出显示)效果。 |
isLoaded() | boolean | 判断当前expose(突出显示)是否已被触发。 |
getMask() | jQuery | 返回非expose(突出显示)的jquery对象。可以通过jquery的相关方法来改变非expose(突出显示)区域的显示效果。 |
getExposed() | jQuery | 返回expose(突出显示)的jquery对象。 |
getConf() | Object | 返回expose(突出显示)的配置对象。 |
onBeforeLoad(fn) | API | 同配置文件中onBeforeLoad属性。 |
onLoad(fn) | API | 同配置文件中onLoad属性。 |
onBeforeClose(fn) | API | 同配置文件中onBeforeClose属性。 |
onClose(fn) | API | 同配置文件中onClose属性。 |
复制代码 代码如下:
var testApi=$("#test").expose({
color:'#44f',
opacity:0.5,
loadSpeed:2000,
closeSpeed:3000,
closeOnClick:false,
closeOnEsc:false,
api: true,
lazy:true,
onBeforeLoad:function(){
alert("before load!");
},
onLoad:function(){
alert("onLoad!");
},
onBeforeClose:function(){
alert("mask-background:"+this.getMask().css("color")+",exposeId:"+this.getExposed().attr("id")
+"\n expose color:"+this.getConf().color);
//alert("Before close!");
},
onClose:function(){
alert("Close!");
}
});
$("#test").click(function() {
testApi.load();
});
$("#btn_open").click(function(){
testApi.load();
});
$("#btn_close").click(function(){
testApi.close();
});
alert("test is load:"+testApi.isLoaded());
$("#ball").expose({
//此处通过maskId中样式的backgroundcolor来设置color属性
maskId:'mask',
opacity:0.5,
closeSpeed:'slow',
onBeforeLoad:function(){
this.getExposed().animate({width:298});
},
onBeforeClose:function(){
this.getExposed().animate({width:130});
}
}).click(function(){
$(this).expose().load();
});
最后,给出完整示例代码及该功能得部分demo图片:
复制代码 代码如下:
BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
expose test!
上一篇: php无限分类使用concat如何实现
下一篇: ASP基础知识Command对象讲解
推荐阅读
-
javascript - jQuery('#cancel').removeAttr('disabled');这句话IE不能兼容,你能给出兼容IE系列,FF,chrome的程序?
-
jQuery学习笔记之创建DOM元素
-
深入学习jQuery中的data()
-
40款非常棒的jQuery 插件和制作教程(系列二)_jquery
-
js和jquery中循环的退出和继续学习记录_javascript技巧
-
非常有用的40款jQuery 插件推荐(系列二)_jquery
-
Jquery入门学习篇--选择器(一)
-
通过jQuery学习js类型判断的技巧
-
通过jQuery学习js类型判断的技巧
-
jQuery学习笔记之jQuery动画效果