Question

我想使用css样式和UWA按钮在左侧放置一个按钮。这将是代码：

var btn = new UWA.Controls.Input.Button({value: 'Add new',style: {'position:absolute;right:20px;'}}).inject(widget.body);

我不确定如何编写样式以将其考虑在内。我试过了：

style: {'position:absolute;right:20px;'}   -> syntax error '}'
style:'position:absolute;right:20px;'   -> nothing happens, doesn't appear in styles in console
style: {'position':'absolute';'right':'20px;'} -> nothing happens

根据不起作用的答案提出的语法：

style: {'position': 'absolute', 'right': '20px'}

以下是完整的代码段（无法对引用进行小提琴处理）：

<head>   

<!-- Application Metas Start -->
<title>TEST</title>     
<!-- Application Metas End -->

<!-- UWA -->
<link rel="stylesheet" type="text/css" href="http://uwa.netvibes.com/lib/c/UWA/assets/css/standalone.css" />
<script type="text/javascript" src="http://uwa.netvibes.com/lib/c/UWA/js/UWA_Standalone_Alone.js"></script>

<!-- Application JS Start -->
<script type="text/javascript">
   /* global widget */
   ( function () {
       require({
            baseUrl: '../'
        }, ['UWA/Core', 'UWA/Element', 'UWA/Class', 'UWA/Controls/Input'], function(Core, Element, Class, Button) {
            'use strict';

            UWA.debug = true;

            var myWidget = {
                onLoad: function() {

                    try {
                        var btn = new UWA.Controls.Input.Button({value: 'Add new',styles: {position:'absolute',right:'20px'}}).inject(widget.body);
                        //btn.setAttributes({color: 'red'});
                        }
                    catch (err){
                        alert(err);
                    }
                }
            };

            if (widget.launched)
                myWidget.onLoad();
            else
                widget.onLoad = myWidget.onLoad;

        }); // -- End of require
    }() ) ;
</script>
<!-- Application JS End -->
</head>
<body>
</body>
</html>

Answer 1

可能在文档中。从我粗略看一眼，看起来你应该通过属性设置它，因为style是一个属性：

var btn = new UWA.Controls.Input.Button({
      value: 'Add new',
      attributes: {
           style: 'position:absolute;right:20px;'
      }
}).inject(widget.body);

请参阅https://uwa.netvibes.com/docs/Uwa/html/Input.UWA.Controls.Input.html

或可能：

var btn = new UWA.Controls.Input.Button({
      value: 'Add new',
      styles: {
           'position':'absolute',
           'right':'20px'
      }
}).inject(widget.body);

请参阅https://uwa.netvibes.com/docs/Uwa/html/Element.html

编辑 - 由于以上似乎不起作用，也许创建自己的元素而不是使用内置的Button。在这个例子中，我只是重用了Button中的类，所以看起来一样：

 var btn = new UWA.createElement('button', {
                    text: 'Add new', 
                    styles: {
                       'position':'absolute',
                       'left':'20px'
                    },
                    class: 'dark-grey uwa-button uwa-button-root uwa-input uwa-input-root active'
                    }).inject(widget.body);

小提琴：https://jsfiddle.net/nmde8m75/

查看createElement的文档：https://uwa.netvibes.com/docs/Uwa/html/Element.html

注意：一旦你将这个按钮置于绝对位置，就需要确保周围的面板有一个高度。

Answer 2

你试过传递正确的对象吗？ {'position':'absolute';'right':'20px;'}无效，因为属性必须以,而非;分隔。

尝试style: {'position': 'absolute', 'right': '20px'}

Answer 3

var btn = new UWA.createElement('button', {
    // you can also use var btn=new UWA.Element('button', {
    text: 'Add New', //you can add value: 'Add New'
    styles: {
       position:'relative',
       left:'20px'
    },
    class: 'uwa-button uwa-button-root uwa-input'
}).inject(widget.body);

Javascript UWA按钮样式

3 个答案: