2016-08-09 6 views
0

Я хотел бы положить кнопку слева, используя стиль css и кнопку UWA. Это будет код:Javascript UWA button style

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> 
+0

Что такое кнопка UWA? – j08691

ответ

1

Это, вероятно, в документации. На мой беглый взгляд на него, это выглядит, вы должны установить его через атрибуты, так как стиль является атрибутом:

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

РЕДАКТИРОВАНИЕ - поскольку вышеприведенное не работает, возможно, создавая свой собственный элемент вместо использования встроенной кнопки. В этом примере, я просто повторно классы от кнопки, так что они выглядят одинаково:

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); 

Fiddle: https://jsfiddle.net/nmde8m75/

см документацию для createElement: https://uwa.netvibes.com/docs/Uwa/html/Element.html

ПРИМЕЧАНИЕ: Это как только вы сделаете эту кнопку абсолютная позиция, вам нужно убедиться, что окружающая панель имеет высоту.

+0

К сожалению, ни один из этих двух не работает, я либо получаю 'SyntaxError: Неожиданный токен '' или 'SyntaxError: Unexpected token}'. – MorganFR

+0

Можете ли вы сделать фрагмент или скрипку, чтобы мы могли это увидеть? Эта ошибка обычно означает, что есть опечатка с отсутствующей/дополнительной цитатой, фигурной скобкой и т. Д. Вы должны иметь возможность открыть консоль JS в своем браузере и установить точку останова на этой линии и пройти ее, чтобы точно увидеть, где проблема , – mcgraphix

+0

добавлен фрагмент. Не удалось справиться со ссылками на ресурсы в тегах. – MorganFR

0

Вы пробовали передать правильный объект? {'position':'absolute';'right':'20px;'} недействителен, поскольку свойства должны быть отделены от ,, а не ;.

Попробуйте style: {'position': 'absolute', 'right': '20px'}

+0

'SyntaxError: Неожиданный токен)' это ошибка, которую я получаю, даже если я просто делаю 'style: {'color': 'blue'}'. – MorganFR