Application CSS ui-lightness sur mes éléments

**Pelote2012** · 10/04/2013, 08h43

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

)

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

Merci

**rodolphebrd** · 10/04/2013, 08h53

Bonjour,

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

**Pelote2012** · 10/04/2013, 09h07

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Pelote2012** · 10/04/2013, 09h14

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Bovino** · 10/04/2013, 09h22

Ben c'est normal...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

La balise ouvrante est autofermée !

**rodolphebrd** · 10/04/2013, 09h25

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

**Pelote2012** · 10/04/2013, 09h30

http://jqueryui.com/button/

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

Maintenant ça marche

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**rodolphebrd** · 10/04/2013, 09h35

Bien vu @Bovino

Je suis lent ce matin et aveugle

Application CSS ui-lightness sur mes éléments

jQuery

Discussions similaires

Partager

Partager