第8章 主题与母版_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
20页免费21页免费18页免费17页免费31页免费 11页免费15页免费21页免费10页免费20页免费
第8章 主题与母版|A​S​P​.​N​E​T​程​序​开​发​实​用​教​程​课​件​
​
​清​华​大​学​出​版​社​
​
​作​者​:​纪​禹​希
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：777.07KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢js css优化-- 合并和压缩_Java123社区|||[][]当前位置: &
& js css优化-- 合并和压缩在项目框架中，首先要引用很多css和js文件，80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Re在项目框架中，首先要引用很多css和js文件，80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，我们这里主要针对js和css文件进行优化，使用Combres工具第一步准备工具Nuget可以百度，也可以在此http://nuget.org/第二步通过VS2010管理NuGet程序包来查找第二个工具，也就是本次要使用的工具Combres的工具。点击安装后，会在项目中生成一系列的文件和引用。在App_Data/combres.xml，这个就是设置压缩/合并的文件配置。第三步进行对配置文件进行处理，当然主要是对css文件和Js文件进行相关配置，修改combres.xml如下。&?xml version="1.0"&encoding="utf-8"&?&&!--&&This file contains basic settings needed for&most web apps.&&For full Combres settings (with explanation), refer to the sample definition file: combres_full_with_annotation.xml&&Also, refer to Combres' documentation: /documentation& --&&combres xmlns='urn:combres'&&&&filters&&&&&&filter type="Combres.Filters.FixUrlsInCssFilter, Combres"&/&&&&/filters&&&&cssMinifiers&&&&&&minifier name="yui"&type="Combres.Minifiers.YuiCssMinifier, Combres"&&&&&&&&param name="CssCompressionType"&type="string"&value="/zwb7926/p/StockYuiCompressor"&/&&&&&&&&param name="ColumnWidth"&type="int"&value="/zwb7926/p/-1"&/&&&&&&/minifier&&&&/cssMinifiers&&&&jsMinifiers&&&&&&minifier name="msajax"&type="Combres.Minifiers.MSAjaxJSMinifier, Combres"&&&&binderType="Combres.Binders.SimpleObjectBinder, Combres"&&&&&&&&param name="CollapseToLiteral"&type="bool"&value="/zwb7926/p/true"&/&&&&&&&&param name="EvalsAreSafe"&type="bool"&value="/zwb7926/p/true"&/&&&&&&&&param name="MacSafariQuirks"&type="bool"&value="/zwb7926/p/true"&/&&&&&&&&param name="CatchAsLocal"&type="bool"&value="/zwb7926/p/true"&/&&&&&&&&param name="LocalRenaming"&type="string"&value="/zwb7926/p/CrunchAll"&/&&&&&&&&param name="OutputMode"&type="string"&value="/zwb7926/p/SingleLine"&/&&&&&&&&param name="RemoveUnneededCode"&type="bool"&value="/zwb7926/p/true"&/&&&&&&&&param name="StripDebugStatements"&type="bool"&value="/zwb7926/p/true"&/&&&&&&/minifier&&&&/jsMinifiers&&&&!--defaultDuration 默认缓存的时间，单位为天数--&&&&!--defaultVersion 合并后的资源版本，在你修改了资源文件后需要对版本进行修改，你可以指定auto或者手动设置一个版本号--&&&&!--defaultDebugEnabled 调试的模式，为true时那么资源文件不进行压缩，开发时可以设置成true，上线后设置成false--&&&&resourceSets url="~/combres.axd"&&&&&&&&&&&&&&&&defaultDuration="30"&&&&&&&&&&&&&&&&defaultVersion="auto"&&&&&&&&&&&&&&&&defaultDebugEnabled="false"&&&&&&&&&&&&&&&&defaultIgnorePipelineWhenDebug="true"&&&&&&&&&&&&&&&&localChangeMonitorInterval="30"&&&&&&&&&&&&&&&&remoteChangeMonitorInterval="60"&&&&&&&&&&&&&&&&&&&&&&resourceSet name="siteCss"&type="css"&minifierRef="yui"&&span style="background-color: #99cc00;"&&&&&& &resource path="~/Content/Site.css"&/&&&&&&&&resource path="~/Content/StyleSheet1.css"&/&&&&&&/resourceSet&&&&&&resourceSet name="siteJs"&type="js"&&&&&&&&resource path="~/Scripts/jquery-1.5.1.min.js"&minifierRef="msajax"&&/&&&&&&&&resource path="~/Scripts/test.js"&&minifierRef="off"&&/&&/span&&&&&&/resourceSet&&&&/resourceSets&&/combres&&&&这是我修改之后的文件配置。主要是resourceSet节点下的配置。&!--defaultDuration 默认缓存的时间，单位为天数--&&!--defaultVersion 合并后的资源版本，在你修改了资源文件后需要对版本进行修改，你可以指定auto或者手动设置一个版本号--&&!--defaultDebugEnabled 调试的模式，为true时那么资源文件不进行压缩，开发时可以设置成true，上线后设置成false--&第四步 删除 AppStart/Combres.cs，移除Activetor的引用。打开 global.asax 添加 using C的引用。在 RegisterRoutes&第一行添加routes.AddCombresRoute("Combres")第五步 在需要的视图文件进行引用，先来看一下未做修改前的文件内容&!DOCTYPE html&&html&&head&&&&&&title&@ViewBag.Title&/title&&&&&&link href="/zwb7926/p/@Url.Content("~/Content/Site.css")"&rel="stylesheet"&type="text/css"&/&&&&&&link href="/zwb7926/p/@Url.Content("~/Content/StyleSheet1.css")"&rel="stylesheet"&type="text/css"&/&&&&&&script src="/zwb7926/p/@Url.Content("~/Scripts/jquery-1.5.1.min.js")"&type="text/javascript"&&/script&&&&&&script src="/zwb7926/p/@Url.Content("~/Scripts/test.js")"&type="text/javascript"&&/script&&/head&&&接下来是修改之后的@using&Combres.M&!DOCTYPE html&&html&&head&&&&&&title&@ViewBag.Title&/title&&&&&@bresLink("siteCss")&&&&@bresLink("siteJs")&/head&&siteCss和sitJs已经在上面App_Data/combres.xml进行过配置。最后一步运行查看，这是未修改之前的接下来看修改之后的效果很明显，原来的四次请求，变成了两次请求。&&示例代码下载&顶一下(0)0%踩一下(0)0%------分隔线------上一篇： 下一篇： 栏目列表推荐内容FatMouse' Trade Time Limit:
MS (Java/Others)Memory Limit:
1 import java.io.BufferedInputS 2 import java.io.F 3 import java.io.IOE...
应用程序性能管理系统（Application Performance Management，APM）提供商...
做完整数划分那题后，现在感觉这道题很简单，状态转移方程为...级联样式表概述
级联样式表概述
Visual Web Developer级联样式表概述
级联样式表 (CSS) 包含应用于网页中的元素的样式规则。CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则，只要 Web 浏览器遇到一个元素实例，或遇到一个分配给某个特定样式类的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。 CSS 样式可以通过内联方式放置在单个 HTML 元素内，也可以在网页 head 部分的 style 块内加以分组，或从单独的样式表中导入。如果样式是在单独的样式表中创建的，则可以将多个网页链接到该样式表，从而为整个网站提供一个通用的外观。如果使用 CSS 设置 Web 控件的样式，则应使用
属性来定义要与控件或控件元素关联的 CSS 类名，然后在样式表中为这些控件或控件元素指定样式时引用该类名。 注意
并不是所有浏览器都支持 CSS 样式。仅支持 HTML 3.2 或更早版本的较旧的 Web 浏览器会忽略 CSS 样式，另外，对移动设备上的浏览器的支持也不尽相同。可以在 Visual Studio .NET 中选择这样一种浏览器架构，该架构会验证要使用的样式并在“源”视图中为样式提供 IntelliSense 功能。有关详细信息，请参见
每个 CSS 样式规则都有两个主要部分：选择器（如 h1）和声明（如 color:red）。声明中包含一个属性 (color) 和该属性的值 (red)。语法如下所示：
Selector { property : property2 : value2}
例如一条说明“将 &h1&&/h1& 标记内的所有文本居中显示，并采用红色字体颜色”的简单 CSS 样式规则可以写成：
H1 {text-align: color:}
CSS 样式规则可以在网页的 head 元素中的 style 块内定义。下面的代码示例定义一个 CSS 样式规则并将该样式规则应用于网页上的所有 h1 元素：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&title&HTML 4.0 CSS Element Style Example&/title&
&style type="text/css"&
h1{text-align: color:}
&h1&This text is centered and red&/h1&
在此网页上，出现在 &h1&&/h1& 标记内的任何文本都将居中并显示为红色。无需为文档中出现的每个 &h1& 标记重新分配这些样式属性。如果想更改 &h1&&/h1& 标记内所有文本的颜色（或任何其他属性），只需简单地编辑一条样式规则即可。
CSS 样式规则从一定意义上讲是“级联”的，即全局样式规则会一直应用于 HTML 元素，直到有局部样式规则将其取代为止。一般而言，局部样式规则的优先级高于通用样式规则。举例说明此中的含义：网页中的 style 块中定义的样式会覆盖在外部样式表中定义的样式。同样，在页上单个 HTML 元素中定义的内联样式会覆盖在其他位置为该同一元素定义的任何样式。
在局部样式应用于元素之后，全局样式规则中不与局部 CSS 样式规则冲突的部分继续应用于这些元素。在上一节的代码示例中，控制 h1 元素中的文本的局部 CSS 样式将替代某些 Web 浏览器中用于 h1 文本的全局样式规则（使 h1 文本居中并显示为红色），但这些局部样式并不更改所有的可用样式（如字体特征）。全局样式规则和局部样式规则都按照该顺序应用，其结果是该页中的所有 h1 文本都以较大的红色加粗字体居中显示。
使用 ASP.NET 可以定义主题，主题是 Web 服务器控件、样式表规则和图像的属性设置的组合。通过将主题应用于网站，可以为网站中的所有页指定一致的外观。 主题与样式类似，因为它们都为页上的元素定义一组全局特征集。但是，与 style 块或样式表中的样式不同，可以控制主题设置的优先级。默认情况下，当主题应用于页或网站时，主题中的样式和其他属性将优先于在本地定义的样式。这种行为与样式的正常应用方式截然不同。此行为的设计意义在于，它允许将主题应用于现有页（包括那些带有本地定义的样式的页），并为不同的页设置相同的外观。 您还可以将主题作为样式表主题应用。在这种情况下，主题中定义的样式和属性的应用方式与 CSS 样式的应用方式相同 -- 局部样式优先于主题中定义的样式。有关更多信息，请参见
可以定义通过标记名称（如 h1）应用于标记的样式。若要为同一元素创建不同的样式，或为不同元素创建相同的样式，可以创建 CSS 类。类定义样式的方式与任何其他样式定义相同。但是，在前一种定义中要为样式提供一个名称。若要将样式应用于元素，需要将样式名称指定为标记的 class 属性。例如，下面的代码示例是类 head2 的一个样式定义：
.head2 {font-size:14 text-align: color: font-weight: font-style:}
若要以内联方式应用这种样式，请将 class 属性添加到一个支持内联样式的标记中，如下面的代码示例所示。
&div class="head2"&
head2 是通过句点 (.) 字符定义为类的。只需按如下方式声明 head2，即可将其定义为 h1 标记的类：
H1.head2 {font-size:14 text-align: color: font-weight: font-style:}
外部样式表是一个具有 .css 文件扩展名的纯文本文件，仅包含样式规则。使用 link 元素可以将样式表链接到网页，如下面的代码示例所示。
&link rel="stylesheet" type="text/css" href="Mystyles.css" /&
link 元素将外部样式表 Mystyles.css 中的样式规则应用于页。
外部样式表中列出的样式规则的书写形式与放置在 style 块中的形式一样，不同的是样式规则的两边没有 &style& &/style& 标记，如下面的代码示例所示
h1 { text-align: color: }
.head2 { font-size:14 text-align: color: font-weight: font-style: }
可以将多个 HTML 页链接到同一外部样式表，从而为整个网站应用一致的样式。样式表将格式设置规则与内容分开，从而大大方便了样式规则的定位和编辑。
不是 IT 专业人员？
Microsoft 正在进行一项网上调查，以了解您对 网站的意见。如果您选择参加，我们将会在您离开 网站时向您显示该网上调查。是否要参加？(基于Ext&JS&4.2.1版本)UI组件学习ExtJS就是学习组件的使用。ExtJS4对框架进行了重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件。ExtJs4的组件体系中有将近100种组件，而这些组件又可以大致分为四大类，即容器类组件、工具栏及菜单栏组件、表单及元素组件、其他组件。theme主题ExtJs4引入了全新的主题系统，采用Sass和Compass技术，提供了标准的主题模板，通过对主题模板的简单定制就可以创造出丰富多彩的各种主题。Sass和Compass概述SassSass样式表语言是CSS的一个扩展，为CSS提供了变量、内嵌规则、混入（mixins）、选择器继承等特性，在最新的Sass3中100%兼容CSS3，语法文件也升级为SCSS（Sassy&CSS），每一个有效的CSS3文件也是有效的SCSS文件，这种兼容性降低了学习成本，开发人员可以平稳的由CSS过渡到Sass的开发。Sass样式表语言为CSS级联样式表提供了编程的能力，现在我们可以在Sass中定义变量在不同的样式中引用甚至进行计算，定义混入（mixins）在不同的地方进行复用，这些能力都是CSS所不具有的，经过编译之后Sass会输出标准的CSS文件在不同的浏览器中使用。Sass特性：混入(Mixins)&&class中的class；参数混入&&可以传递参数的class，就像函数一样；嵌套规则&&Class中嵌套class，从而减少重复的代码；运算&&CSS中用上数学；颜色功能&&可以编辑颜色；名字空间(namespace)&&分组样式，从而可以被调用；作用域&&局部修改样式；JavaScript&赋值&&在CSS中使用JavaScript表达式赋值。Sass的详细介绍和说明可见：/&CompassCompass是一个基于Ruby的、开源的、用于CSS创作的框架。它使用Sass样式表语言，可以非常容易和高效地构造样式表，同时，Compass内置了大量Web开发中可重用的优秀模式，以便开发者使用。下面用一个简单的等式来展示Compass所发挥的作用：Compass&=&Sass样式表语言&+&大量可重用的优秀CSS模式Compass的详细介绍和说明可见：http://compass-style.org/准备工作(安装运行环境)安装Ruby使用SASS和Compass需要用到Ruby，可以到http://rubyinstaller.org/下载Ruby的安装包，下载后的文件是&rubyinstaller-1.9.3-p429.exe&。（注意，不要下载最新版Ruby2.0.0-p195，不然后面开发中会由于版本问题出错。Ruby&1.9.3-p429就可以。）注意将安装目录上的3个选项都选上。在开始菜单Ruby程序组下，单击&Start&Command&Prompt&with&Ruby&。进入Ruby的命令行界面。输入 ruby&&v 出现版本信息，说明Ruby运行环境安装成功。安装Compass和Sass要使用Compass，首先要在Ruby中安装框架。在开始菜单Ruby程序组下，单击&Start&Command&Prompt&with&Ruby&，显示命令提示窗口。在命令行输入以下命令开始安装Compass：gem&install&compass（该命令可以自动远程安装Compass相关文档到本地文件夹中，由于采用远程安装的方式，因此安装时间较长，请耐心等待。）在命令行中执行：compass&&v&和&sass&&v可以分别查看当前系统中已安装的版本信息。到这里，已经完成了Sass和Compass的安装。Compass项目（Sass编译成Css）1.项目初始化接下来，要创建一个你的Compass项目，假定它的名字叫做myproject，那么在命令行键入：　　compass&create&myproject当前目录中就会生成一个myproject子目录。进入该目录：cd&myproject你会看到，里面有一个config.rb文件，这是你的项目的配置文件。还有两个子目录sass和stylesheets，前者存放Sass源文件，后者存放编译后的css文件。接下来，就可以动手写代码了。2.编译在写代码之前，我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件，只有编译成css文件，才能用在项目上。Compass的编译命令是compass&compile该命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中。默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数。compass&compile&--output-style&compressedCompass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数。compass&compile&--force除了使用命令行参数，还可以在配置文件config.rb中指定编译模式。output_style&=&:expanded:expanded模式表示编译后保留原格式，其他值还包括:nested、:compact和:compressed。说明：*&nested：嵌套缩进的css代码，它是默认值。*&expanded：没有缩进的、扩展的css代码。*&compact：简洁格式的css代码。*&compressed：压缩后的css代码。进入生产阶段后，就要改为:compressed模式。output_style&=&:compressed也可以通过指定environment的值（:production或者:development），智能判断编译模式。environment&=&:developmentoutput_style&=&(environment&==&:production)&?&:compressed&:&:expanded在命令行模式下，除了一次性编译命令，compass还有自动编译命令compass&watch运行该命令后，只要scss文件发生变化，就会被自动编译成css文件。更多的compass命令行用法，请参考官方文档。Compass、Sass与eclipse集成通过上面的配置，我们可以通过文本编译器等编辑好Sass文件后，再通过相应的目录结构通过Ruby将Sass编译成css，再复制粘贴到eclipse中我们的工程内，进行开发。可以看出这个过程比较繁琐。那么，如何在eclipse中可以直接编辑Sass文件，并能自动编译成css被工程应用?下面就是对Compass、Sass与eclipse的集成研究。1&确认ant已经安装2&打开工程的&properties&，选择&Builders&，然后点击&&New&&&按钮3&选择&Ant&Builder&，点击&OK&4&输入名称&pile&，在&Main&Tab页中，点击&Browse&Workspace&来选择已放入工程中的build.文件。5&选择&Targets&Tab页，在Auto-Build中点击&Set&Targets&按钮，选择&pile&来使用Compass（&&pile&只是用Sass），点击&OK&6&选择&Build&Options&Tab页，点击&Select&Resources&按钮，选择Sass文件目录，点击&Finish&，再点击&OK&。现在当编辑Sass文件后，&css文件将会自动的被创建或更新。Sencha&CMD安装Sencha&CMD是打包和部署ExtJs和Sencha&Touch应用的命令行工具。为了开发ExtJs4.2的主题，你必须安装Sencha&CMD3.1或更高的版本。安装Java&Run-time&Environment&or&JRE，要求版本&=6.0。为了编辑样式，需要Compass、Sass，所以需要安装Ruby。注意，不要下载最新版Ruby2.0.0-p195，不然后面开发中会由于版本问题出错。Ruby&1.9.3-p429就可以。下载Sencha&Cmd安装包进行安装。下载并解压Ext&JS&SDK。ExtJS自定义主题样式开发创建工作空间（注意，目录名称等不要用中文，特殊符号最好也不要用，否则会出错）打开系统cmd命令行窗口，定位到SDK解压的目录。输入sencha&-sdk&d:/ExtJs4-App/ext-4.2.1.883&generate&workspace&my-workspace创建了一个包含自定义主题包package名为my-workspace的工作空间。这个命令将Ext&JS&SDK和package关联到您的工作区中,这样，主题和应用程序可以找到他们所需的依赖项。这个命令生成的主题和应用程序必须执行在工作区目录中，因此改变你的工作目录到新的&my-workspace&目录：cd&my-workspace你应该在&my-workspace&文件夹下看到两个文件夹：l&&&ext&：包含Ext&JS&SDKl&&&package&包含Ext&JS语言环境和主题包生成一个应用程序进行测试的主题创建一个自定义主题之前，我们需要设置一个方法来测试主题。最好的测试方法是在一个应用程序中使用它。在&my-workspace&目录下运行以下命令：sencha&-sdk&ext&generate&app&ThemeDemoApp&theme-demo-app这告诉Sencha&Cmd在一个新的子目录&theme-demo-app&中生成一个名为ThemeDemoApp的应用程序，并同时关联"&Ext&"目录下的Ext&JS&SDK。现在让我们构建应用程序：cd&theme-demo-appsencha&app&build有两种方法可以运行您的应用程序:&　7&开发模式：通过浏览器打开&theme-demo-app/index.html&。这个是没有进行资源（源文件）压缩的，易于调试。8&产品模式：通过浏览器打开&build/ThemeDemoApp/production/index.html&。这个是为了给应用提供更小的内存占用和更好的性能，进行了资源（源文件）压缩。生成主题包和文件结构Sencha&Cmd允许自动的生成主题包和文件结构。在&theme-demo-app&下运行以下命令：sencha&generate&theme&my-custom-theme这是告诉Sencha&Cmd在当前工作空间下创建一个名为&my-custom-theme&的主题包。让我们看一看它的内容：l&&&package.json&&&这是包属性文件。它告诉Sencha&Cmd一些包的信息，如&name,&version,&and&dependencies&&(其他包所需要的配置)。　l&&&sass/&&&这个目录包含所有关于主题的sass文件。sass文件分为三个主要部分:1)&&&&&&sass/var/&&&包含sass变量；　2)&&&&&&sass/src/&&&包含sass规则和UI混合调用，它们可以使用&sass/var/&下的变量；&　　3)&&&&&&sass/etc/&&&包含额外的公用功能或混入在&sass/var/&和&sass/src/&中的文件，这些文件应该是结构化匹配的组件类路径。例如，&Ext.panel.Panel的样式变量应放置在一个命名为&sass/var/panel/Panel.scss&的文件内。　　l&&&resources/&&&包含主题需要的图像和其他静态资源。　　l&&&overrides/&&&包含一些替换Ext&JS组件类（对组件进行主题化的类）的JavaScript。配置主题继承主题包通常是这样具有一个非常重要的、附加功能的特殊的包，它们可以继承自其他的主题包。新版本Ext&Js&4.2中利用主题包的这一特性来创建它的主题层次结构：&每个主题包必须从Base主题扩展。创建自定义主题的下一步是找出从哪个主题进行扩展。在工作空间中可以看到以下主题包：l&&"ext-theme-base"--这个包是其他主题的基本主题，它是唯一一个没有父主题的主题包。它包含了设置CSS规则的最少值，这些值是让Ext&JS组件和布局正确工作所必需的的内容。"ext-theme-base"的样式规则在派生的主题中是不可配置的，应该避免覆盖由这个主题创建的任何样式规则。l&&"ext-theme-neutral"--从"ext-theme-base"扩展而来，包含了绝大多数的可配置的样式规则。大多数的变量是用于配置在"ext-theme-neutral"中定义的Ext&JS组件样式。这些变量可以被自定义主题替换。l&&"ext-theme-classic"--默认主题。从"ext-theme-neutral"扩展而来。l&&"ext-theme-gray"--从"ext-theme-classic"扩展而来l&&"ext-theme-access"--从"ext-theme-classic"扩展而来。l&&"ext-theme-neptune"--从"ext-theme-neutral"扩展而来。建议使用"ext-theme-neptune"或"ext-theme-classic"作为自定义主题扩展的开始节点。这是因为，这些主题包含创建一个具有吸引力并立即可用的主题的所有必要的代码。"ext-theme-neutral"是一个非常抽象的主题，不应该直接用于扩展。基于"ext-theme-neutral"进行自定义主题的扩展，需要数以百计的变量覆盖和过多的工作量，而且可能只有非常高级的主题开发者才能进行这项工作，反之，使用"ext-theme-neptune"或"ext-theme-classic"可以通过简单地改变几个变量在几分钟内启动并运行。另外你可以覆盖"ext-theme-gray"或"ext-theme-access"，如果它们可以为自定义主题提供一个更理想的起点。例如，我们创建一个由"ext-theme-neptune"扩展的自定义主题。首先需要替换目录"packages/my-custom-theme/package.json"："extend":&"ext-theme-classic"&为"extend":&"ext-theme-neptune"你现在需要更新您的应用程序。确保正确的主题JavaScript文件都包含在应用程序&bootstrap.js&中，这样应用程序就可以在开发模式下运行。在"theme-demo-app"目录下运行以下命令。sencha&app&refresh配置全局主题变量现在已经建立了自己的主题包，可以开始修改主题外观。首先修改能够派生出ExtJs组件公有颜色的基础颜色。在"my-custom-theme/sass/var/"下，创建一个名为Component.scss的文件，在文件中输入：$base-color:&#317040&!如果你想让你的自定义主题是可扩展的，一定要在所有变量末尾配置!default。没有!default你将不能覆盖一个派生主题的变量，因为Sencha&Cmd变量遵循&反向&规则&&大多数派生样式第一，基本样式最后。更多的!default信息可参考：Variable&Defaults。完整的Ext&JS全局SASS变量列表请参考：Global_CSS。构建包为了使所有自定义的样式规则生成css文件，需要在"packages/my-custom-theme/"目录下运行命令：sencha&package&build这将在package下构建一个目录。在&"my-custom-theme/build/resources"下你会发现一个文件命名为&my-custom-theme-all.css。这个文件包含所有Ext&JS组件的样式规则。你可以直接在应用程序中运用这个文件，但这并不可取，因为&all&文件包含所有的样式，但是Ext&JS组件和大多数应用程序只使用Ext&JS组件的一个子集。当你构建一个应用程序时，Sencha&Cmd能够过滤掉未使用的CSS样式规则，但是首先我们需要配置测试程序使用自定义主题。在一个应用程序使用一个主题为刚刚创建的自定义主题配置测试应用程序。找到theme-demo-app/.sencha/app/sencha.cfgapp.theme=ext-theme-classic修改为app.theme=my-custom-theme如果你已经运行了一个构建使用经典主题的应用程序，你应该清理构建目录。从theme-demo-app运行:sencha&ant&clean接着构建应用：sencha&app&build在浏览器中打开"theme-demo-app/index.html"查看效果配置组件的变量每一个Ext&JS组件都有一个全局变量的列表,可以用来配置其外观。下面，我们来改变面板标题的字体类型。创建文件"packages/my-custom-theme/sass/var/panel/Panel.scss"，代码如下：$panel-header-font-family:&Times&New&Roman&!在&theme-demo-app&下运行：sencha&app&build在浏览器中打开"theme-demo-app/index.html"查看效果在API文档的每一节&"CSS&Variables"中，有组件SASS变量的详细列表。创建自定义组件UI在ExtJs框架中，每一个组件都有一个配置界面（默认为&default&）。这个属性可以被配置在单个组件实例中，区别于其他组件的相同类型，给他们提供一个不同的外观。&创建文件"packages/my-custom-theme/sass/src/panel/Panel.scss"，代码如下：@include&extjs-panel-ui(&&&&$ui-label:&'highlight-framed',&&&&$ui-header-background-color:&red,&&&&$ui-border-color:red,&&&&$ui-header-border-color:red,&&&&$ui-body-border-color:red,&&&&$ui-border-width:5px,&&&&$ui-border-radius:5px);打开"theme-demo-app/app/view/Viewport.js"，修改代码如下：Ext.define('ThemeDemoApp.view.Viewport',&{extend&:&'Ext.container.Viewport',requires:['Ext.layout.container.Border','ThemeDemoApp.view.Main'],layout&:&{type&:&'border'},items&:&[{//&default&UIregion&:&'west',xtype&:&'panel',title&:&'West',split&:&true,width&:&150},&{//&custom&"highlight"&UIregion&:&'center',xtype&:&'panel',layout&:&'fit',bodyPadding&:&20,items&:&[{xtype&:&'panel',ui&:&'highlight',frame&:&true,bodyPadding&:&10,title&:&'Highlight&Panel'}]},&{//&neptune&"light"&UIregion&:&'east',xtype&:&'panel',ui&:&'light',title&:&'East',split&:&true,width&:&150}]});&在&"theme-demo-app"&下运行程序：sencha&app&build在浏览器中打开"theme-demo-app/index.html"查看效果虽然UI是一个方便的方法,可以混合多种外观配置为一个组件,他们不应该被过度使用。因为每次调用UI&mixin会生成额外的CSS规则,无偿调用UI&mixin会产生过大的CSS文件。另外重要一点是要记住当调用UI&mixin时，是通过其命名参数调用mixin，不是没有参数值的有序列表。尽管SASS都支持这两种形式，最好使用这种形式:@include&extjs-component-ui(&&&&$ui-foo:&foo,&&&&$ui-bar:&bar);避免下面的形式：@include&extjs-component-ui(foo,&bar);因为mixin参数的复杂性和数量有可能变动，如新增或删除一个参数，那么后一种调用方式就会失效。修改图像资源所有必需的图像资源默认是继承父主题的,但在某些情况下,您可能需要覆盖一个图像。这可以通过把所需的图像在"my-custom-theme/resources/images/"下覆盖相同名称的图像。例如,让我们修改弹出窗口组件的信息图标。保存"packages/my-custom-theme/resources/images/shared/icon-info.png"现在使用自定义图标，修改测试应用程序显示一个消息框。在应用程序窗口的highlight&panel&添加items("theme-demo-app/app/view/Viewport.js"):requires:&[&&&&...&&&&'Ext.window.MessageBox',&&&&...],...title:&'Highlight&Panel',items:&[{&&&&xtype:&'button',&&&&text:&'Show&Message',&&&&handler:&function()&{&&&&&&&&Ext.Msg.show({&&&&&&&&&&&&title:&'Info',&&&&&&&&&&&&msg:&'Message&Box&with&custom&icon',&&&&&&&&&&&&buttons:&Ext.MessageBox.OK,&&&&&&&&&&&&icon:&&&&&&&&&});&&&&}}]...构建应用程序，在浏览器中查看效果为IE中的CSS3效果切割图像在许多情况下,当创建新的用户界面时，可能包括背景渐变或圆角。不幸的是,不是所有浏览器都支持CSS3属性,所以我们必须使用图像来弥补。Sencha&Cmd能够自动切割这些图片给你。要做到这一点,我们需要告诉Sencha&Cmd哪些组件需要切片。这些切片配置文件都包含在每个主题的&"sass/example/"目录下。参考"packages/ext-theme-base/sass/example/"："shortcuts.js"--这个文件包含了组件类型的基本配置,可以切割。大多数自定义主题不需要包含"shortcuts.js"文件;除非你的主题包括自定义组件样式。你的样式继承所有的基本样式的快捷键定义,也可以添加额外的快捷定义，需要在&"shortcuts.js"文件中调用Ext.theme.addShortcuts()函数。　　"manifest.js"--这个文件包含能够生成切片图像的组件UI列表。可以从父主题继承所有的清单条目,也可以在"manifest.js"中通过调用Ext.theme.addManifest()函数添加自己的清单条目。　　"theme.html"--这个文件是用来渲染在"manifest.js"中定义的文件。&为"highlight"&panel创建圆角切片，&创建"packages/my-custom-theme/sass/example/manifest.js"&，代码如下：Ext.theme.addManifest(&&&&{&&&&&&&&xtype:&'panel',&&&&&&&&ui:&'highlight'&&&&});编辑"packages/my-custom-theme/sass/example/theme.html"添加以下脚本标签：&!--&Required&because&Sencha&Cmd&doesn't&currently&add&manifest.js&from&parent&themes&--&&script&src="../../../ext-theme-neptune/sass/example/manifest.js"&&/script&&!--&Your&theme's&manifest.js&file&--&&script&src="manifest.js"&&/script&为了能够在构建应用程序时将UI切片，必须在"theme-demo-app/sass/example/theme.html"中添加两个脚本标记：&script&type="text/javascript"&src="../../../packages/ext-theme-neptune/sass/example/manifest.js"&&/script&&script&type="text/javascript"&src="../../../packages/my-custom-theme/sass/example/manifest.js"&&/script&构建应用程序，在IE8及以下版本浏览，可以看到&"highlight"&panel&展示的是圆角，和在IE9及其他浏览器的CSS3效果呈现一致。覆盖主题JS有时一个主题可以通过配置JS改变组件外观。通过覆盖主题包中的JavaScript就可以实现。如，创建"packages/my-custom-theme/overrides/panel/Panel.js"&，代码如下：Ext.define('MyCustomTheme.panel.Panel',&{&&&&override:&'Ext.panel.Panel',&&&&titleAlign:&'center'});现在需要构建主题包来让"packages/my-custom-theme/build/my-custom-theme.js"包含这个新的覆盖文件。在"packages/my-custom-theme/"&下运行：sencha&package&build现在应该刷新应用程序,这样在开发模式下运行应用程序会包括该主题的JS覆盖文件。在&"theme-demo-app"下运行：sencha&app&refresh构建应用：sencha&app&build在浏览器中打开"theme-demo-app/index.html"观看效果。（原文地址：/veralee/archive//3167289.html）
ExtJS自定义主题(theme)样式详解_Javascript教程_Java学院_希赛l extthemeneutral从extthemebase扩展而来包含了绝大多数的可配置的样式规则大多数的变量是用于配置在extthemeneutral中定义的Ext JS组件样式这些变量可以被自定义主题...ExtJS4.2.1自定义主题(theme)样式-JavaScript-第七城市 这告诉Sencha Cmd在一个新的子目录“theme-demo-app”中生成一个名为Theme... ExtJS4.2.1自定义主题(theme)样式详解 分享27款最佳的复古风格 WordPress ...自定义样式(style)与主题(theme)_百度文库&评分:4/5&3页 自定义样式(style)与主题(theme)_IT/计算机_专业资料。android应用开发Android 提供了许多可视的组件。通过自定义样式和主题,可以避免用这些组件开发的应 用看上去...Android主题(theme)与样式(style) - Android移动开发技术文章_... 主题:Theme是针对窗体级别的,改变窗体样式。在application和activity标签下使用。 样式:Style是针对窗体元素级别的,改变指定控件或者Layout的样式。在具体...演练Ext JS 4.2自定义主题 - 黄灯桥的专栏 - 博客频道 - CSDN详解Orchard主题(Theme) - 二十四画生 - 博客园修改主题theme(系统自带样式总结) - harrysmithliu的日志 - 易...Android样式和主题(style&theme)研究_百度文库&评分:3/5&2页(style&theme)研究 android 样式和主题 (style&theme) android 中的样式和 CSS 样式作用相似,都是用于为界面元素定义显示风格,它是一个包含一个或者多个 view ...Android进修(四) 样式(Style)和主题(Theme),上海站建设|专业... Android的样式(Style)和主题(Theme)文件就比如WEB开辟中的CSS一样,可以实现UI界面的风格同一经管,这和Windows平台的XAML格局(Silverlight、WPF)类似。比如我们碰到...Asp主题(theme)和皮肤(skin)的使用 - 来老师的专栏 - 博客...日历控件等,css文件无法灵活的控制,这就需要微软专门为服务器端控件提供的主题和...55 1、Theme:外观文件-&页面控件自定义样式-&css文件56 57 2、Stylesheet...android设置主题和自定义主题的方法 - IAlexanderI的专栏 - 博客...ExtJS 4.2.1学习笔记(二)——主题theme - veralee - 博客园ExtJs4.2.1 自定义样式风格 - shangxin200093的专栏 - 博客频道 -...自定义样式风格我是看的这篇文章。 按照下面的操作一步步走的时候我碰到了许多...主题推荐 extjs4 浏览器 搜索 界面 extjs 猜你在找 查看评论 * 以上用户言论...android 自定义主题样式 - dongge825的专栏 - 博客频道 - CSDN这一篇文章将让我们一起翻开Android系统源代码来揭开困扰大家的关于主题使用以及自定义的谜团。 一、样式(Style)与主题(Theme) 在Android的应用的资源文件中有一个......Theme Restorer汉化版:让火狐Australis界面恢复为旧主题样式 Firefox 28.0a 已经使用了新主题 Australis,但是它让以往经典主题元素消失的太多,Classic Theme Restorer扩展可以恢复火狐按钮、小图标模式、自定义工具栏、书签按钮...XP非theme格式的主题怎么使用? - 已解决 - 搜狗问问4个回答 - 最新回答: 日在C盘windows system32下有一个文件夹就是放主题的! 具体番茄花园和深山红叶,等等都不太一样,你搜一下就出来了! 下载来安装起来自动就有了 上面的...为Octopress修改主题和自定义样式 - 雁起平沙的络日志 修改样式 - 学习如何修改颜色和布局,控制样式 1. 主题 不久前发布的 ...press的所有颜色都是以Sass变量的形式在 /sass/base/_theme.scss文件中定义。...Moodle: 如何修改moodle——theme主题皮肤 - Just Code - ITeye...Moodle中Theme表示主题风格(页面皮肤),就是利用Theme,管理员可以定义站点的主题风格,课程创建者可以定义课程的主题风格,学习者可以定义自己喜欢的主题风格。 特点每个...iStudio Theme Release - Xu Design【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 ...主题: 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar ... (3) Android 系统定义的 Theme [html] view plaincopy在CODE上查看代码片...Jenkins Server主题自定义 | 扛一肩记忆ExtJS酒店管理-毕业论文 - 豆丁《基于 ExtJS 的小型酒店管理系统》均系本人独立完成,没有抄袭行为,凡涉及其他...若要动态调整主版页面 (Master Page)、主题 (Theme) 时,要在这个事件中调整...ckook - 稀酷客稀酷客首页 下载说明 关注莎莎的新浪微博 公告 ---tag--- Asp/Asp Android Windows iphone 百度 腾讯 私信 提问 投稿 归档 RSS 关于 ...Android高级开发实战——UI、NDK与安全(含CD光盘1张)JumbotCms v4.2.1源码,新闻文章,Asp源码 |—51aspxextjs4.2 ext.jsb3-第一范文 extjs4.2更换主题 'ext-all.css' },{ xtype : 'menucheckitem', group : 'theme', text ...(linkid,newcss,365);//保存到cookie中 } } 3.在引用 ...Flex学习笔记_甜梦文库|文库百度|百度文库下载|百度文档|新浪文库...4.1.5.1. DataGrid:类似于 ExtJs 的 Grid 组件...嵌入字体是即使是同一字体 的不同样式也要分开定义... theme-color:#6633 } .imgPanel{ border-...WordPress实践:自定义theme(01) - Qi Fei - 博客园Qi Fei's Blog ExtJS教程 优秀是一种习惯 ExtJS、Ext交流群:8 ... 这个时候wordpress管理界面,就能够看到我们刚刚添加的主题信息了。...创建自定义的jQuery移动主题 - yuzhongwusan - 博客园下面是一个例子,给页头工具栏指派一个自定义的主题: & div data-role=&header& data-theme=&f&& & h1&Page Title& /h1& & /div& 若要样式化这一...Android创建自定义dialog方法详解-样式去掉阴影效果 - Fast... 从构造器来说ProgressDialog(Context context, int theme)很明显需要个样式主题文件,我们可以在value文件下自定义一个样式文件。 从外观上需要个动态效果控件和文本...apkplug主题皮肤切换之自定义样式-05 - o25的专栏 - 博客...[]作者：o25 - 来源：csdn - 发表时间：日 根据上一篇文章讲解我们可以判定通用主题有其局限性,在很多情况下我们需要替换的...(mcontext,ThemeControl.class.getName()); //自定义控件样式切换 agent.get...基于ExtJS 4.2.1 + Hibernate 4.1.7 + Spring MVC 3.2.8 的通用...为Octopress修改主题和自定义样式为Octopress修改主题和自定义样式 Jan 7th, 2012 本文翻译自Octopress的帮助... Octopress的所有颜色都是以Sass变量的形式在 /sass/base/_theme.scss文件中...