好库网 好库网首页 | 我的好库
好饱的专栏

jQuery UI 消息框(message box)的使用

发布者:好饱
发布日期:2012/4/4 22:32:05   更新日期:2012/4/4 22:35:16
阅读次数:4457
评分:4.80
介绍:介绍一下jQuery UI实现的消息框的使用方法。
正文:

步骤一:引用jQuery UI库

 

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<link type="text/css" href="/css/ui-lightness/jquery-ui.css" rel="stylesheet" />

步骤二:定义消息框

 

<div id="dialog-message" title="好库网下载完成">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		<span id="message-details"></span>
	</p>
</div>

步骤三:显示消息框

 

<script>
function messagebox(msg)
{
  $("#message-details").html(msg);
  $( "#dialog:ui-dialog" ).dialog( "destroy" );
  $( "#dialog-message" ).dialog({
    modal: true,
	width: 360,
    height: 230,
    buttons: {
          确认: function() {
			 $( this ).dialog( "close" );
	  }
    }
  });
}

$(function() {
  msg = "<font color='red'>你已经从 http://www.okbase.net 下载文件成功!</font>";
  messagebox(msg);
});
</script>

<button onclick="messagebox('hello okbase.net')" name="mybutton">点我啊</button>

 

 

 

 

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。