`
liuhello
  • 浏览: 69495 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery ui 实现的登录框

阅读更多

最近在学习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按钮就会弹出另外一个对话框把用户输入的内容显示出来。

 

3
2
分享到:
评论

相关推荐

    jquery ui messager 消息框

    jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...

    jQuery UI Multiselect (jQuery UI 多选框)

    首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html &lt;!-- HTML结构 --&gt; &lt;option value="1"&gt;Option 1 ...

    Jquery UI实现时分秒UI实现Demo

    Jquery UI实现时分秒UI实现Demo,在原有Jquery UI DatePicker插件基础上整合jquery-ui-timepicker-addon.js实现年月日 时分秒日期时间格式,方便用户快速开发HTML

    jquery ui 实现的选择框

    闲来无事,用jquery模拟了一个下拉框,可以通过输入框对下拉列表进行过滤. 原理: 1.下拉框由div和文本框...jquery-ui 1.8 实现见附件,已经在IE8下测试. 无积分的可在iteye上下载 http://lic0112.iteye.com/blog/1679312

    jquery ui layout 后台框架.zip

    jQuery UI Layout 是一个轻量级的框架,它允许开发者通过简单的配置,快速实现复杂的页面布局。布局主要分为上、中左、中右、下五个区域,这种布局方式可以满足大多数后台管理系统的需要,让页面内容层次分明,提高...

    Jquery UI Demo 框架

    本篇文章将深入探讨jQuery UI Demo框架,以及它如何结合JSON实现数据的增删改查操作。 ### 1. jQuery UI组件 jQuery UI 包含多种组件,如: - **Dialog(对话框)**:用于弹出式窗口,常用于警告、确认或输入信息...

    jquery-UI-框架

    jQuery UI 通过 jQuery 对象方法调用来实现,开发者可以轻松地将这些功能添加到任何HTML元素上。例如,通过`.dialog()`方法可以创建一个对话框,`.datepicker()`用于添加日期选择功能,`.draggable()`则使元素具备...

    bootstrap&jQueryUI例子

    在"bootstrap&jQueryUI例子"这个压缩包中,可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式,同时引入 jQuery UI 的组件,实现更复杂的用户...

    jquery-ui-1.9.2.jQueryUI 框架

    Query UI是一款基于jQuery的开源Javascript框架,jQuery UI框架主要提供了用户交互、动画、特效和可更换主题的可视控件,让开发者可以更方便地实现网页交互界面,jQuery UI的整个框架比较庞大,但你也可以根据自己...

    jQuery UI组件 jQuery UI

    总的来说,jQuery UI 是前端开发的重要工具,它简化了UI组件的实现,提高了开发效率,使得开发者可以更加专注于业务逻辑和用户体验的提升。无论你是新手还是经验丰富的开发者,jQuery UI 都能为你提供强大而灵活的...

    jquery UI框架

    2. **jQuery UI JS 文件**:这是框架的核心 JavaScript 文件,包含所有组件和功能的实现。通常会有压缩和未压缩两种版本,根据项目需求选择合适的版本。 3. **文档**:一份详细的 HTML 或 PDF 文档,介绍每个组件的...

    jqueryui界面框架_sitemesh布局框架

    jqueryui界面框架_sitemesh布局框架

    jquery-ui.css、jquery-ui.js下载

    接着,`jquery-ui.js`是jQuery UI的核心JavaScript库,它包含了所有UI组件的实现。这个文件包含了实现交互性和动态效果的代码,如拖放、动画和事件处理。通过引入这个文件,你可以轻松地在页面上添加各种交互元素,...

    jquery ui layout 后台框架(可切换ui主题)

    **jQuery UI Layout 后台框架** 是一个强大的前端开发工具,专为构建高效且美观的后台管理系统而设计。它利用了流行的JavaScript库jQuery以及jQuery UI的丰富功能,为开发者提供了灵活的页面布局解决方案。该框架...

    jquery ui & themes

    3. **拖放(Draggable/Droppable)**:jQuery UI实现了元素的拖放功能,允许用户将一个元素拖动到另一个元素上,常用于构建可交互的布局或者文件管理器等应用。 4. **排序(Sortable)**:这个功能允许用户对列表或...

    jQueryUI jQueryUI插件 键盘插件

    jQueryUI 是一个强大的JavaScript库,它扩展了流行的jQuery框架,为开发者提供了丰富的用户界面组件。在Web开发中,jQueryUI提供了诸如对话框、拖放、排序、日期选择器等多种交互式元素,极大地提升了用户体验。而...

    JQueryUI,EasyUI一些控件的使用

    在JQueryUI中,你可以使用Autocomplete组件为输入框提供自动完成功能,这在搜索框或输入建议场景中非常有用。另外,Slider组件则可以创建滑动条,允许用户通过直观的方式选择数值或进行排序。 接下来,我们讨论Tab...

    jQueryUI MetroUI WindowUI 主题

    《jQueryUI MetroUI WindowUI 主题详解》 在Web开发领域,jQuery UI 是一个非常流行的JavaScript库,它为HTML提供了丰富的交互式用户界面组件。jQuery UI 的魅力在于其可定制性和丰富的主题系统,使得开发者可以...

    jquery-ui+jquery-ui-rails

    通过`jquery-ui-rails` gem,我们可以轻松地在Rails项目中集成jQuery UI的各种组件,从而实现丰富的前端功能。在实际开发过程中,根据项目需求选择合适的jQuery UI组件,并充分利用Rails的asset pipeline,能够使...

    关于jQuery-Ui的引用文件

    通过访问在线工具(如 http://jqueryui.com/themeroller/),可以选择颜色、字体、边框等样式,生成定制的主题 CSS 文件。下载后,替换默认的 `jquery-ui.min.css` 文件,即可实现整个 UI 的风格统一。 ### 3. 常见...

Global site tag (gtag.js) - Google Analytics