=创建form对话框弹出登录

首先引入css样式和js。

 <link rel="stylesheet" href="<%=path%>/css/demos.css" type="text/css"></link>

  <link rel="stylesheet" href="<%=path%>/css/base/jquery-ui.css" type="text/css"></link>

  <script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>

  <script type="text/javascript" src="<%=path%>/js/jquery-ui.js"></script>

  <script type="text/javascript" src="<%=path%>/js/jquery.ui.dialog.js"></script>

css/js

接下来编写script(finction函数)

<script>

         $("#dialog").dialog({

             height: 250,

             width: 350,

             modal: true,

             buttons: {

                 "提交": function() {},

                 "关闭": function() {$( this ).dialog( "close" );}

             }

         });

     $(function() {

        $( "#dialog-form" ).dialog({

            autoOpen: false,

            height: 250,

            width: 350,

            modal: true,

            buttons: {

                "提交": function() {

                    var name = $( "#name" ).val();

                    var    password = $( "#password" ).val();

                    $.get("form_server.jsp?name="+name+"&password="+password,function(data){

                        $( "#dialog-form" ).dialog( "close" );

                        $( "#result" ).html('<h2>'+data+'</h2>');

                        $( "#result" ).dialog({modal: true});

                    });

                },

                "关闭": function() {

                    $( this ).dialog( "close" );

                }

            },

            //关闭时触发

             beforeClose:function(){

                 alert("是否确认退出")

             },

             open:function(){

                 alert("是否确认登录")

             },

            //特效，出

               show:{

                  effect:'blind',

                  duration:1000

                  },

              //特效，收

                 hide:{

                  effect:'explode',

                  duration:2000

                  }

        });

        $( "#create-form" )

            .button()

            .click(function() {

                $( "#dialog-form" ).dialog("open");

            });

    });

     </script>

script

接下来编写<body>标签里的内容

<body>

  <div id="dialog-form" title="用户登录">

      <div id="result" style="height: 40px "></div>

      <div>

          <label for="name">用户名</label>

          <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />

        <label for="password">密码</label>

        <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all" />

      </div>

  </div>

   <button id="create-form">创建form对话框</button>

  </body>

body

实现效果

页面加载时,存放输入文本框的div元素是不能显示的所以在为其添加的dialog方法中需要将autoOpen参数设置为 fslse 。当单击按钮时触发事件，通过执行$( "#dialog-form" ).dialog("open")将div元素显示出来

dialog插件

查询自动完成效果

添加css样式/js

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="<%=path%>/js/jquery-ui.js"></script>

<link rel="stylesheet" href="<%=path%>/css/base/jquery.ui.all.css">

<link rel="stylesheet" href="<%=path%>/css/demos.css">

css/js

接下来编写script

<script>

    $(function() {

        var source = [

        "ActionScript",

            "AppleScript",

            "Asp",

            "最新电影",

            "最新电视剧",

            "最新消息",

            "最新人类",

            "COBOL",

            "ColdFusion",

            "Erlang",

            "Fortran",

            "Groovy",

            "Haskell",

            "Java",

            "JavaScript",

            "Lisp",

            "Perl",

            "PHP",

            "Python",

            "Ruby",

            "Scala",

            "Scheme"

        ];

        $("#tags").autocomplete({

        minLength:2,

        source:source,

        autoFous:true

        });

    });

</script>

script

接下来编写<body>标签里的内容

<body>

   <div class="ui-wideget">

        <h2>查询:<input id="tags"></h2>

    </div>

  </body>

body

实现效果(在此显示的数据是数据库里的)

 图片延迟加载

引入js

<script src="<%=path%>/js/jquery-1.8.3.js"></script>

    <script src="<%=path%>/js/jquery.lazyload.js"></script>

js

编写script

<script>

         $(function(){

               $("img").lazyload({

                 effect:"slideDown",//使用淡入效果   slideDown下拉    fadeIn淡入

                effectspeed : 3000,

                threshoId : 200,

             });

        });

    </script>

script

编写<body>

<body>

    <div style="height:1px;"></div>

    <img class="lazy" src="<%=path%>/img/load.gif" data-original="<%=path%>/img/bmw_m1_hood.jpg">

    <div style="height:1px;"></div>

    <img class="lazy" src="<%=path%>/img/load.gif" data-original="<%=path%>/img/bmw_m1_side.jpg">

    <div style="height:1px;"></div>

    <img class="lazy" src="<%=path%>/img/load.gif" data-original="<%=path%>/img/bmw_m3_gt.jpg">

</body>

body

实现效果就不在此展示了

lazyload插件

Jquery-UI使用的更多相关文章

  1. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  2. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  3. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  4. Jquery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  5. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  6. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  7. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  8. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  9. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  10. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

  1. 谁是2016年的.NET开发者？

    Nora Georgieva (http://www.telerik.com/blogs/infographic-the-dotnet-developer-of-2016) Whether you h ...

  2. SpringMVC一路总结（三）

    在博文<SpringMVC一路总结(一)>和<SpringMVC一路总结(二)>中,该框架的应用案例都是是基于xml的形式实现的.然而,对于大型项目而言,这种xml的配置会增加 ...

  3. 匹夫细说C#：可以为null的值类型，详解可空值类型

    首先祝大家中秋佳节快乐~ 0x00 前言 众所周知的一点是C#语言是一种强调类型的语言,而C#作为Unity3D中的游戏脚本主流语言,在我们的开发工作中能够驾驭好它的这个特点便十分重要.事实上,怎么强 ...

  4. ASP.NET Core 中文文档 第二章 指南（4.7）添加搜索

    原文:Adding Search 作者:Rick Anderson 翻译:魏美娟(初见) 校对:谢炀(Kiler) .孟帅洋(书缘).张仁建(第二年.夏) 在本节中,你可以为 Index 方法添加查询 ...

  5. CSS知识总结（二）

    CSS的选择符分成: 1. 通配选择符 2. 元素选择符 3. 群组选择符 4. 关系选择符 5. id及class选择符 6. 伪类选择符 7. 属性选择符 8. 伪对象选择符 1.通配选择符(*) ...

  6. C#开发微信门户及应用(31)--微信语义理解接口的实现和处理

    微信语义理解接口提供从用户自然语言输入到结构化解析的技术实现,使用先进的自然语言处理技术给开发者提供一站式的语义解析方案.该平台覆盖多个垂直领域的语义场景,部分领域还可以支持取得最终的展示结果.开发者 ...

  7. java基础练习 字符串，控制流，日历，日期等

    1,对基本控制流程的一些练习 package org.base.practice3; import org.junit.Test; /** * Created with IntelliJ IDEA. ...

  8. html5+jqueryMobile编写App推广注册页

    html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...

  9. MyBatis魔法堂：Insert操作详解（返回主键、批量插入）

    一.前言    数据库操作怎能少了INSERT操作呢?下面记录MyBatis关于INSERT操作的笔记,以便日后查阅. 二. insert元素 属性详解   其属性如下: parameterType  ...

  10. 【设计模式】单例模式 c++实现

    单例模式一般应用在整个应用中只会存在一个对象.比如应用类,游戏场景类,工具类等. 实现方式: 头文件 singleton.h: #ifndef _SINGLETON_H_ #define _SINGL ...