使用效果图:

源码：

<!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. debian 安装libreoffice6.1 转换pdf

    这个东西能转,但效率不高,我已经用专门的服务器docker,速度很快,直接用curl就能返回 但这里还是记录一下直接用命令调用吧,毕竟有的老的地方这么用 && cd /usr/loca ...

  2. 嵌入式全志V3s荔枝派板卡移植 aircrack-ng

    我使用的是aircrack-ng-1.1.tar.gz这个版本的包. 编辑common.mak,在27行COMMON_FLAGS = 下加入嵌入式开发的环境 -I 和 -L : COMMON_CFLA ...

  3. C#读写Excel实践笔记

    使用第三类包:NPOI 介绍 Github地址:https://github.com/tonyqus/npoi,Java POI项目的.NET版. 通过它可以在没有安装Office软件的情况下,快速的 ...

  4. (转)配置、安装Apache24免装版

    去过官网下载的应该都知道现在apache已经不提供.exe的一键安装程序的形式了,下载到的都只有免安装版本的. 首先下载,不在叙述.下载解压之后会得到如下的目录:. 1.进入:apache24le-- ...

  5. python with as的用法

    With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取 ...

  6. 涨姿势：Mysql 性能优化完全手册

    涨姿势:Mysql 性能优化完全手册 深入理解MySQL服务器架构 客户端层 MySQL逻辑架构整体分为三层,最上层为客户端层,诸如:连接处理.授权认证.安全等功能均在这一层处理. 中间层 MySQL ...

  7. sqlserver 中NOLOCK、HOLDLOCK、UPDLOCK、TABLOCK、TABLOCKX

    https://www.cnblogs.com/sthinker/p/5922967.html

  8. 踩坑之VC报错 error RC2104 : undefined keyword or key name

    .RC文件中第541行 MENUITEM "CNDev,                       ID_CNDEV 少了一个"    正确的应该是MENUITEM " ...

  9. hdfs知识点《转》

    HDFS知识点总结   学习完Hadoop权威指南有一段时间了,现在再回顾和总结一下HDFS的知识点. 1.HDFS的设计 HDFS是什么:HDFS即Hadoop分布式文件系统(Hadoop Dist ...

  10. SQL查询某库所有的表所有的字段及字段的属性

    then d.name else null end) 表名, a.colorder 字段序号, a.name 字段名, ( then '√'else '' end) 标识, ( then '√' el ...