Styling the Alert control’s nested buttons

本文介绍如何通过设置buttonStyleName属性来自定义Flex中Alert控件的按钮外观,包括颜色、圆角、字体等属性。
The following example shows how you can customize the appearance of the buttons in an Alert control in Flex by setting the buttonStyleName style
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white"
        creationComplete
="init();">

    
<mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: myComicSansMS;
            fontWeight: normal;
        }

        Alert {
            buttonStyleName: myCustomButtonStyleName;
        }

        .myCustomButtonStyleName {
            color: red;
            cornerRadius: 12;
            fontFamily: myComicSansMS;
            fontSize: 10;
            fontWeight: normal;
            textDecoration: underline;
            themeColor: red;
        }
    
</mx:Style>

    
<mx:Script>
        
<![CDATA[
            import mx.controls.Alert;

            private var alert:Alert;

            private function init():void {
                var myMessage:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nDonec tincidunt sollicitudin sem.";
                var myTitle:String = "The quick brown fox jumped over the lazy dog";
                alert = Alert.show(myMessage, myTitle);
            }
        
]]>
    
</mx:Script>

    
<mx:ApplicationControlBar dock="true">
        
<mx:Button label="Launch alert" click="init();" />
    
</mx:ApplicationControlBar>

</mx:Application>





    本文转自 OldHawk  博客园博客,原文链接:http://www.cnblogs.com/taobataoma/archive/2008/01/11/1034727.html,如需转载请自行联系原作者

### 代码生成器对样式进行反优化的原因 当代码生成工具处理样式时,可能会因为多种因素导致最终输出不如预期那样高效或简洁。这些原因可能包括但不限于: - **复杂度增加**:为了支持更多的功能选项或是保持灵活性,生成的CSS文件体积增大,结构变得更为复杂[^1]。 - **冗余规则**:未能有效移除未使用的样式定义,造成不必要的资源浪费和加载时间延长[^2]。 - **缺乏上下文感知能力**:某些情况下,自动化的解决方案无法理解设计意图背后的具体需求,从而引入了额外的选择器或者属性值组合。 针对上述提到的问题,可以采取如下措施来改善由代码生成器带来的样式反优化状况: #### 解决方案一:精简无用样式 通过静态分析工具扫描整个项目中的HTML文档以及关联的JavaScript脚本,识别并删除那些从未被应用过的类名或ID所对应的样式声明。这一步骤有助于减少最终打包后的CSS大小,提高页面渲染速度。 ```javascript // 使用PurgeCSS作为示例库去除死代码 const purgecss = require('purgecss'); new purgecss({ content: ['./src/**/*.html'], css: ['./dist/*.css'] }); ``` #### 解决方案二:采用按需加载机制 对于大型Web应用程序而言,一次性下载全部所需的样式表显然不是最优解法。相反地,可以根据路由变化动态请求特定视图所需要的最小化版本CSS文件,以此降低初始HTTP请求数量及传输字节数。 ```json { "entry": { "home": ["./js/home.js", "./scss/home.scss"], "about": ["./js/about.js", "./scss/about.scss"] } } ``` #### 解决方案三:利用预处理器特性 像Sass这样的CSS扩展语言提供了变量、嵌套等功能,在编写过程中能够更好地组织代码逻辑;编译阶段则会将高级语法转换成浏览器可解析的标准格式,同时还可以借助压缩插件进一步优化输出质量。 ```scss $primary-color: #4CAF50; .button { background-color: $primary-color; &:hover { opacity: 0.8; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值