最近在学习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 Layout 后台框架** 是一个强大的前端开发工具，专为构建高效且美观的后台管理系统而设计。它利用了流行的JavaScript库jQuery以及jQuery UI的丰富功能，为开发者提供了灵活的页面布局解决方案。该框架...
3. **拖放（Draggable/Droppable）**：jQuery UI实现了元素的拖放功能，允许用户将一个元素拖动到另一个元素上，常用于构建可交互的布局或者文件管理器等应用。 4. **排序（Sortable）**：这个功能允许用户对列表或...
接着，`jquery-ui.js`是jQuery UI的核心JavaScript库，它包含了所有UI组件的实现。这个文件包含了实现交互性和动态效果的代码，如拖放、动画和事件处理。通过引入这个文件，你可以轻松地在页面上添加各种交互元素，...
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. 常见...