=创建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. 读书笔记--SQL必知必会19--存储过程

    不同的DBMS对存储过程的实现不同,差异巨大,这里不涉及具体的DBMS,仅仅说明存储过程的简单含义. 19.1 存储过程 简单来说,存储过程就是为以后使用而保存的一条或多条SQL语句. 可以将存储过程 ...

  2. 【干货】用大白话聊聊JavaSE — ArrayList 深入剖析和Java基础知识详解（二）

    在上一节中,我们简单阐述了Java的一些基础知识,比如多态,接口的实现等. 然后,演示了ArrayList的几个基本方法. ArrayList是一个集合框架,它的底层其实就是一个数组,这一点,官方文档 ...

  3. Devexpress GridView 列中显示图片

    首先将图片添加到ImageList中 添加GridView中Column void gridView1_CustomUnboundColumnData(object sender, DevExpres ...

  4. 每天一个设计模式-2 外观模式（Facade）

    每天一个设计模式-2  外观模式(Facade) 1.生活中的示例 客户想要购买一台电脑,一般有两种方法: 1.自己DIY,客户需要知道组成电脑的所有电子器件,并且需要熟悉那些配件,对客户要求较高. ...

  5. JDBC关于时间的存取

    Oracle数据库默认时间存储是java.sql.date,而java程序中的时间默认是java.util.date,所以通过JDBC存取的 时候会涉及到时间的转换问题. 1.日期存取 存入数据库的时 ...

  6. Hibernate关联映射 映射文件的配置

    一:多对一单向关联 首先我们必须创建两个实体类 例如:Dept类 public class Dept { private Integer deptNo; private String dName; p ...

  7. JS中的对象

    什么事对象?对象是一个整体,对外提供一些操作.而面向对象,就是使用对象时,只关注对象提供的功能,不关注内部的细节,面向对象是一种通用思想. 面向对象编程的特点: 抽象:抓住核心问题: 封装:不考虑内部 ...

  8. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  9. 禁止backspace键(退格键)，但输入文本框时不禁止（兼容IE）

    Ext实现方式: Ext.getDoc().on('keydown',function(e){      if(e.getKey() == 8 && e.getTarget().typ ...

  10. 模块化你的JS代码

    为什么要使用模块模式? 因为在全局作用域中声明的变量和函数都自动成为全局对象Window的属性,这经常会导致命名冲突,还会导致一些非常重要的可维护性难题,全局变量越多,引入错误BUG的概率就越大!所以 ...