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. MyEclipse10.7使用egit托管项目到GitHub

    原文出处:http://www.xuebuyuan.com/2126438.html 1.注册一个github账户:(www.github.com)点击打开链接 注册完成后,登录github后点击右上 ...

  2. Bluez SPP实现代码分析(转)

    源:http://blog.csdn.net/walkingman321/article/details/7218705 本文分析蓝牙协议栈中蓝牙转串口(SPP)部分的实现. 1.  基本概念 Blu ...

  3. 基于css3的环形动态进度条（原创）

    基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...

  4. Struts2 JSP中将list,set ,Map传递到Action然后遍历（三十五） - 雲淡風輕 - ITeye技术网站

    1.使用Strut2的的集合对象:在jsp初始化action中的list然后提交到action2.使用Struts标签,实现多个用户同时注册(注意属性配置文件)3.pojo package com.s ...

  5. 用saxon框架对xml数据进行过滤 - 程序员的天堂 - ITeye技术网站

    用saxon框架对xml数据进行过滤 博客分类: Java   Saxon 是一个 XSLT 和XQuery处理器.它是使用 XML 文档和样式表作为输入,然后生成结果文档作为输出的程序,它还包括了一 ...

  6. openstack controller ha测试环境搭建记录（五）——配置rabbitmq集群

    配置rabbitmq集群的步骤非常简单,因为其本身含集群功能,参考openstack官网文档:http://docs.openstack.org/ha-guide/controller-ha-rabb ...

  7. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  8. skip list跳跃表实现

    跳表(skip List)是一种随机化的数据结构,基于并联的链表,实现简单,插入.删除.查找的复杂度均为O(logN).跳表的具体定义,跳表是由William Pugh发明的,这位确实是个大牛,搞出一 ...

  9. codeforces #321 DIV2

    A题: 链接:http://codeforces.com/contest/580/problem/A dp,最长连续不上升子序列 #include<iostream> #include&l ...

  10. PHP的高并发和大数据处理

    收集前人的经验.加速学习,解决工作中的难题. 一.代码优化(包括sql语句的优化), 合理的使用索引,避免整表查询.二.日常海量数据处理我用文件缓存,文件缓存分两种,第一种是最常见的生成html静太文 ...