Application CSS ui-lightness sur mes éléments

Version imprimable

10/04/2013, 08h43
Pelote2012

Application CSS ui-lightness sur mes éléments

Bonjour,

Je suis sur un projet s'appuyant sur jquery-UI.
Quand je fais une modalPopup, j'ai des boutons qui prennent le CSS de ui-lightness.
Je doit rajouter un bouton intermédiaire, dans cette Popup. Mais pour faire propre, je souhaiterai appliquer le même CSS... mais je n'y arrive pas (d'accord je ne suis pas très doué en CSS :oops:)

Si quelqu'un peut me dire quelle classe mettre sur les input buton ...

Merci
10/04/2013, 08h53
rodolphebrd

Bonjour,

Envoyez votre code parce que même avec le thème Jquery-Ui c'est vague...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 $(function () {
 
            GetElems();
 
            $("#Ajouter").click(function () {
                EditionElem(-1);
            });
 
            $("#MPEditElem").dialog({
                autoOpen: false,
                modal: true,
                width: "500px",
                buttons: {
                    Fermer: function () {
                        $(this).dialog("close");
                        GetElems();
                    },
                    Valider: function () {
                        $('.error').hide();
                        ValidationElem();
                    }
                }
            });
 
        });
 
 function EditionElem(RowID) {
            $.ajax({
                type: "POST",
                url: "Lst_Element.aspx/GetElement",
                data: '{"IdElem":' + RowID + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d != null) {
                        $('#MPEditElem').dialog('option', 'title', msg.d.titre);
                        BuildTable(msg.d);
                        $('.error').hide();
                        $("#MPEditElem").dialog("open");
                    }
                    else {
                        var Ret = new function () {
                            this.Reussi = false;
                            this.Msg = "Problème récupération élément";
                        }
                        AfficheMsgRetour(Ret)
                    }
                },
                error: function () {
                    alert('Erreur récupération élément!');
                }
            });
        }
 
        function BuildTable(msg) {
            var table = '<table>';
            if (msg.Id == "-1") {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" /><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" /></td></tr>';
            }
            else {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" value="' + msg.Libelle + '"/><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" value="' + msg.Dimension + '"/></td></tr>';
            }
            table += '<input type="hidden" id="hidId" value="' + msg.Id + '"/></table>';
 
            $('#ContenuEditElem').html(table);
        };

Code:

1
2
3
4
5
6
7
<button type="button" id="Ajouter" class="btnValid">
        Ajouter
    </button>
 <div id="MPEditElem" title="Edition élément">
        <div class='subcontent-box' id='ContenuEditElem'>
        </div>
    </div>

Mon bouton est à ajouter dans la fonction BuildTable. Mais c'est juste une classe que je recherche. Mon code ne te dira pas grnd-chose.

Je viens de trouver dans jquery-ui-1.10.0.custom.min.css une classe ui-button, je vais essayer

ça marche pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function BuildTable(msg) {
            var table = '<table>';
            if (msg.Id == "-1") {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" /><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" /></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem" class="ui-button"/>Valider</button></td></tr>';
            }
            else {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" value="' + msg.Libelle + '"/><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" value="' + msg.Dimension + '"/></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem" class="ui-button"/>Valider</button></td></tr>';
            }
            table += '<input type="hidden" id="hidId" value="' + msg.Id + '"/></table>';
 
            $('#ContenuEditElem').html(table);
        };

Code:

<button id="btnEnrElem" class="ui-button"/>Valider</button>

ça me donne un point avec mon texte "Valider" à côté :cry:

10/04/2013, 09h22
Bovino

Ben c'est normal...

Code:

<button id="btnEnrElem" class="ui-button"/>Valider</button>

La balise ouvrante est autofermée !
10/04/2013, 09h25
rodolphebrd

J'ai la version jquery-ui-1.10.2 et il y a l'ID button...

http://jqueryui.com/button/

ahahaha je viens de voir j'ai un / de trop:oops:

Maintenant ça marche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 function EditionElem(RowID) {
            $.ajax({
                type: "POST",
                url: "Lst_Element.aspx/GetElement",
                data: '{"IdElem":' + RowID + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d != null) {
                        $('#MPEditElem').dialog('option', 'title', msg.d.titre);
                        BuildTable(msg.d);
                        $('.error').hide();
                        $('button').button().click(function (event) { event.preventDefault(); });
                        $("#MPEditElem").dialog("open");
                    }
                    else {
                        var Ret = new function () {
                            this.Reussi = false;
                            this.Msg = "Problème récupération élément";
                        }
                        AfficheMsgRetour(Ret)
                    }
                },
                error: function () {
                    alert('Erreur récupération élément!');
                }
            });
        }
function BuildTable(msg) {
            var table = '<table>';
            if (msg.Id == "-1") {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" /><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" /></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem">Valider</button></td></tr>';
            }
            else {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" value="' + msg.Libelle + '"/><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" value="' + msg.Dimension + '"/></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem" >Valider</button></td></tr>';
            }
            table += '<input type="hidden" id="hidId" value="' + msg.Id + '"/></table>';
 
            $('#ContenuEditElem').html(table);
        };

10/04/2013, 09h35
rodolphebrd

Bien vu @Bovino :ccool:
Je suis lent ce matin et aveugle 8O