easyUI panel组件 | panel组件

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);

});