Tutorial on using dialog using jQuery UI-JS Tutorial-php.cn

Tutorial on using dialog using jQuery UI

零下一度

Release： 2017-06-19 15:17:17

Original

2225 people have browsed it

I'm a bit lazy, so the tutorials about jquery ui have never been updated, I'm sorry. Getting started with jquery ui will briefly explain the concept, use and general introduction of jquery ui. Starting from this article, we will start to explain the use of some specific components in jquery ui. This article explains the use of jquery ui dialog:

We often use dialog boxes when interacting. Yes, jquery ui dialog was born for this. jquery ui dialog provides us with a simple

interface to implement normal It requires a lot of javascript code to achieve the effect. We can use jquery ui dialog to achieve many functions, such as login, registration and message prompts.

Before using the dialog component, you must first introduce the js files that the dialog depends on into the page. These files include js files and css files, and all dialog style example codes are in /development-bundle/demos In the /dialog/ directory, open the source code and see how to use a type of dialog. If you don't understand what I'm talking about, just go and see how to use it after downloading jquery UI. If you don’t have the jquery ui code package yet, then you should download it first: jquery UI download for each version

Let’s take /development-bundle/demos/dialog/default.html as an example to look at the header of jquery ui dialog Introduction of external files

<!--载入主题样式-->
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
<!--载入 jquery 核心类库-->
<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></script>
<!--这个主要是为了兼容 IE6 而载入的一个插件-->
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<!--载入 jquery ui 核心类库-->
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<!--载入 jquery ui 组件核心类库-->
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<!--载入 jquery ui 鼠标相关组件-->
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
<!--载入 jquery ui 拖动相关组件，主要是为了让 dialog 能够被拖动-->
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<!--载入 jquery ui 位置相关组件，主要是为了让 dialog 能够居中或者控制位置-->
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
<!--载入 jquery ui 调整大小相关组件，主要是为了让 dialog 的大小能够通过鼠标来调整-->
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
<!--载入 jquery ui 对话框组件-->

Copy after login

Some of these imported files are not necessary and need to be determined according to the parameters of the dialog. For example, if you do not need to adjust the size of the dialog, you do not need to load jquery.ui.resizable. js file, let’s take a look at how the dialog is popped up.

<script type="text/javascript">
$(function() {      $( "#dialog" ).dialog();    });
</script>

Copy after login

Yes, the use of dialog is that simple. Of course, dialog also has many parameters to help you realize many complex functions. We will do that later. I will also explain to you that the use of these parameters is basically very simple.

The above is the detailed content of Tutorial on using dialog using jQuery UI. For more information, please follow other related articles on the PHP Chinese website!