vim vex 创建文件_使用Vex为您的站点创建，控制和自定义更好的模态窗口

最新推荐文章于 2024-04-29 05:14:06 发布

cune1359

最新推荐文章于 2024-04-29 05:14:06 发布

阅读量211

点赞数

文章标签： python java linux js css ViewUI

当您想使用户与您的网站进行交互时， 模式窗口非常有用。有时将模式窗口称为模式框，因为该窗口用于显示对话框 。在上一篇文章中，我们已指导您完成有关如何使用Bootstrap插件制作模态窗口的教程。

在本文中，我们将向您介绍另一个使用jQuery库Vex创建模态窗口的好帮手。

Vex是一个完整且高度可定制的Javascript库 ，可帮助您轻松创建模态窗口。这个轻巧的jQuery插件取代了浏览器本机对话框。

基本设定

首先，我们需要准备Vex脚本。您可以在此处下载。然后，使用以下脚本将最新的jQuery包含在标题中。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

要使用Vex，您必须包含vex.js和vex.css文件。而不是使用vex.js和vex.dialog.js ，你可以只包括vex.combined.js或vex.combined.min.js 。

现在，我们将像这样将这些Vex库添加到标题中。

<script src="vex.combined.min.js"></script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />

在上面的脚本中，我包含了vex-theme-os.css ，这是一个不同的即用型Vex主题。要使用其他主题，您可以在此处查看演示随附的文档。

应用Vex

Vex中最基本的方法是vex.dialog.alert ， vex.dialog.confirm和vex.dialog.prompt 。还有vex.dialog.open ，它是这些方法的组合，可用于更高级的用法，例如创建表单，登录名或多个模式窗口 。

现在，我们将尝试使用vex.dialog.open方法构建一个简单的登录模式窗口。在开始该方法之前，我们必须首先应用与defaultOptions.className选项一起使用的主题。要应用主题，您可以像这样轻松地将主题名称添加为值选项。

vex.defaultOptions.className = 'vex-theme-os';

如前所述， vex.dialog.open方法基本上是其他3种方法的组合。以下代码是一个更复杂的演示，我们在其中调用alert ， confirm和内部prompt以构建登录对话框。

<script>
vex.defaultOptions.className = 'vex-theme-os';
vex.dialog.open({
  message: 'Please enter your username and password:',
  input: "<input name=\"username\" type=\"text\" placeholder=\"Username\" required />\n<input name=\"password\" type=\"password\" placeholder=\"Password\" required />",
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Login'
    }), $.extend({}, vex.dialog.buttons.NO, {
      text: 'Back'
    })
  ],
});
</script>

因此，我们的登录框将显示如下。