spry可折叠式面板控件

关于可折叠面板构件

可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。下例显示一个处于展开和折叠状态的可折叠面板构件：

可折叠面板构件的 HTML 中包含一个外部 div 标签，其中包含内容 div 标签和选项卡容器 div 标签。在可折叠面板构件的 HTML 中，在文档头中和可折叠面板的 HTML 标记之后还包括脚本标签。

有关可折叠面板构件工作方式的更全面的说明（包括可折叠面板构件代码的全面分析），请访问 www.adobe.com/go/learn_dw_sprycollapsiblepanel_cn。

插入可折叠面板构件 选择“插入”>“Spry”>“Spry 可折叠面板”。

注： 还可以使用“插入”栏中的“Spry”类别插入可折叠面板构件。

在设计视图中打开或关闭可折叠面板 请执行下列操作之一：

  • 在“设计”视图中，将鼠标指针移到该面板的选项卡上，然后单击出现在该选项卡右侧中的眼睛图标。
  • 在“文档”窗口中选择一个可折叠面板构件，然后在属性检查器（“窗口”>“属性”）中，从“显示”弹出菜单中选择“打开”或“已关闭”。

    设置可折叠面板构件的默认状态

    当系统在浏览器中加载 Web 页时，您可以设置可折叠面板构件的默认状态（打开或已关闭）。

    1. 在“文档”窗口中选择一个可折叠面板构件。
    2. 在属性检查器（“窗口”>“属性”）中，从“默认状态”弹出菜单中选择“打开”或“已关闭”。

启用或禁用可折叠面板构件的动画

默认情况下，如果启用某个可折叠面板构件的动画，站点访问者单击该面板的选项卡时，该面板将缓缓地平滑打开和关闭。如果您禁用动画，则可折叠面板会迅速打开和关闭。

  1. 在“文档”窗口中选择一个可折叠面板构件。
  2. 在属性检查器（“窗口”>“属性”）中，选择或取消选择“启用动画”。

自定义可折叠面板构件

尽管使用属性检查器可以简化对可折叠面板构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改可折叠面板构件的 CSS，并创建根据自己的喜好设置样式的可折叠面板。有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_cn。

下列主题中的所有 CSS 规则都是指 SpryCollapsiblePanel.css 文件中的默认规则。每当您创建 Spry 可折叠面板构件时，Dreamweaver 都会将 SpryCollapsiblePanel.css 文件保存到您的站点的 SpryAssets 文件夹中。此文件中还包括有关适用于该构件的各种样式的有用的注释信息。

尽管可以直接在相关联的 CSS 文件中方便地编辑可折叠面板构件的规则，您还可以使用“CSS 样式”面板来编辑可折叠面板的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。

通过设置整个可折叠面板构件容器的属性或分别设置构件的各个组件的属性，可以设置可折叠面板构件的文本样式。

若要更改可折叠面板构件的文本格式，请使用下表来查找相应的 CSS 规则，然后添加自己的文本样式属性和值：

要更改的样式

相关 CSS 规则

要添加或更改的属性和值的示例

整个可折叠面板中的文本

.CollapsiblePanel

font: Arial; font-size:medium;

仅限面板选项卡中的文本

.CollapsiblePanelTab

font: bold 0.7em sans-serif;（这是默认值。）

仅限内容面板中的文本

.CollapsiblePanelContent

font: Arial; font-size:medium;

要更改可折叠面板构件不同部分的背景颜色，请使用下表来查找相应的 CSS 规则，然后根据自己的喜好添加或更改背景颜色的属性和值：

要更改的颜色

相关 CSS 规则

要添加或更改的属性和值的示例

面板选项卡的背景颜色

.CollapsiblePanelTab

（这是默认值。）

内容面板的背景颜色

.CollapsiblePanelContent

在面板处于打开状态时，选项卡的背景颜色

.CollapsiblePanelOpen .CollapsiblePanelTab

（这是默认值。）

当鼠标指针移过已打开面板选项卡上方时，选项卡的背景颜色

.CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover

（这是默认值。）

默认情况下，可折叠面板构件会展开以填充可用空间。但是，您可以通过为可折叠面板容器设置 width 属性来限制可折叠面板构件的宽度。

  1. 打开 SpryCollapsible Panel.css 文件来查找 .CollapsiblePanel CSS 规则。此规则为可折叠面板构件的主容器元素定义属性。 查找规则的另一种方法是：选择可折叠面板构件，然后在“CSS 样式”面板（“窗口”>“CSS 样式”）中进行查找。请确保该面板设置为“当前”模式。
  2. 向该规则中添加一个 width 属性和值，例如 width: 300px;。

spry可折叠式面板控件

时间： 2024-11-09 00:41:23

spry可折叠式面板控件的相关文章

我的开源框架之面板控件

需求: (1)可伸缩.扩大.缩小 (2)可自定义工具栏(依赖工具栏控件),工具栏可定义位置 (3)可加装远程数据 实现图例 客户代码 function addMoreTools() { var toolbar = panel.panel("getToolbar"); toolbar.toolbar('addButtons', [ { id: 'btn_5', text: '按钮5', iconCls: 'icon-edit', handler: function () { alert(

ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 （转 ）出处：[Lipan] （http://www.cnblogs.com/lipan/）

本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下面介绍几个基本配置项: 1.title:设置面板标题文本. 2.tbar,lbar,rbar,bbar:分别设置上.左.右.下四个部位的工具栏. 3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件. 4.buttons:设置按钮区的按钮. 下面看看面板生成代码:

EasyUI - Panel 面板控件

效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.</p> <p>panel content.</p> </div> JS代码: 其中有些属性,之间的使用有冲突. tools属性,与href属性,与extractor属性,与loadingMessage属性,最为有用. $(function () { $('#p').

uwp通用应用重写列表面板控件

MyPanel.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Windows.Foundation; using Windows.UI.Xaml.Controls; namespace App1 { public class MyPanel : Panel { protected overrid

Chapter 2. ASP.NET 标准控件（单选、复选、列表、面板、日历）

<h2>单选和单选组控件:</h2><br /> <asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="True" GroupName="gender" Text="男"/>   <asp:RadioButton ID="RadioButton2" runat=

FineReport——JS监听其他控件事件

首先在参数面板和报表中分布添加一个button,用于被监听: 参数面板 控件名:temp: temp点击事件:alert("temp"); 报表 控件名:exprt: temp点击事件:alert("exprt"); 再次在参数面板和报表中添加一个按钮,可不命名: 在参数面板的按钮控件的点击事件中添加如下代码: this.options.form.getWidgetByName("temp").fireEvent('click'); //参数面板

ATL和ActiveX做的控件.dll和.ocx最主要的区别（摘录）

楼主是不是说用ATL做的控件和用MFC ActiveX wizard的控件有什么区别吧依存的动态库不一样, 一个是ATL.DLL吧, 一个是MFC42.DLL. ATL开发的控件代码少,轻便,便于网上发布:MFC开发的控件笨重,但是MFC类库丰富,利用它便于开发一些具有美观大方界面的控件: 这两者各有优势,选择哪个工具就要看你开发什么样的控件了. 比如说示波器面板控件.X-Y绘图仪控件等用来显示图形.分析图形的控件,要MFC开发比较好.而财务分析.逻辑推论的一些重计算,对界面要求不高甚至根本就步

Panel控件的使用

我们对控件进行分组的原因不外乎三个: 1.为了获得清晰的用户界面而将相关的窗体元素进行可视化分组. 2.编程分组,如对单选按钮进行分组. 3.为了在设计时将多个控件作为一个单元来移动. 在vb.net中,有GroupBox.Panel.TabControl这三个控件可以实现上面所提到的三个分组目的,所以我们称它们为分组控件. 前面我们了解了GroupBox(控件组)控件(vb.net入门——分组控件:GroupBox控件的使用)的使用,这里我们将来看看下怎么使用Panel(也称面板)控件.实际上

读书笔记1： uwp 控件结构分类

一.系统控件分类 FrameworkElement类 Panel类 Control类 ContentControl类 ItemsControl类 1)FrameworkElement类 派生自UIElement类, UIElement类是Windows 10 中具有可视外观并处理基本输入的大多数对象的基类,封装了键盘事件.触摸事件等一些基础的UI事件,但是UIElement类没有公开的构造函数,其作用就是作为FrameworkElement类的基类对UI的基础操作进行封装. FrameworkE