`
ycy303
  • 浏览: 195632 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

为LinkButton组件添加icon(图标)并设定icon和label的位置

    博客分类:
  • flex
阅读更多

来自:http://blog.flexexamples.com/2008/09/05/positioning-icons-on-a-linkbutton-control-in-flex/

为LinkButton添加图标的方法很简单,因为LinkButton有icon属性,我们只要为icon属性绑定一个图片就可以了。

调整icon和label的相对位置,我们只要设置labelPlacement属性就可以了。

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/05/positioning-icons-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:String>{ButtonLabelPlacement.LEFT}</mx:String>
        <mx:String>{ButtonLabelPlacement.RIGHT}</mx:String>
        <mx:String>{ButtonLabelPlacement.TOP}</mx:String>
        <mx:String>{ButtonLabelPlacement.BOTTOM}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            labelPlacement="{comboBox.selectedItem}"
            icon="@Embed('assets/LinkButton.png')" />

</mx:Application>

 

分享到:
评论

相关推荐

    EasyUI 扩展小图标Icon带CSS样式

    它提供了丰富的组件,如表格、对话框、菜单、按钮、表单等,而图标(Icon)是用户界面中的重要元素,用于增强用户体验和交互性。在默认情况下,EasyUI 提供了一套基础的图标集合,但可能无法满足所有设计需求,因此...

    flex + java 初学者 笔记 学习资料

    1. Button:按钮组件,可以设置文字和图标,图标通过`icon="@Embed('图片路径')"`来指定。 2. Checkbox:复选框,由文字和状态图标组成,继承自Button。 3. LinkButton:仅显示文字的无边框、无背景的按钮。 4. ...

    Jquery easyUI插件以及使用方法

    通过学习DEMO,你可以了解如何在实际项目中应用这些组件,并参考教程深入理解其工作原理和配置选项。实践是最好的老师,尝试将这些组件应用到你的项目中,你将更熟练地掌握jQuery EasyUI的使用。 总之,jQuery ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹出窗口。 +在aspx页面中必须显示的声明控件的集合属性(比如Tabs(TabStrip), Items(PanelBase), Nodes(TreeNode))。 ...

    easyui培训文档

    (0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="$('#pp').panel('collapse')"&gt;Collapse ;"&gt; &lt;p&gt;Panel Content Here... ``` 此示例展示了如何创建一个带有工具栏的面板。 ##...

    ExtAspNet_v2.3.2_dll

    -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹出窗口。 +在aspx页面中必须显示的声明控件的集合属性(比如Tabs(TabStrip), Items(PanelBase), Nodes(TreeNode))。 ...

    【ASP.NET编程知识】基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用.docx

    (0)" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:'icon-save'"&gt; 上传 (0)" class="easyui-linkbutton" id="btnCancel"&gt; 取消 ``` 4. 配置Uploadify 在JavaScript中...

    jquery easyui

    - **HTML 结构**: 为页面元素添加特定的类名,表示要使用哪个 EasyUI 组件。 - **初始化组件**: 通过 JavaScript 调用对应的组件方法进行初始化配置。 ### 3. 主要组件介绍 - **Dialog**: 对话框组件,可设置标题...

    jquery-easyui

    同时,EasyUI 的组件设计允许开发者方便地扩展和定制新的组件或功能。 ### 5. 结论 jQuery EasyUI 以其强大的组件库、易用性和灵活性,成为了许多开发者构建网页应用的首选工具。通过学习和掌握 EasyUI,我们可以...

    jquery-easyui, jquery-easyui lib , update form http.zip

    假设我们有一个基于jQuery EasyUI的数据管理应用,可以使用以下代码创建一个数据表格并实现数据的添加、编辑和删除: ```html &lt;!DOCTYPE html&gt; &lt;script type="text/javascript" src="path/to/jquery.min.js"&gt;...

    jquery-Easyui引用与例子

    总结来说,jQuery EasyUI 是一个强大的前端框架,为开发者提供了丰富的组件和便捷的API,使得Web应用的开发变得更加高效和简单。通过学习和熟练掌握jQuery EasyUI,开发者可以快速构建出美观、功能丰富的用户界面。

    easyui

    (0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="submitForm()"&gt;Submit function submitForm(){ var f = $('#fm'); if (f.form()){ $.ajax({ url: 'submit.php', data: f.serialize(), ...

    基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

    - 接下来,你需要添加uploadify的JavaScript库和CSS文件: ```html ~/Content/JQueryTools/uploadify/jquery.uploadify.js"&gt; ~/Content/JQueryTools/uploadify/uploadify.css" rel="stylesheet" type="text/css...

    jquery easyui使用心得

    1. **组件库**:EasyUI 提供了一系列预定义的 CSS 样式和 JavaScript 函数,用于创建常见的 UI 元素,如按钮(linkbutton)、表格(datagrid)、面板(panel)、下拉框(combobox)等。 2. **主题支持**:通过不同...

    Login Control

    This includes label captions, validator messages, the size and maxLength of textboxes, style of the label, textbox, text button, link buttons, font name, colors, etc. There are two types of action ...

    轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

    在本文中,我们将深入探讨如何使用...理解并熟练掌握这些概念和组件,可以让你快速构建出具有数据管理功能的Web应用。通过实践和调整,你可以根据具体需求定制更复杂的功能,如分页、排序和过滤,进一步提升用户体验。

Global site tag (gtag.js) - Google Analytics