=创建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. 引用MVC源码的小问题

    vs2010自己创建的MVC项目,排除掉System.Web.Mvc引用后,引用源码,直接运行会提示引用冲突,这个是因为配置文件的问题,只要把配置文件中assemblies节点下的 <add a ...

  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统（21）-权限管理系统-跑通整个系统

    系列目录 这一节我们来跑通整个系统,验证的流程,通过AOP切入方式,在访问方法之前,执行一个验证机制来判断是否有操作权限(如:增删改等) 原理:通过MVC自带筛选器,在筛选器分解路由的Action和c ...

  3. Angular定义服务-Learn By Doing

    1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...

  4. GO语言下载、安装、配置

    一.Go语言下载 go语言官方下载地址:https://golang.org/dl/ 找到适合你系统的版本下载,本人下载的是windows版本.也可以下载Source自己更深层次研究go语言. 二.G ...

  5. [Asp.net 5] Caching-缓存预告

    本节讲Asp.net 5的缓冲.解决方案可以通过网址:https://github.com/aspnet/Caching下载 也是Asp.net 5开源代码介绍的第6部分,前5部分链接如下: 1. D ...

  6. C#获取硬盘序列号的问题求助

    具体问题是这样的:我用下面这段获取硬盘型信息的代码做成的exe文件,在机子上测试的时候,出现直接双击运行和用管理员身份运行结果不一样的情况,这个问题该怎么解决? public static Strin ...

  7. Xamarin Android 之起始篇

    序言: 在博客园注册了已经有2年多了,快三年了.从开始学习这一行开始就在博客园注册了这个账号.至今也还没有写过一篇随笔,大多时候都是在园子里头潜水,看大牛写的文章,学习. 写博客不为啥,就是自己对自己 ...

  8. ubuntu安装navicat及常见问题解决

    1.安装navicat Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...

  9. Atitit Atitit.软件兼容性原理----------API兼容 Qa7

    Atitit Atitit.软件兼容性原理----------API兼容 Qa7 1. 兼容性的重要性与反面教材1 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法 ...

  10. Css3新特性应用之视觉效果

    一.单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow:水平阴影的位置,允许负值 v-sh ...