easyui(一) 初始easyui「建议收藏」

easyui(一) 初始easyui「建议收藏」分享使我快乐。哈哈~–WZY一、什么是easyui?学习一个东西,最重要的是知道它的定位(是干嘛的,基本的用法是什么,快速入门),其实easyui也非常简单,不要觉得很难。easyui就是一

大家好,又见面了,我是你们的朋友全栈君。

        分享使我快乐。哈哈~

                      –WZY

一、什么是easyui?

      学习一个东西,最重要的是知道它的定位(是干嘛的,基本的用法是什么,快速入门),其实easyui也非常简单,不要觉得很难。

      easyui就是一个前端框架,JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签,一大段废话,通俗一点,就是简化开发,它是一个框架,和jQuery只是一个js类库,

 

      easyui框架提供了哪些东西让我们用?

         看一下easyui的api文档就知道了给我们提供了哪些东西?是如何的方便

            easyui(一) 初始easyui「建议收藏」

         看标记的内容,是我们比较常见的,按钮(easyui做的肯定比我们普通按钮什么都没有的更好)、日历、对话框窗口等等,并且对于每一个组件,easyui都会给出我们例子,供我们参考,所以,自学也完全没有问题。哈哈~

      

        为什么后台发开人员还需要用easyui这种前端框架?不是有前端开发人员吗?

         如果公司里只有“美工”,没有前端人员,所以一般是程序员兼职前端,所以一 般会找一个好用且功能全的js UI框架(当然,还有免费),这样页面基本就不用花费太多功夫了,与其同名的前端框架还有一个bootstrap,在学习玩easyui之后就可以正式学习一下了。

 

二、如何使用easyui?

      soeasy~   通过实现resizable组件效果来讲解(教会如何看文档和例子)

      第一步:将下载的整个easyui文件赋值到项目下。

                easyui(一) 初始easyui「建议收藏」  解压之后复制

                   easyui(一) 初始easyui「建议收藏」   

          查看easyui的目录结构

                  easyui(一) 初始easyui「建议收藏」

 

      第二步:现在就可以使用easyui了。感觉无从下手,那就查看文档

          查看resizable文档内容。

                easyui(一) 初始easyui「建议收藏」

          还是不懂,在easyui/demo/resizable/basic.html中查看内容(看easyui给出的例子,怎么用,在对照文档就懂了)

                easyui(一) 初始easyui「建议收藏」

             给出的例子,重点就两个,6-10行,导入了js类库和一些css。 16行关键代码就是文档中第一个使用案例。还是不懂,没关系,下面就解释给你听。

 

       2.1、简单实现resizable组件的效果的两种方式

           方式一:html方式

                原理:页面加载完毕之后,EASYUI的文件在页面上寻找那些标签的class名字为easyui-开头,找到之后,将eayui-”name”,name拿到,拿到之后将这些标签处理为(渲染为)可以

拖动改变大小的效果.

                easyui(一) 初始easyui「建议收藏」

                easyui(一) 初始easyui「建议收藏」

easyui(一) 初始easyui「建议收藏」
easyui(一) 初始easyui「建议收藏」

    <!--
        resizable实现的第一种方式:html
        实现原理:
        class:easyui-resizable
            页面加载完毕之后,easyui的主文件会扫描页面上所有的HTML标签,看那些标签的class的值以easyui-开头,
               截取easyui-之后的部分"resizable",那么easyui的主文件就将当前的这个标签处理为"resizable"效果.
             将当前的标签渲染为resizable组件
         data-options:该resizable组件的属性。
             具体看文档,后面详细讲解
         style:div的一些属性
             width:200px 该div宽度占200像素
             height:150px ...高度占150像素
             border:1px ...边框粗度占1像素
             solid:red  ...边框颜色是红色
    -->
    <div class="easyui-resizable" 
        data-options="minWidth:50,minHeight:50" 
        style="width:200px;height:150px;border:1px solid red;">
    </div>

html实现resizable

           方式二:html+js方式

                原理:页面加载完毕之后,获取页面上id为rr的元素,easyui的resizable函数将其处理为(渲染为)可以拖动改变大小的效果

                easyui(一) 初始easyui「建议收藏」

                easyui(一) 初始easyui「建议收藏」

        2.2、使用resizable组件的属性的两种方式

                easyui(一) 初始easyui「建议收藏」    

           方式一:html方式

                easyui(一) 初始easyui「建议收藏」   

easyui(一) 初始easyui「建议收藏」
easyui(一) 初始easyui「建议收藏」

    <!--
        resizable实现的属性信息讲解(HTML)
         data-options:该resizable组件的属性。
             结合文档的注释
             disabled:表示是否禁用大小调整功能,true:禁用  false:不禁用(默认)
             handles:申明调整大小的方向,n, e, s, w, ne, se, sw, nw, all
                 n:north 北部  e:east 东部  w:west 西部  s:south  南部
                 ne:东北,也就是右上角 se、sw、nw类似  
                 all:任意,全部
             edge:边框边缘大小,这个看注释不好理解,就是设置能显示拉大小的那个箭头的范围,默认是5。
             maxWidth:当调整大小时候的最大宽度 默认10000
             maxHeight:当调整大小时候的最大高度 默认10000
             minWidth:当调整大小时候的最小宽度 默认10
             minHeight:当调整大小时候的最小高度 默认10
         style:div的一些属性
    -->
    <div class="easyui-resizable"
        data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" 
        style="width:200px;height:150px;border:1px solid red;">
    </div>

html实现resizable的属性

    

           方式二:html+js方式调用属性

                easyui(一) 初始easyui「建议收藏」 

easyui(一) 初始easyui「建议收藏」
easyui(一) 初始easyui「建议收藏」

    <script type="text/javascript">
        $(function(){
            $("#rr").resizable({
                //设置resizable组件的属性,格式看文档中
                disabled:false,
                handles:'all',
                edge:30,
                maxWidth:400,
                maxHeight:400,
                minWidth:40,
                minHeight:40    
            });
        });
    </script>
</head>
<body>
    <!--
        resizable实现的属性信息讲解(js+html)
         data-options:该resizable组件的属性。
             结合文档的注释
             disabled:表示是否禁用大小调整功能,true:禁用  false:不禁用(默认)
             handles:申明调整大小的方向,n, e, s, w, ne, se, sw, nw, all
                 n:north 北部  e:east 东部  w:west 西部  s:south  南部
                 ne:北和东 se、sw、nw类似  
                 all:任意,全部
             edge:边框边缘大小,这个看注释不好理解,就是设置能显示拉大小的那个箭头的范围,默认是5。
             maxWidth:当调整大小时候的最大宽度 默认10000
             maxHeight:当调整大小时候的最大高度 默认10000
             minWidth:当调整大小时候的最小宽度 默认10
             minHeight:当调整大小时候的最小高度 默认10
         style:div的一些属性
    -->
    <div id="rr" 
        style="width:200px;height:150px;border:1px solid red;">
    </div>
</body>

html+js实现resizable属性

 

 

       2.3、resizable组件对事件的使用

                easyui(一) 初始easyui「建议收藏」

          只有一种方式,就是使用html+js

                easyui(一) 初始easyui「建议收藏」

easyui(一) 初始easyui「建议收藏」
easyui(一) 初始easyui「建议收藏」

    <script type="text/javascript">
            $(function(){
                $("#rr").resizable({
                    onStartResize:function(){
                        $("#dv1").html("在开始改变大小的时候触发");                                
                    },
                    onResize:function(){
                        $("#dv2").html("我是开始拖动期间触发的事件");
                    },
                    onStopResize:function(){
                        $("#dv3").html("在停止改变大小的时候触发");
                    }
                });

            });
    </script>
</head>
<body>
    <!--
        resizable实现的事件信息讲解(HTML)
            onStartResize:在开始改变大小的时候触发。
            onResize:在调整大小期间触发。当返回false的时候,不会实际改变DOM元素大小。
            onStopResize:在停止改变大小的时候触发
    -->
    <div
        id="rr"
        class="easyui-resizable" 
        data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" 
        style="width:200px;height:150px;border:1px solid red;">
    </div>
    <div id="dv1"></div>
    <div id="dv2"></div>
    <div id="dv3"></div>
</body>

htm+js实现resizable事件的使用

 

      2.4、resizable组件对方法的使用

                easyui(一) 初始easyui「建议收藏」

           只有一种方式:html+js

                 easyui(一) 初始easyui「建议收藏」 

                  easyui(一) 初始easyui「建议收藏」

  

easyui(一) 初始easyui「建议收藏」
easyui(一) 初始easyui「建议收藏」

    <script type="text/javascript">
        $(function(){    //等待页面加载完在执行以下代码
        
            $("#bt1").click(function(){        
                $("#rr").resizable("enable");    //enable方法启用调整大小功能。
            });
            
            $("#bt2").click(function(){
                $("#rr").resizable("disable");    //disable方法禁用调整大小功能。
            });
            
            $("#bt3").click(function(){
                var obj = $("#rr").resizable("options");//options方法,返回调整大小属性
                $("#dv1").html(
                    "最大宽:" + obj.maxWidth+
                    "最大高:"+obj.maxHeight+
                    "最小宽:"+obj.minWidth+
                    "最小高:"+obj.minHeight+
                    "边缘大小:"+obj.edge+
                    "是否不可用:"+obj.disabled+
                    "调整方位:"+obj.handles
                );
            });
        });
    </script>
</head>
<body>
    <!--
        resizable实现的组件调用方法讲解(HTML+js)
            options  返回调整大小属性。 
            enable  启用调整大小功能。 
            disable  禁用调整大小功能。 
            
    -->
    <div
        id="rr"
        class="easyui-resizable" 
        data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" 
        style="width:200px;height:150px;border:1px solid red;">
    </div>
    <input type="button" id="bt1" value="启用调整大小功能"/>
    <input type="button" id="bt2" value="禁用调整大小功能"/>
    <input type="button" id="bt3" value="返回调整大小属性"/>
    <div id="dv1"></div>
</body>

htm+js实现resizable的方法功能

 

           效果如下

                easyui(一) 初始easyui「建议收藏」

三、总结

      算是对easyui的入门把。其他的组件大都类似这样使用。不会的话就使用文档+例子进行查看。也非常的简单,一点都不难,只要有耐心即可。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155660.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python 图片拼图的制作 确定不来尝试一下……

    python 图片拼图的制作 确定不来尝试一下……

    2021年11月10日
  • Python实现自动回复_python 微信机器人

    Python实现自动回复_python 微信机器人一简单介绍wxpy基于itchat,使用了Web微信的通讯协议,,通过大量接口优化提升了模块的易用性,并进行丰富的功能扩展。实现了微信登录、收发消息、搜索好友、数据统计等功能。总而言之,可用来实现各种微信个人号的自动化操作。(http://wxpy.readthedocs.io/zh/latest/bot.html)安装:wxpy支持Python3.4-3.6,以及2.7版本pip…

  • html中相对定位怎么写,css相对定位「建议收藏」

    html中相对定位怎么写,css相对定位「建议收藏」定位的四种模式:static,relative,absolute,fixed定位的四个位置:left,right,top,bottom定位属性:position,有四种状态值1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效3.absolute:绝对定位,元素相对于它的定位父级定位,…

    2022年10月25日
  • vim中复制粘贴快捷键_复制文件的快捷键

    vim中复制粘贴快捷键_复制文件的快捷键yy复制游标所在行整行。或大写一个Y。 2yy或y2y复制两行。ㄟ,请举一反三好不好!:-) y^复制至行首,或y0。不含游标所在处字元。 y$复制至行尾。含游标所在处字元。 yw复制一个word。 y2w复制两个字(单词)。 yG复制至档尾。 y1G复制至档首。 p小写p代表贴至游标后(下)。 P大写P代表贴至游标前(上)。如果只是想使用系统粘贴板的话直接在输入模式按Shift+Inset…

  • trylock参数_Qt互斥量的trylock使用

    trylock参数_Qt互斥量的trylock使用spinlock:spin_trylock() 成功返回1;否则返回0。spin_trylock()->raw_spin_trylock()->_raw_spin_trylock()->do_raw_spin_trylock()mutex:mutex_trylock() 成功返回1,失败返回0。semaphore:down_trylock() 成功返回0,失败返回1。rw_sema

  • java实现定时器的四种方式_java定时器实现文字内容交换

    java实现定时器的四种方式_java定时器实现文字内容交换前言:Java定时器目前主要有3种实现方式:JDK组件,SpringTask,Quartz框架。1.JDK组件(1)java.util.TimerTaskMyTimerTask.java:publicclassMyTimerTaskextendsTimerTask{@Overridepublicvoidrun(){System.out.println(“MyTimerTask,…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号