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