Gleitendes Overlay-Panel, das mit Bootstrap 3 CSS funktioniert

8

Ich habe endlos nach einem gleitenden Overlay-Panel mit jquery gesucht, das 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 eine Schiebe-oder Pop-out-Formular, das Sie ausfüllen können.

Ich habe diese Seite durchsucht:

Ссылка

Und keiner hat mir gegeben, 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 meiner Bootstrap-CSS kam in einen heftigen Konflikt und wurde nutzlos gemacht.

Das perfekteste Beispiel, das ich finden konnte, befindet sich hier:

Ссылка

Wenn Sie auf die Überlagerungstaste 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 irgendeinen Erfolg hatte, würde ich es gerne hören. Ansonsten habe ich an dieser Stelle alle Möglichkeiten aus.

[Bearbeiten 17.06.2014] Eine große Anforderung für mich ist, einen Knopf zu haben, der statisch gehalten wird, bewegt sich nicht mit dem gleitenden Panel. 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.

    
sksallaj 05.03.2014, 01:19
quelle

2 Antworten

4
___ tag123jquery ___ jQuery ist eine beliebte Cross-Browser-JavaScript-Bibliothek, die das DOM-Traversal (Document Object Model), die Ereignisbehandlung, Animationen und AJAX-Interaktionen erleichtert, indem die Diskrepanzen zwischen Browsern minimiert werden. Eine mit jQuery gekennzeichnete Frage sollte mit jquery in Zusammenhang stehen, daher sollte jquery von dem fraglichen Code verwendet werden, und mindestens eine jquery-nutzungsbezogene Elemente müssen in der Frage enthalten sein. ___ qstnhdr ___ Gleitendes Overlay-Panel, das mit Bootstrap 3 CSS funktioniert ___ answer24266699 ___

Ich habe das Offcanvas-Plugin verwendet, das Sie hier finden: Ссылка wenn Ihnen das hilft.

    
___ antwort22206686 ___

Nachdem ich mein Gehirn und meine Zeit damit erschöpfte, fand ich heraus, dass die meisten Drittanbieter-Apps für Schiebefenster die Browser-Unterstützung nicht sehr gut unterstützen. 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.

Ссылка

Ich habe 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" gemacht; 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 verschoben wird.

Dann kann ich mit diesem div-Inhalt die Funktion "animate" von jquery hinzufügen und sie an die gewünschte Position verschieben.

Ссылка

Mit der Zeit werde ich meine eigene Bibliothek erstellen, die alle anderen mit so wenig CSS-Styling wie möglich schlägt. Aber jetzt muss ich nur meine Sachen einpacken.

BEARBEITEN: 17.06.2014 - Dies wurde fast ein paar Tage nach der Veröffentlichung der Antwort hier umgesetzt Hier ist mein Code, den ich mit jquery ui implementiert habe: Wohlgemerkt, Twitter-Bootstrap stört diesen Code nicht, da er an dieser Stelle nur als CSS verwendet wird.

verwendete Komponenten:

  • Eine Taste zum Umschalten der Verschiebung, ich gab ihm eine ID="Taste".
  • Ein div-Panel mit id="effectMenu"
    • Dies ist verantwortlich für das Verschieben und Ausblenden des Menüs
  • Ein div-Panel mit id="effectContent" (direkt neben effectMenu)
    • Wenn das Menü verschoben und ausgeblendet wird, wird es in den leeren Bereich verschoben
    • Wenn das Menü verschoben und zurückkehrt, wird die Folie verschoben und das Menü kann wieder angezeigt werden
  • Ein verstecktes Eingabefeld mit id="positionOfEffect"
    • Wird verwendet, um zu bestimmen, wo der Inhalt nach
      • verschoben werden soll
  • Ein verborgenes Eingabefeld mit id="didContentSlide"
    • Enthält einen booleschen Wert: true, wenn der Inhalt an eine neue Position verschoben wurde, false, wenn er in den ursprünglichen Zustand zurückversetzt wurde

Du bekommst also so etwas:

%Vor%

Nun der jquery Code:

%Vor%     
___ tag123twitterbootstrap ___ Bootstrap ist ein Front-End-Framework, das entwickelt wurde, um die Entwicklung von Web-Apps und -Websites anzukurbeln. Bei Fragen zu einer Bootstrap-Version verwenden Sie auch die Tags der jeweiligen Version aus den Tags "twitter-bootstrap-2", "twitter-bootstrap-3" und "bootstrap-4". ___ qstntxt ___

Ich habe endlos nach einem gleitenden Overlay-Panel mit jquery gesucht, das 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 eine Schiebe-oder Pop-out-Formular, das Sie ausfüllen können.

Ich habe diese Seite durchsucht:

Ссылка

Und keiner hat mir gegeben, 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 meiner Bootstrap-CSS kam in einen heftigen Konflikt und wurde nutzlos gemacht.

Das perfekteste Beispiel, das ich finden konnte, befindet sich hier:

Ссылка

Wenn Sie auf die Überlagerungstaste 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 irgendeinen Erfolg hatte, würde ich es gerne hören. Ansonsten habe ich an dieser Stelle alle Möglichkeiten aus.

[Bearbeiten 17.06.2014] Eine große Anforderung für mich ist, einen Knopf zu haben, der statisch gehalten wird, bewegt sich nicht mit dem gleitenden Panel. 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.

    
___ tag123slidingpanelayout ___ SlidingPaneLayout bietet ein horizontales Layout mit mehreren Fenstern zur Verwendung auf der obersten Ebene einer Benutzeroberfläche. Ein linker (oder erster) Bereich wird als Inhaltsliste oder Browser behandelt, der einer primären Detailansicht zum Anzeigen von Inhalt untergeordnet ist. ___
sksallaj 05.03.2014, 18:54
quelle
2

Ich habe das Offcanvas-Plugin verwendet, das Sie hier finden: Ссылка wenn Ihnen das hilft.

    
Phil 17.06.2014 14:40
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie kann ich ein iOS-Gerät von einem amazon SNS-Thema abmelden?