我想讓JQM左面板使用80％的屏幕，最大寬度爲440px，最小寬度爲114px。如何在JQuery Mobile面板上應用最大寬度

我使用以下腳本將面板大小調整爲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: [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) 
}

來源

2017-06-29 kyori

好像你是過於複雜（除非你沒有指定您的所有需求）。由於面板：

<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

來源

2017-06-30 13:58:19 ezanker

如何在JQuery Mobile面板上應用最大寬度

回答

DEMO

相關問題