我想使用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>
最佳答案
它可能在文档中。从我的粗略浏览来看，由于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
编辑-由于上述方法似乎无效，因此也许创建您自己的Element而不是使用内置的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
注意：将按钮设置为绝对位置后，需要确保周围面板的高度。
关于javascript - Javascript UWA按钮样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38852750/