jQuery Girl
  1. jQuery Girl
  3. Séparateur jQuery changer en séparateur vertical sur clic de bouton
Intereting Posts
Erreur non capturée: erreur de syntaxe, expression non reconnue: survol J’ai des difficultés avec jQuery’s (sélecteur) $ .each () jQuery Endless page avec will_paginate ne fonctionne pas dans Rails Voir plus Voir moins avec JQuery jQuery – Attendez que les images d’arrière-plan soient chargées, puis affichez l’élément Le moyen le plus efficace de trouver des éléments dans jQuery Ajout d’un délai jQuery lors de la saisie semi-automatique Imgur fonctionne via javascript côté client, mais pas node.js. Déconcerté Sémantique-UI Dynamic Dropdown Comment définir les variables de session dans ASP.NET MVC 3 avec jQuery? Fermez modal en cliquant en dehors de la boîte jQuery ne peut pas reconnaître les éléments clonés ajoutés à l’aide de jQuery.appendTo () Rails 3.1 + Paperclip + jQuery fileupload Repli JQuery pour la transition CSS3 Twitter Bootstrap 2 carousel – affiche un ensemble de vignettes à la fois, comme jcarousel

Séparateur jQuery changer en séparateur vertical sur clic de bouton

J’ai un séparateur qui fonctionne bien. Maintenant, le client veut changer le séparateur de la vue horizontale à la vue verticale. Je veux dire que le séparateur est d’abord divisé int dans les 2 divs horizontalement et lorsque je clique sur le bouton, il changera pour diviser les mêmes 2 divs verticalement.

J’ai essayé ça 

 $(function () { $('.LeftPane').attr('id', 'LeftPane'); $('.RightPane').attr('id'`enter code here`, 'RightPane'); $("#MySplitter").splitter({ type: "v" }); $('#Button1').click(function () { $('#LeftPane').attr('id', 'TopPane'); $('#RightPane').attr('id', 'BottomPane'); $("#MySplitter").splitter({ type: "h" }); }); });   #MySplitter { height: 400px; width: 600px; margin: 1em 2em; background: #def; border: 2px solid #039; /* No padding allowed */ } #LeftPane { background: #def; overflow: auto; width: 200px; /* optional, initial splitbar position */ min-width: 50px; } #RightPane { background: #def; overflow: auto; min-width: 100px; /* No margin or border allowed */ } #MySplitter .vsplitbar { width:8px; cursor: e-resize; /* in case col-resize isn't supported */ cursor: col-resize; background-color:Black; } #MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover { background-color:Black; } #TopPane { background: #def; overflow: auto; width: 200px; min-width: 50px; / } #BottomPane { background: #def; overflow: auto; min-width: 100px; /* No margin or border allowed */ } #MySplitter .hsplitbar { height: 2px; background: #487BA4; } #MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover { background: #487BA4; }

je trouve enfin la solution de ma nouvelle question. Je le conçois en asp.net, donc je fournis la solution en jquery avec asp.net 

     enter code here

#LeftPane {background: #def; débordement: auto; largeur: 200px; largeur minimale: 50 px; } 

 #RightPane { background: #def; overflow: auto; min-width: 100px; }

#MySplitter .vsplitbar {width: 8px; curseur: e-redimensionner; curseur: col-redimensionner; couleur de fond: noir; } 

 #MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover { background-color:Black; } #TopPane { background: #def; overflow: auto; width: 200px; min-width: 50px; } #BottomPane { background: #def; overflow: auto; min-width: 100px; } #MySplitter .hsplitbar { height: 2px; background: #487BA4; } #MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover { background: #487BA4; }     
   
 
 
 This is the left side of the vertical splitter.
 
 Note what happens when you move the splitbar as far left as you can to make this pane very thin. A scrollbar appears and it is flush against the splitbar, just the way it should be.
 
 
 
 The splitbar needs to be wide enough to grab with the mouse, but a thick splitbar may be visually distracting in a design. This example shows how to make a splitbar that looks skinny but has a wider grabbing area. It also demonstrates the use of an alternate resize cursor. (Not all browsers support alternate cursors and only IE seems to support animated cursors.)
 
 A background image in the splitbar provides the visual marker but the splitbar area extends further right, appearing as padding on the right pane. The splitbar's hot zone is "biased" to the right so that it will not have a gap against any left-side scrollbar when it appears. If you know the left pane will never have a scroll bar, you could make the hot zone centered on the skinny splitbar.

Le code derrière pour le bouton est comme suit 

  protected void Page_Load(object sender, EventArgs e) { if (HiddenField1.Value == "2") { HiddenField1.Value = "1"; } else { HiddenField1.Value = "2"; } }