jquery-ui 对话框
UI Dialog tutorial. Today we continue jQuery lessons, and we will talk about creating user window dialogs. We will using UI Dialog plugin. This plugin allow us to choose text, buttons (and its behavior), and many other params of dialogs. These dialogs very user friendly, and it looks like boxes in Windows. Similar interface: content in center of dialog, in top-right corner – button ‘x’ to close dialog, also this is movable and resizable too, also it possible to add custom action buttons in bottom of dialog. Today I will tell you how you can create your own dialogs for your projects.
UI对话框教程。 今天，我们继续jQuery的课程，我们将讨论创建用户窗口对话框。 我们将使用UI对话框插件。 这个插件使我们能够选择文本，按钮(及其行为)以及对话框的许多其他参数。 这些对话框非常人性化，看起来像Windows中的对话框。 相似的界面：位于对话框中心，右上角的内容–按钮“ x”以关闭对话框，这也是可移动且可调整大小的，还可以在对话框底部添加自定义操作按钮。 今天，我将告诉您如何为项目创建自己的对话框。
Here are sample and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
As usual, we start with the HTML.
和往常一样，我们从HTML开始。
This is our main page code with all samples.
这是我们所有示例的主页代码。
index.html (index.html)
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/ui.theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
<div>
<button id="toggle1">Open dialog 1</button>
<button id="toggle2">Open dialog 2</button>
<button id="toggle3">Modal dialog #3</button>
</div>
<div>
<button id="top1">Move to top dialog 1</button>
<button id="top2">Move to top dialog 2</button>
<button id="toggle4">Modal dialog #4</button>
</div>
<div>
<button id="enable1">Enable dialog 1</button>
<button id="enable2">Enable dialog 2</button>
</div>
<div>
<button id="disable1">Disable dialog 1</button>
<button id="disable2">Disable dialog 2</button>
</div>
<div>
<div id="dialog1" title="Dialog #1">
<p>This dialog using 'slide/explode' methods to show/hide, plus, can be closed by 'close' button, by 'x' icon and by 'esc' button. This dialog window can be moved using mouse.</p>
</div>
<div id="dialog2" title="Dialog #2">
<p>This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.</p>
</div>
<div id="dialog3" title="Dialog #3 (modal)">
<p>This is the first modal dialog with some text and 2 buttons. This dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="dialog4" title="Dialog #4 (modal)">
<p>Another sample of modal dialogs - login forms. The dialog using 'highlight/scale' methods to 'show/hide'. Can be moved and closed with the 'x' icon.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" /><br />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" />
</fieldset>
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/ui.theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
<div>
<button id="toggle1">Open dialog 1</button>
<button id="toggle2">Open dialog 2</button>
<button id="toggle3">Modal dialog #3</button>
</div>
<div>
<button id="top1">Move to top dialog 1</button>
<button id="top2">Move to top dialog 2</button>
<button id="toggle4">Modal dialog #4</button>
</div>
<div>
<button id="enable1">Enable dialog 1</button>
<button id="enable2">Enable dialog 2</button>
</div>
<div>
<button id="disable1">Disable dialog 1</button>
<button id="disable2">Disable dialog 2</button>
</div>
<div>
<div id="dialog1" title="Dialog #1">
<p>This dialog using 'slide/explode' methods to show/hide, plus, can be closed by 'close' button, by 'x' icon and by 'esc' button. This dialog window can be moved using mouse.</p>
</div>
<div id="dialog2" title="Dialog #2">
<p>This dialog using 'blind/fold' methods to show/hide, plus, can be closed by 'x' icon and by 'esc' button. This dialog window can be moved and resized using mouse.</p>
</div>
<div id="dialog3" title="Dialog #3 (modal)">
<p>This is the first modal dialog with some text and 2 buttons. This dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="dialog4" title="Dialog #4 (modal)">
<p>Another sample of modal dialogs - login forms. The dialog using 'highlight/scale' methods to 'show/hide'. Can be moved and closed with the 'x' icon.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" /><br />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" />
</fieldset>
</form>
</div>
</div>
</div>
步骤2. CSS (Step 2. CSS)
Here are used CSS styles.
这是使用CSS样式。
css / main.css (css/main.css)
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:600px;height:200px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.example button {width:150px}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:600px;height:200px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.example button {width:150px}
Other css files:
其他CSS文件：
css / jquery-ui.css和css / ui.theme.css (css/jquery-ui.css and css/ui.theme.css)
no need to show here. It always available as a download package (all just because its just part of jquery styles)
无需在这里显示。 它始终可以作为下载包使用(全部只是因为它只是jquery样式的一部分)
步骤3. JS (Step 3. JS)
Here are necessary JS files to our project.
这是我们项目的必要JS文件。
js / main.js (js/main.js)
$(function(){
// dialog 1 properties
$('#dialog1').dialog({
autoOpen: false,
show: 'slide',
hide: 'explode',
buttons: { 'Close': function() { $(this).dialog('close'); } },
closeOnEscape: true,
resizable: false
});
// dialog 1 open/close
$('#toggle1').click(function() {
if ($('#dialog1').dialog('isOpen') == true)
$('#dialog1').dialog('close');
else
$('#dialog1').dialog('open');
return false;
});
// dialog 2 properties
$('#dialog2').dialog({
autoOpen: false,
show: 'blind',
hide: 'fold',
closeOnEscape: true
});
// dialog 2 open/close
$('#toggle2').click(function() {
if ($('#dialog2').dialog('isOpen') == true)
$('#dialog2').dialog('close');
else
$('#dialog2').dialog('open');
return false;
});
// dialog 3 properties
$('#dialog3').dialog({
autoOpen: false,
show: 'fade',
hide: 'fade',
modal: true,
buttons: {
'Ok': function() { $(this).dialog('close'); },
'Close': function() { $(this).dialog('close'); }
},
resizable: false
});
// dialog 3 open/close
$('#toggle3').click(function() {
if ($('#dialog3').dialog('isOpen') == true)
$('#dialog3').dialog('close');
else
$('#dialog3').dialog('open');
return false;
});
// dialog 4 properties
$('#dialog4').dialog({
autoOpen: false,
show: 'highlight',
hide: 'scale',
modal: true,
buttons: {
'Login': function() {
var name = $('#name').val(), password = $('#password').val();
var mydialog4 = $(this);
if (name != '' && password != '') {
$.ajax({
type: 'POST',
url: 'some.php',
data: 'name='+name+'&pass='+password,
success: function(msg){
alert(msg);
$(mydialog4).dialog('close');
}
});
}
},
'Close': function() { $(this).dialog('close'); }
},
resizable: false,
width: '400px'
});
// dialog 4 open/close
$('#toggle4').click(function() {
if ($('#dialog4').dialog('isOpen') == true)
$('#dialog4').dialog('close');
else
$('#dialog4').dialog('open');
return false;
});
// moveToTop functionality
$('#top1').click(function() {
$('#dialog1').dialog('moveToTop');
});
$('#top2').click(function() {
$('#dialog2').dialog('moveToTop');
});
// enable functionality
$('#enable1').click(function() {
$('#dialog1').dialog('enable');
});
$('#enable2').click(function() {
$('#dialog2').dialog('enable');
});
// disable functionality
$('#disable1').click(function() {
$('#dialog1').dialog('disable');
});
$('#disable2').click(function() {
$('#dialog2').dialog('disable');
});
});
$(function(){
// dialog 1 properties
$('#dialog1').dialog({
autoOpen: false,
show: 'slide',
hide: 'explode',
buttons: { 'Close': function() { $(this).dialog('close'); } },
closeOnEscape: true,
resizable: false
});
// dialog 1 open/close
$('#toggle1').click(function() {
if ($('#dialog1').dialog('isOpen') == true)
$('#dialog1').dialog('close');
else
$('#dialog1').dialog('open');
return false;
});
// dialog 2 properties
$('#dialog2').dialog({
autoOpen: false,
show: 'blind',
hide: 'fold',
closeOnEscape: true
});
// dialog 2 open/close
$('#toggle2').click(function() {
if ($('#dialog2').dialog('isOpen') == true)
$('#dialog2').dialog('close');
else
$('#dialog2').dialog('open');
return false;
});
// dialog 3 properties
$('#dialog3').dialog({
autoOpen: false,
show: 'fade',
hide: 'fade',
modal: true,
buttons: {
'Ok': function() { $(this).dialog('close'); },
'Close': function() { $(this).dialog('close'); }
},
resizable: false
});
// dialog 3 open/close
$('#toggle3').click(function() {
if ($('#dialog3').dialog('isOpen') == true)
$('#dialog3').dialog('close');
else
$('#dialog3').dialog('open');
return false;
});
// dialog 4 properties
$('#dialog4').dialog({
autoOpen: false,
show: 'highlight',
hide: 'scale',
modal: true,
buttons: {
'Login': function() {
var name = $('#name').val(), password = $('#password').val();
var mydialog4 = $(this);
if (name != '' && password != '') {
$.ajax({
type: 'POST',
url: 'some.php',
data: 'name='+name+'&pass='+password,
success: function(msg){
alert(msg);
$(mydialog4).dialog('close');
}
});
}
},
'Close': function() { $(this).dialog('close'); }
},
resizable: false,
width: '400px'
});
// dialog 4 open/close
$('#toggle4').click(function() {
if ($('#dialog4').dialog('isOpen') == true)
$('#dialog4').dialog('close');
else
$('#dialog4').dialog('open');
return false;
});
// moveToTop functionality
$('#top1').click(function() {
$('#dialog1').dialog('moveToTop');
});
$('#top2').click(function() {
$('#dialog2').dialog('moveToTop');
});
// enable functionality
$('#enable1').click(function() {
$('#dialog1').dialog('enable');
});
$('#enable2').click(function() {
$('#dialog2').dialog('enable');
});
// disable functionality
$('#disable1').click(function() {
$('#dialog1').dialog('disable');
});
$('#disable2').click(function() {
$('#dialog2').dialog('disable');
});
});
This is most interesting and important part of our lesson. I put my comments quite anywhere, so it will easy to understand all this. Basically, constructor of forms allow us to determinate all necessary styles and behavior of our dialog: autoOpen, buttons, closeOnEscape, draggable, width, height, modal, position, resizable and all other options. Also we can add our own events to dialog events too. But I don`t used it, this was not so necessary in my case. jQuery dialogs allow us to perform some actions with already created dialogs: open, close, isOpen (to check – are dialog already opened or not), enable, disable, plus change options of dialog using ‘option’ method (in realtime).
这是我们课程中最有趣也是最重要的部分。 我把评论放在任何地方，因此很容易理解所有这些。 基本上，表单的构造函数使我们能够确定对话框的所有必要样式和行为：autoOpen，按钮，closeOnEscape，可拖动，宽度，高度，模式，位置，可调整大小和所有其他选项。 我们也可以将自己的事件添加到对话框事件中。 但是我不使用它，对于我而言，这不是必需的。 jQuery对话框允许我们对已经创建的对话框执行一些操作：打开，关闭，isOpen(以检查-对话框是否已打开)，启用，禁用以及使用“选项”方法实时更改对话框的选项。
You can visit this website to get full information about all Options, Events and Methods of dialogs.
您可以访问该网站以获得有关所有选项，事件和对话框方法的完整信息。
js / jquery-ui.min.js和js / jquery.min.js (js/jquery-ui.min.js and js/jquery.min.js)
This is common files – jQuery library with UI plugin. No need to give full code of that file here. It always available in package
这是常见文件–带有UI插件的jQuery库。 无需在此处提供该文件的完整代码。 始终以包装形式提供
步骤4. PHP (Step 4. PHP)
Single used PHP file (which we will use for ajax response):
单个使用PHP文件(我们将用于ajax响应)：
some.php (some.php)
<?
$sName = $_POST['name'];
$sPass = $_POST['pass'];
echo "Date received: Name={$sName}, Pass={$sPass}";
?>
<?
$sName = $_POST['name'];
$sPass = $_POST['pass'];
echo "Date received: Name={$sName}, Pass={$sPass}";
?>
现场演示
结论 (Conclusion)
Using interactive dialogs in your projects – very important step. This is big step to make your project more user friendly, so this is will one of good sides of your website. Sure that you will happy play with it. You can use this material to create own scripts into your startups. Good luck!
在项目中使用交互式对话框–非常重要的一步。 这是使您的项目更加用户友好的重要一步，因此这将是您网站的优点之一。 确保您会喜欢它。 您可以使用此材料在创业公司中创建自己的脚本。 祝好运！
翻译自: https://www.script-tutorials.com/how-to-create-dialogs-using-ui-dialog/
jquery-ui 对话框
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
