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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
详解如何修改 node_modules 里的文件
May 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
详解vue配置后台接口方式
2019/03/29 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
python self,cls,decorator的理解
2009/07/13 Python
python的else子句使用指南
2016/02/27 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
详解Python 正则表达式模块
2018/11/05 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Python列表操作方法详解
2020/02/09 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python的列表List求均值和中位数实例
2020/03/03 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
复核员上岗演讲稿
2014/01/05 职场文书
2014年清明节寄语
2014/04/03 职场文书
环保建议书600字
2014/05/14 职场文书
安全生产月标语
2014/10/07 职场文书
大学生党员自我评价
2015/03/04 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python