zoukankan      html  css  js  c++  java
  • JueryUI插件的简单应用(一):介绍及第一个示例

    从这篇文章开始,我将用三到四篇文章介绍jquey-ui插件的简单应用,包括插件的下载,安装,基本组件的简单应用。基本组件包括:弹出框,autocompleteaccordiondatepicker

    tabssliderprogressbar

       JueryUI是基于jquery库的插件,提供一些形式各样的控件共大家使用,可避免重复开发,比如弹出框,自动完成功能,日期控件,tab控件等,使用非常简单。

    插件下载地址:http://jqueryui.com/docs/Getting_Started 点击上方的download即可下载。下载解压后会有一个demo文件夹,运行其中的index.html,基本内容和官网的demo内容一致。

    使用dialog对话框:

    一.需引入的文件(均可在下载的解压文件中找到)
           1. jquery-1.4.4.min.js

           2. jquery-ui-1.8.8.custom.min.js

           3. development-bundle/themes/base/jquery.ui.all.css

       二.JS   

     <%--弹出框%>

        <script type="text/javascript">

            $(function () {

                var vv = $("#Text1");

                $("#dialog123").dialog({

                    autoOpen: false, //autoOpen表示加载页面时不打开模态窗体

                    height: 200,

                     350,

                    modal: true,

                    buttons: {

                        "确定"function () { //"确定"为弹出框的确定按钮

                                $("#Text3").val(vv.val());

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

                        },

                       取消function () {   //取消为弹出框的取消按钮(不许加引号)

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

                        }

                    }

                });

                $("#Button1").click(function () {  //打开模态窗体

                    $("#dialog123").dialog("open");  

                });

            });

    </script>

       三、HTML

      <%--弹出框--%>

        <div id="dialogTest">

            <input id="Button1" type="button" value="弹獭?框ò" />

            <input id="Text3" type="text" />

            <div id="dialog123" title="创洹?建¨" style="display: none">

                <input id="Text1" type="text" />

                <input id="Text2" type="text" />

            </div>

        </div>

  • 相关阅读:
    C++ string 类详解
    C语言 -- 字符串详解
    基本数据结构 -- 链表的遍历、查找、插入和删除
    Shell 基础 -- 总结几种括号、引号的用法
    用 C 语言描述几种排序算法
    Win10 + vs2017 编译并配置tesseract4.1.0
    前端如何引入vConsole
    php设计模式-数据对象映射模式
    PHP设计模式-策略模式
    PHP设计模式-适配器模式
  • 原文地址:https://www.cnblogs.com/gossip/p/1937756.html
Copyright © 2011-2022 走看看