jquery tools系列 expose 学习


Posted in Javascript onSeptember 06, 2009

如overlay的学习,首先给出操作的html目标代码:

<div id="test"> 
    expose test! 
</div> <div style="margin:0 auto;width:300px"> 
    <img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" /> 
</div> 
<div style="position:relative;z-index:10000"> 
<button type="button" id="btn_open">open div</button> 
<button type="button" id="btn_close">close div</button> 
</div>

该功能是通过jqueryObject.expose()方法来实现的,其具体实现方式如下:
$("jquery selector").expose({config object}) //该方法通过配置对象将来定制expose的显示。
以下代码为配置参数说明描述:
属性 默认值 详细描述
color '#456' 设置页面中非expose(突出显示)区域在expose(突出显示)效果显示时的背景颜色。如果此处未设置背景色,那么expose功能会提供一个默认的颜色。另外属性亦可通过maskId的CSS样式来设置。
opacity 0.8 设置页面中非expose(突出显示)区域在expose(突出显示)效果显示时的背景透明度。该处透明度的取值范围为[0,1],该处值越大,透明度越低。
loadSpeed 'slow' 设置页面中非expose(突出显示)区域在expose(突出显示)效果触发时的显示速度。该处值可设置为:'slow','normal','fast'和毫秒数值。例如:如果此处设置值为2000,那么非expose(突出显示)区域效果将会在2秒钟中内显示完成。如果此处设置值为0,那么非expose(突出显示)区域将会没有动画效果并立即显示出来。
closeSpeed 'fast' 设置页面中非expose(突出显示)区域在expose(突出显示)效果关闭时的关闭速度。该处值可设置为:'slow','normal','fast'和毫秒数值。具体示例可参见本文相关示例。
   
maskId 'exposeMask' 非expose(突出显示)区域对应的页面div元素id,它是一个普通的div元素,当expose(突出显示)被触发后,他会自动调整以完全的覆盖整个页面。非expose(突出显示)区域的显示效果可以通过设置该处div的样式来改变。如果此处没有设置,那么该插件会默认提供一个id为exposeMask的div来实现非expose区域。
closeOnClick TRUE 该属性用于设置非expose区域被点击时,是否关闭expose(突出显示)效果。该属性默认值为true,及非expose区域被点击后,expose效果被关闭。
closeOnEsc TRUE 该属性用于设置Esc键被按下后,是否关闭expose(突出显示)效果。该属性默认值为true,及Esc键被按下后,expose效果被关闭。
zIndex 9998 设置页面设置页面中非expose(突出显示)区域的z-index(CSS)属性。一般情况下,默认的zIndex属性值都非常大,所以这里不需要设置,但是,有一点需要注意的是,该非expose(突出显示)的z-index属性值一定要大于页面中任何一个元素的z-index属性。
api FALSE 该属性解释可参见本系列中tabs,scollable等功能同属性的解释。
   
onBeforeLoad   expose(突出显示)效果触发前调用函数。如果该函数返回false,那么expose(突出效果)将会被阻止实现。
onLoad   expose(突出显示)效果实现后,该函数被触发。
onBeforeClose   expose(突出显示)效果关闭前调用函数。如果该函数返回false,那么expose(突出效果)将会被阻止关闭。
onClose   expose(突出显示)效果关闭后,该函数被触发。
此外,expose还提供了一系列获取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属性。
对于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图片:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script src="http://flowplayer.org/tools/js/tools/1.0.2/jquery.tools.min.js" ></script> 
<style><!-- 
#test { 
    border:1px solid #ccc; 
    background-color:#fff; 
    padding:50px; 
    font-size:30px; 
    margin:20px auto; 
    text-align:center; 
    width:600px; 
} 
#mask { 
background:#072a88 url(http://flowplayer.org/tools/img/expose/mask_star_1600px.jpg) no-repeat scroll 50% -274px; 
} 
--></style><style >#test { 
    border:1px solid #ccc; 
    background-color:#fff; 
    padding:50px; 
    font-size:30px; 
    margin:20px auto; 
    text-align:center; 
    width:600px; 
} 
#mask { 
background:#072a88 url(http://flowplayer.org/tools/img/expose/mask_star_1600px.jpg) no-repeat scroll 50% -274px; 
}</style> 
<div id="test"> 
    expose test! 
</div> 
<div style="margin:0 auto;width:300px"> 
    <img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" /> 
</div> 
<div style="position:relative;z-index:10000" > 
<button type="button" id="btn_open">open div</button> 
<button type="button" id="btn_close">close div</button> 
</div> 
<script type="text/javascript"><!-- 
$(function(){ 
    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(); 
    }); 
}); 
// --></script>
Javascript 相关文章推荐
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
jquery tools 系列 scrollable(2)
Sep 06 #Javascript
jquery tools 系列 scrollable学习
Sep 06 #Javascript
javascript事件问题
Sep 05 #Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 #Javascript
JavaScript 密码强度判断代码
Sep 05 #Javascript
关于javascript中的parseInt使用技巧
Sep 03 #Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 #Javascript
You might like
php绘制一个扇形的方法
2015/01/24 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python制作爬虫采集小说
2015/10/25 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python实现程序重启和系统重启方式
2020/04/16 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
计算机求职自荐信范文
2014/04/19 职场文书
优秀纪检干部材料
2014/08/27 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
德劲DE1105机评
2022/04/05 无线电