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 ...

随机推荐

Android开发之基于AndroidStudio环境搭建和工程创建
断断续续的学习安卓也有一段时间了.因为之前是搞iOS开发的, 之前有关iOS的博客请看<我的iOS开发系列博文>.<我的Objective-C系列文章>和<窥探Swift ...
分布式系统理论进阶 - Raft、Zab
引言 <分布式系统理论进阶 - Paxos>介绍了一致性协议Paxos,今天我们来学习另外两个常见的一致性协议——Raft和Zab.通过与Paxos对比,了解Raft和Zab的核心思想.加 ...
安卓第一次启动引导页使用ViewPager实现
我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...
匹夫细说C#：从园友留言到动手实现C#虚函数机制
前言上一篇文章匹夫通过CIL代码简析了一下C#函数调用的话题.虽然点击进来的童鞋并不如匹夫预料的那么多,但也还是有一些挺有质量的来自园友的回复.这不,就有一个园友提出了这样一个代码,这段代码如果被编 ...
JS性能优化
1.不要在同一行声明多个变量. 2.请使用 ===/!==来比较true/false或者数值 3.使用对象字面量替代new Array这种形式 4.不要使用全局函数. 5.Switch语句必须带有de ...
Win10 UWP系列：关于错误 0x80073CF9及一个小bug的解决
最近一直在开发XX的uwp版本,也是边摸索边做,最近遇到几个比较奇怪的问题,记录于此. 1.项目可用部署到PC,但无法部署到手机,提示以下错误: 错误 : DEP0001 : 意外错误: Instal ...
C#设计模式之简单工厂模式（Simple Factory）
1. 概述简单工厂模式就是将一个类的实例化交给一个静态工厂来执行. 2. 使用频率中 3. 模式结构 3.1 机构图 3.2 模式中的角色 Product:抽象类,把具体产品类公共的代码进行抽象和 ...
学C#之设计模式系列笔记（2）观察者模式
一.借鉴说明 1.<Head First Design Patterns>(中文名<深入浅出设计模式>) 2.维基百科,观察者模式,https://zh.wikipedia.o ...
asp.net创建事务的方法
1.建立List用于存放多条语句 /// <summary> /// 保存表单 /// </summary> /// <param name="context& ...
Interview website
https://www.interviewcake.com http://www.leetcode.com

Jquery-UI使用

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

随机推荐

热门专题