jQuery（十二）jQuery UI和本地存储

最新推荐文章于 2022-07-14 11:49:15 发布

码界索隆

最新推荐文章于 2022-07-14 11:49:15 发布

阅读量846

点赞数

文章标签： jquery ui javascript

本文链接：https://blog.csdn.net/cool66boy/article/details/123475595

版权

文章目录

jQuery UI
本地存储

jQuery UI

jQuery UI是以jQuery为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它俩构建具有很好交互性的web应用程序（主要用于实现拖拽的功能，并且这是一个插件）

使用方法

下载好这个插件的就是后，就用script方式导入

代码：

            var $box = $('.box');//获取对象
            $box.draggable();

效果演示：
请添加图片描述
以上的方式是没有方向限制的，要有限制得要设置些函数

参数

axis:‘x’ //设置在x轴范围移动
containment:‘parent’ //设置在父级盒子范围内移动
opacity //设置拖动时拖动块的透明度
drag:function(){} //设置移动时要做的事
ui.position.left //获取绝对位置的左边距

练习

数值滑动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jquery-1.9.0.js"></script>
    <script src="/学习笔记/jQuery UI和本地存储/js/jquery-ui-1.13.1/jquery-ui.js"></script>
    <script>
        $(function(){
            var $box = $('.box');
            var $num = $('.num');
            var $background = $('.background');
            var iNum = null;
            $box.draggable({
            axis:'x',//限制在x轴范围内移动
            containment:'parent',
            opacity:0.7,
            drag:function(ev,ui){
                iNum = ui.position.left;//获得移动块的绝对位置
                console.log(iNum);
                $background.css('width',iNum)//设置背景块宽度
                $num.html(parseInt(iNum/10));
            }
            });
        })
    </script>
    <style>
        .background{
            position: absolute;
            height: 30px;
            background-color: #bbb;
        }
        .container{
            width: 700px;
            margin: 100px auto;
        }
        .parent{
            position: relative;
            width: 600px;
            height: 30px;
            border: 1px solid #ccc;
            display: inline-block;
            background-color: rgb(170,170,170,0);
            vertical-align: middle;
        }
        .box{
            width: 30px;
            height: 30px;
            background-color: lightcoral;
        }
        .num{
            width: 50px;
            height: 25px;
            border: 1px solid #ddd;
            border-radius: 3px;
            padding: 5px;
            display: inline-block;
            margin-top: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="parent">
            <div class="background"></div>
            <div class="box"></div>
        </div>
        <span class="num">0</span>
    </div>
</body>
</html>

效果显示：
请添加图片描述

自定义滑动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jquery-1.9.0.js"></script>
    <script src="/学习笔记/jQuery UI和本地存储/js/jquery-ui-1.13.1/jquery-ui.js"></script>
    <script>
        $(function(){
            var $scroll_bllock = $('.scroll_block');
            var $text = $('.text');
            //对象拖拽
            $scroll_bllock.draggable({
                axis:'y',
                containment:'parent',
                opacity:0.7,
                drag:function(ev,ui){
                    var iNum = ui.position.top//获取拖拽对象距离顶部的绝对位置
                    var iHeight = $text.outerHeight()-500;//文本包括padding的高度减去父容器的高度
                    console.log(iNum);
                    var text_top = parseInt(iNum/460*iHeight);//通过这样的算法计算滑动的距离与文本top值的关系
                    console.log('top'+ text_top);
                    $text.css({'top':-text_top});
                }
            })
        })
    </script>
    <style>
        .container{
            position: relative;
            width: 400px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid #bbb;
        }
        .text{
            position: absolute;
            width: 400px;
            margin: 0 auto;
            padding: 20px;
            padding-top: 10px;
            box-sizing: border-box;
        }
        .scroll_block_box{
            position: absolute;
            height: 500px;
            width: 20px;
            border-left: 1px solid #bbb;
            right: 0;
            top: 0;
        }
        .scroll_block{
            width: 20px;
            height: 20px;
            background-color: lightskyblue;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga optio ipsum accusantium sunt? Fuga, temporibus. Ad illum suscipit autem ipsa unde sapiente rem. Non odit incidunt culpa temporibus laborum numquam consectetur? Reprehenderit saepe iure, nostrum quo sequi facilis, laborum tempora unde rem totam ullam alias. Id aut ullam officiis quae incidunt soluta iste aliquid, ex dolores error aliquam deleniti voluptates, nesciunt eligendi a porro. Impedit perspiciatis iure rerum, doloribus optio laudantium minima placeat dolorum, culpa pariatur error voluptate nemo ea recusandae nobis dolores ratione fuga dicta vero earum vitae similique quaerat ipsam. Nulla ullam nisi iste magnam atque sit voluptas ipsum, est nobis illo! Eaque veniam dignissimos natus odit facere sapiente quasi totam repudiandae nisi excepturi error, sit exercitationem quod maxime nemo voluptates iusto, autem nostrum explicabo! Minus, architecto porro! Placeat cupiditate debitis odio? Qui voluptatem maiores blanditiis adipisci beatae! Voluptates eveniet, molestias fugiat similique veritatis perspiciatis eaque quia vero at sunt praesentium culpa sed aliquid explicabo velit iure illo distinctio aut inventore repellendus eligendi itaque omnis perferendis accusamus! Blanditiis temporibus ducimus nihil ipsum ullam dolor deleniti inventore officia vitae cumque autem, nulla excepturi quae ab vero error maiores molestias necessitatibus repudiandae culpa natus reprehenderit odit consectetur? Est reiciendis beatae rem exercitationem libero tenetur porro tempore necessitatibus earum doloribus? Quia sequi dolore veritatis rerum incidunt sit nisi rem vitae blanditiis aspernatur eligendi at laborum hic in, consequatur mollitia similique sunt, enim molestias architecto fugiat necessitatibus aperiam? Rem, iusto temporibus harum possimus ipsum eum deleniti molestiae, asperiores labore provident ullam consectetur totam praesentium! Dignissimos consectetur sed voluptas a quos perferendis culpa eum odit. Amet perspiciatis, aspernatur vero laboriosam sunt quidem ipsum ipsam dicta possimus iure aut dolorum eius dolor! Accusantium, voluptatum ipsum quasi quis soluta harum aliquam ipsam accusamus, aut, dolorum dolor officiis quibusdam. Consequatur laborum inventore recusandae. Qui, aliquid impedit. Explicabo repudiandae illo dolor excepturi pariatur cupiditate architecto nostrum sed soluta eaque facilis corporis porro ratione, culpa, suscipit quae alias dolorum ducimus? Cum placeat itaque laboriosam labore. Mollitia neque necessitatibus molestiae fugit doloremque eum quidem expedita aut quam dicta, reiciendis alias, quis accusantium quisquam magnam? Enim assumenda iure accusantium magni ratione cum sapiente dolorem nihil adipisci minima repellendus impedit unde molestiae quisquam ex omnis soluta incidunt blanditiis nisi excepturi, accusamus debitis iste deleniti ea. Inventore, reprehenderit. Nostrum ratione optio enim dolore fugit libero ipsa aliquid, eius possimus voluptatem harum totam laboriosam dolor sed minus autem hic a laudantium reprehenderit odio error. Quidem veritatis exercitationem quas, veniam nisi laborum amet fuga placeat quod atque optio minima omnis eos sed consequuntur dolore perspiciatis laboriosam ad eligendi aperiam iste! Quasi aliquam voluptate quidem. Rem deleniti officiis fuga nostrum similique iure tempora eligendi eos ut harum, qui explicabo ipsa odio magnam aspernatur non sit, vitae numquam exercitationem ipsum, obcaecati praesentium? Aliquid sed veniam, quia eos iusto molestias. Sunt ab doloremque dolore inventore aspernatur ea, aliquid exercitationem, omnis possimus, officia pariatur rerum autem reprehenderit veritatis beatae praesentium nihil maiores modi placeat laboriosam quod alias repudiandae quos quibusdam. Aspernatur reprehenderit beatae voluptatibus esse excepturi nobis quos dolor, cupiditate non ducimus, commodi nemo laboriosam praesentium aperiam expedita eveniet unde? Tenetur quo ab neque incidunt libero, provident voluptate id et possimus repudiandae debitis saepe rerum doloremque in explicabo necessitatibus sit! Nihil, dignissimos nesciunt. Ad inventore a eius. Aliquam ad quam distinctio eligendi voluptas id quos recusandae sapiente, nostrum temporibus itaque dolor rem, totam adipisci ea beatae soluta, facilis molestiae asperiores vel quia. Sed odit facere modi eum maiores commodi unde laudantium cum fugiat vel. Alias quis dolores perspiciatis distinctio iste veniam id est. Delectus fuga perferendis, itaque illum obcaecati, amet veniam maiores eos facere alias eaque, quaerat accusamus.
        </div>
        <div class="scroll_block_box">
            <div class="scroll_block"></div>
        </div>
    </div>    
</body>
</html>

效果演示：
请添加图片描述
关键在于算法的计算：var text_top = parseInt(iNum/460*iHeight);//通过这样的算法计算滑动的距离与文本top值的关系

本地存储

本地存储分为cookie，以及新增的localStorage和sessionStorage。
localStorage和sessionStorage合称为Web Storage，Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口更方便。
iPhone的无痕浏览不支持Web Storage，只能用cookie。

cookie

cookie存储在本地，容量最大为4k，在同源的http请求时携带传递，损耗带宽，可以设置访问路劲，只有此路径的子路径才能访问此cookie，在设置的过期时间之前有效。
在jQuery要使用cookie需要下载一个cookie插件即一个jQuery.cookie.js文件*

jquery设置cookie和获取cookie的方法

           // jQuery设置cookie
            $.cookie('mycookie',111,{expires:1,path:'/'});
            //jQuery获取cookie
            console.log($.cookie('mycookie'));

练习-只弹出一次的弹框：

通过判断cookie的值是否存在，来弹出和隐藏，点击了点击按钮后，就会存下一个cookie，下次进入页面后就不会弹出弹窗了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jquery-1.9.0.js"></script>
    <script src="/学习笔记/jQuery UI和本地存储/js/jquery.cookie.js"></script>
    <script>
        $(function(){
            $container = $('.container');
            if($.cookie('mycookie') == undefined){
                $container.show();
                $('.box a').click(function(){
                    $container.hide();
                    //执行完点击后存一个cookie值
                    $.cookie('mycookie','ok!',{expires:1,path:'/'})
                })
            }
        })
    </script>
    <style>
        body{
            margin: 0;
        }
        h1{
            margin: 0;
        }
        .container{
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0,0, .5);
            display: none;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid chocolate;
            text-align: center;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1>cookie的只弹一次的弹框的测试</h1>
    <div class="container">
        <div class="box">
            <p>亲！有新的优惠活动哦</p>
            <a href="javascript:;">朕，知道了！</a>
        </div>
    </div>
</body>    
</body>
</html>

效果演示：
请添加图片描述

localStorage

localStorage存储在本地，容量为5m或者更大，不会在请求时携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
localStorage的设置、获取与删除：

        //设置localStorage的两种方式
        localStorage.setItem('data1',258);
        localStorage.data1 = 159;//修改data1
        localStorage.data2 = 147
        //获取localStorage的两种方式
        alert(localStorage.getItem('data1'));
        alert(localStorage.data1);
        //删除localStorage
        localStorage.removeItem('data1');

sessionStorage

sessionStorage 存储在本地，容量为5M或者更大，不会在请求时携带传递，在同源的当前窗口关闭前有效。它的设置、获取和删除与localStorage是一样的。

码界索隆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery（十二）jQuery UI和本地存储

文章目录jQuery UI使用方法参数练习数值滑动条自定义滑动条本地存储cookielocalStoragesessionStoragejQuery UIjQuery UI是以jQuery为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它俩构建具有很好交互性的web应用程序（主要用于实现拖拽的功能，并且这是一个插件）使用方法下载好这个插件的就是后，就用script方式导入代码： var $box = $('.box');//获取对象
复制链接

扫一扫