EasyUI基础(二)

最新推荐文章于 2024-07-11 23:07:02 发布

zt12

最新推荐文章于 2024-07-11 23:07:02 发布

阅读量415

点赞数

分类专栏：使用jQueryEasyUI提升客户体验文章标签： easyui 常用方法常用属性

本文链接：https://blog.csdn.net/qq_31781327/article/details/70196445

版权

使用jQueryEasyUI提升客户体验专栏收录该内容

3 篇文章 0 订阅

订阅专栏

EasyUI基础(二)
一、学习之前可以先下载这个文件，对学习有很大的帮助和理解
百度一下就可以下载了
这里写图片描述

这里写图片描述

二、EasyUi组件使用
1，实例化：
1），通过class属性实例化：
A，通过Class属性和EasyUI标签属性实例化：

<div class="easyui-组件名称" title="我是panel" width="300" height="200" collapsible="true"></div>

B，通过class属性和data-options属性实例化：
语法： <特定标签元素 data-options=”属性名称:’属性值’,
属性名称:’属性值’” >

<div class="easyui-组件名称" data-options="title:'我是panel2',width:500,height:200"></div>

2），通过JS实例化
语法：
$(“#ID选择器”).渲染EasyUI组件名称({
 属性1:值,
 属性2:值,
 属性3:值,
 属性4:值,
 事件:function(){ 执行代码 }});

    <!-- js代码 -->
    <script type="text/javascript">
    <div id="p1"></div>
        <script type="text/javascript">
            $(function () {
                $("#p1").panel({
                    title: "我是panel1",
                    width: 200,
                    height:300,
                });
            });
            </script>

三、panel常用属性：

id string 面板的ID属性。
title string 在面板头部显示的标题文本。
iconCls string 设置一个16x16图标的CSS类ID显示在面板左上角。
width number 设置面板宽度。
height number 设置面板高度。
fit boolean 当设置为true的时候面板大小将自适应父容器。
content string 面板主体内容。
collapsible boolean 定义是否显示可折叠按钮。
minimizable boolean 定义是否显示最小化按钮。
maximizable boolean 定义是否显示最大化按钮。
closable boolean 定义是否显示关闭按钮。
tools array,selector 自定义工具菜单，
header selector 定义面板标题。（该属性自1.4.1版开始可用）
footer selector 定义面板页脚。（该属性自1.4.1版开始可用）

四、tools介绍

<!--tools array,selector 自定义工具菜单，可用值：
1) 数组，每个元素都包含'iconCls'和'handler'属性。
2) 指向工具菜单的选择器。-->

<!--面板工具菜单可以声明在已经存在的<div>标签上：-->

<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
    <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>

<!--面板工具菜单也可以通过数组定义：-->

<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }]">
</div>

五、panel常用方法

setTitle title 设置面板头的标题文本。
clear none 清除面板内容。（该方法自1.4版开始可用）
refresh href 刷新面板来装载远程数据。如果’href’属性有了新配置，它将重写旧的’href’属性。
代码示例：

// 打开面板且刷新其内容。
$('#pp').panel('open').panel('refresh');
// 刷新一个新的URL内容$('#pp').panel('open').panel('refresh','new_content.php');

4.resize设置面板大小和布局。参数对象包含下列属性：
width：新的面板宽度。
height：新的面板高度。
left：新的面板左边距位置。
top：新的面板上边距位置。
代码示例：

$('#pp').panel('resize',{
    width: 600,
    height: 400
});

六、整个页面的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--皮肤文件  -->
    <link href="UI/themes/default/easyui.css" rel="stylesheet" />
    <!-- 小图标文件 -->
    <link href="UI/themes/icon.css" rel="stylesheet" />
    <!--JQuery文件  -->
    <script src="Scipts/jquery-1.8.2.js"></script>
    <script src="UI/jquery.easyui.min.js"></script>
    <!--中文编码脚本  -->
    <script src="UI/locale/easyui-lang-zh_CN.js"></script>

    <!-- js代码 -->
    <script type="text/javascript">
        function Loadpanel() {
            //通过JS实例化:
            $("#p3").panel({
                title: "标题",
                width: 300,
                height:100,
                collapsible: true,
                iconCls: "icon-save",
            });
        }

        $(function () {

            Loadpanel();
        })
        //更改宽和高
        $(function () {
            $("#update-a").linkbutton({
                icoCls: "icon-save",//样式图标
                onClick: function () {//单击事件

                    var twidth = $("#width").val();
                    var theight = $("#height").val();
                    //更改宽和高
                    $("#p3").panel("resize", {//方法
                        width: twidth,
                        height: theight,
                    });
                }
            });
        })

        //打开面板
        $(function () {
            $("#open-a").linkbutton({
                icoCls: "icon-save",//样式图标
                onClick: function () {//单击事件
                    $("#p3").panel("open", {
                    });
                }
            });
        });
        //关闭面板
        $(function () {
            $("#close-a").linkbutton({
                icoCls: "icon-save",//样式图标
                onClick: function () {//单击事件
                    $("#p3").panel("close", {
                    });
                }
            });
        });


        $(function () {

            $("#panel-herf").panel({
                loadingMessage: "我很努力的加载中....",
                href:"content.html"
            });
        })


    </script>
</head>
<body>
    P1
     <div id="p1" class="easyui-panel" style="width:300px;height:100px;padding:10px;">通过Class属性和EasyUI标签属性实例化：</div>
    P2
  <div id="p2" class="easyui-panel" style="width:300px;height:100px;padding:10px;"data-options="iconCls:'icon-save',collapsible:true,title:'标题' ">
  通过class属性和data-options属性实例化：
  </div>
    P3
   <div id="p3"> 通过JS实例化: </div>

     宽：<input id="width" type="text"/>
     高：<input id="height" type="text"/>
     <a id="update-a">更改长和宽</a>
     <a id="open-a">打开面板</a>
     <a id="close-a">关闭面板</a>
<div id="panel-herf"  class="easyui-panel" style="width:300px;height:100px;padding:10px;"data-options="iconCls:'icon-save',collapsible:true,title:'标题' ">

     </div>
</body>
</html>

这里写图片描述

zt12

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI基础(二)

EasyUI基础(二) 一、学习之前可以先下载这个文件，对学习有很大的帮助和理解百度一下就可以下载了二、EasyUi组件使用 1，实例化： 1），通过class属性实例化： A，通过Class属性和EasyUI标签属性实例化：<div class="easyui-组件名称" title="我是panel" wid
复制链接

扫一扫