jquery引入dialog

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无影响。