样式
<style type="text/css">
.message {
border: none !important;
margin: 0;
padding: .5em .5em .5em .5em
}
.message-ico {
float: left;
margin: 0 1em 0 0;
}
.message-content {
}
</style>
javascript
<script type="text/javascript">
function createDialog(options) {
options = options || {};
$.extend(options, {
close: function( event, ui ) {
var d = $(this);
d.parent().remove();
d.remove();
},
autoOpen: false,
show: "fade",
hide: "fade"
});
var dialog = $("<div>")
.appendTo("body")
.dialog(options);
if (options.id) {
dialog.attr("id", options.id);
} else {
dialog.uniqueId();
}
return dialog;
}
function createMessageDiv(msg) {
var div = $("<div>").addClass("ui-state-default message");
$("<span>")
.addClass("ui-icon ui-icon-info message-ico")
.appendTo(div);
$("<div>")
.addClass("message-content")
.appendTo(div)
.text(msg);
return div;
}
function showMessage(msg, title) {
title = title || "信息";
var dialog = createDialog({
title: title,
buttons : [ {
text : getText("ok"),
click : function() {
$(this).dialog("close");
}
} ]
});
createMessageDiv(msg).appendTo(dialog);
dialog.dialog("open");
}
</script>
页面调用
<input type="button" onclick="showMessage('这是一条信息')" value="信息">
- 大小: 3.9 KB
分享到:
相关推荐
jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...
jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,同时也为开发者提供了丰富的插件和扩展功能,如我们今天要讨论的消息框。 首先,理解jQuery消息框的基本概念。消息框通常用于向用户...
2. **jQuery UI和Bootstrap**:jQuery本身并不直接提供弹出消息提示框的功能,但可以通过引入jQuery UI或Bootstrap库来实现。jQuery UI的`dialog()`方法可以创建可自定义的对话框,而Bootstrap的`modal`组件则提供了...
**jQuery UI和jQuery Validate应用详解** 在Web开发中,用户界面的交互性和数据验证是至关重要的,这正是jQuery UI和jQuery Validate插件所擅长的领域。这两个强大的JavaScript库为开发者提供了丰富的功能,使得...
《jQuery (十) jQueryUI常用功能实战》 在本文中,我们将深入探讨jQuery UI库的实战应用,重点关注其在创建弹出层、弹出层登录和弹出层提示中的使用。jQuery UI是jQuery的一个扩展库,它提供了一整套用户界面组件和...
这些消息框不仅样式统一,而且功能强大,支持拖动、缩放、自动关闭等功能。通过实例,我们可以学习如何创建基本对话框,添加按钮,设置对话框的打开和关闭事件,以及如何调整其尺寸和位置。 除此之外,jQuery UI 还...
《jQuery UI:构建高效前端应用的核心工具》 jQuery UI 是一个强大的开源库,它扩展了JavaScript库jQuery的功能,为前端开发者提供了丰富的用户界面组件和交互效果。作为一个专注于前端开发的工具,jQuery UI使得...
**jQuery UI:强大的前端开发工具** jQuery UI 是一个基于 jQuery JavaScript 库的开源前端框架,专为构建交互式用户界面而设计。它提供了一系列可定制的、易于使用的组件,覆盖了从基本的页面元素操作到复杂的用户...
jQuery UI的Message组件为此提供了便利,它能够帮助开发者创建各种风格的提示框,为用户提供清晰的信息反馈。本文将深入探讨jQuery UI Message的使用方法和常见应用场景,旨在帮助开发者更好地利用这一工具提升应用...
例如,在ASP.NET MVC中,我们可以在Controller中处理数据,然后通过View返回一个包含jQuery UI模态对话框的HTML响应,对话框中可以显示确认消息或表单。 Tables.sql文件可能包含数据库表的定义,这表明项目可能涉及...
jQuery.UI Message是一款基于jQuery UI库的插件,用于在网页中显示各种消息提示,提供了一种优雅的方式来传达信息,如成功、警告、错误等。它增强了用户体验,使得开发者能够更轻松地集成反馈机制到他们的应用中。这...
1. **日期选择器(Datepicker)**:Datepicker是jQuery UI的一个核心组件,允许用户方便地选择日期。它提供了多种配置选项,如日期格式、默认日期、禁用日期范围等。通过调用`.datepicker()`方法,可以将任何文本...
4. **对话框(Dialog)**:jQuery UI 的对话框组件可以创建模态或非模态窗口,用于显示警告、确认消息或者提供更复杂的表单。它支持自定义标题、大小、按钮以及关闭选项。 5. **日期选择器(Datepicker)**:日期...
在本文中,我们将深入探讨 jQuery UI 中的 dialog 组件,这是开发者经常使用的功能,用于创建弹出窗口,常用于登录、注册、消息提示等场景。 首先,使用 jQuery UI 需要在页面中引入相应的 CSS 和 JavaScript 文件...
【标题】"jquery-ui仿WebQQ整合苹果菜单界面"是一个基于jQuery UI库创建的项目,旨在模拟WebQQ的用户界面,并结合苹果风格的菜单设计,为用户提供一种独特的交互体验。这个项目展示了如何利用jQuery UI的强大功能来...
2. **社交平台**:通过对话框、提示框(alerts)等小部件,增强用户体验,例如弹出消息确认框来提高交互的安全性。 3. **管理后台**:使用表格排序(sortable tables)、选项卡等功能,可以帮助管理员高效地管理大量...
1. **组件丰富**:LigerUI包含大量可复用的UI组件,如数据表格、树形结构、下拉选择框、时间选择器、弹出窗口等,这些组件设计简洁,易于集成到项目中。 2. **易于使用**:LigerUI基于jQuery,开发者只需要具备基本...
- **电商网站**: 在电商网站中使用jQuery UI实现商品筛选功能,例如使用滑块组件调整价格范围,使用提示框展示商品详情等。 - **社交平台**: 在社交平台上使用对话框组件进行消息发送确认,使用日期选择器组件设置...
JqueryUI的Dialog组件则提供了丰富的对话框功能,常用于弹出窗口交互。在这个例子中,它们被结合起来,创建了一个利用AJAX更新页面内容,并通过JqueryUI Dialog展示的交互体验。 首先,让我们详细了解每个组件: 1...
标题《jquery弹出框插件jquery.ui.dialog用法分析》及描述《主要介绍了jquery弹出框插件jquery.ui.dialog用法,结合实例形式分析了弹出框插件jquery.ui.dialog的功能、下载、使用方法与相关注意事项,需要的朋友可以...