1. Resizable 属性

  • 原理: 页面加载完毕后,EasyUI主文件会扫描页面上的每个标签,判断这些标签的class值是否以"easyui-"开头,

    如果是,则拿到之后的部分"resizable",EasyUI主文件会将当前的标签处理(渲染)为"resizable"这种效果;
  • EasyUI 组件包括: 属性,事件和方法;
// 以标签的形式,实现resizable

// 其中,data-options 表示的是属性值

<body>

    <div class="easyui-resizable" data-options="maxWidth:800,maxHeight:600"

                            style="width:300px;height:300px;border:1px solid red">

    </div>

</body>

// js 代码实现resizable

<div id="rr" stype="width:100px;height:100px;border:1px solid red"></div>

$('#rr').resizable({

    <!-- 属性 --

    maxWidth:800,

    maxHeight:600

});

// 调用 EasyUI 组件的方法

$("#rr").resizable("方法名"); // 调用无参数的方法

$("#rr").resizable("方法名",参数1,参数2,...); // 调用有参数的方法

2. linkbutton 属性

// 需要引入 easyui/themes/icon.css 样式文件

<body>

<a class="easyui-linkbutton" data-options="iconCls:'icon-add'">点击这里</a>

</body>

3. Messager 组件

<head>

    <script type="text/javascript">

        $(function(){

            $("#btn2").click(function(){

                $.messager.alert("严重错误","系统崩溃","error");

            });

            $("#btn3").click(function(){

                $.messager.prompt("标题","输入姓名");

            });

            $("#btn4").click(function(){

                $.messager.confirm("标题","你确定删除吗?",function(data){

                    alert(data);

                });

            });

        });

    </script>

</head>

<body>

    <button id="btn2">点击这里</button>

    <button id="btn3">点击这里</button>

    <button id="btn4">点击这里</button>

</body>

4. Dialog 组件

<head>

    <script type="text/javascript">

        $(function(){

            $("#rr").dialog({

                title:'标题',

                width:300,

                height:150,

                collapsible:true, // 是否显示折叠按钮

                minimizable:true, // 是否显示最小化按钮

                maximizable:true,  // 是否显示最大化按钮

                closed:true,  // 是否在初始化的时候,关闭面板

                // content:"显示内容"

                href:"test.jsp", // 加载远程的内容

                loadigMessage:"正在努力加载...",

                modal:true,   // 模态窗口,即必须处理完当前的工作,才能做页面上的其他工作

                // 顶部工具栏 toolbar

                toolbar:[

                    {

                        text:'增加信息',

                        iconCls:'icon-add',

                        handler:function(){alert("add...")}

                    },{

                        text:'删除信息',

                        iconCls:'icon-remove',

                        handler:function(){alert("delete...")}

                }],

                // 底部工具栏 buttons

                buttons:[

                    {

                        text:'保存',

                        iconCls:'icon-save',

                        handler:function(){alert("save...")}

                    },{

                        text:'取消',

                        iconCls:'icon-cancel',

                        handler:function(){alert("cancel...")}

                }]

            });

        });

    </script>

</head>

<body>

    <div id="rr"></div>

    <input type="text" name="username" value="这是输入框"/>

</body>

// 第二种方式: 使用顶部工具栏和底部工具栏

<head>

    <script type="text/javascript">

        $(function(){

            $("#rr").dialog({

                title:'标题',

                width:300,

                height:150,

                collapsible:true, // 是否显示折叠按钮

                minimizable:true, // 是否显示最小化按钮

                maximizable:true,  // 是否显示最大化按钮

                closed:true,  // 是否在初始化的时候,关闭面板

                // content:"显示内容"

                href:"test.jsp", // 加载远程的内容

                loadigMessage:"正在努力加载...",

                modal:true,   // 模态窗口,即必须处理完当前的工作,才能做页面上的其他工作

                // 顶部工具栏 toolbar

                toolbar:"#top",

                // 底部工具栏 buttons

                buttons:"#btn"

            });

        });

    </script>

</head>

<body>

    <div id="rr"></div>

    <div id="top">

        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加</a>

        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>

    </div>

    <div id="btn">

        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>

        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>

    </div>

</body>

4.1 Panel 组件

  • Dialog 组件扩展(继承)自 Window 组件,window组件扩展自 Panel 组件
// 自适应 fit:true

<div style="height:500px;width:500px;backaground:red">

    <div class="easyui-panel" style="height:100px;width:100px;background:#abcdef"

                              data-options="fit:true"></div>

</div>

5. ProgressBar 组件

<head>

<script type="text/javascript">

    $(function(){

        $("#rr").progressbar({

            width:400,

            height:30,

            value:30,

            text:"正在上传中..."

        });

    });

    function fn2(){

        // 调用getValue方法,获取进度条的值

        var v =$("#rr").progressbar("getValue");

        alert(v);

    }

    function fn3(){

        $("#rr").progressbar("setValue",80);

    }

</script>

</head>

<body>

    <div id="rr"></div>

    <button onclick="fn2()">点击这里</button>

    <button onclick="fn3()">点击这里</button>

</body>

6. Tabs 组件

<head>

    <script type="text/javascript">

        $(function(){

            $("#rr").tabs({

                width:300,

                height:150

            });

        });

    </script>

    function fn2(){

        // 切换到"首页"选项卡, 使用索引

        $("#rr").tabs("select",0);

        // 修改"首页"的属性

        $("#rr").tabs("getTab",0).panel({href:'test.jsp'});

    }

    function fn3(){

        // 判断选项卡"标题2"是否存在

        var f = $("#rr").tabs("exists","标题2");

        if(f){

            // 如果存在,则切换到"标题2"

            $("#rr").tabs("select","标题2");

        }else{

            // 如果不存在,则创建

            $("#rr").tabs("add",{

                title:"标题2",

                content:"内容",

                closable:true

            })

        }

    }

</head>

<body>

    <div id="rr">

        <div title="首页"></div>

    </div>

</body>

<button onclick="fn2()">加载远程选项数据</button>

<button onclick="fn3()">增加选项卡2</button>

7. Form 组件

<head>

    function fn2(){

        var obj = {"username":"张三","userpass":"1234"};

        $("#fm").form("load",obj);

    }

    function fn3(){

        $("#fm").form("clear");

    }

    function fn4(){

        $("#fm").form("submit",{

            url:"test.jsp",

            // 表单校验

            onSubmit:function(){

            },

            // 处理返回数据

            success:function(data){

                alert(data);

            }

        })

    }

</head>

<body>

    <button onclick="fn2()">加载数据</button>

    <button onclick="fn3()">清除数据</button>

    <button onclick="fn4()">发送数据</button>

    <form id="fm" method="post">

        username:<input type="text" name="username"/><br/>

        password:<input type="password" name="userpass"/><br/>

    </form>

</body>

8. Datagrid 组件

// datagrid_data2.json

// total 和 rows 两个必须属性

{

  "total":10000,

  "rows":

     [

        {"code":"101","name":"tom","price":"111"},

        {"code":"102","name":"mary","price":"112"},

        {"code":"103","name":"lucy","price":"113"},

        {"code":"104","name":"jack","price":"114"},

        {"code":"105","name":"piter","price":"115"},

        {"code":"106","name":"smith","price":"116"},

		{"code":"106","name":"smith","price":"116"},

		{"code":"106","name":"smith","price":"116"},

		{"code":"106","name":"smith","price":"116"},

		{"code":"106","name":"smith","price":"116"},

        {"code":"107","name":"saro","price":"117"}

     ]

}

// datagrid.html

<body>

    // pagination 设置为true,表示在数据表格底部显示分页工具栏

    <table class="easyui-datagrid" style="width:700px;height:350px"

        data-options="url:'datagrid_data2.json',fitColumns:true,

                                            singleSelect:true,pagination:true">

        <thead>

    		<tr>

    			<th data-options="field:'code',width:100">Code</th>

    			<th data-options="field:'name',width:100">Name</th>

    			<th data-options="field:'price',width:100,align:'right'">Price</th>

    		</tr>

        </thead>

    </table>

</body>

参考资料

EasyUI 的常见标签的更多相关文章

  1. 解决EasyUI动态添加标签渲染问题

    以下代码用于Js脚本中: var Work_Content_Back = "<table width='99%' class='table' style='margin-bottom: ...

  2. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  3. 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  4. EasyUI 的Tab 标签添加右键菜单

    样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...

  5. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  6. 【html5】常见标签使用说明（持续更新）

    说明: 所谓常见,是指我在优秀网页源码中见到的. 1.viewport 我见到的时候是这样: <meta name="viewport" content="widt ...

  7. HTML常见标签学习与笔记总结

    HTML其实就是把页面的数据封装并加上标签 表头<head> <title> 浏览器标题栏显示的内容 <base> 有href和target属性,href指定网页中 ...

  8. easyui 如何为标签动态追加属性实现渲染效果

    简述一下在项目遇到的问题,这边有一个需求,选择不同类型,加载不同的div标签(其中属性是否必填是区分类型的关键) html界面是这样的 <div class="grid_1 lbl&q ...

  9. 为EasyUI 的Tab 标签添加右键菜单

    在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...

随机推荐

  1. win32之全屏窗口

    游戏开发中经常使用会让游戏以全屏窗口的状态运行,下面一个例子就是来实现这个效果的. #include <windows.h> void RegisterMyClass(); LRESULT ...

  2. 如何重设 MySQL 的 root 密码

    MySQL下创建新用户.新数据库.设定访问权限控制都需要用到root密码.万一把root密码忘了,该怎么办? 幸运地是,重设密码很容易. 安全模式重置法 基本的思路是,以安全模式启动mysql,这样不 ...

  3. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  4. Extjs，实现树形结构的总结

    工作总结,用extjs.mybatis.springMVC实现树形显示班级 前台extjs实现树形代码如下: xtype : 'combotree', fieldLabel : '部门名称', nam ...

  5. C++：成员函数实现在类定义中与在类定义外的区别

    //a.cpp class A{ public: int fun(int x){ ); } }; void tt() { } //b.cpp class A{ public: int fun(int ...

  6. Keil（MDK-ARM）系列教程（五）_Configuration（Ⅰ）

    推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前 ...

  7. UCOS2系统内核讲述_总体描述

    Ⅰ.写在前面 学习本文之前可以参考我前面基于STM32硬件平台移植UCOS2的几篇文章,我将其汇总在一起: UCOS2_STM32F1移植详细过程(汇总文章) 要想学习,或使用系统配套的资源(如:信号 ...

  8. RabbitMQ之发布订阅【译】

    在上一节中我们创建了一个工作队列,最好的情况是工作队列能够把任务恰到好处的分配给每一个worker.这一节中我们将做一些完全不同的事情--将消息传递给每一个消费者,这种模式被称为发布/订阅. 为了说明 ...

  9. android jni log

    在编写的jni时,经常需要输出打印信息进行调试,而C中printf在jni中没有效果,这时就需要使用NDK提供的函数. 1. jni中包含头文件 #include <android/log.h& ...

  10. python虚拟环境的使用---virtualenv and virtualenvwrapper

    虚拟环境 virtualenv 常用操作 step1: 安装 : pip install virtualenv step2:新建 : virtualenv venv cd venv activate ...