最近在学习jquery
,今天用jquery ui实现了一个登录用的对话框,现在把代码贴在这里以便以后查看
<html>
<head>
<link rel="stylesheet" type="text/css" href="../themes/flora/flora.all.css" />
<script src="../jquery-1.2.6.js" type="text/javascript"></script>
<script src="../ui/ui.core.js" type="text/javascript"></script>
<script src="../ui/ui.draggable.js" type="text/javascript"></script>
<script src="../ui/ui.resizable.js" type="text/javascript"></script>
<script src="../ui/ui.dialog.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#bttn1').click(function() {
//$('#dialogTest').dialog('open');
createLoginDialog();
});
});
function createLoginDialog(){
var obj = $("<div></div>").attr("title","create one dialog!").attr("id","dialogTest");
var username = $("<lable></lable>").text("Username:");
obj = obj.append(username);
var userinput = $("<input type='text' name='username'>");
obj = obj.append(userinput);
var br = $("<br>");
obj.append(br);
var password = $("<lable></lable>").text("Password:");
obj = obj.append(password);
var passinput = $("<input type='password' name='password'>");
obj = obj.append(passinput);
obj.addClass('flora').dialog({
width:350,
height:150,
resizable:'disable',
buttons:{
'OK':function(){
var tmpDialog = $("<div/>")
tmpDialog.html("your username is :"+$(this).find("[name='username']").val())
.html(tmpDialog.html()+"<br> your password is : "+$(this).find("[name='password']").val())
.addClass('flora').dialog({
title:'your input value',
resizable:'disable'
});
},
'Cancel':function(){
$(this).dialog('close');
}
},
title:'My Dialog',
});
}
</script>
</head>
<body>
<button id="bttn1" value="Open the Dialog">Open the Dialog</button>
</body>
</html>
这个只是个简单的输入框,在用户输入后,点击ok按钮就会弹出另外一个对话框把用户输入的内容显示出来。
分享到:
相关推荐
jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...
首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html <!-- HTML结构 --> <option value="1">Option 1 ...
Jquery UI实现时分秒UI实现Demo,在原有Jquery UI DatePicker插件基础上整合jquery-ui-timepicker-addon.js实现年月日 时分秒日期时间格式,方便用户快速开发HTML
闲来无事,用jquery模拟了一个下拉框,可以通过输入框对下拉列表进行过滤. 原理: 1.下拉框由div和文本框...jquery-ui 1.8 实现见附件,已经在IE8下测试. 无积分的可在iteye上下载 http://lic0112.iteye.com/blog/1679312
jQuery UI Layout 是一个轻量级的框架,它允许开发者通过简单的配置,快速实现复杂的页面布局。布局主要分为上、中左、中右、下五个区域,这种布局方式可以满足大多数后台管理系统的需要,让页面内容层次分明,提高...
本篇文章将深入探讨jQuery UI Demo框架,以及它如何结合JSON实现数据的增删改查操作。 ### 1. jQuery UI组件 jQuery UI 包含多种组件,如: - **Dialog(对话框)**:用于弹出式窗口,常用于警告、确认或输入信息...
jQuery UI 通过 jQuery 对象方法调用来实现,开发者可以轻松地将这些功能添加到任何HTML元素上。例如,通过`.dialog()`方法可以创建一个对话框,`.datepicker()`用于添加日期选择功能,`.draggable()`则使元素具备...
在"bootstrap&jQueryUI例子"这个压缩包中,可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式,同时引入 jQuery UI 的组件,实现更复杂的用户...
Query UI是一款基于jQuery的开源Javascript框架,jQuery UI框架主要提供了用户交互、动画、特效和可更换主题的可视控件,让开发者可以更方便地实现网页交互界面,jQuery UI的整个框架比较庞大,但你也可以根据自己...
总的来说,jQuery UI 是前端开发的重要工具,它简化了UI组件的实现,提高了开发效率,使得开发者可以更加专注于业务逻辑和用户体验的提升。无论你是新手还是经验丰富的开发者,jQuery UI 都能为你提供强大而灵活的...
2. **jQuery UI JS 文件**:这是框架的核心 JavaScript 文件,包含所有组件和功能的实现。通常会有压缩和未压缩两种版本,根据项目需求选择合适的版本。 3. **文档**:一份详细的 HTML 或 PDF 文档,介绍每个组件的...
jqueryui界面框架_sitemesh布局框架
接着,`jquery-ui.js`是jQuery UI的核心JavaScript库,它包含了所有UI组件的实现。这个文件包含了实现交互性和动态效果的代码,如拖放、动画和事件处理。通过引入这个文件,你可以轻松地在页面上添加各种交互元素,...
**jQuery UI Layout 后台框架** 是一个强大的前端开发工具,专为构建高效且美观的后台管理系统而设计。它利用了流行的JavaScript库jQuery以及jQuery UI的丰富功能,为开发者提供了灵活的页面布局解决方案。该框架...
3. **拖放(Draggable/Droppable)**:jQuery UI实现了元素的拖放功能,允许用户将一个元素拖动到另一个元素上,常用于构建可交互的布局或者文件管理器等应用。 4. **排序(Sortable)**:这个功能允许用户对列表或...
jQueryUI 是一个强大的JavaScript库,它扩展了流行的jQuery框架,为开发者提供了丰富的用户界面组件。在Web开发中,jQueryUI提供了诸如对话框、拖放、排序、日期选择器等多种交互式元素,极大地提升了用户体验。而...
在JQueryUI中,你可以使用Autocomplete组件为输入框提供自动完成功能,这在搜索框或输入建议场景中非常有用。另外,Slider组件则可以创建滑动条,允许用户通过直观的方式选择数值或进行排序。 接下来,我们讨论Tab...
《jQueryUI MetroUI WindowUI 主题详解》 在Web开发领域,jQuery UI 是一个非常流行的JavaScript库,它为HTML提供了丰富的交互式用户界面组件。jQuery UI 的魅力在于其可定制性和丰富的主题系统,使得开发者可以...
通过`jquery-ui-rails` gem,我们可以轻松地在Rails项目中集成jQuery UI的各种组件,从而实现丰富的前端功能。在实际开发过程中,根据项目需求选择合适的jQuery UI组件,并充分利用Rails的asset pipeline,能够使...
通过访问在线工具(如 http://jqueryui.com/themeroller/),可以选择颜色、字体、边框等样式,生成定制的主题 CSS 文件。下载后,替换默认的 `jquery-ui.min.css` 文件,即可实现整个 UI 的风格统一。 ### 3. 常见...