Ultima Block 是一个简单但高级的 UI 锁定组件

allway2

已于 2022-04-04 18:11:36 修改

阅读量1k

点赞数

文章标签： javascript

于 2022-04-03 09:09:56 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/123932638

版权

UI locking component for JavaScript and jQuery

Ultima Block 是一个简单但高级的 UI 锁定组件，用 JavaScript 编写，仅使用jQuery核心功能。其中一些特点是：

轻松锁定和解锁您想要或不希望用户访问的区域
块消息可以是纯文本或 DOM 元素 (HTML)
提供易于使用的速记选项和方法
提供回调和中断
不需要您添加 HTML、CSS 或图像
不需要除 jQuery 1.4+ 以外的其他 JavaScript 库
浏览器是否向后兼容到 Internet Explorer 8

// 包括

你可以将 UltimaBlock 脚本包含在任何你想要的地方，只要确保之前加载了 jQuery。jQuery 是必需的，并且必须至少是 1.4 版才能与 Ultima Tip 一起使用。如果您需要支持 Internet Explorer ≤ 8，请记住选择 jQuery 1.x，否则选择 2.x 或 3.x。

身体
头

<html>
    <head>

        ...

        <script src="jquery.min.js"></script>
        <script src="jquery.ultima.block.min.js"></script>

    </head>
    <正文>

        ...

    </body>
</html>

// 初始化

您可以使用本机 new 运算符（显式）或可用的 jQuery 包装器方法（隐式）创建 UltimaBlock 类的实例。锁将放置在您要阻止交互的元素的顶部。

隐含的
明确的

$(target).block( '你不能碰这个！' );

- 或 -

$.UltimaBlock.block(target , 'U can\'t touch this!' );

// 构造函数

注意：您也可以使用$别名来代替完全限定的 jQuery。

新的 UltimaBlock ( 目标,选项) :终极方块
本机对象构造函数，需要手动方法调用
jQuery .block (消息，选项) : jQuery
例如 $('#foo').block('你不能碰这个！');

将前面的 jQuery 对象视为要锁定的目标并将其传递给新创建的 UltimaBlock 实例，调用 block() 方法
jQuery.UltimaBlock.block（目标, 消息,选项) :终极方块
创建 UltimaBlock 的实例并调用 block() 方法

// 方法

注意：突出显示的UltimaBlock指的是 UltimaBlock 的实例，而非突出显示的指的是静态命名空间。

UltimaBlock .block (信息)
锁定目标并显示消息
UltimaBlock .unblock ( )
解锁目标并隐藏消息
jQuery.UltimaBlock.unblock（目标,选项) :终极方块
解锁目标（如果存在任何锁）
jQuery .block (消息，选项) : jQuery
例如 $('#foo').block();

锁定前面的 jQuery 对象，调用 block() 方法
jQuery .unblock (选项) : jQuery
例如 $('#foo').unblock();

解锁前面的 jQuery 对象，调用 unblock() 方法

// 选项

注意：options 对象结构很深，由几个子对象（嵌套对象）组成。有两种符号可用：

详细（本机）
速记（已解决）
更改默认值

// 设置以下选项...

    UltimaBlock.options = {

        '->css.overlay.className': 'myOverlay'

    } ;

// ...将为所有未来的方法调用使用指定属性覆盖默认值

// 使用 jQuery 前缀设置以下选项...

    $.UltimaBlock.options = {

        '->css.message.className': 'myMessage '

    } ;

// ...将额外覆盖所有未来 jQuery 包装方法调用的默认值

− behavior
zIndexInc	true	increment the zIndex for every parallel existing block
− css
overlay
className	''	class added to the overlay element
zIndex	9001
< css property >		any CSS property, will be set as inline style
message
className	''	class added to the message element
offset
x	0	horizontal position offset of the message element, in px
y	0	vertical position offset of the message element, in px
viewport	'auto'	viewport to base the positioning on
x	'50%'	horizontal position of the message, either in px or in %
y	'50%'	vertical position of the message, either in px or in %
< css property >		any CSS property, will be set as inline style
− callbacks
onBlocking	undefined	before locking the target (UltimaBlock) : return false to interrupt
onUnblocking	undefined	before unlocking the target (UltimaBlock) : return false to interrupt

示例

<!DOCTYPE html>
<html lang="en" class="no-mobile-support">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>UI locking component for JavaScript and jQuery</title>

        <script src="jquery.min.js"></script>
        <script src="jquery.ultima.block.min.js"></script>
    </head>
    <body >
        <button type="button" id="exampleLock" style="margin-right: 16px;">lock element</button><button type="button" id="exampleUnlock" style="margin-right: 16px;">unlock element</button>
        <div id="target" style="background-color: rgb(192, 192, 192); border: 2px solid #A0A0A0; color: #000000; margin: 16px 0px; padding: 16px;">


            <h3 id="examples" class="instruction">// Examples</h3>
            <p class="note">You can test UltimaBlock in your browser console as well.</p>
            <h4>demo : lock &amp; unlock</h4>
            <select style="margin-bottom: 16px;">
                <option value="rgb(192, 192, 192)">chose background-color...</option>
                <option value="rgb(255, 192, 192)">Red</option>
                <option value="rgb(192, 255, 192)">Green</option>
                <option value="rgb(192, 192, 255)">Blue</option>
            </select>
            <br />
            <button type="button">apply</button>

            <script type="text/javascript">
                jQuery(document).ready(function () {
                    jQuery('#target button').click(function () {
                        jQuery('#target').css('background-color', jQuery('#target select').val());
                    });
                });
            </script>
            <div class="tab-container">
                <ol class="header">
                    <li data-tab="lock" class="tab">lock element</li>
                    <li data-tab="unlock" class="tab">unlock element</li>
                </ol>
                <ol class="body">
                    <li data-tab="lock" class="content" style="display: none;">$('#target').block(<span class="string">'click on "unlock element" to unlock'</span>);</li>
                    <li data-tab="unlock" class="content" style="display: none;">$('#target').unblock();</li>
                </ol>
            </div>
            <script type="text/javascript">
                var callbackAlerts = false;
                jQuery(document).ready(function () {
                    jQuery('#exampleLock').click(function () {
                        jQuery('#target').block('click on "unlock element" to unlock');
                    });
                    jQuery('#exampleUnlock').click(function () {
                        jQuery('#target').unblock();
                    });
                });
            </script>

        </div>
    </body>
</html>

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ultima Block 是一个简单但高级的 UI 锁定组件

UI locking component for JavaScript and jQueryUltima Block 是一个简单但高级的 UI 锁定组件，用 JavaScript 编写，仅使用jQuery核心功能。其中一些特点是：轻松锁定和解锁您想要或不希望用户访问的区域块消息可以是纯文本或 DOM 元素 (HTML) 提供易于使用的速记选项和方法提供回调和中断不需要您添加 HTML、CSS 或图像不需要除 jQuery 1.4+ 以外的其他 JavaScript 库浏览器是否
复制链接

扫一扫