Gleitendes Overlay-Panel, das mit Bootstrap funktioniert 3 CSS

Question

Ich habe endlos auf der Suche nach einem gleitenden Overlay-Panel mit jQuery, die meine Bootstrap 3 CSS-Datei nicht zerstört. Aber ich kann keine finden. Ich brauche ein Panel, das wie ein Formular ist, Dropdown-Felder, auswählbare Raster, Eingabefelder usw. hat. Alles, was ich in diesem Menüfeld mache, aktualisiert das Inhaltsfenster automatisch. aber in meinem Fall ist es nicht wirklich ein "Menü", es ist nur ein Schiebe-oder Pop-out-Formular, das Sie ausfüllen können.

Ich habe diese Seite gesucht:

http://designhuntr.com/15-slide-panel-jquery-plugins/

Und kein einziger gab mir, was ich wollte. Ich brauche eine Schiebeplatte, die von links kommt und mit Formularen gefüllt ist (wie Bootstrap Akkordeon, select2 dropdown).

Der erste Link gab genau das, was ich wollte, aber das Rendern des Inhalts meines Bootstrap CSS kam in einen schweren Konflikt und wurde nutzlos gemacht.

Das perfekte Beispiel finde ich konnte hier befindet:

http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/#

Wenn Sie die Overlay-Taste klicken; es macht genau das, was ich in Bezug auf Funktionalität brauchte.

Die Verwendung dieser Bibliothek führt jedoch auch zu Konflikten mit dem Bootstrap. Ich habe 5 verschiedene Bibliotheken ausprobiert, die alle zum Scheitern verurteilt sind. Es scheint nur, dass eine einfache Idee wie diese inzwischen einen gewissen Spielraum gehabt hätte.

Wenn jemand irgendeine Art von Erfolg gehabt hat, würde ich gerne hören. Ansonsten habe ich an dieser Stelle alle Möglichkeiten aus.

[Edit 6/17/2014] Eine große Anforderung für mich ist, einen Knopf zu haben, der statisch gehalten wird, bewegt sich nicht mit dem Schiebefeld. Ich wollte nicht, dass der Benutzer den Knopf jedes Mal bewegt, wenn der Benutzer ein Paneel herauszieht. Ich brauchte diese Funktionalität auch für ie7 +. Ich möchte mehr Kontrolle darüber haben, was sich bewegt, was ich will, ist das Gleiten, die Auswirkungen, alles. Nicht eine 100% vollständige Folie.

Answer 1

Nach Erschöpfung meines Gehirns und Zeit in diese, fand heraus, dass die meisten 3rd Party Apps für Schiebefenster nicht Cross-Browser-Unterstützung sehr gut tun. Manche sagen, dass sie es tun, aber wenn man sich die Demos anschaut, tut es das eindeutig nicht. Also habe ich das Projekt repliziert, indem ich jquery.ui einbaute und einfach die Features selbst hinzugefügt habe.

http://jqueryui.com/toggle/

I verwendet Toggle, mit "drop" ausgewählt. Dies ahmt das Einschieben von der linken Seite des Fensters nach. Funktioniert in IE7 + und Chrome.

Ich habe meinen Div-Inhalt als "position: fixed"; Für meine Zwecke mag ich das, weil ich die Kontrolle darüber habe, ob ich ein Overlay machen möchte oder ob ich möchte, dass mein Inhalt gedrängt wird.

Dann mit diesem div Inhalt an Ort und Stelle kann ich dann eine jquery "animieren" -Funktion hinzufügen und es auf die gewünschte Position gleiten lassen.

https://api.jquery.com/animate/

Im Laufe der Zeit werde ich meine eigene Bibliothek erstellen, die alle anderen mit so wenig CSS-Styling wie möglich Schläge aus. Aber jetzt muss ich nur meine Sachen einpacken.

EDIT: 2014.06.17 - Das war fast ein paar Tage durchgeführt, nachdem ich die Antwort gepostet hier oben Hier ist mein Code, den ich mit jQuery UI implementiert: Geist Sie, twitter Bootstrap nicht mit dieser interferieren Code seit seiner Verwendung als CSS an dieser Stelle.

Komponenten verwendet:

• Ein Knopf für den Schiebe Makeln, i er eine id = "button" gab.
• A div Panel mit id = "effectMenu"
  • Dies ist für das Menü verantwortlich Schiebe- und Verblassen
• ein div Panel mit id = "effectContent" (rechts neben effectMenu gezeigt)
  • Wenn die Menü Dias und Überblendungen, schieben diese in den leeren Raum
  • Wenn das Menü Dias und kehrt, diese Dias und das Menü
  zurück
kommen können
• Ein verstecktes Eingabefeld mit id = „positionOfEffect“
  • zur Bestimmung, wo der Inhalt zu
• Einem versteckten Eingabefeld mit id = „didContentSlide“
  • Hält einen Booleschen Wert gleiten sollte: true, wenn Inhalt an die neue Position bewegt, falsch, wenn es um Urzustand

Sie so etwas wie t erhalten Also ging zurück sein:

<button type="button" id="button" class="btn btn-default btn-lg" /> 
<div class="row"> 
    <div id="effectMenu" class="col-md-4"> 
     ... 
    </div> 
    <div id="effectContent" class="col-md-4"> 
     ... 
    </div> 
</div> 
<input id="positionOfEffect" type="hidden" /> 
<input id="didContentSlide" type="hidden" /> 

Nun ist der jQuery-Code:

$('body').on('click', '#button', function (e) { 
    e.preventDefault(); 

    //position of the effect menu 
    var positionOfEffectMenu = $("#positionOfEffectMenu").val(); 

    //gets the value of whether or not the content slide to the new position 
    //true if it did, false if it returned back to the original position 
    var didContentSlide = $("#didContentSlide").val(); 

    //starting position of everything, capture the current state at this point 
    //this is the page load set up 
    if (positionOfEffectMenu == "") { 
     //mimic the behavior of md-col-4 (33.333333% of screen) 
     $("#positionOfEffect").val((($(".row").width() * 0.33333333))); 
     $("#didContentSlide").val(false); 
     positionOfEffectMenu = $("#positionOfEffectMenu").val(); 
     didContentSlide = $("#didContentSlide").val(); 
    } 

    /** 
    * How far we want the transition to occur for the sliding content. 
    * The divided by 2 means, we're only going to be moving half the 
    * distance of the menu's width while the menu disappears. 
    * In my page, this makes a very space-friendly behavior 
    * originally the menu is all the way to the far right, and I have content 
    * next to it if I'm bringing the menu out, I dont want the content 
    * page to swing all the way to where the menu is, I want it to move 
    * just a bit so that it can fill up the space and look good for the user 
    * to focus in on. 
    */ 
    positionOfEffect = parseFloat(positionOfEffectMenu)/2; 
    didContentSlide = didContentSlide == "true"; //turns string to bool value 

    //I disable my button as its sliding otherwise if the user frantically clicks 
    //it will intercept the positions and hijack the animation 
    //it gets re-enabled later in this code 
    var $elt = $(this).attr('disabled', true); 

    //begin the animation 

    //Now.. move the effect content to the new position 
    //or if it is already at the new position, move it back to where it was before 
    $("#effectContent").animate({ 
     left: (!didContentSlide) ? "-=" + (positionOfEffect) + "px" : "+=" + (positionOfEffect) + "px" 
    }, 500, function() { 

    }) 
    //as the content is going in, drop the effectMenu out of the page 
    //or if the content is going back out, bring the effectMenu into the page 
    .queue(function() { 
     $("#effectMenu").toggle("drop", {}, 500); 
    }).dequeue(); 

    //this is for the button.. its re-enabled when everything stops moving 
    setTimeout(function() { 
     $elt.attr('disabled', false); 
    }, 500); 

    //update the value of whether or not the contents slid into the new position 
    didContentSlide = (!didContentSlide); 
    $("#didContentSlide").val(didContentSlide); 

    //override the defaults of the button 
    return false; 
}); 

Answer 2

i die offcanvas am Ende mit Plugin hier: https://jasny.github.io/bootstrap/javascript/#offcanvas wenn das Ihnen hilft.