jqueryUIの基本-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryUIの基本

炎欲天舞

Aug 04, 2017 pm 03:50 PM

ベース

jQuery UIは、jQueryに基づくコードライブラリです。低レベルのユーザーインタラクション、アニメーション、特殊効果、テーマに対応したビジュアルコントロールが含まれています。これを直接使用して、優れたインタラクティブ性を備えた Web アプリケーションを構築できます

1. jQuery UI は主に、インタラクション、ウィジェット、エフェクトライブラリの 3 つの部分に分かれています。相互作用

インタラクティブコンポーネント。 AutoComplete、ColorPicker、ダイアログ、スライダー、タブ、プログレスバー、スピナーなどを含みます

3、エフェクト

は、クラスの追加、カラーアニメーション、トグルなどを含む豊富なアニメーションエフェクトを提供するために使用されます

1.1. よく使用される jqueryUI プラグイン: Draggable

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

1. 値スライダーを設定します

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

2. カスタムスクロールバー

<!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
自定义滚动条

使用法: $("selector").droppable();

次のコードは次のとおりです: p ボックスを別のボックスに置きます中

selectable

1.3、選択可能なメソッド

使用法: $("selector").selectable();

次のコードは、多肢選択の質問です。正しいものを選択するとポップアップが表示されます

<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() サイズメソッド

使用法: $("selector").resizable();

次のコードは次のとおりです: ドラッグすると大きく変化します

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

1.5、sortable()メソッド

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

次のコードは: ドラッグすると位置が変更されます

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

1.6, accordion() メソッド

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

次のコードは次のとおりです: ドラッグすると変更されますposition

rrereerreee

2.1、autocomplete（）method

usage：$（ "selector"）。autocomplete（）;位置

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

2.2、slider()メソッド

使用法: $("selector").slider();

次のコードは次のとおりです。スライダー、値が変わります

2.3. Dialog()メソッド

使用法: $("selector").diaログ();

次のコードは次のとおりです: ダイアログ

<span   style="max-width:90%">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.4、Progressbar()メソッド

使用法: $("selector").progressbar();

下面代码是：进度条

Loading...

2.5、menu()方法

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

下面代码是：菜单

<ul id="menu"> <li><a href="">首页</a></li> <li> <a href="">新闻动态</a> <ul> <li>娱乐新闻</li> <li>财经新闻</li> <li>科技新闻</li> </ul> </li> <li><a href="">新闻标题</a></li> <li><a href="">新闻标题</a></li> <li><a href="">新闻标题</a></li> </ul>

2.6、日期控件DatePicker()方法

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

下面代码是：日期控件

 <label for="date">日期</label> <input type="text" id="date"> 
$(function(){ $("#date").datepicker(); })
2.6、spinner()方法

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

下面代码是：输入框+-
$("#input").spinner(); 
2.7、tabs()方法

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

下面代码是：选项卡
$("#tab").tabs();

以上がjqueryUIの基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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”和“?&

Linux可以零基础学习吗?需要学什么？Feb 19, 2024 pm 12:57 PM

　　想要从事IT行业，但是有不想要学习编程该选择哪门技术合适呢?当然是Linux运维了。Linux是市场上非常受欢迎的技术，应用范围广泛，就业前景好，受到了很多人的喜欢。那么问题来了，Linux运维零基础可以学习吗?　　在服务器市场上，Linux系统因为稳定安全、免费开源和高效便捷等优点在市场占有率高达80%，由此可以看得出来Linux应用是非常广泛的。无论是现在还是未来，学习Linux都是非常不错的选择。至于零基础可以学习吗?我的答案是当然可以了。老男孩教育Linux面授班专门针对零基础人员设

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ホットトピック

Gmailメールのログイン入り口はどこですか？

7333

1627

1351

1262

1209

1. jQuery UI は主に、インタラクション、ウィジェット、エフェクトライブラリの 3 つの部分に分かれています。相互作用

インタラクティブコンポーネント。 AutoComplete、ColorPicker、ダイアログ、スライダー、タブ、プログレスバー、スピナーなどを含みます

は、クラスの追加、カラーアニメーション、トグルなどを含む豊富なアニメーションエフェクトを提供するために使用されます

1. 値スライダーを設定します

次のコードは、多肢選択の質問です。正しいものを選択するとポップアップが表示されます

次のコードは次のとおりです: ドラッグすると大きく変化します

次のコードは: ドラッグすると位置が変更されます

次のコードは次のとおりです: ドラッグすると変更されますposition

2.2、slider()メソッド

使用法: $("selector").progressbar();

2.5、menu()方法

2.6、日期控件DatePicker()方法

2.6、spinner()方法

2.7、tabs()方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

Safe Exam Browser

DVWA

SublimeText3 英語版

EditPlus 中国語クラック版

SublimeText3 Linux 新バージョン

ホットトピック

1. jQuery UI は主に、インタラクション、ウィジェット、エフェクト ライブラリの 3 つの部分に分かれています。相互作用

インタラクティブコンポーネント。 AutoComplete、ColorPicker、ダイアログ、スライダー、タブ、プログレスバー、スピナーなどを含みます

は、クラスの追加、カラーアニメーション、トグルなどを含む豊富なアニメーションエフェクトを提供するために使用されます

1. 値スライダーを設定します

次のコードは、多肢選択の質問です。正しいものを選択するとポップアップが表示されます

次のコードは次のとおりです: ドラッグすると大きく変化します

次のコードは: ドラッグすると位置が変更されます

次のコードは次のとおりです: ドラッグすると変更されますposition

2.2、slider()メソッド

使用法: $("selector").progressbar();

2.5、menu()方法

2.6、日期控件DatePicker()方法

2.6、spinner()方法

2.7、tabs()方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

Safe Exam Browser

DVWA

SublimeText3 英語版

EditPlus 中国語クラック版

SublimeText3 Linux 新バージョン

ホットトピック

1. jQuery UI は主に、インタラクション、ウィジェット、エフェクトライブラリの 3 つの部分に分かれています。相互作用