dcdc723
- 浏览: 183803 次
- 性别:
- 来自: 北京
-
最新评论
-
heping45：
有待进步，不知所云
WEB流程图(jquery实现) -
zhoupuyue：
html有一个小错误：<script> $(fu ...
漂亮的Jquery的日期控件（精减） -
dcdc723：
happy175 写道大家是怎么用的啊，我的怎么没有反应？这是 ...
漂亮的Jquery的日期控件（精减） -
happy175：
大家是怎么用的啊，我的怎么没有反应？这是我的代码：
<! ...
漂亮的Jquery的日期控件（精减） -
nianshi：
加上Html文件多好啊
漂亮的Jquery的日期控件（精减）
用于注册或登陆的对话框
<!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>
2
顶
顶
0
踩
踩
分享到：
评论
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');
}
}
});
$('#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>
<DIV STYLE="width: 200px; height: 50px; border: 1px solid red; overflow: hidden; text-overflow:ellipsis">
<NOBR>测试 test 测试 test 测试 test 测试 test 测试</NOBR>
</DIV>
发表评论
-
汉字取首字母（JS版）
2011-06-16 22:44 1494String.prototype.trim = functio ... -
自己写的简单的jquery焦点图
2010-09-30 10:23 1180首页是自动播放代码： var j=0;$.extend ... -
JS弹出的半透明层
2010-09-27 15:24 1683<style> .mesWindow{borde ... -
绝对居中的层 ---备忘
2010-09-26 09:00 845<div style='position:relativ ... -
json跨域访问数据---备忘
2010-09-23 14:55 1120服务端（数据源端）： <?php $arr = a ... -
纯JS的弹出层
2010-09-16 15:52 1172<script type="text/java ... -
WEB流程图(jquery实现)
2010-08-20 17:54 5319<?//http://dcdc723.iteye.com ... -
导航定位（仿多玩）
2010-05-14 17:56 1334<STYLE type=text/css>BODY ... -
jquery 1.4 中文帮助文档（CHM）
2010-03-16 19:14 7668CHM版的jquery1.4文档 -
漂亮的Jquery的日期控件（精减）
2010-03-15 17:10 12248效果图： 修改了UI中的其他控件的CSS跟JS： & ... -
jquery1.4 中文 文档
2010-03-04 15:53 3915jquery1.4 中文 文档 原文：http://api. ... -
jquery做的一个onmouse出tips帮助文档的一个效果
2010-03-03 09:25 4488<!DOCTYPE html PUBLIC " ... -
JQUERY可编辑的表格
2010-02-25 17:22 1332<script>$(function(){ ... -
仿网易的新年 效果（自己用Jquery仿的）
2010-02-09 13:56 4599<!DOCTYPE HTML PUBLIC " ... -
jquery 取得$.ajax事件中的返回值，并添加事件
2010-02-02 21:38 4944<html> <head> < ... -
Jquery 动态的添加文本框 并 取添加的值
2010-02-02 20:29 3083<html xmlns="http://www ... -
juqery库
2010-01-30 12:01 0jqueryui.js jquery ui 代码如下： ... -
jquery ui 的一个菜单滑动效果
2010-01-30 11:51 2409<html> <head> < ... -
高亮关键字(javascript+html)
2010-01-28 12:17 1266使用时传递要高亮的关键字如: XXX.htm?key=杜川 ... -
jquery 的后台导航
2010-01-27 13:38 1149<script language="jav ...
相关推荐
修改了下别人提供的文件代码，未找到出处，特此共享。
Jquery+CSS模式对话框Jquery+CSS模式对话框Jquery+CSS模式对话框Jquery+CSS模式对话框
jQuery网页弹出对话框 jQuery网页弹出对话框特效.zip
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是： (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库
可以直接在本页面弹出对话框在本页面弹出对话框，尽情使用吧
资源名称：jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介：《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库，从...
资源名称：jQuery UI参考手册 中文CHM版内容简介：jQuery UI是一个建立在jQuery Javaｓｃｒｉｐｔ 库上的小部件和交互库，您可以使用它创建高度交互的Web应用程序。本教程将向您讲解 jQuery UI 是如何工作的。本文给...
css3+jquery自定义弹出对话框特效 css3+jquery自定义弹出对话框特效 css3+jquery自定义弹出对话框特效 css3+jquery自定义弹出对话框特效
jQuery UI是一套基于jquery构建具有皮肤更换功能的UI控件和鼠标交互组件。用于帮助开发人员构建具有良好用户体验的Web应用程序。交互组件包括 drag/dropping、sorting、selecting和resizing等。基于这些核心交互组件...
jquery多功能小巧对话框
不错的jQuery弹出层对话框插件，目前几个项目都在用，调用方便很实用，方便扩展； 对话框标题可自由拖动； 边框支持多浏览器半透明； 支持半遮罩背景设置； 支持回调函数使用； 传参方便，一行代码搞定调用，希望能...
2.jQuery and jQuery UI Reference 1.2 API.zip； 3.jQuery UI 1.9带给我们的惊喜.zip； 4.jQuery.ui.docs.rar； 5.jquery-easyui-1.0.5.zip； 6.jquery-easyui-1.2.ZIP； 7.jQuery-easyui-docs.rar； 8.jquery-ui-...
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
bootstrap&jQueryUI例子
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
Jquery 对话框 Jquery 对话框 Jquery 对话框
jQuery UI 是一套 jQuery 的页面 UI 插件，包含很多种常用的页面空间，例如 Tabs 、拉帘效果、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
JQuery UI 的对话框的一些属性的用法