JQueryモバイルパネルで最大幅を適用する方法

Question

JQMの左パネルで、最大幅440px、最小幅114pxの画面の80％を使用します。

次のスクリプトを使用してパネルのサイズを80％に変更しましたが、translade3d値のために最小幅と最大幅を適用する方法がわかりません。

コード：

@left-panel-width: 80%; 
@right-panel-width: 80%; 

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

Answer 1

は（あなたがすべての要件を指定していない限り）あなたは過剰に複雑にしているように思えます。

<div data-role="panel" id="mypanel" data-display="overlay"> 
    I am a panel 
</div><!-- /panel --> 

単純にこのCSSを追加します：

#mypanel.ui-panel { 
    width: 80%; 
    max-width: 440px; 
    min-width: 114px; 
} 

DEMO

パネルを考えます