Menu déroulant à partir de la ligne de tableau dans le Bootstrap

Que j'essaie de faire un menu déroulant de travail à partir d'une ligne de tableau à l'aide de la Jasny extension trouvé http://www.jasny.net/bootstrap/javascript/#rowlink. Malheureusement je n'arrive pas à le faire fonctionner pour afficher une liste déroulante. J'ai en exemple de ce que j'ai fait jusqu'à présent:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            Heading
        </th>
        <th>
            Heading
        </th>
    </tr>
</thead>
<tbody data-provides="rowlink">
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr>
        <td>
            Cell
        </td>
        <td>
            Cell
        </td>    
    </tr>         
</tbody>
</table>

Cliquant sur la ligne suivra href lien, au lieu d'afficher le menu déroulant.
Je peux obtenir le rowlink extension pour travailler en tant que lien ou à l'appel d'une fenêtre modale.
Je peux également obtenir une liste déroulante à venir à partir d'une seule cellule (sans jasny extension), mais comme il à travailler à partir de l'ensemble de la ligne.

OriginalL'auteur SkynetWebS | 2012-12-10

Malheureusement rowlink fonctionne uniquement avec le href et de ne pas propager js événements. Donc il ne peut pas être utilisé pour les listes déroulantes.

Avoir un oeil de plus près déroulante code, montre que, après la liste déroulante est initialisé un clic sur dropdown-toggle ne pas faire beaucoup plus que de la bascule "ouvert" de la classe. On peut facilement imiter. Maintenant nous avons juste besoin de s'assurer de liste déroulante est initialisé sur la charge au lieu de clic et hop 🙂

Remarque que je suis le seul à l'aide de la rowlink css (pas de js) pour le pointeur et le style de lien.

<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<tbody>
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle rowlink" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr><td>Cell</td><td>Cell</td></tr>         
</tbody>
</table>

<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>

<script>
    $(function() {
        $(this).find('.dropdown-toggle').dropdown();

        $('.rowlink').on('click', function(e) {
            $(this).find('.dropdown').toggleClass('open');
            e.stopPropagation();
        });
    });
</script>

</body>
</html>

P. S. Ce jsfiddle gardé s'écraser mon navigateur :s

Merci pour la réponse. Dois admettre jsfiddle a été très lent pour moi aussi!
J'ai également été à la recherche un peu à la façon dont la liste déroulante fonctionne & comment le vôtre fonctionne aussi. Je vais vous donner votre code. 🙂
Cela fonctionne, mais seulement si je clique sur la première cellule, & il apparaît également au bas de la table! C'est un bon début. Je pense que je vais avoir une bonne lecture pour voir comment je peux obtenir la liste déroulante travailler à partir de l'ensemble de la ligne & apparaissent au-dessous de la cellule en cours d'être cliqué. Si je trouve une solution, je vais vous laisser savoir. Serait cool de voir qu'il est inclus dans votre Jasny extension à utiliser pour les autres. Après une bonne recherche sur le web j'ai compris que je ne suis pas le seul à chercher pour cette fonctionnalité! 🙂
Il va travailler pour la première cellule, sans beaucoup de javascript. Je doit travailler sur la deuxième cellule (je l'ai testé avec Chrome).
Jetez un oeil à cette jsFiddle: jsfiddle.net/KnxHS

OriginalL'auteur Jasny - Arnold Daniels

8

Par défaut Bootstrap des listes déroulantes à l'intérieur d'une cellule de tableau ne s'affiche pas correctement (ils se présentent au bas de la page). Pour y remédier, vous devez définir la classe pour les contenants de liste déroulante. Pour les cellules de tableau, ce serait ressembler à ceci:
```
<td class="dropdown">
```
DÉMO:
http://jsfiddle.net/Sherbrow/unWCN/4/

PS: Si vous ne souhaitez pas changer de style de cellule de tableau, vous pouvez également créer une div à l'intérieur de la cellule et de l'ensemble de sa catégorie à la "liste déroulante".

c'est génial, merci!
Ne fonctionne pas du tout

OriginalL'auteur Shital Shah
4

ensemble
```
<td style="overflow:visible">
```
il fonctionne.

Non, il n'est pas. Voir ce violon: jsfiddle.net/Sherbrow/unWCN/4
Cela m'a aidé à résoudre ce problème de la liste déroulante du menu caché.

OriginalL'auteur user2564293

Vous pouvez essayer ceci::

    <!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br>
<table class="menu" id="tutorials" width="120">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br>
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br>
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>

OriginalL'auteur ErickBest

Vous devez vous connecter pour publier un commentaire.