jquery tools系列 overlay 学习第1/2页

如scrollable的学习，首先给出操作的html目标代码：


代码如下:

<button rel="#overlay">Open overlay</button>
<button rel="#overlay2">Other overlay</button>
<div class="overlay" id="overlay">
    <h2 style="margin:10px 0" >Here is my overlay</h2>
    <p style="float: left; margin:0px 20px 0 0;">
        <span>$$$$$$$$$$</span>
    </p>
    <p>
         Class aptent taciti sociosqu ad litora torquent per conubia nostra,
         per inceptos himenaeos. Donec lorem ligula, elementum vitae,
         imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
    </p>
</div>
<div class="overlay" id="overlay2">
    <h2 style="margin:10px 0" >Here is my another overlay</h2>

<p>
         Class aptent taciti sociosqu ad litora torquent per conubia nostra,
         per inceptos himenaeos. Donec lorem ligula, elementum vitae,
         imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
    </p>
    <div>
        <button id="overlayClose">close</button>
    </div>
</div>

该功能是通过jqueryObject.overlay()方法来实现的，其中overlay方法提供以下两种方式：
1. $("button[rel]").overlay()//该方法能采用默认方法显示提示overlay
2. $("button[rel]").overlay({config object}) //该方法通过配置对象将来定制overlay的显示。
以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：


代码如下:

$("#overlay").overlay({api:true}).load();//自动显示overlay,（无需触发，会在页面加载完成时自动触发）
    $("button[rel]").overlay({
        start:{
            width: 300,
            absolute: false    
        },
        finish:{
            top:10,
            left:400,
            absolute:false
        },
        speed:3000,
        fadeInSpeed:3000,
     closeOnClick: false,
    oneInstance:false,
    close:'#overlayClose',//自定义关闭按钮
        //expose: '#BAD0DB'//方式一：只以简单的背景色字符串方式设置
        expose: {//方式二：以expose功能配置项方式设置
            color: '#BAD0DB',
            opacity: 0.7,
            closeSpeed: 1000
        },
        onBeforeLoad:function(){
            //alert(this.getTrigger().attr("rel")+":onBeforeLoad");//显示该overlay提示框的触发器rel属性值
        },
        onLoad:function(){
            //alert(this.getTrigger().attr("rel")+":onLoad");
        },
        onBeforeClose:function(){
            alert(this.getTrigger().attr("rel")+":onBeforeClose");
            return false;
        }
        });

以上配置参数说明描述如下：





























































































属性

 默认值 说明
start (Object) {top: 'center',left: 'center',  width: 0,absolute: false}  用于设置overlay弹出框开始的位置以及大小。默认的情况下，overlay弹出框开始的位置是其触发器（即触发其显示的页面元素）的位置，并且overlay弹出框初始的大小为0；如果overlay不是通过页面元素触发的话，那么他开始的位置为屏幕的中间位置。可以通过以下几个参数设置来覆盖该属性的默认值：
     top:用于设置overlay弹出框开始位置据屏幕上边缘的距离。
     left：用于设置overlay弹出框开始位置据屏幕左边缘的距离。
     width:用于设置overlay弹出框在开始位置处的宽度（即弹出框最初始宽度）；而overlay在开始处高度则会根据宽度自动计算出来。
     absolute:如果该值设置为true的话，那么overlay弹出框开始处的位置这回根据浏览器窗口左上角处来计算并不考虑滚动位置。如果该值设置为，那么overlay弹出框开始处的位置将会将滚动位置计算在内。
　
finish (Object) {top: 100,left: 'center',absolute: false}  用于设置overlay弹出框最终所处的位置及大小。、可以通过以下几个参数设置来覆盖该属性的默认值：
     top:用于设置overlay弹出框最终位置据屏幕上边缘的距离。
     left：用于设置overlay弹出框最终位置据屏幕左边缘的距离。
     absolute:如果该值设置为true的话，那么overlay弹出框最终处的位置会根据距浏览器窗口左上角位置来计算并不考虑滚动位置。如果该值设置为，那么overlay弹出框最终处的位置将会将滚动位置计算在内。
此外，overlay弹出框最终位置的大小由相关css属性来设置的。
　 　
expose 　 overlay弹出框经常与expose功能共同使用。而二者共同使用的方式正是通过overlay的该配置属性来设置的。该配置项接受expose功能的配置对象。该属性接受的参数分两种：一种为只接受expose背景色设置的字符串；另一种方式为expose配置对象。该属性的两种参数方式可参见本文示例。
speed 'normal' 设置overlay弹出框弹出的速度。该属性接受的有效值为：slow,normal,fast，以及毫秒数值。如果该属性值被置为0，那么overlay弹出框将会以无动画效果的方式立即显示。
fadeInSpeed 'fast' 设置overlay弹出框中内容显示的速度，该属性接受的有效值通speed属性。
oneInstance TRUE 默认情况下，一个页面只会显示一个overlay弹出框。但是，可通过将该属性设置为false来允许该页面显示多个overlay弹出框。（注：该属性在closeOnClick设置为false的情况下才能有比较明显的效果。）
closeOnClick TRUE 默认情况下，点击页面中overlay弹出框外的其他区域，可以关闭该overlay弹出框。但是，将该属性设置为false可以屏蔽该功能。
preload TRUE 默认情况下，背景图片会被预先加载到浏览器的缓存中。所以，当overlay提示框被打开时，overlay提示框的背景图片已被加载到缓存，所以当触发overlay提示框时，整个提示框弹出过程会很平滑。另外，可通过将属性设置为false来阻止背景图片的预加载。
close 　 关闭按钮设置。如果用户没有在该处提供overlay提示框关闭按钮，那么，overlay提示框会自动产生关闭按钮。关于用户自己定制关闭overlay提示按钮的方法，请参考本文相关示例。
zIndex 9999 设置overlay提示框的z-index属性（css）,至于z-index属性作用，请参见相关资料。该属性已被设置为一个很高的值-999，所以一般情况下，该属性不需要再行设置。但是需要注意的是，该值应该大于通页面其他元素的z-index值。
target 　 如果rel属性没指定overlay提示框的话，那么可通过该属性设置overlay提示框元素。
　 　
onBeforeLoad None 回调函数，该属性会在overlay提示框触发前执行，如果该函数返回false的话，那么overlay提示框将会被阻止而不显示。
onLoad None 回调函数，该属性会在overlay提示框触发完成后执行。
onBeforeClose None 回调函数。该属性会在overlay提示框关闭事件触发后，overlay提示框关闭前执行。返回false则阻止overlay提示框关闭。
onClose None 回调函数。该属性会在overlay提示框关闭后触发。
api FALSE 该属性设置同selector，tab功能的api属性。该属性意义参考本系列selector，tab相关说明。

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • jQuery-Tools-overlay 使用介绍

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <

  • docker中搭建overlay 网络实验环境

    docker中搭建overlay 网络实验环境

    为支持容器跨主机通信,Docker 提供了 overlay driver,使用户可以创建基于 VxLAN 的 overlay 网络.VxLAN 可将二层数据封装到 UDP 进行传输,VxLAN 提供与 VLAN 相同的以太网二层服务,但是拥有更强的扩展性和灵活性.有关 VxLAN 更详细的内容可参考 CloudMan 在<每天5分钟玩转 OpenStack>中的相关章节. Docerk overlay 网络需要一个 key-value 数据库用于保存网络状态信息,包括 Network.Endp

  • jquery下实现overlay遮罩层代码

    复制代码 代码如下: /* 模态遮罩层单例对象 opacity:背景透明度 1. show() 2. close() */ Q.Overlay = function(opacity) { var self = this; self._createDiv = function() { if (self._overlay) return; self._overlay = $("<div></div>"); var overlayCss = { 'width': '1

  • jquery tools系列 overlay 学习第1/2页

    如scrollable的学习,首先给出操作的html目标代码: 复制代码 代码如下: <button rel="#overlay">Open overlay</button> <button rel="#overlay2">Other overlay</button> <div class="overlay" id="overlay">     <h2 styl

  • jquery tools系列 expose 学习

    如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&q

  • jquery tools 系列 scrollable学习

    复制代码 代码如下: <!-- navigator --> <div class="navi"></div> <!-- prev link --> <a class="prev"></a> <!-- root element for scrollable --> <div class="scrollable"> <div id="thu

  • jquery tools 系列 scrollable（2）

    jquery tools 系列 scrollable（2）

    scrollable提供的一系列获取scrollable对象的方法具体使用方式如下: 复制代码 代码如下: var scrollable=$("div.scrollable").scrollable();     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性     scrollable.getConf().speed=200;//设置配置对象的speed属性     //alert(scrollable.getIndex())

  • jquery tools之tooltip

    如tabs的学习,首先给出操作的html目标代码: 复制代码 代码如下: <form id="myform"> <h3> Registration Form</h3> <!-- username --> <label for="username">Username</label> <input id="username" /> <div class=&quo

  • jQuery Tools tooltip使用说明

    HTML 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jQuery Tools Dateinput使用介绍

    帮助文档:传送门 html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools dateinput demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></s

  • jquery tools之tabs 选项卡/页签

    虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了

  • jQuery Tools tab使用介绍

    先给个官方例子.可以先弄出来看看效果 html 复制代码 代码如下: <!DOCTYPE html> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ --> <head> <title>jQuery Tools standalone demo</title> &

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

随机推荐