jqueryUI basics-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jqueryUI basics

炎欲天舞

Aug 04, 2017 pm 03:50 PM

Base

jQuery UI is a code library based on jQuery. Contains low-level user interaction, animations, special effects, and themable visual controls. We can directly use it to build web applications with good interactivity

1. jQuery UI is mainly divided into 3 parts: interaction, widgets and effects library.

1. Interaction

Interactive components are some content related to mouse interaction, including Draggable, Droppable, Resizable, Selectable and Sortable, etc.

2. Widgets

are mainly extensions of some interfaces, including AutoComplete, ColorPicker, Dialog, Slider, Tabs, ProgressBar, Spinner, etc.

3. Effects

Used to provide rich animation effects, including Add Class, Color Animation, Toggle, etc.

1.1. Commonly used jqueryUI plug-ins: Draggable

##Usage: $("selector").draggable();

1. Set the value slider

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQueryUI</title>
    <style>
        .box{
            display: flex;
        }
        .slide_con{
            width:610px;
            height:40px;
            border:1px solid #ccc;
            margin:20px 10px 0 300px;
            position: relative;
        }
        .dragbar{
            width:40px;
            height:40px;
            background: gold;
            cursor: pointer;
        }
        .progress{
            height:40px;
            background:#f7f7f7;
            position:absolute;
            left:0;
            top:0;
        }
        .slide_count{
            width:40px;
            height:40px;
            margin:20px 10px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            border:1px solid #ccc;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script>
        $(function () {
            $(".dragbar").draggable({
                //约束元素只能在x轴向拖动
                axis:"x",
                //约束元素只能在父级内拖动
                containment:"parent",
                opacity:0.6,
                drag:function(ev,ui){
                    console.log(ui.position.left);
                    var nowleft = ui.position.left;
                    $(".progress").css({width:nowleft});
                    $(".slide_count").val(parseInt(nowleft*100/570))
                }
            })
        })
    </script>
</head>
<body>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
    <input type="text" value="0">
</div>
</body>
</html>

<br>

2. Custom scroll bar

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQueryUI</title>
    <style>
        /*自定义滚动条*/
        .scroll_con{
            width:370px;
            height:488px;
            border:1px solid #ccc;
            margin:10px auto 0;
            text-indent: 2em;
            position:relative;
            overflow: hidden;
        }
        .paragraph{
            width:330px;
            position:absolute;
            left:0;
            top:0;
            line-height:32px;
            padding:15px;
        }
        .scroll_bar_con{
            width:10px;
            height:490px;
            position: absolute;
            right:5px;
            top:5px;
        }
        .scroll_bar{
            width:10px;
            height:200px;
            background: #ccc;
            position:absolute;
            left:0;
            top:0;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script>
        $(function () {
            var h =$(".paragraph").outerHeight();
            console.log(h);
            var hide = h-500;
            $(".scroll_bar").draggable({
                axis:&#39;y&#39;,
                containment:&#39;parent&#39;,
                opacity:0.6,
                drag:function(ev,ui){
                    var nowTop = ui.position.top;
                    var nowscroll = parseInt(nowTop/290*hide);
                    $(".paragraph").css({top:-nowscroll});
                }
            })
        })
    </script>
</head>
<body>
<div>
   <div>
       <div>
       人生有很多个路口，我们会遇到很多人，有时候，以为某个人就是我们的终点，其实不然，或许我们也只是萍水相逢的过客而已，在彼此的生命长河中泛起点点涟漪，最后又悄然离去，走向不同的远方，遇见未知的人和事。
        世间，有许许多多的关系是言不明却又真真切切存在的；也有许多关系是不互相需要的，即是单方面的，会更偏重于其中一方。譬如鱼和水，天空和飞鸟，鱼离开了水会不能存活，而水离开了鱼或许少了几分生气但也会多了几分澄澈；天空也不会因为飞鸟的存在与否有很大的改变，它是天空，还会是天空。我们不是互相需要的，所以偶然的我们相遇了，有了一段美好的可以怀念的记忆，然后走着走着我们就散了。
          有人说过，每一次的遇见都是最美丽的意外。确实，每一次无论是好是坏，是会使我们兴奋地去拥抱还是犹豫和迟疑，我们不妨把它当一次美丽的意外欣然接受，人生总是会有这样或那样的小插曲，真是因为这些，我们生活才有了美丽的色彩，才有了不同的情绪感受，闲时、愁时拿出来细细品，会别有一番风味的。
       既然说生活有插曲，那么必定也有主调，所以在调节人生插曲的时候一定不能忘了人生的前行目标。若不是终点，请微笑向前。一定要相信，阳光那么美好，花儿那么灿烂，人生必定是风雨同行的，但是风雨只是伴奏，温暖的阳光会始终陪伴着我们的漫漫人生路。有时我们总是会把生命中的一个小小站台当做人生终点站，但当有一天，他们微微笑，挥挥手离开，不带走一片云彩，却带走了你和他的所有的故事和美好的时光，此刻我们默默站在原地，原来，这只是梦一场。梦醒了，所以该离开了，放不下，也无法回首，那就让他留在风中吧。“同一个地方，离开的已然离开，到来的人也正在到来。”
       遇到过一个人，彼此喜欢，爱慕，一如电视中年少轻狂的少年少女一样，会因为对方的一个笑容，一句话语开心好半天。“那时的天总是很蓝，日子过得很慢，你总说毕业遥遥无期，转眼就各奔东西……”美好的日子里我们打打闹闹，想着就这样，一辈子，从未想过有一天我们会彼此远离，奔向不同的地方，牵起另外一个人的手，许她一世无殇。事情的开始是如此的美好，变化总是出乎我们预料，后来的后来，我们走丢了，不再活在彼此的生活中，原以为的永远竟然是那么不堪一击，原来我们只是过客不是归人。
       毕竟是真的喜欢，那种纯粹的爱恋回忆起来竟是如此的令我难忘，也是在这个时候，真真切切地体会到“思念”的深层含义，那种感觉痛彻心扉，欲罢不能，好想回过头，给他一个深深的拥抱，告诉他，我好想他，不要走，可是，我不能，爱是自私和排他的，但既然喜欢他就要让他感到开心和幸福，他的快乐就是我的快乐，我的思念是以他为圆心的记忆，我可以对别人自私，可对他，我不能自私，我应该给他追求他自己幸福的权利，尽管我不想他离开。
      他说，秋风飒爽，思念远航，想用脚步去丈量，美好的回忆只适合珍藏，心在远方，就不会在同一个地方停留太长时光，用回忆串起过往，带着他们去流浪，天涯海角，是否存在不一样的风光。
        既然决定远航，就不要恋恋不忘过往。我只是一个归人，来自不同的地方；我只是一个过客，找不一样的乐趣欣赏。
        既然不是终点，那就请微笑向前。
  </div>
        <div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html
自定义滚动条

<br>

Usage: $("selector").droppable ();

The following code is: put a p box into another box

selectable

1.3, selectable method

Usage: $("selector").selectable();

The following code is: a multiple-choice question, a box will pop up after you choose the right one

<span style="font-size: 15px">$(function(){</span><br/><span style="font-size: 15px">    $("#selectable").selectable();</span><br/><span style="font-size: 15px">    $("#btn").on("click",function(){</span><br/><span style="font-size: 15px">        if($("#right").hasClass("ui-selected")){</span><br/><span style="font-size: 15px">            alert("恭喜你答对了！");</span><br/><span style="font-size: 15px">        }</span><br/><span style="font-size: 15px">    })</span><br/><span style="font-size: 15px">})</span>

1.4, resizable() size method

Usage: $("selector").resizable();

The following code is: Drag will become larger

$("#resize").resizable();

1.5, sortable() method

Usage: $("selector").sortable();

The following code is: dragging will change the position

$("#sort").sortable();

1.6, accordion() method

Usage: $("selector").accordion();

The following code is: dragging will change the position

<span style="font-size: 15px">$("#accordion").accordion();<br/></span>

<span style="font-size: 15px">html代码：<br/><p class="accordion" id="accordion"></span><br/><span style="font-size: 15px">    <h3 id="选项">选项1</h3></span><br/><span style="font-size: 15px">    <p></span><br/><span style="font-size: 15px">        <p>交互部件是一些与鼠标交互相关的内容，包括Draggable、Droppable、Resizable、Selectable和Sortable等2、小部件</p></span><br/><span style="font-size: 15px">    </p></span><br/><span style="font-size: 15px">    <h3 id="选项">选项2</h3></span><br/><span style="font-size: 15px">    <p></span><br/><span style="font-size: 15px">        <p>交互部件是一些与鼠标交互相关的内容，包括Draggable、Droppable、Resizable、Selectable和Sortable等2、小部件</p></span><br/><span style="font-size: 15px">    </p></span><br/><span style="font-size: 15px">    <h3 id="选项">选项3</h3></span><br/><span style="font-size: 15px">    <p></span><br/><span style="font-size: 15px">        <p>交互部件是一些与鼠标交互相关的内容，包括Draggable、Droppable、Resizable、Selectable和Sortable等2、小部件</p></span><br/><span style="font-size: 15px">    </p></span><br/><span style="font-size: 15px">    <h3 id="选项">选项4</h3></span><br/><span style="font-size: 15px">    <p></span><br/><span style="font-size: 15px">        <p>交互部件是一些与鼠标交互相关的内容</p></span><br/><span style="font-size: 15px">    </p></span><br/><span style="font-size: 15px"></p></span>

2.1, autocomplete() method

Usage: $("selector").autocomplete();

The following code is: drag Will change the position

$("#autocomplete").autocomplete({});

2.2, slider() method

Usage: $("selector").slider();

The following code is: every time you drag the slider, the value will change

#2.3. Dialog() method

Usage: $("selector").dialog();

The following code Yes: Dialog box

<span style="font-size: 15px"><p class="pop" id="dialog"></span><br/><span style="font-size: 15px">    <p class="message">用户名不能为空</p></span><br/><span style="font-size: 15px">    <a id="btn" class="btn">朕知道了</a></span><br/><span style="font-size: 15px"></p></span><br/><span style="font-size: 15px"><button class="confirm">点击弹框</button></span>

2.4, Progressbar() method

Usage: $("selector").progressbar();

下面代码是：进度条

<span   style="max-width:90%"><p id="progress"></p></span><br/><span style="font-size: 15px"><p class="load">Loading...</p></span>

用法：$("selector").menu();

下面代码是：菜单

<span   style="max-width:90%"><ul id="menu"></span><br/><span style="font-size: 15px">    <li><a href="">首页</a></li></span><br/><span style="font-size: 15px">    <li></span><br/><span style="font-size: 15px">        <a href="">新闻动态</a></span><br/><span style="font-size: 15px">        <ul></span><br/><span style="font-size: 15px">            <li>娱乐新闻</li></span><br/><span style="font-size: 15px">            <li>财经新闻</li></span><br/><span style="font-size: 15px">            <li>科技新闻</li></span><br/><span style="font-size: 15px">        </ul></span><br/><span style="font-size: 15px">    </li></span><br/><span style="font-size: 15px">    <li><a href="">新闻标题</a></li></span><br/><span style="font-size: 15px">    <li><a href="">新闻标题</a></li></span><br/><span style="font-size: 15px">    <li><a href="">新闻标题</a></li></span><br/><span style="font-size: 15px"></ul></span>

2.6、日期控件DatePicker()方法

用法：$("selector").datepicker();

下面代码是：日期控件

<span   style="max-width:90%"><p></span><br/><span style="font-size: 15px">    <label for="date">日期</label></span><br/><span style="font-size: 15px">    <input type="text" id="date"></span><br/><span style="font-size: 15px"></p></span>

<span style="font-size: 15px">$(function(){</span><br/><span style="font-size: 15px">    $("#date").datepicker();</span><br/><span style="font-size: 15px">})</span>

2.6、spinner()方法

用法：$("selector").spinner();

下面代码是：输入框+-

<span style="font-size: 15px">$("#input").spinner();<br/></span>

2.7、tabs()方法

用法：$("selector").tabs();

下面代码是：选项卡

<span style="font-size: 15px">$("#tab").tabs();<br/></span>

<br>

The above is the detailed content of jqueryUI basics. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

PHP基础教程：从入门到精通Jun 18, 2023 am 09:43 AM

PHP是一种广泛使用的开源服务器端脚本语言，它可以处理Web开发中所有的任务。PHP在网页开发中的应用广泛，尤其是在动态数据处理上表现优异，因此被众多开发者喜爱和使用。在本篇文章中，我们将一步步地讲解PHP基础知识，帮助初学者从入门到精通。一、基本语法PHP是一种解释性语言，其代码类似于HTML、CSS和JavaScript。每个PHP语句都以分号;结束，注

学习Go语言变量的基础知识Mar 22, 2024 pm 09:39 PM

Go语言是一种由Google开发的静态类型、编译型语言，其简洁、高效的特性受到了广泛的开发者关注和喜爱。在学习Go语言的过程中，熟练掌握变量的基础知识是至关重要的一步。本文将通过具体的代码示例来讲解Go语言中变量的定义、赋值、类型推断等基础知识，帮助读者更好地理解和掌握这些知识点。在Go语言中，定义一个变量可以使用关键字var，即var变量名变量类型的格

C语言函数详解：基础到进阶，全面解析函数的使用Feb 18, 2024 pm 02:25 PM

C语言函数大全：从基础到进阶，详解函数的使用方法，需要具体代码示例简介：C语言是一种广泛使用的编程语言，其强大的功能和灵活性使它成为许多开发人员的首选。在C语言中，函数是一个重要的概念，它能够将一段代码组合成一个独立的模块，提高了代码的重用性和可维护性。本文将从基础开始介绍C语言函数的使用方法，并逐步进阶，帮助读者掌握函数编写的技巧。一、函数的定义与调用在C

PHP基础入门：如何使用echo函数输出文本内容Jul 30, 2023 pm 05:38 PM

PHP基础入门：如何使用echo函数输出文本内容在PHP编程中，经常需要向网页上输出一些文本内容，这时就可以使用echo函数。本文将介绍如何使用echo函数输出文本内容，并提供一些示例代码。在开始之前，首先要确保你已经安装了PHP，并且配置了运行环境。如果还没有安装PHP，你可以在PHP官方网站（https://www.php.net）上下载最新的稳定版本。

不要错过立即获取免费基础 C# 认证的机会来自MicrosoftSep 01, 2023 pm 12:45 PM

召集所有C#开发人员！Microsoft和非营利组织freeCodeCamp宣布推出新的全球免费基础C#认证。该认证旨在帮助所有级别的开发人员学习C#的基础知识，C#是一种用于创建各种应用程序的流行编程语言，您可以在LinkedIn配置文件中显示它。该认证包括35小时的MicrosoftLearn培训课程，以及在freeCodeCamp上举办的80个问题的考试。本课程涵盖变量、数据类型、控制结构和面向对象编程等主题。“我们的基础C#认证正好提供了这一点–证明了您为掌握这种多功

PHP函数用法：从基础到进阶Jun 15, 2023 pm 11:11 PM

PHP是一种广泛使用的服务器端脚本语言，用于开发动态网站、Web应用程序和其他互联网服务。在开发PHP应用程序过程中，使用函数可以帮助简化代码、提高代码重用性和降低开发成本等。本文将介绍PHP函数的基础用法和进阶用法。一、PHP函数的基础用法1.定义函数在PHP中，使用function关键字来定义函数，例如：functiongreet($name){

PHP学习笔记：基础语法及变量定义Oct 09, 2023 am 08:03 AM

PHP学习笔记：基础语法及变量定义在如今的互联网时代，PHP（HypertextPreprocessor）作为一种广泛使用的服务器脚本语言，被越来越多的开发者所青睐。本篇文章将为大家介绍PHP的基础语法和变量的定义，并提供具体的代码示例，帮助初学者更好地理解和掌握。一、PHP的基础语法PHP代码的标记在PHP代码中，我们常常使用“<?php”和“?&

PHP中的云计算基础May 23, 2023 pm 12:40 PM

随着互联网的发展，云计算技术逐渐成为了企业开展业务的首选方案。在这个过程中，PHP作为一种优秀的编程语言，在云计算中扮演着不可替代的角色。那么，PHP在云计算中的基础有哪些呢？一、云计算概述云计算是一种基于互联网的计算方式，通过网络来提供和分享计算资源和服务。它将计算能力、存储能力和应用能力等资源集成到一起，用户可按需、弹性地使用它们，从而降低了企业的成本和

See all articles