SAPUI5-Button

原创 2015年07月09日 11:07:47

Button
存在两个类,一个是mobile使用的sap.m.Button,另外一个是sap.ui.commons.Button

sap.ui.commons.Button
这里写图片描述

var oButton1 = new sap.m.Button("But1",{
            text : "Button",
            width : "200px",
            icon : "sap-icon://email",
            activeIcon : "sap-icon://accept",
            type : "Accept",
            enabled : true,
            iconFirst : true,
            tooltip : "This is a test tooltip",
            textDirection : "RTL",
            styled: false,
            press : function() {
                 this.setIcon("sap-icon://accept");
            }
        });     

其中:
type表示按钮的类型,对应sap.m.ButtonType,有Accept 、Back、Default 、Emphasized 、Reject 、Transparent、Unstyled、Up

enabled表示是否可以选择,布尔类型

iconFirst表示图标在前还是文字在前,布尔类型

sap.ui.commons.Button

createContent : function(oController) {
        var oButton1 = new sap.ui.commons.Button("But1",{
            text : "Button",
            width : "200px",
            height : "30px",
            helpId : "help",
            icon : "sap-icon://email",
            iconHovered : "sap-icon://accept",
            iconSelected : "sap-icon://accept",
            iconFirst : true,
            tooltip : "This is a test tooltip",
            styled: false,
            press : function() {
//               this.setIcon("sap-icon://accept");
            }
        });     
        oButton1.addStyleClass("myButton");

其中,需要注意的是,可以自己修改样式,styled要设置为false
新建css文件

.myButton {
    background-color: #e3fa2e;
}

HTML中添加

<link rel="stylesheet" href="css/style.css">

修改前
修改后

SAPUI5 (03) - 简单控件的使用

SAPUI5 控件的基本使用方法,以及控件的两种基本关系 agrregation 和association。
  • stone0823
  • stone0823
  • 2016年12月23日 23:46
  • 2135

SAPUI5 (03) - 简单控件的使用

SAPUI5 控件的基本使用方法,以及控件的两种基本关系 agrregation 和association。
  • stone0823
  • stone0823
  • 2016年12月23日 23:46
  • 2135

SAPUI5 (15) - 绝对绑定和相对绑定

sapui5的绝对绑定和相对绑定。
  • stone0823
  • stone0823
  • 2017年01月19日 13:10
  • 733

sapui5 oData例子代码两则

用js的代码:这里写
  • berryreload
  • berryreload
  • 2017年01月06日 11:29
  • 1051

SAPUI5教程——框架简介以及应用实践

前言SAPUI5是SAP公司推出的一款前端UI技术框架,基于HTML5技术,开发语言为Javascript, 诞生于2011年,此款移动框架和SAP 系列产品贴合紧密,开发迅速,符合SAP系统的整体风...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年06月23日 13:54
  • 1091

SAPUI5拓展标准应用的Controller原理分析及应用实践

前言鉴于SAP S/4 HANA的世界性普及,外加中国区云服务的正式落地,作为SAP 移动端用户体验的自有H5框架,也愈加备受关注, 目前SAP大部分产品都是基于SAP Fiori进行定制开发,因此S...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年04月30日 20:18
  • 2382

SAP前端——使用SAPUI5来创建Web应用UI

前言对于SAP产品开发而言,功能需求的实现当之无愧, 但是前端UI展示一直被吐槽,不够友好的界面,较为繁琐的操作流程,给用户增添了很多学习和使用上的烦恼。但是自从SAPUI5诞生以来,移动显示,多元化...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年06月23日 22:03
  • 729

SAPUI5 (07) - MVC 文件的名称和位置

使用 MVC,model、view 和 controller 的代码分别放在不同的文件中,那么,OpenUI5 如何确定 view 和 controller 文件的名称和位置呢? 有以下三种方法来声明...
  • stone0823
  • stone0823
  • 2016年12月31日 14:57
  • 1156

在Ext.Button中增加图标

使用过ExtJs的同志都应该知道,每一个组件(Component)在初始化的时候,都会有一个配置参数(Config){在Ext2中,基本上所有的组件的构造函数只接受一个参数,这个参数或者是一个Conf...
  • smshuxue
  • smshuxue
  • 2013年10月27日 13:45
  • 946

SAPUI5教程—— Link的基本用法

前言SAPUI5定义很多好用的组件,方便我们日常的开发操作,比如这个Link的用法,比较类似于html中a标签的使用,今天我们一起来看一下这个组件的基本使用。Link 是sap.m包下一个组件。简单用...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年07月01日 09:11
  • 410
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SAPUI5-Button
举报原因:
原因补充:

(最多只允许输入30个字)