我想使用 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'}
这是完整的代码片段(无法使用引用资料进行 fiddle 工作):
<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>
最佳答案
它可能在文档中。从我粗略地看了一下，看起来你应该通过属性来设置它，因为样式是一个属性:
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 中的类，因此它们看起来相同:
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
注意:一旦你使这个按钮绝对定位，你需要确保周围的面板有一个高度。
关于Javascript UWA 按钮样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38852750/