Je voudrais mettre un bouton sur la gauche en utilisant le style css et un bouton UWA. Ce serait le code:

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

Je ne sais pas comment écrire les styles pour les prendre en compte. J'ai essayé:

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

Syntaxes proposées à partir de réponses qui n'ont pas fonctionné:

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

Voici l'extrait de code complet (impossible de faire fonctionner un violon avec les références):

<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
MorganFR 9 août 2016 à 16:54

3 réponses

Meilleure réponse

C'est probablement dans les documents. De mon coup d'œil rapide, il semble que vous devriez le définir à travers les attributs, car le style est un attribut:

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

Voir https://uwa.netvibes.com/docs/ Uwa / html / Input.UWA.Controls.Input.html

Ou éventuellement:

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

Voir https://uwa.netvibes.com/docs/Uwa/html/Element. html

EDIT - Puisque ce qui précède ne semble pas fonctionner, peut-être en créant votre propre élément au lieu d'utiliser le bouton intégré. Dans cet exemple, je viens de réutiliser les classes du Button pour qu'elles se ressemblent:

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

Violon: https://jsfiddle.net/nmde8m75/

Voir les documents pour createElement: https://uwa.netvibes.com/docs/Uwa/ html / Element.html

REMARQUE: Une fois que vous aurez placé ce bouton en position absolue, vous devrez vous assurer que le panneau environnant a une hauteur.

2
mcgraphix 9 août 2016 à 15:26
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);
0
Stephen Rauch 23 juin 2018 à 05:52

Avez-vous essayé de passer le bon objet? {'position':'absolute';'right':'20px;'} n'est pas valide, car les propriétés doivent être séparées , et non ;.

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

0
Justinas 9 août 2016 à 13:59