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. 定时且周期性的任务研究II--ScheduledThreadPoolExecutor

    http://victorzhzh.iteye.com/blog/1011635 上一篇中我们看到了Timer的不足之处,本篇我们将围绕这些不足之处看看ScheduledThreadPoolExecu ...

  2. 高橋君とカード / Tak and Cards

    高橋君とカード / Tak and Cards Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB Score : 300 p ...

  3. vm10虚拟机安装Mac OS X10.10教程

    VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift .  最近WWDC放出终极大招——新的编程语言Swift(雨燕),导致一大波程序员的 ...

  4. USACO刷题之路

    重拾经典 本科生涯结束了,在大学做的ACM竞赛现在基本忘的差不多了.USACO作为一个经典的题库,本来是面向OI选手的,但是由于题目质量很高所以受到大家的好评,所以我这次就从它开始我的刷题之路吧. 由 ...

  5. 【BZOJ 1572】 1572: [Usaco2009 Open]工作安排Job（贪心+优先队列）

    1572: [Usaco2009 Open]工作安排Job Description Farmer John 有太多的工作要做啊!!!!!!!!为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单 ...

  6. 【supervisord】部署单进程服务的利器

    最近听了一场分享,里边同事介绍了一些python开发环境常用到的几种工具,其中之一就supervisord,分享后自己做了些功课,概括一下supervisord是一个什么东西呢 1. 它是一个独立的常 ...

  7. hbuilder 手机app开发系列（一）

    最佳答案好水啊,实在看不过眼,首先apicloud是一个框架,hbuidler是ide工具,两者没什么可比性.我来推荐一个国外免费开源的项目吧,Ionic framework,我之所以推荐它是因为它支 ...

  8. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  9. CDOJ 1272 Final Pan's prime numbers

    有些问题,不做实践与猜测,可能一辈子也想不出答案,例如这题. #include<stdio.h> #include<math.h> long long x; int main( ...

  10. CodeForces 625A Guest From the Past

    贪心水题 #include <stdio.h> #include <algorithm> #include <string.h> #include <queu ...