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. php7连不上mysql求帮忙！！！

    把php.ini中的 拓展mysqli.dll和pdo＿mysql.dll前面分号都去掉也没用,mysql是5.5 apache2.4和php7都好使了,怎么也连不上mysql Fatal error ...

  2. 一个int类型引发的bug

    一.引言 今天我在项目开发中,遭遇了一个莫名其妙的问题,概括加抽象后形成如下问题:在使用MyBatis的XML语句实现Dao层接口 List<Person> selectBySome(@P ...

  3. 数据同步方案（附Java源码)

    一.问题背景经常碰到要同步数据的情况,而系统自带的复制功能又不能实现增量同步,每次都要做全量复制,发生异常情况后只能重头再来,非常麻烦,优其是对那种大文件的处理,更是耗时.二.解決方案1.计算源目录数 ...

  4. Pythagorean Triples

    Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. Shell实例----------从文件夹里面多个文件里面查找指定内容

    脚本执行方式:脚本名称  目录的路径 要查找的内容 #!/bin/bash num=`ls $1 |tr ' ' '^$'|wc -l` for i in `seq 1 $num` do file_n ...

  6. (简单) POJ 2251 Dungeon Master，BFS。

    Description You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is co ...

  7. stm32 Bootloader设计(YModem协议) (转)

    源:stm32 Bootloader设计(YModem协议) 相信很多人都希望,不开盖就可以对固件进行升级吧,就像手机那些.下文中的bootload就来实现这样的功能. 前段时间有项目关于Bootlo ...

  8. js局部变量，参数

    作者:zccst 所有函数的参数都是按值传递的.也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.基本类型值的传递如同基本类型变量的赋值一样.而引用类型值的传递,则 ...

  9. TCP/IP协议头部结构体（网摘小结）（转）

    源:TCP/IP协议头部结构体(网摘小结) TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #de ...

  10. 苹果App Store开发者帐户从申请,验证,到发布应用（4）

    苹果App Store应用内支付(In-App Purchase) IAP简介 IAP的全称是In-App Purchase,应用内付费.这种业务模式允许用户免费下载试用,对应用内提供的商品选择消费, ...