Ne permettre qu'une seule sélection dans un 'selectable'

Version imprimable

02/07/2009, 14h43
Thewil

Ne permettre qu'une seule sélection dans un 'selectable'

Salut à tous,

J'ai regardé dans la doc de jQuery mais je n'ai rien vu d'intéressant pour ne permettre la sélection que dans seul élément dans l'objet jQuery "SELECTABLE".
Quelqu'un aurait'il une idée svp ?

Merci

Bonjour.

Voici un exemple ou seul les li ayant la class bouge sont selectable :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        /*POUR TEST*/
        #selectable .ui-selecting { background: #FECA40; }
        #selectable .ui-selected { background: #F39814; color: white; }
        #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 
        .bouge {}
 
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#selectable").selectable({ filter: 'li.bouge' });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ol id="selectable">
            <li class="ui-widget-content bouge">Item 1</li>
            <li class="ui-widget-content bouge">Item 2</li>
            <li class="ui-widget-content">Item 3</li>
            <li class="ui-widget-content">Item 4</li>
            <li class="ui-widget-content">Item 5</li>
            <li class="ui-widget-content bouge">Item 6</li>
            <li class="ui-widget-content">Item 7</li>
        </ol>
    </div>
</body>
</html>

02/07/2009, 15h58
Thewil

J'ai du mal m'exprimer. En fait ce que je voudrais c'est que désactiver le ctrl+click qui permet de sélectionner plusieurs lignes de la liste. En gros si j'ai un élément sélectionné et que j'en sélectionne un autre je voudrais que l'ancien se déselectionne.

Bonsoir.

J'avais mal lu et/ou mal compris, mais comme je ne connaissais pas selectable vos questions mon permis de le découvrir.

Il n'y en effet aucune option disponible pour supprimer le CTR-Click ou la sélection multiple en traçant un rectangle avec le pointeur.

J'ai essayé ceci qui me semble convenir :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
        // les éléments sélectionés ont la classe ui-selected
        var prevSelectedElement = null;
 
        $(document).ready(function(){
            $("#selectable").selectable({
                filter: 'li.bouge',
                selected: function(event,ui){
                    if (prevSelectedElement === null) {
                        prevSelectedElement = ui.selected;
                    } else {
                        $(prevSelectedElement).removeClass("ui-selected");
                        prevSelectedElement = ui.selected;
                    }
                }
            });
        });

03/07/2009, 09h00
Thewil

Bonjour,

Merci pour l'astuce. En y réfléchissant un peu je m'étais dit qu'il faudrait surement utilisé qqchose de la sorte.

Je teste et je viens dire ce qu'il en est.
03/07/2009, 10h17
Thewil

Bon bah j'ai envie de dire parfait. Merci beaucoup :)