Easyui系列——（一）面板

最新推荐文章于 2021-03-12 03:07:44 发布
最新推荐文章于 2021-03-12 03:07:44 发布
阅读量2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a316212802/article/details/26968303
版权 
<strong><span style="font-size:18px;">1.基本面版组件</span></strong>
<html>
     <head>
          <meta charset="UTF-8">
          <title>Basic Accordion - jQuery EasyUI Demo</title>
          <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
          <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
          <link rel="stylesheet" type="text/css" href="../demo.css">
          <script type="text/javascript" src="../../jquery.min.js"></script>
          <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
     </head>
     <body>
          <h1>基本面板组件</h1>
               <div class="demo-info">
                    <div class="demo-tip icon-tip"></div>
                    <div>面板组件是其他组件或者元素的容器</div>
               </div>
     <div style="margin:10px 0;">
          <a href="#" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('open')">打开</a>
          <a href="#" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('close')">关闭</a>
     </div>
     <div id="p" class="easyui-panel" title="" style="width:500px;height:200px;padding:10px;">
          <p style="font-size:14px">Jquery框架能让你轻松创建web页面</p>
          <ul>
          <li>easyui是一套基于jquery的用户界面插件集合</li>
          <li>easyui为构建先</li>
          <li>easyui是一套基于jquery的用户界面插件集合</li>
          <li>easyui是一套基于jquery的用户界面插件集合</li>
          </ul>
     </div>
     </body>
</html>

2、面板工具

<html>
     <head>
          <meta charset="UTF-8">
          <title>Basic Accordion - jQuery EasyUI Demo</title>
          <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
          <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
          <link rel="stylesheet" type="text/css" href="../demo.css">
          <script type="text/javascript" src="../../jquery.min.js"></script>
          <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
     </head>
     <body>
          <h1>面板工具</h1>
               <div class="demo-info">
                    <div class="demo-tip icon-tip"></div>
                    <div>点击面板右上角按钮执行面板相关操作</div>
               </div>
     <div style="margin:10px 0;">
          <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('open')">打开</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('close')">关闭</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('expand',true)">展开</a>
          <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('collapse',true)">折叠</a>
     </div>
<div style="height:400px;width:600px;border:1px solid #000;">
     <div id="p" class="easyui-panel" title="面板工具" style="width:400px;height:200px;padding:10px;"
     data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
          <p style="font-size:14px">Jquery框架能让你轻松创建web页面</p>
          <ul>
          <li>easyui是一套基于jquery的用户界面插件集合</li>
          <li>easyui为构建先</li>
          <li>easyui是一套基于jquery的用户界面插件集合</li>
          <li>easyui是一套基于jquery的用户界面插件集合</li>
          </ul>
     </div>
</div>
     </body>
</html>


陌苏湮雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUI——Panel（面板）
weixin_45492425的博客
12-04 1016
EasyUI——Panel（面板） 使用$.fn.panel.defaults重写默认值对象。 面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。 使用案例 创建面板 通过标签创建面板 通过标签创建更简单。添加’easyui-panel’类ID...
easyui学习之选项卡面板
baidu_37464759的博客
02-08 2347
easyUI学习之选项卡          有时候，我们在后台系统使用easyUI的tree功能的时候，需要在点击一个节点，在页面右侧显示一个页面，通常这个页面就是使用选项卡面板功能实现的，现在我们来通过几个小Demo来了解选项卡面板的功能。            1. 创建选项卡面板 创建面板有html直接创建，也可以通过js创建，下面介绍的都是使用js来创建。 $(
EasyUI-Panel Tools
dxm809的博客
03-20 822
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Sc...
EasyUI-Custom Panel Tool
dxm809的博客
03-20 298
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
EasyUI入门（panel）
乔你那熊色
10-13 1199
          今天我简单的了解了一下EasyUI，easyui是一种基于jQuery的用户界面插件集合，用来编写用户界面。下面我们来简单的使用一下。            所谓的简单使用，就是我们按照文档上的Demo写一下，看看各个属性，方法和事件的作用。 一.所需要的文件和文档             要想使用EasyUI，我们首先要下载这个框架，我们只需要去官网下载，然后将解压后的...
jquery-easyui-1.3.4.rar
12-21
在标题“jquery-easyui-1.3.4.rar”中，我们看到的是jQuery EasyUI的一个特定版本——1.3.4。这个版本可能包含了该框架在2014年左右的状态，因为EasyUI的版本更新较为频繁，每个版本都可能引入新的功能、修复已知...
easyui 1.3.2中文API
07-03
EasyUI 是一款基于 jQuery 的轻量级前端框架，它提供了一系列的UI组件，如窗口、表格、下拉框等，用于快速构建美观且功能丰富的Web应用界面。本文将详细介绍EasyUI 1.3.2版本中的几个核心组件——窗口（Window）、...
jquery-easyui-1.4
02-21
在这个版本——jQuery EasyUI 1.4 中，我们可以看到一系列经过优化和改进的功能，使得开发变得更加高效。 首先，核心文件`jquery.easyui.min.js`是整个框架的核心，它包含了EasyUI的主要功能。这个压缩包中包含的`...
easyui.css+icon.css
03-06
`icon.css` 文件则是 EasyUI 的图标库，它包含了一系列用于各种功能和操作的矢量图标。这些图标通常与按钮、菜单项和其他 UI 元素关联，以提供直观的视觉指示。通过引用 `icon.css`，开发者可以轻松地在页面上添加...
jquery easyui 中文版 API,chm 格式
05-14
10. **事件和方法**：每个组件都有一系列的事件（如`onOpen`、`onClick`）和方法（如`open`、`close`），通过它们可以控制组件的行为。 在使用《jQuery EasyUI 中文版 API》时，开发者可以查阅详细的函数介绍、参数...
布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局...
weixin_34143774的博客
07-04 747
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults。 面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。 ...
easyui教程 php,jQuery EasyUI 教程-Panel（面板）
weixin_35068077的博客
03-12 634
从现在开始，要给大家开始讲解jQuery EasyUI 教程-Layout(布局)中的第一小节内容：jQuery-panel(面板)组件，这款组件跟前面几篇文章的组件用法几乎都差不多，也是从设置一些面板属性、操作面板触发的事件以及方法来实现案列的，我们可针对这三个点去学习。使用$.fn.panel.defaults重写默认值对象。面板作为承载其它内容的容器。这是构建其他组件的基础(比如：layou...
Jquery EasyUI 面板内布局（6）
kaleid_liner的博客
09-18 988
我们可以将面板进行布局。 在之前的几篇文章中，我们已经知道了如何获得一个面板，就是在一个div标签中引用一个已经写好的样式： 而如果我们想要使用easyui的布局，则需要使用layout样式： 一个页面的简单布局为：上、下、左、右、中， 我们可以在layout下这样来表示： top
EasyUI基本配置，HelloWorld
pomodoro
07-15 1240
EasyUI学习笔记_引入相关文件EasyUI必须文件：[这里](http://pan.baidu.com/s/1dEY5P41)，密码：h1ok 引入格式： 1、 使用基本的link和Script引入//引入基本样式 <link rel="stylesheet" type="text/css" href="js/jquery/themes/default/easyui.css"/> //引入图标
Easyui面板的left,top属性，设置当前面板的position
huangbaokang的博客
10-09 2533
$(function(){ $('#box').panel({ title:'标题', width:500, height:150, iconCls:'icon-search', left:100, top:100 }); $('#box').panel('panel').css('p
控制 matplotlib 子图大小
weixin_33704591的博客
01-17 2444
效果图：   代码： import numpy as np import matplotlib.pyplot as plt '''调整 matplotlib 子图的大小''' x1 = np.linspace(0.0, 5.0) x2 = np.linspace(0.0, 2.0) y1 = np.cos(2 * np.pi * x1) * np.exp(-x1...
jquery 设置多个样式的优先顺序
L-BAKE
10-24 1113
class 中包含demo-tip 和 icon-tip ,指的是一个标签可以有多个类选择器的值，不同的值用空格分开。 如果一个标签同时通过class和id设置了指定的样式,这时候只有通过id设置的样式生效,比如都设置了背景色,只有通过id设置的生效.
（可行）easyui 实现 panel 拖动效果
yyxawe的专栏
04-18 1008
 以上为实现的效果图，该效果可以用于动态显示数据。
easyui的layout折叠面板使用另一个按钮控制折叠展开
最新发布
06-09
1. 在页面中定义 EasyUI Layout 组件，并在其中定义一个折叠面板，设置其 collapsible 属性为 true。 ``` <div class="easyui-layout" style="width:400px;height:200px;"> ,title:'West',split:true,collapsible:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值