Loading

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

 

posted @ 2015-10-18 20:50  stono  阅读(225)  评论(0)  编辑  收藏  举报