SAPUI5-HTML

原创 2015年07月10日 10:32:16
var oHtml = new sap.ui.core.HTML("html1", {
            content : "<div style='position:relative;background-color:black;width:64px;height:64px'>" + 
"<div style='position:absolute;background-color:rgb(200,  0,  0);width:8px;height:8px;top:28px;left:48px' ></div>" +
"<div style='position:absolute;background-color:rgb(200,100,  0);width:8px;height:8px;top:18px;left:45px' ></div>" +
"<div style='position:absolute;background-color:rgb(200,200,  0);width:8px;height:8px;top:11px;left:38px' ></div>" +
"<div style='position:absolute;background-color:rgb(100,200,  0);width:8px;height:8px;top: 8px;left:28px' ></div>" +
"<div style='position:absolute;background-color:rgb(  0,200,  0);width:8px;height:8px;top:11px;left:18px' ></div>" +
"<div style='position:absolute;background-color:rgb(  0,200,100);width:8px;height:8px;top:18px;left:11px' ></div>" +
"<div style='position:absolute;background-color:rgb(  0,200,200);width:8px;height:8px;top:28px;left: 8px' ></div>" +
"<div style='position:absolute;background-color:rgb(  0,100,200);width:8px;height:8px;top:38px;left:11px' ></div>" +
"<div style='position:absolute;background-color:rgb(  0,  0,200);width:8px;height:8px;top:45px;left:18px' ></div>" +
"<div style='position:absolute;background-color:rgb(100,  0,200);width:8px;height:8px;top:48px;left:28px' ></div>" + 
"<div style='position:absolute;background-color:rgb(200,  0,200);width:8px;height:8px;top:45px;left:38px' ></div>" +
"<div style='position:absolute;background-color:rgb(200,  0,100);width:8px;height:8px;top:38px;left:45px' ></div>" +
"</div>",
            preferDOM : false,
            afterRendering : function(e) {
                if ( !e.getParameters()["isPreservedDOM"] )
                    {
                        var $=e.getSource().$();
                        $.click(function(e) {
                        addColorBlockAtCursor($, e, 64, 8);
                        });
                    }
            }
        });
        oPanel.addContent(oHtml);

        return oPanel;

        function rgb(r,g,b) {
            return 'rgb(' + Math.round(255*r) + ',' + Math.round(255*g) + ',' + Math.round(255*b) + ')';
        }

        function hsb2rgb(h,s,b) {
            h = (360.0 * h / 255.0);
            s = s / 255.0;
            b = b / 255.0;

            var f,i,hTemp,p,q,t;
            if ( s == 0 ) {
                // color is on black-and-white center line
                return rgb(b,b,b);
            } else {
                // chromatic color
                h = (h % 360) / 60.0;     // h is now IN [0,6)
                i = Math.floor(h);        // largest integer <= h
                f = h - i;                  // fractional part of h

                p = b * (1.0 - s);
                q = b * (1.0 - (s * f));
                t = b * (1.0 - (s * (1.0 - f)));

                switch(i) {
                    case 0: return rgb(b,t,p);
                    case 1: return rgb(q,b,p);
                    case 2: return rgb(p,b,t);
                    case 3: return rgb(p,q,b);
                    case 4: return rgb(t,p,b);
                    case 5: return rgb(b,p,q);
                }
            }
        }

        function addColorBlockAtCursor($, e, psize, size) {
            var oOffset;
            if (typeof e.offsetX === "undefined" ) {
                oOffset = jQuery(e.target).offset();
                e.offsetX = e.pageX - oOffset.left;
                e.offsetY = e.pageY - oOffset.top;
            }
            var dx = e.offsetX - psize/2;
            var dy = -(e.offsetY - psize/2);
            var a = 2 * Math.PI + (dx < 0 ? Math.PI - Math.atan2(dy, -dx) : Math.atan2(dy, dx));
            var h = a / 2 / Math.PI * 255.0;
            colorBlock(hsb2rgb(h, 255, 200), e.offsetX-4, e.offsetY-4, size).appendTo($);
        }

        function colorBlock(sColor, iX, iY, iSize) {
            return jQuery("<div/>").
                attr("title", sColor).
                css({
                    "position" : "absolute",
                    "background-color" : sColor,
                    "top" : iY+"px",
                    "left" : iX+"px",
                    "width" : iSize+"px",
                    "height" : iSize+"px"
                }).
                click(function(e) { jQuery(this).remove(); });
        }

这里写图片描述

相关文章推荐

SAPUI5(SAP Fiori)运行环境介绍

  • 2017年06月23日 11:57
  • 4.9MB
  • 下载

SAPUI5是什么?Fiori告诉我们将来UI开发用哪种技术?

最近在奥兰多举行的SAP用户大会上,SAP发布了一套外观令人印象深刻的应用 'Fiori',基于SAP新的HTML5框架(即SAPUI5)。SAPUI5(基于HTML/CSS/Javascript...

SAPUI5 (32) - SAP Web IDE

转载自:http://blog.csdn.net/stone0823/article/details/70339694 SAP Web IDE 是基于 Eclipse 内核的在线开发 IDE,...

SAPUI5教程——ActionSheet的应用

前言ActionSheet是一个点击弹出popover的基本效果,可以让用户执行一定操作事件,如下图:定义controllersap.ui.define(['sap/ui/core/Fragment'...

Web编程学习七:使用JPA + RESTful Web Service + SAPUI5来创建Web应用

在之前的例子学习了如何使用JPA,如何通过Apache olingo来将JPA数据库自动转化为RESTful Web Service。 学习了如何使用SAPUI5,现在我来把它们整合起来。 开发环...

SAPUI5教程——更改ODataModel默认的请求方式

前言对于ODataModel $batch的请求而言,会自动调用ODataModel UPdate的方法的 merge 请求,这也是默认的请求方式,但是我们的项目当中,往往需要put的请求,那么该如何...

PhoneGap+SAPUI5搭建本地应用(Android平台)

一直想尝试一下使用PhoneGap来搭建本地程序,正好之前开发的smart app是基于SAPUI5的,SAPUI5提供了独立的js包,可以导入到PhongGap工程中,这样就可以使用UI5的各种控件...

sapui5 oData例子代码两则

用js的代码:这里写

Learn about SAPUI5

Learn about SAPUI5
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SAPUI5-HTML
举报原因:
原因补充:

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