Я пытаюсь выяснить, как изменить ширину анимации панели JQM. Я могу изменить ширину содержимого на панели, но анимация по-прежнему открывается в предопределенной ширине, я не знаю, как ее изменить.Изменение ширины панелей JQM

Вот что я пробовал и который меняет содержание.

.ui-panel { 
    width: 150px; 
}

Я просмотрел документы JQM, но havent нашел решение. Надеясь на помощь :-)

EDIT

Ну, на самом деле, я нашел этот скрипт, который делает работу, но ... Только если я изменить все @ левой кнопкой панели ширину с фактической шириной, как 150px ? Почему не работает функция @ left-panel-width?

@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: [email protected]; 
} 

.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([email protected], 0, 0); 
    -moz-transform: translate3d([email protected], 0, 0); 
    transform: translate3d([email protected], 0, 0) 
} 

.ui-panel-position-right { 
    right: [email protected] 
} 

.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: [email protected] 
} 

.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: [email protected]; 
    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([email protected], 0, 0); 
    -moz-transform: translate3d([email protected], 0, 0); 
    transform: translate3d([email protected], 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 
    } 
}

Заранее спасибо ;-)

источник

2013-07-05 Mansa

Рабочий пример: http://jsfiddle.net/Gajotres/7GvX4/

При работе с JQuery Mobile, если вы хотите заменить оригинальный CSS вы должны использовать важную!. Также потому, что jsFiddle не поддерживает CSS переменные все жестко запрограммированы.

CSS:

.ui-panel { 
    width: 50px !important; 
} 

.ui-panel.ui-panel-position-right { 
    width: 50px !important; 
} 

.ui-panel.ui-panel-closed { 
    width: 0; 
} 

.ui-panel-position-left { 
    left: 50px !important; 
} 

.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(50px, 0, 0) !important; 
    -moz-transform: translate3d(50px, 0, 0) !important; 
    transform: translate3d(50px, 0, 0) !important; 
} 

.ui-panel-position-right { 
    right: 50px !important; 
} 

.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(50px, 0, 0) !important; 
    -moz-transform: translate3d(50px, 0, 0) !important; 
    transform: translate3d(50px, 0, 0) !important; 
} 

.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: 50px !important; 
    right: 50px !important; 
} 

.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(50px, 0, 0) !important; 
    -moz-transform: translate3d(50px, 0, 0) !important; 
    transform: translate3d(50px, 0, 0) !important; 
} 

.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: 50px !important; 
    right: 50px !important; 
} 

.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(50px, 0, 0) !important; 
    -moz-transform: translate3d(50px, 0, 0) !important; 
    transform: translate3d(50px, 0, 0) !important; 
} 

@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: 50px !important; 
    } 

    .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: 50px !important; 
    } 
}

источник

2013-07-05 12:36:32 Gajotres

Спасибо, но я все еще не могу заставить переменные css работать ... Но неважно. Тогда я просто переустановил его! – Mansa

Я рад помочь, не забудьте использовать! Важно. – Gajotres

Функция анимации и увольнения, поврежденная на JQM 1.4.5 :( – Escher

Проверить эту страницу http://demos.jquerymobile.com/1.3.0/docs/examples/panels/panel-styling.html#demo-page - посмотреть на источник ... он говорит, "

Панель стайлинг

<p>In this demo we show you how to:</p> 

    <ul> 
     <li>Change the width of a panel.</li> 
     <li>Create a panel navmenu with listviews and collapsibles.</li> 
     <li>Change the shadow of a reveal menu so it is on top of the list items.</li> 
     <li>Set a background image for a page that contains a panel.</li> 
     <li>Give the page a responsive layout with CSS columns.</li> 
    </ul>

Верхушка исходный код страницы содержит конкретные инструкции. Они работали для меня.

источник

2014-01-02 01:34:42 JSdc

Изменение ширины панелей JQM

EDIT

ответ

Панель стайлинг

Смежные вопросы