使用效果图:

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testUI</title>
    <link href="jQueryUI/sunny/jquery-ui.css" rel="stylesheet" type="text/css"><!--引入css文件时要使用link而不是script，记住了-->
    <script src="jQueryUI/jquery.js"></script>
    <script src="jQueryUI/jquery-ui.js"></script>
    <style>
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog-link span.ui-icon {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
    </style>
</head>
<body>
<div id="accordion">
    <h3>First</h3>
    <div>this is my first jQuery ui example</div>
    <h3>Second</h3>
    <div>this is my Second jQuery ui example</div>
    <h3>Third</h3>
    <div>this is my Third jQuery ui example</div>
</div>

<div>
    <input id="autoComplete" title="sjkdjfl">
</div>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="testA.html">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
    </div>
    <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis.
        Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
    </div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum
        eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
    </div>
</div>
<div id="dialog" title="基本的对话框">
    <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
</div>
<p>
    <button id="dialog-link" class="ui-button ui-corner-all ui-widget">
        <span class="ui-icon ui-icon-newwin"></span>Open Dialog
    </button>
</p>
<script>
    $("#accordion").accordion();
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $("#autoComplete").autocomplete({
        source: availableTags
    });
    $("#tabs").tabs();
    $( "#dialog" ).dialog({
        modal: true,             // 创建模式对话框
        autoOpen: false,
        width: 400,
        buttons: [
            {
                text: "Ok",
                click: function() {
                    $( this ).dialog( "close" );
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    $( "#dialog-link" ).click(function( event ) {
        event.preventDefault();
        $( "#dialog" ).dialog("open");
    });
</script>
</body>
</html>

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. 承接小程序外包 微信小程序外包 H5外包 就找北京动点软件

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询 QQ:372900288 微信:li ...

  2. VSFTP的使用

    一.基本安装 1.安装服务 yum -y install vsftpd //centos Redhat apt-get install vsftpd //debian ubuntu 2.开启服务 se ...

  3. 13行代码实现：Python实时视频采集（附源码）

    一.前言 本文是<人脸识别完整项目实战>系列博文第3部分:程序设计篇(Python版),第1节<Python实时视频采集程序设计>,本章内容系统介绍:基于Python+open ...

  4. 报错：Sqoop2 Exception: java.lang.NoSuchMethodError Message: org.apache.hadoop.security.authentication.client.Authenticator

    报错过程: 进入sqoop2之后, 输入命令:show connector,报错 报错现象: Exception has occurred during processing command Exce ...

  5. mybatis 日志的使用以及设计

    1.为什么要配置mybtis的logger? mybatis自己设计以及实现了org.apache.ibatis.logging.Log接口. Mybatis为了避免对第三方的日志包存在强依赖,内部的 ...

  6. Redhat Linux 配置Xmanager

    1. vi /etc/inittab id:5:initdefault:  //设置系统运行级为5,如果本来就是5就无需修改 id:5:respawn:/usr/sbin/gdm    //添加到最后 ...

  7. 推介一个学习JAVA的系列教程-狗鱼IT教程

    介绍一个学JAVA的零基础学习JAVA的网站,推介一个学习JAVA的系列教程-狗鱼IT教程 下面是java的系教程: 1､[java教程]Java 教程 2､[java教程]Java 简介 3､[ja ...

  8. centos 下安装mulval工具

    我这里采用的是centos 6.5版本系统 MulVAL是企业网络安全分析的工具.它使用漏洞扫描程序(OVAL / Nessus)作为攻击路径生成的数源,其中包括扫描结果和网络可访问性信息. 在这之前 ...

  9. Java、中Date的格式初始化以及Calendar的使用

    使用字符串初始化Date String dateString = “2018-02-23”; Date date= new SimpleDateFormat(“yyyy-MM-dd”).parse(d ...

  10. DeprecationWarning

    当我在导入sklearn这个库的时候,程序抛出了一个丢弃警告,它的意思是在版本更新后imp库已经不用了,用importlib来代替这个库 Warning (from warnings module): ...