Schiebe-overlay-panel, arbeitet mit bootstrap 3 css

Nachdem anstrengend, mein Hirn und Zeit in dieses, fand heraus, dass die meisten 3rd-party-apps für verschiebbare Paneele nicht cross-browser-support sehr gut. Einige sagt, dass Sie tun, aber wenn Sie heraus überprüfen die demos, die es offensichtlich nicht. Also, was ich Tat, war, repliziert das Projekt inklusive jquery.ui und einfach Hinzugefügt, in den Funktionen selbst.

http://jqueryui.com/toggle/

Benutzte ich wechseln, mit "drop" ausgewählt. Dies imitiert das schieben von der linken Seite des Fensters. Funktioniert im IE7+ und chrome.

Habe ich mein div-Inhalt als "position:fixed"; für meine Zwecke, ich mag das, weil ich habe die Kontrolle über die Frage, ob ich wollen einer überlagerung oder wenn ich will, dass mein Inhalt geschoben werden.

Dann mit div-Inhalt an Ort und Stelle, dann kann ich das hinzufügen von jquery "animate" - Funktion und haben Sie schieben, zu welcher position ich möchte.

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

In der Zeit erstelle ich meine eigene Bibliothek, die schlägt alle anderen mit so wenig css-styling wie möglich. Aber für jetzt, nur muss ich wickle meine Sachen.

EDIT: 6/17/2014 - realisiert wurde Dies fast ein paar Tage nachdem ich gebucht die Antwort bis hier
Hier ist mein code, den ich umgesetzt mit jquery-ui:
wohlgemerkt, twitter bootstrap nicht stören mit diesem code seit seiner rein als css an dieser Stelle.

Komponenten verwendet:

• Eine Taste zur Umschaltung der Schiebe, ich gab es ein id="button".
• Ein panel div mit id="effectMenu"
  • Dieser ist verantwortlich für das Menü, Schiebe-und verblassen
• Ein panel div mit id="effectContent" (rechts neben effectMenu)
  • Wenn Sie im Menü Folien und verblasst, diese gleitet in den leeren Raum
  • Wenn Sie im Menü Folien und gibt diese Folien und ermöglicht das Menü zurück zu kommen
• Ein verstecktes input-Feld mit id="positionOfEffect"
  • Für die Bestimmung, wo der Inhalt sollte schieben zu
• Ein verstecktes input-Feld mit id="didContentSlide"
  • Enthält einen booleschen Wert: true, wenn der Inhalt bewegt zu neue position, false, wenn es ging zurück zum ursprünglichen Zustand

So erhalten Sie etwas wie dieses:

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