`
dcdc723
  • 浏览: 187431 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery ui 的messager 方法(对话框与交互)

UIjQueryJavaScriptCSSHTML 
阅读更多

用于注册或登陆的对话框 

 

 

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Dialog - Modal form</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
	<script type="text/javascript" src="../../ui/effects.core.js"></script>
	<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
	<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<style type="text/css">
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain {  width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
		
		
	</style>
	<script type="text/javascript">
	$(function() {
		
		var name = $("#name"),
			email = $("#email"),
			password = $("#password"),
			allFields = $([]).add(name).add(email).add(password),
			tips = $("#validateTips");

		function updateTips(t) {
			tips.text(t).effect("highlight",{},1500);
		}

		function checkLength(o,n,min,max) {

			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips("Length of " + n + " must be between "+min+" and "+max+".");
				return false;
			} else {
				return true;
			}

		}

		function checkRegexp(o,regexp,n) {

			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}

		}
		
		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 300,
			modal: true,
			buttons: {
				'Create an account': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
					bValid = bValid && checkLength(name,"username",3,16);
					bValid = bValid && checkLength(email,"email",6,80);
					bValid = bValid && checkLength(password,"password",5,16);
//正则

					bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");
					bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
					
					if (bValid) {
						$('#users tbody').append('<tr>' +
							'<td>' + name.val() + '</td>' + 
							'<td>' + email.val() + '</td>' + 
							'<td>' + password.val() + '</td>' +
							'</tr>'); 
						$(this).dialog('close');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
		
		
		
		$('#create-user').click(function() {
			$('#dialog').dialog('open');
		})
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});

	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog" title="Create new user">
	<p id="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">

		<h1>Existing Users:</h1>


	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>

</div><!-- End demo -->

<div class="demo-description">

<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>

</div><!-- End demo-description -->

</body>
</html>

 交互类：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="../themes/icon.css"> 
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="../jquery.easyui.min.js"></script> 
<script> 
function show1(){ 
$.messager.show({ 
title:'My Title', 
msg:'Message will be closed after 4 seconds.', 
showType:'show' 
}); 
} 
function show2(){ 
$.messager.show({ 
title:'My Title', 
msg:'Message will be closed after 5 seconds.', 
timeout:5000, 
showType:'slide' 
}); 
} 
function show3(){ 
$.messager.show({ 
title:'My Title', 
msg:'Message never be closed.', 
timeout:0, 
showType:'fade' 
}); 
}    //show1,show2 ,show 3为页面右下角的Tips消息方法
function alert1(){ 
$.messager.alert('My Title','Here is a message!'); 
} 
function alert2(){ 
$.messager.alert('My Title','Here is a error message!','error'); 
} 
function alert3(){ 
$.messager.alert('My Title','Here is a info message!','info'); 
} 
function alert4(){ 
$.messager.alert('My Title','Here is a question message!','question'); 
} 
function alert5(){ 
$.messager.alert('My Title','Here is a warning message!','warning'); 
} //弹出的对话框；
function confirm1(){ //是否对话框,并传入值
$.messager.confirm('My Title', 'Are you confirm this?', function(r){ 
if (r){ 
alert('confirmed:'+r); 
location.href = 'http://www.google.com'; 
} 
}); 
} 
function prompt1(){   //带输入值的对话框
$.messager.prompt('My Title', 'Please type something', function(r){ 
if (r){ 
alert('you type:'+r); 
} 
}); 
} 
</script> 
</head> 
<body> 
<h1>Messager</h1> 
<div> 
<a href="javascript:void(0)" onclick="show1()">show</a> | 
<a href="#" onclick="show2()">slide</a> | 
<a href="#" onclick="show3()">fade</a> | 
</div> 

<div> 
<a href="#" onclick="alert1()">alert</a> | 
<a href="#" onclick="alert2()">alert(error)</a> | 
<a href="#" onclick="alert3()">alert(info)</a> | 
<a href="#" onclick="alert4()">alert(question)</a> | 
<a href="#" onclick="alert5()">alert(warning)</a> 
</div> 
<div> 
<a href="#" onclick="confirm1();">confirm</a> 
</div> 
<div> 
<a href="#" onclick="prompt1()">prompt</a> 
</div> 
</body> 
</html>

 效果

 

  • 大小: 18.6 KB
  • 大小: 29.6 KB
2
顶
0
踩
分享到：
| jquery ui 的一个菜单滑动效果
评论
2 楼 dcdc723 2010-03-05  
//简化之后的dialog插件
$('#test').click(function(){
$('#testdialog').dialog('open');
  });
$('#testdialog').dialog({
bgiframe:true,
autoOpen:false,
height:300,
modal:true,
buttons:{
'关闭':function(){
$(this).dialog('close');
},
cancel:function(){
$(this).dialog('close');
}
}
});
1 楼 dcdc723 2010-02-01  
超出DIV 宽度用...显示
<DIV   STYLE="width:   200px;   height:   50px;   border:   1px   solid   red;   overflow:   hidden;   text-overflow:ellipsis">
<NOBR>测试   test   测试   test   测试   test   测试   test   测试</NOBR>
</DIV>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery ui messager 消息框

    2. **jQuery UI**：jQuery UI是jQuery的一个扩展库，提供了可交互的用户界面组件，如对话框、拖放、日期选择器等。它依赖于jQuery，提供了丰富的样式和定制选项。 3. **消息框（Message Box）**：消息框是一种常见...

    jqueryui-API(最完整).pdf

    ### jQuery UI API详解 #### 一、Base：Parser解析器 **用途：** - **$.parser.parse();**：用于解析整个页面中的所有易用UI组件。 - **$.parser.parse('#cc');**：用于解析指定节点（例如ID为cc的元素）内的易用...

    jquery api 、 jquery easy ui

    5. **对话框和提示**: `dialog`（对话框）和`messager`（消息提示）用于与用户进行交互。 6. **表单验证`: EasyUI 提供了内置的验证规则和错误提示，确保用户输入的有效性。 7. **主题支持**: EasyUI 提供多种预设...

    jquery-easyui

    - **对话框与提示**: 提供模态对话框（Dialog）和提示（Messager）功能，用于信息展示和用户交互。 - **菜单与导航**: 创建多级菜单和工具栏，实现页面间的导航。 - **数据网格**: DataGrid 是 EasyUI 中的重要...

    jquery-easyui-1.2.6

    《jQuery EasyUI：构建美观UI界面的利器》 jQuery EasyUI是前端开发中的一款强大工具，它基于流行的JavaScript库jQuery，旨在为Web开发者提供一套便捷的UI组件，以快速构建功能丰富且设计精美的用户界面。这个框架...

    jquery中文帮助文档(jquery_api.zip)

    而jQuery EasyUI则是在jQuery基础上构建的一个前端框架，它提供了一系列易于使用的UI组件，如表格、下拉框、按钮、对话框等，极大地提高了开发效率。 **jQuery核心概念与功能：** 1. **选择器（Selectors）**：...

    Aspdotnet中使用Jqueryeasyui的Confirm

    JQuery EasyUI 是一个基于 jQuery 的 UI 插件，提供了丰富的组件，包括对话框（dialog）、表格（datagrid）、菜单（menu）等，其中 Confirm 对话框就是用于实现这种确认功能的。 JQuery EasyUI 的 Confirm 对话框...

    easyui messager alert 三秒后自动关闭提示的实例

    ，它使用了 jQuery 来选中 Messager 对话框的主体部分，并调用了 close 方法，意味着将关闭对话框。第二个参数是 3000，意味着上述的关闭对话框操作将在 3000 毫秒后执行，也就是 3 秒后。 通过组合使用 $....

    jqueryeasyui中文API

    ### jQuery EasyUI 中文API知识点 ...这些组件结合了jQuery的易用性和UI控件的直观性，使得开发者可以更容易地构建出丰富的用户界面和交互体验。在实际开发中，开发者可以根据具体需求对这些组件进行选择和使用。

    jQueryEasyUI介绍.docx

    3. **HTML 标签和插件方法**：开发者可以通过简单的 HTML 标签结合 class 属性或者使用 jQuery 方法（如 `$('#p').panel({...})`）来创建和操作 UI 元素。 4. **支持 HTML5**：通过 data-options 属性，可以方便地在...

    jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)

    5. **对话组件**：如提示（`messager`）、对话框（`dialog`）、确认框（`confirm`），用于实现弹出式的交互。 6. **布局组件**：如布局（`layout`）、拆分面板（`splitter`），用于创建响应式和自适应的页面布局。 ...

    jQuery EasyUI 中文文档

    - **dialog (对话框)**：`dialog` 可以创建一个对话框，类似于窗口但有更多的交互能力。 - **draggable (可拖拽)**：`draggable` 让元素支持拖拽操作。 - **messager (消息框)**：`messager` 提供了提示消息的功能，...

    jQuery EasyUI封装简化操作

    `showMsg` 和 `showAlert` 函数：这两个函数都是用来显示消息的，`showMsg` 提供了更多的选项，如动画效果和消息类型，而 `showAlert` 直接调用了 jQuery EasyUI 的 `messager.alert`，用于显示简单的警告对话框。...

    jQueryEasyUI介绍.pdf

    它提供了许多常见的 UI 控件，如折叠面板（accordion）、下拉组合框（combobox）、菜单（menu）、对话框（dialog）、标签页（tabs）、验证框（validatebox）、数据网格（datagrid）、窗口（window）以及树形结构...

    jquery删除提示框弹出是否删除对话框

    需要注意的是，这里的 `$.messager.confirm` 并不是 jQuery 的内置方法，而是可能来自第三方插件，如 jQuery-messager 或 EasyUI。因此，确保你的项目中已经正确引入了这些依赖。 此外，这个实现假设你有一个后端...

    Jquery-easyui CHM文档及源码

    jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列的UI组件，使得开发者可以快速构建出美观且功能丰富的Web应用。EasyUI 的核心理念是通过简单的HTML标记和CSS样式，结合JavaScript API，实现复杂...

    Jquery EasyUI Demo 例子

    JQuery EasyUI 是一个基于jQuery库的前端框架，它提供了丰富的UI组件，使得开发者能够快速构建用户界面。这个"Jquery EasyUI Demo"包含了多个核心组件的示例，旨在帮助开发者理解和应用这些组件。 1. **Accordion...

    jQuery+EasyUI+1.2.4+API+中文文档

    EasyUI则是建立在jQuery基础上的一套组件库，它提供了一套完整的UI解决方案，包括表格、表单、对话框、菜单、按钮、滑块、树形结构等常见组件。EasyUI的使用方式主要是通过CSS样式和JavaScript方法来控制这些组件的...

Magicbox
Global site tag (gtag.js) - Google Analytics