jquery引入dialog

上官联
2023-12-01

1、jquery ui dialog

简单应用,引入如下即可:

<link rel="stylesheet" href="js/jquery-ui/themes/base/jquery.ui.all.css" type="text/css"></link>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.core.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.widget.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.mouse.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.sortable.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.button.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.draggable.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.position.js"></script>

<script type="text/javascript" src="js/jquery-ui/js/ui/jquery.ui.dialog.js"></script>

 

则在页面中,定义显示的内容。

<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>

          對話框顯示內容;对话框输入内容显示</p>

</div>

 

之后,定义dialog。

 $( "#dialog-confirm" ).dialog({

height:340,

autoOpen: false,

buttons: {

"Ok": function() {

$( this ).dialog( "close" );

},

"Cancel": function() {

$( this ).dialog( "close" );

}

}

});

 

最后,定义触发dialog的方式,

比如

$("#addUserBtn").click(function(){

$( "#dialog-confirm" ).dialog("open");

});

 

注意:若页面中,同时引入了easyui相关的js和样式,造成dialog中的按钮一直加载不进入,可能还有其他影响,暂时没发现。

 

2、使用artDialog

<script type="text/javascript" src="js/artDiglog/jquery.artDialog.js?skin=default"></script>

 

然后,如此使用:

$("#addUserBtn").click(function(){

art.dialog({ 

 id: 'testID', 

 content: 'hello world!', 

 button: [ { name: '同意', 

 callback: function () 

 {this.content('你同意了').time(2); 

 return false; 

 }, 

 focus: true, },

 { name: '不同意', 

 callback: function () 

 {alert('你不同意') ;

 } 

 }, 

 { name: '无效按钮', 

 disabled: true ,

 }, 

 { name: '关闭我' } ] 

 });

});

此时,不隐藏相关的juqery ui的js包和样式,对artDialog无影响。

 类似资料: