这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件。

1.这里先看看引用的资源文件

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css" /><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/demo/demo.css" /><script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

看到这里并没有引用一个类似panel.js的文件,看来D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\plugins这个目录下放置的文件并不是按功能来区分的哦,还是因为这个控件比较简单所以没有单独的放在一个文件里面么?

2.看看html代码都有什么新的特性

    <div><div class="demo-tip icon-tip"></div><div>The panel is container for other components or elements</div><div style="margin:10px 0;"><a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('open')">Open</a><a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('close')">Close</a><a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('expand',true)">Expand</a><a class="easyui-linkbutton" href="javascript:void(0);" onclick="javascript:$('#p').panel('collapse',true)">Collapse</a></div><div style="height:350px;border:1px solid #ccc"><div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;" data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"><p style="font-size:14px;">jQuery EasyUI framework helps you build your web pages easily</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div></div></div>

  注意那4个超链接不属于panel,只是用来外部控制的。看字面意思就应该能够猜出什么功能了,$('#p').panel('open')这句貌似就是讲id=p的元素作为一个opanel并且打开它,$('#p').panel('close')这个是关闭它,$('#p').panel('expand',true)这个是展开它,这一这里有两个参数了,$('#p').panel('collapse',true)这个就是收缩它。

  下面首先定义了一个div,在这个div里面嵌套了一个div,这里class="easyui-panel"貌似就是把它当成一个panel控件,下面这个特性就比较长了
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"
  iconCls:'icon-save':指定它的图标是类似word里面的保存按钮图标
  collapsible:true:指定可以收缩
  minimizable:true:指定可以最小化
  maximizable:true:指定可以最大化
  closable:true:指定可以关闭

这些都比较容易理解了,但是我遇到一个比较小巧的问题data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true;"这样写就会报错了,报错内容如下:

SyntaxError: missing } after property list
 
apsible:true,minimizable:true,maximizable:true,closable:true;}

意思是后面少个},其实是多了个“;”,写js的时候很自然地在最后一句上价格分号,到这里是不行的,不能加分号了,不仅会报js错误还会让页面样式乱掉。

最后效果如下图:

转载于:https://www.cnblogs.com/tylerdonet/p/3521645.html

easyui学习笔记4—panel的实现相关推荐

  1. EasyUI学习笔记5:来点甜点_ menu和theme插件

    摘要 使用easyui-menu插件实现右键菜单关闭tab页,实现更改主题 easyui menu 目录[-] 一.引言 二.右键菜单关闭tab 1.绑定tabs的右键菜单 2. 处理菜单点击事件 三 ...

  2. easyUI学习笔记二

    1.  拖拉大小 <!DOCTYPE html> <html> <head><title>easyui学习</title><scrip ...

  3. EasyUI学习笔记6:MIS开发利器_ datagrid插件(上)

    为什么80%的码农都做不了架构师?>>>    一.引言 终于来到easyui系列笔记的重点部分--数据网格datagrid插件.在MIS开发中,需要展示数据大量数据并且频繁地进行C ...

  4. EasyUI学习笔记7:MIS开发利器_ datagrid插件(中)

    摘要 使用datagrid实现数据列表和CRUD操作,并实现与后台action交互,支持后台分页与排序.. easyui datagrid dialog form 目录[-] 一.引言 二.数据管理对 ...

  5. EasyUI学习笔记8:MIS开发利器_ datagrid插件(下)(终结篇)

    为什么80%的码农都做不了架构师?>>>    一.引言 最后一篇是easyui与struts传递数据.拖了好多天,因为一直没想好怎么写.这部分代码参考了一个开源项目,很早之前写的, ...

  6. easyui学习笔记一:主要结构

    目前根据公司节奏正在学习easyui框架,每天学习一点,顺便把学习的内容记录下来! easyui主要加载文件,后期持续更新. 1 <!DOCTYPE html> 2 <html> ...

  7. 【EasyUI】EasyUI学习笔记

    一.EasyUI 简介 1.EasyUI 是前端框架. 2.前端框架 2.1 封装大量css 2.2 封装大量JS 3.使用前端框架 3.1 给标签设置easyui提供的 class 属性即可,id属 ...

  8. extJs 2.0学习笔记(Ext.Panel篇四)

    我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...

  9. UI学习笔记---EasyUI panel插件使用---03

    UI学习笔记---EasyUI panel插件使用---03 UI学习笔记---EasyUI panel插件使用---03 1.panel简单小例子 ------------------- 2.可以自 ...

最新文章

  1. 全球 35 大开源公司都在这里!
  2. svn错误 is already locked 解决方案
  3. java xslt 数据转换_如何将xslt结果转换为Java对象?
  4. Facebook 中国程序员之死
  5. Mybatis+MySQL动态分页查询数据经典案例(含代码以及测试)
  6. 那些书对程序员最有影响
  7. java 找序列最小值_【C++编程练习】任意给定 n 个有序整数,求这 n 个有序整数序列的最大值,中位数和最小值...
  8. 产品研发管理(二):使用SubVersion进行代码管理
  9. idea增强for循环
  10. Spring 依赖注入中 Field 注入的有害性
  11. python抖音涨粉代码_抖音最火表白代码
  12. symantec linux版命令,Symantec Backup Exec Agent for Linux详细安装方法
  13. Windows2003系统csrss.exe与winlogon.exe进程占用CPU高原因
  14. python绘制中国_Python-Geopandas 教你绘制中国地图
  15. python实现文件重命名_python实现文件重命名
  16. 计算机等级考试考几级才能成为数据库工程师?
  17. sql—labs通关
  18. Datadog数据包分析
  19. 2020小迪培训(第21天 WEB 漏洞-文件上传之后端黑白名单绕过)
  20. VUE是基于什么语言

热门文章

  1. php登录注册案例,php实现登陆与注册的案例
  2. 频数直方图的步骤_如何运用QC七大手法和九大步骤分析问题?
  3. 『天涯杂谈』走的地方越多,越觉的中国的狭隘
  4. html——windows.onload()与$(document).ready()区别
  5. hive,skynet以及go语言
  6. Memcached 集群架构方面的问题
  7. css空心三角形_(12)把“可以动的盒子”更优雅地展示: “伪元素”妙用 | CSS...
  8. mysql 4604,mysql--centos(7)安装
  9. python开发环境anaconda3_使用Anaconda3配置多版本Python虚拟开发环境
  10. python中队列的应用用场景_消息队列使用的四种场景介绍