Board logo

标题: 使用插件创建和扩展 jQuery 函数-3 [打印本页]
作者: look_w    时间: 2018-8-23 09:34     标题: 使用插件创建和扩展 jQuery 函数-3

blockUIblockUI 是提供创建模式对话框功能的几个插件中的一个。也许您会说 JavaScript 已经提供了很多很酷的模式对话框，比如 alert() 和 confirm()。我不否认，无论是开发人员还是用户都非常喜欢这些模式对话框。它们在一个设计良好的 Web 站点上看起来的确不赖。然而，开发人员还有一个更好的选择，可以让您从用户那里收集信息并使您的模式对话框在 Web 应用程序上看上去也十分自然。注意，喜欢使用警告/确认的读者可以直接跳到下一节了。                    
言归正传，警告/确认功能在模式对话框方面有很多缺陷。第一个也是最重要的一点就是，除了在确认功能上的 OK 或 Cancel 外，它们只能显示信息却不能收集信息。更理想的情况是弹出一个对话窗，能提供更多的灵活性，且允许向此对话框添加任何想要的元素。换句话说，这个对话窗与您在其他编程语言中使用的类似。在这方面，BlockUI 是我最钟爱的一个插件，因它易于处理，而且非常灵活，便于在同一个 Web 应用程序上处理很多对话框。不仅如此，它还提供了很多不同类型的对话框供使用。                    
在本文随附的示例代码（参见 ）中，我使用 blockUI 创建了一个模式对话框，如下所示，我稍候会对所涉及的代码和选项进行深入的介绍。                    
图 5. blockUI 示例正如在图 5 中所看到的，页面上有一个模式对话框。而对页面其他部分的输入则由对话框下方的半透明层所封闭，这有效阻止了用户除对话框本身之外与 Web 应用程序间的交互。实现这种封闭功能的代码使用了一个 IFrame，但实际上问题不大，因为此插件作者已经在所有不同的浏览器上测试过并已经确保此插件工作正常。                       
创建对话框的第一步是指定其消息。一个消息可以是您想要显示给用户的任何文本（复制 alert() 函数），可以是向用户显示 HTML，也可以是创建一个标记了的消息（使用粗体、颜色等）。不过，我认为此插件最有价值的一点是允许提供                       div 作为消息，这就让您能够以自己想要的任何布局、任何数量的输入、按钮和所需信息来创建您自己的对话框。                       
清单 5. blockUI 插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// this will create a dialog with our default text,
// effectively replicating the
// alert() function
$.blockUI({message: "This is a sample dialog"});

// however, we can add any HTML we want to the message, making it look closer
// to our own Web site
// $.blockUI({message: "<h2>Sample Dialog</h2><p style='color:green;'>
              This is our message</p>"});

// perhaps most importantly, we can add a div to the message, allowing
// us to create our own dialog, with the look, feel, message, and input we want
<div id=loginMessage style="display:none;cursor:default;">
      <p><h2>Login</h2>
      <p>Username: <input type=text id=user>
      <p>assword: <input type=text id=pass>
      <p><input type=button value="OK" id=ok>
      <input type=button value="Cancel" id=cancel>
</div>

// and the jQuery code to show this is pretty much the same
$.blockUI({ message("#loginMessage")});




有关 blockUI 只剩下两个很小的问题要讨论，之后，您就可以把它放在您自己站点上了。第一，我还没有关闭此对话框。这也是个小问题，对么？第二，我用                    清单 5 中的代码片段创建的所有对话框都具有默认的 blockUI 外观，而这不是我们想要的，因为此插件的一个很重要的卖点就是能为对话框创建个性的观感。不过，blockUI 本身就带一段 CSS 代码，您可以拿来放入到自己的 CSS 文件并随意定制，这样一来，您就重新获得了让对话框以您想要的方式显示的能力。不过，为了覆盖 blockUI 的 CSS 属性，必须要告知此插件去 CSS 文件内查找而不是使用其默认设置。清单 6 所示的是示例代码内的一个代码片段，这些代码显示了如何关闭对话框、如何使用您自己的 CSS 以及此 CSS 内可用的选项。                    
清单 6. blockUI 插件的更多内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// These two functions tell the BlockUI that
// you want to use your own CSS
// code to define how the dialogs will work.  The first line
// tells it you want to use your own CSS for the dialog,
// the second line tells it you want your own CSS
// for the semi-transparent
// layer between the page and the dialog.
$.blockUI.defaults.css = {};
$.blockUI.defaults.overlayCSS = {};

// when the show button is pressed, we'll display the dialog.
// we want to display our own custom DIV.  However, note here
// that we want to override the CSS-defined height and width.
// After all, it would be difficult for an entire site to have
// predefined widths and heights if every dialog is slightly
// different.
$("#show").click(function(){
   $.blockUI({ message("#waitMessage"), css: {width:'500px', height:'160px'} });
});

// When the cancel button is pressed on the DIV dialog,
// we can close the dialog
$("#cancel").click(function(){
   $.unblockUI();
});

// the CSS you can override to make it look good on your site
div.blockOverlay
{
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: progidXImageTransform.Microsoft.Alpha(Opacity=50);
    -moz-opacity:.70;
    opacity:.70;
    background-color: #228518;
}

div.blockMsg
{
    width:  20%;
    top:    20%;
    left:   30%;
    text-align: center;
    background-color: #fff;
    border: 3px solid #044600;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progidXImageTransform.Microsoft.Alpha(Opacity=100);
    -moz-opacity:1;
    opacity:1;
    padding: 15px;
    color: #000;
}




以我的经验，此插件非常好用。当我想要替换 JavaScript 内的 confirm() 时，我发现它很容易实现，更不必说它看上去有多好看了。此外，我还在更复杂的环境内使用过它，用它作为一个对话框来将文件上传到一个电子邮件应用程序，或者在一个照片浏览应用程序内将其作为一个照片 lightbox。如果将其与 Ajax 调用综合在一起，可以节省很多页面重载。借此，就能扩大屏幕区域以便显示信息。最后，它还去掉了警告/确认功能的限制，让您能以对话框的思路来设计您的软件，正如桌面应用程序那样。



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0