Ändern Sie die Breite des JQM-panels
Ich ma versuchen, um herauszufinden, wie ändern Sie die Breite des JQM-panel-animation. Ändern kann ich die Breite des Inhalts in der Systemsteuerung, aber die animation immer noch öffnet in einen vordefinierten Breite ich weiß nicht, wie Sie zu ändern.
Hier ist was ich versucht habe und welche änderungen die Inhalt.
.ui-panel {
width: 150px;
}
Ich sah durch die JQM-docs aber noch nicht die Lösung gefunden. Hoffe auf Hilfe 🙂
BEARBEITEN
Gut, eigentlich fand ich dieses script, welches funktioniert, aber... Nur wenn ich alle @Links-Paneel-Breite mit der Breite wie 150px? Warum wird nicht der @Links-Paneel-Breite arbeiten?
@left-panel-width: 100px;
@right-panel-width: 100px;
.ui-panel {
width: @left-panel-width;
}
.ui-panel.ui-panel-position-right {
width: @right-panel-width;
}
.ui-panel.ui-panel-closed {
width: 0;
}
.ui-panel-position-left {
left: -@left-panel-width;
}
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
-webkit-transform: translate3d(-@left-panel-width, 0, 0);
-moz-transform: translate3d(-@left-panel-width, 0, 0);
transform: translate3d(-@left-panel-width, 0, 0)
}
.ui-panel-position-right {
right: -@right-panel-width
}
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
-webkit-transform: translate3d(@right-panel-width, 0, 0);
-moz-transform: translate3d(@right-panel-width, 0, 0);
transform: translate3d(@right-panel-width, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: @left-panel-width;
right: -@right-panel-width
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(@left-panel-width, 0, 0);
-moz-transform: translate3d(@left-panel-width, 0, 0);
transform: translate3d(@left-panel-width, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -@left-panel-width;
right: @right-panel-width
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(-@right-panel-width, 0, 0);
-moz-transform: translate3d(-@right-panel-width, 0, 0);
transform: translate3d(-@right-panel-width, 0, 0)
}
@media (min-width:55em) {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: @right-panel-width
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: @left-panel-width
}
}
Vielen Dank im Voraus 😉
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beispiel: http://jsfiddle.net/Gajotres/7GvX4/
Bei der Arbeit mit jQuery Mobile, wenn Sie überschreiben möchten original
CSS
müssen Sie !wichtig. Auch, weiljsFiddle
nicht unterstützenCSS
Variablen ist alles hardcoded.CSS:
Überprüfen Sie diese Seite http://demos.jquerymobile.com/1.3.0/docs/examples/panels/panel-styling.html#demo-page -- Blick auf die Quelle,... es sagt, "
Panel-styling
Den Anfang des Quellcodes der Seite hat spezifische Anweisungen. Sie arbeiteten für mich.