Jquery-UI使用

=创建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>

编写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使用的更多相关文章

jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
jQuery UI与jQuery easyUI的冲突解决办法
jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...
【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架原创在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
Jquery UI
jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...
JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路
通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...
jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
使用requireJS的shim参数解决插件 jquery.ui 等插件问题
没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...
Struts2 JQuery UI常用插件
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

JavaScript中的apply,call与this的纠缠
1.apply定义 apply:调用函数,并用指定对象替换函数的 this 值,同时用指定数组替换函数的参数. 语法:apply([thisObj[,argArray]]) thisObj 可选.要用 ...
详解Javascript中正则表达式的使用
正则表达式用来处理字符串特别好用,在JavaScript中能用到正则表达式的地方有很多,本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结. 第一部分简单列举了正则表达式在Ja ...
Chrome浏览器必装的扩展工具
名称作用下载地址 Postman 模拟各种http请求点击下载 JSON Viewer 访问json结果自动视图化点击下载 Axure RP Extension for Chrome 查看Ax ...
kafka性能参数和压力测试揭秘
转自:http://blog.csdn.net/stark_summer/article/details/50203133 上一篇文章介绍了Kafka在设计上是如何来保证高时效.大吞吐量的,主要的内容 ...
编写高质量代码:改善Java程序的151个建议(第3章:类、对象及方法___建议47~51)
建议47:在equals中使用getClass进行类型判断本节我们继续讨论覆写equals的问题,这次我们编写一个员工Employee类继承Person类,这很正常,员工也是人嘛,而且在JavaBe ...
Oracle 内置sql函数大全
F.1字符函数--返回字符值这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据 ...
详解web容器 - Jetty与Tomcat孰强孰弱
Jetty 基本架构 Jetty目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的应用服务器.它有一个基本数据模型,这个数据模型就是 Handler(处理器 ...
jquery时间日期三级联动
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs ...
c#面向对象基础技能——学习笔记（三）基于OOP思想研究对象的【方法】
实例方法:(解决问题的步骤)完成某功能的各种语句的组合编写方法要考虑的内容: 1.通过项目需求,确定各方法的任务.功能: 2.方法的可访问性(默认是private):(字段private 属性int ...
C#——this关键字（2，3）（含求助贴）
这次来看一看this关键字的第二个用法:将对象作为参数传递到其他方法 ----------------------------------------------------------------- ...

Jquery-UI使用

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

随机推荐

热门专题