美文网首页
JQquryUI简单介绍

JQquryUI简单介绍

作者: jxvl假装 | 来源:发表于2019-10-29 00:12 被阅读0次

jqueryUI是以jquery为基础的代码库,包含底层的用户交互,动画,特效和可更换主题的可视控件。我们可以用他来构建具有良好交互性的web应用程序

jqueryUI网址:http://jqueryui.com/

案例:拖动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('.box').draggable({

                // 限制在x轴向拖动,以字典形式设置
                // axis:'x',

                // 限定在父级的范围内拖动
                containment:'parent',
                opacity:0.8,    //拖动的时候变成透明度0.8

                drag:function(ev,ui){   //ev是事件对象
                    // 当拖拽的时候触发
                    //console.log(ui);
                    var iNowLeft = ui.position.left;    //左边相对于父级元素左边框的位置
                    $('.gray_box').css({width:iNowLeft});
                    $('#shownumber').val(parseInt(100*(ui.position.left/600)))  //600来自800-200
                }
            });
        })
    </script>
    <style type="text/css">
        .con{
            width:800px;
            height:200px;
            border:1px solid #000;
            margin:50px auto 0;
            position: relative;
        }

        .box , .gray_box{
            width:200px;
            height:200px;
            background-color: gold;
            position: absolute;
            left: 0;
        }
        .con .gray_box {
            background-color: lightgray;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="gray_box"></div>
        <div class="box"></div>
    </div>
    <input type="text" name="" id="shownumber">
</body>
</html>

案例:自定义滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var h = $('.paragraph').outerHeight();
            //整体文本的高度减去外面容器的高度
            var hide = h-500;
            $('.scroll_bar').draggable({
                axis:'y',
                containment:'parent',
                opacity:0.6,
                drag:function(ev,ui){
                    var nowtop = ui.position.top;
                    var nowscroll = parseInt(nowtop/290*hide);
                    $('.paragraph').css({top:-nowscroll});
                }
            });
        })
    </script>
    <style type="text/css">
        .scroll_con{
            width:400px;
            height:500px;
            border:1px solid #ccc;
            margin:50px auto 0;
            position:relative;
            overflow:hidden;
        }
        .paragraph{
            width:360px;
            position:absolute;
            left:0;
            top:0;
            padding:10px 20px;
            font-size:14px;
            font-family:'Microsoft Yahei';
            line-height:32px;
            text-indent:2em;
        }
        .scroll_bar_con{
            width:10px;
            height:490px;
            position:absolute;
            right:5px;
            top:5px;
        }
        .scroll_bar{
            width:10px;
            height:200px;
            background-color:#ccc;
            position:absolute;
            left:0;
            top:0;
            cursor:pointer;
            border-radius:5px;
        }
    </style>
</head>
<body>
    <div class="scroll_con">
        <div class="paragraph">
            2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
            掌握HTML是网页的核心,是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。因此,它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好HTML是成为Web开发人员的基本条件。
学好CSS是网页外观的重要一点,CSS可以帮助把网页外观做得更加美观。
学习JavaScript的基本语法,以及如何使用JavaScript编程将会提高开发人员的个人技能。
了解Unix和Linux的基本知识虽然这两点很基础,但是开发人员了解Unix和Linux的基本知识是有益无害的。
了解Web服务器当你对Apache的基本配置,htaccess配置技巧有一些掌握的话,将来必定受益,而且这方面的知识学起来也相对容易。
        </div>
        <div class="scroll_bar_con">
            <div class="scroll_bar">
        </div>
    </div>
    </div>
</body>
</html>

相关文章

  • JQquryUI简单介绍

    jqueryUI是以jquery为基础的代码库,包含底层的用户交互,动画,特效和可更换主题的可视控件。我们可以用他...

  • 简单介绍

    【姓名】龙行 【城市】贵州人在北京 【职业】仪器开发 【标签】学习者 【公众号】暂无 【爱好】看书、深度思考、旅游...

  • 简单介绍

    这里momo 坐标古都 新手上路,多指教 会发一些日常或者自编的微故事 一般都是恐怖类型吧…… 不喜勿喷,毕竟刚入圈

  • 简单介绍

    第一次打开简书,我就把它当成我的日记本了,呵呵…就记录我和我的两个女儿的点点滴滴,陪伴他们,和她们一起成长。...

  • 简单介绍

    hadoop是什么 hadoop是一个由Apache基金会所开发的分布式系统基础框架 hadoop实现了一个分布式...

  • 简单介绍

    Hello 这里是一位对文字如痴如醉爱着的人。喜欢阅读,资历尚浅,学识浅薄,还请关照。 以后会不定期更文。 期待每一天。

  • 简单介绍

    91年生 大专专业是英语教育 本科专业是教育学 2009年下半年认识了现在的老公,2011年毕业后没有按常规考编制...

  • 简单介绍

    混沌鱼,道号静谦,国学传播人,全真龙门派28代,倡正觉禅,弘无上道。“青年心智成长与创业互助”活动助力参与者,“人...

  • iOS 开发- UI篇-UIWindow介绍

    UIWindow 简单介绍原文链接? iOS开发UI篇—UIWindow简单介绍 一、简单介绍 UIWindow是...

  • 简单介绍美乐家

    大家好,我叫龚帅帅,今天很高兴可以借这个机会跟大家分享美乐家这个来自美国的环保超市。一方面从消费的角度介绍美乐家提...

网友评论

      本文标题:JQquryUI简单介绍

      本文链接:https://www.haomeiwen.com/subject/tbkuuctx.html