dialog的用法详细解析,dialog用法分析_jquery_脚本之家

正文实例陈说了jquery弹出框插件jquery.ui.dialog用法。分享给大家供我们参谋,具体如下:

JQUE奥迪Q5Y dialog的用法详细解析

 本篇小说首假诺对JQUEEvoqueY中dialog的用法举行了详尽的剖判介绍,须求的朋友能够恢复生机仿效下,希望对我们持有利于

今日用到了客户端的对话框,把 jQuery UI 中的对话框学习了弹指间。

 

准备 jQuery 环境

 

首先,我们创造二个按键,点击那些开关的时候,将会弹出二个对话框。

 

<input type=”button” value=”删除” id=”btn” />

 

为了设置那一个按键点击的事件,需求希图 jQuery 的条件。

 

<script type=”text/javascript”
src=”scripts/jquery-1.4.2.js”></script>

 

在 ready 中安装开关的点击事件。

 

代码如下:

 $(function() {

    // 初始化

    $(“#btn”).click(function() {

        alert(“btn 被点击啦!”State of Qatar;

   }

 );

 

认可这一步平常。

 

有备无患未雨希图粮草先行对话框

其次步,需求有备无患对话框的始末。这一个内容来自 jQuery UI 的示范文件。

 

 代码如下:

 <div id=”dialog-confirm” title=”Empty the recycle bin?” >

         <p>

             <span class=”ui-icon ui-icon-alert” style=”float: left;
margin: 0 7px 20px 0;”></span>

             These items will be permanently deleted and cannot be
recovered. Are you sure?</p>

 </div>

 

为了接纳 jQuery UI 的对话框,必要追加这么些文件的引用。

 

 <script type=”text/javascript”
src=”scripts/jquery.ui.core.js”></script>

 <script type=”text/javascript”
src=”scripts/jquery.ui.widget.js”></script>

dialog的用法详细解析,dialog用法分析_jquery_脚本之家。 <script type=”text/javascript”
src=”scripts/jquery.ui.mouse.js”></script>

 <script type=”text/javascript”
src=”scripts/jquery.ui.button.js”></script>

 <script type=”text/javascript”
src=”scripts/jquery.ui.draggable.js”></script>

 <script type=”text/javascript”
src=”scripts/jquery.ui.position.js”></script>

 <script type=”text/javascript”
src=”scripts/jquery.ui.dialog.js”></script>

 

增添样式

jQuery UI 中接收了汪洋的体制来修饰,要求援用 jQuery UI
的体裁,注意,jquery.ui.all.css 那一个文件引用了大气的其余样式文件,将
jQuery UI 中 development-bundlethemesbase 文件夹中的内容都复制过来。

 

<link type=”text/css” href=”styles/jquery.ui.all.css”
rel=”stylesheet” />

 

在 ready 函数中,同不常间也起头化这一个对话框。

 代码如下:

 $(function() {

     // 初始化

     $(“#btn”).click(function() {

         alert(“btn 被点击啦!”卡塔尔;

     });

 

     // 初阶化对话框

     $(“#dialog-confirm”).dialog();

 });

 

先天,展开那些页面包车型大巴时候,就已经得以见到对话框了。

 

透过开关弹出对话框

我们期望页面上起头化的时候看不到那么些对话框,在点击开关的时候再冒出。那么须要那多少个干活。

 

先给对话框扩大几个私下认可不呈现的体裁。style=”display:
none”,那样默许就不会看出这一有的。

 

码如下:

 <div id=”dialog-confirm” title=”Empty the recycle bin?”
style=”display: none”>

     <p>

         <span class=”ui-icon ui-icon-alert” style=”float: left;
margin: 0 7px 20px 0;”></span>

         These items will be permanently deleted and cannot be
recovered. Are you sure?</p>

 </div>

 

接下来,在最早化对话框的时候,也不出示,仅仅达成开头化工作。

 

在初步化对话框的时候,传递多少个参数 autoOpen: false

 

代码如下:

 $(“#dialog-confirm”).dialog(

     {

         autoOpen: false

     }

 );

 

在开关的点击事件中,弹出那个对话框。

代码如下:

 $(“#btn”).click(function() {

     // alert(“btn 被点击啦!”卡塔尔国;

     $(“#dialog-confirm”).dialog(“open”);

 });

 

假定传递 close ,将会关闭对话框。

 

贯彻形式对话框

在事实上行使中,大家平日索要得以达成形式对话框,在 Web
中必要扩充二个遮罩层来掩瞒底层的要素,模拟格局功用,那能够在初步化对话框的时候,传递一个参数
modal: true 来兑现。校订之后的初叶化代码成为:

 

代码如下:

 $(“#dialog-confirm”).dialog(

     {

         modal: true,             // 创制情势对话框

         autoOpen: false,         // 只起始化,不显得

      }

 );

 

充实对话框的按键

可以为对话框扩充肆意的按钮,并自定义按钮的事件管理。我们先增添三个按键,四个规定,八个注销,并让他俩先关闭对话框。

 代码如下:

 // 开始化对话框

 $(“#dialog-confirm”).dialog(

 {

     modal: true,             // 创制方式对话框

     autoOpen: false,

     buttons: {

         “Ok”: function() {

              $(this).dialog(‘close’);

         },

         “Cancel”: function() {

             $(this).dialog(‘close’);

         }

     }

 }); 

 

dialog的用法详细剖判本篇小说主即便对JQUEOdysseyY中dialog的用法举办了详实的深入分析介绍,供给的情人能够过来参谋下,希望对我们有所支持…

1. jquery.ui.dialog

法定地址

jquery.ui.dialog是二个特别灵活的情势框,它的法定地址为:

2. 文件引用

要接收jquery.ui.dialog,要求引用多个文件,1个是js,其它1个是css

在contentpage中添加:

在masterpage中添加:

3. 选择方法

jquery.ui.dialog比较thinkbox要有优势,thinkbox是在$.ready中钦点的,招致不能够灵活的强盛弹出层的弹出机遇,针对三个逻辑判别,一种状态下弹出,其余一种不弹出,thinkbox就缺点和失误应变本事,而jquery.ui.dialog.dialog;的章程使得弹出更灵敏

$;

$.dialog;

3)弹出方式对话框,并有遮罩效果复制代码
代码如下:$.dialog({ modal: true, overlay: { opacity: 0.5, background:
“black” } }卡塔尔国;

4)带显著与裁撤开关复制代码
代码如下:$.dialog({ buttons: { “Ok”: function; }, “Cancel”:
function.dialog如何关闭对话框

$.dialog;

     $.ready { $; }); I'm in a dialog

     $.ready { $; }); I'm in a dialog

jQuery boxy

使用该jQuery插件

要想使用该jQuery插件,必要把$;放在document.ready中。使用合适的接收器表达式替换这里的”selector”,举个例子:”a[rel=boxy],form.with-confirmation”。那会给相称的要素附加一些表现,如下:


二个href属性中一旦锚点满含#,则此锚点相对应的ID的DOM成分的剧情就能够被增加到boxy对话框中。


若是href锚点内容为别的界分事物,则会试图动用Ajax载入其对应的开始和结果。理想状态下,我们有相似的来源检查和嘱托对框架的跨域供给。那将会在下边显示。

③ 表单上会突显三个提交格局的确认音讯。

应用方法

接受下载包中的七个公文!

中央的插件用法:

${ $;

请用心,boxy对话框自动测算出您的内容区域内自身的深浅和岗位,不须求显明规定了打包集的尺寸。

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery扩充能力计算》、《jQuery常用插件及用法总计》、《jQuery拖拽特效与技艺计算》、《jQuery表格操作本事汇总》、《jquery中Ajax用法计算》、《jQuery司空见惯优良特效汇总》、《jQuery动漫与特功用法总括》及《jquery选用器用法计算》

意在本文所述对我们jQuery程序设计有着扶助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注