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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
jQuery is()函数用法3例
May 06 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
JavaScript实现区块链
2018/03/14 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
sort命令的作用和用法
2012/11/04 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
师德模范事迹材料
2014/06/03 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
秋收起义观后感
2015/06/11 职场文书
交通安全教育心得体会
2016/01/15 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL