zoukankan      html  css  js  c++  java
  • jqueryloadmask 遮盖层 jquery loading

    http://code.google.com/p/jquery-loadmask/

    LoadMask jQuery plugin can mask DOM elements while their content is loading or changing to prevent user interactions and inform that some background task is still running. It is very light (~2Kb) and easy to use.

    The behavior of this plugin is largely based on handy Element.mask() method from ExtJS Framework.

    You can try online demo here.

    Usage

    jQuery version required: 1.2.3 or later.

    Please note that only elements that accept child nodes can be masked.

    To start using the plugin you need to include jquery.loadmask.css and jquery.loadmask.js (or its minified version jquery.loadmask.min.js) to your html page:

    <linkhref="jquery.loadmask.css"rel="stylesheet"type="text/css"/>
    <scripttype="text/javascript"src="jquery.loadmask.min.js"></script>

    Masking

    To put a mask over an element (or multiple elements) simply call mask(label, delay) method with two optional label and delay parameters:

    $("#mydiv").mask("Loading...");
    $
    (".grids").mask("Loading...",500);

    If label parameter is provided, a little box with this label and a spinner will be placed on top of the mask, otherwise only a transparent gray mask is displayed.

    delay parameter sets a delay in milliseconds before element(s) is masked. If unmask() is called before the delay times out, no mask is displayed. This can be used to prevent unnecessary mask display for quick processes.

    Unmasking

    To remove a previously displayed mask from an element (or multiple elements) call unmask() without any parameters:

    $("#mydiv").unmask();

    Calling unmask() on a delayed mask prevents it from showing up.

    Checking if an element is masked

    You can use isMasked() method on a single element to check if it is currently masked. Please note that this method will return false while mask is delayed.

    if($("#mydiv").isMasked()){...}

    Integration with ASP.net UpdatePanel

    Please take a look at this code.

    Integration with Jquery UI

    Please take a look at this code.

    Contributors

    • wpaap - provided snapshot for integration with ASP.net UpdatePanel
    • Artur Alexandre Moreira (artur.alexandre@gmail.com) - implemented delayed mask
    • theonlylawislove - provided Jquery UI integration solution

    Thank you!

  • 相关阅读:
    字符串编码之一:字符串语法
    PHP进阶学习系列1:字符串编码提纲
    关于技术成长的一些反思
    Yii2学习笔记002---Yii2的控制器和视图
    PHP5.3--PHP7 新特性总结
    计算机软考笔记之《数据库基础》
    计算机软考笔记之《文件结构》
    计算机软考笔记之《抽象数据类型(ADT)》
    计算机软考笔记之《数据压缩》
    计算机软考笔记之《数据结构与算法》
  • 原文地址:https://www.cnblogs.com/wucg/p/2459678.html
Copyright © 2011-2022 走看看