easyUI panel组件：

属性的使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="easyui/jquery.min.js"></script>

    <script src="easyui/jquery.easyui.min.js"></script>

    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script src="js/test009.js"></script>

    <link rel="stylesheet" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" href="easyui/themes/icon.css">

</head>

<body style="margin:20px">

    <div class="easyui-panel" data-options="title:'面板',closable:true" style="width:500px">

        <p>内容</p>

    </div>

    <div id="box">

        <p>内容2</p>

    </div>

    <div id="tt">

        <a href="" class="icon-add" onclick="javascript:alert('add')"></a>

    </div>

</body>

</html>
$(function(argument) {

    var obj = {

        // id: 'pox', // 设置id

        title: '面板', //设置标题

        width: 500,

        height: 150,

        iconCls: 'icon-search',

        // left: 200,// 距离左侧距离

        // top: 200,// 距离顶部距离

        cls: 'a',

        headerCls: 'b',

        bodyCls: 'c',

        style: {

            'background': 'none',

            'font-size': '18px'

        },

        // fit: true, //自适应父元素

        // border: false, //不显示边框

        // doSize: false, //不按照上面的设置进行调整大小

        // noheader: true, //不显示标题

        content: 'content1', //展示内容

        collapsible: true, //显示折叠

        minimizable: true, //最小化

        maximizable: true, //最大化

        closable: true, //可关闭

        // tools:'#tt',//工具条选择器

        tools: [{ // 也可以是数组对象

            iconCls: 'icon-search',

            handler: function() {

                alert('search');

            }

        }],

        // collapsed:true,//初始化时候折叠

        // minimized:true,//初始化的时候最小化

        // maximized:true,//初始化的时候最大化

        // closed:true,//初始化的时候关闭

        href:'http://www.sina.com.cn',//这样有跨域访问问题，这个必须在web容器下面测试；

        loadingMessage: '加载中...', //加载时候显示的信息

        cache:true,//缓存加载的href信息;

        extractor:function(data){//把返回的结果数据进行截取；

            return data.substring(0,3);

        }

    };

    $('#box').panel(obj);

    // var p = $('#box').panel('panel'); // 这个id可能在上面被id:'pox'修改掉；

    // p.css('position','absolute');

    // console.log(p);

});

easyUI panel组件的更多相关文章

  1. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  2. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  3. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  4. jQuery EasyUI Datagrid组件的完整的基础DOM结构

    标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...

  5. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  6. easyUI progressbar组件

    easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. easyUI linkbutton组件

    easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. easyUI tootip组件使用

    easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. easyUI resizable组件使用

    easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 使用Dreamweaver格式化HTML代码

    今天偶然发现了DreamWeaver(DW)的一个非常有用的功能,就是代码的格式化功能.一般情况下,我们写的html或者css代码都计较混乱,难以阅读,即使刚开始很在意代码的可读性,但是等到所使用的标 ...

  2. learn from 德国老师

    最近在跟踪德国来的一个老师学android,感触比较深的一点就是他对细节的理解,一个源代码他可以从第一行解释到最后一行,知道每一行的意思和用法,这可能就是德国人对细节的追求. 刚才想了一下写代码确实应 ...

  3. ural1028 Stars

    Stars Time limit: 0.25 secondMemory limit: 64 MB Astronomers often examine star maps where stars are ...

  4. ds18b20再硬件设计部分的注意事项

    1.DS18B20的供电方式: ps:寄生电源不是实际的电源器件,而是一种供电方式,即通过数据线供电. 如下面的两张图片所示,分别为外部供电模式下单只和多只DS18B20测温系统的典型电路连接图. ( ...

  5. Codeforces#373 Div2

    Ranting重新回到浅蓝的一场比赛 Problem A 题意:月亮的大小是按照这样的顺序排列的0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ...

  6. js MD5加密后的字符串

    js MD5加密后的字符串 <script language="JavaScript"> /************************************** ...

  7. PHP 多线程、多进程

    多线程:PHP其实并不支持多线程,只是通过一些扩展或者socket方式伪装成多线程,实质不是的.在PHP 5.3 以上版本,使用 pthreads PHP扩展,可以使PHP真正地支持多线程:或者使用 ...

  8. dsp与dmp的cookie mapping

    dsp   ad.com   在  meijiu.com上部署广告. 假设dmp叫cm.api.taobao.com 建立gid映射表 (1) ad.com在meiju.com的页面上部署,指向dmp ...

  9. LPC1788的EMC驱动norflash

    Norflash型号为sst39vf32 #ifndef __NORFLASH_H_ #define __NORFLASH_H_ #include "common.h" #incl ...

  10. Tsinsen-A1490 osu! 【数学期望】

    问题描述 osu!是一个基于<押忍!战斗!应援团><精英节拍特工><太鼓达人>等各种音乐游戏做成的一款独特的PC版音乐游戏.游戏中,玩家需要根据音乐的节奏,通过鼠标 ...