jQueryモバイルパネルの幅

Question

新しいjQueryモバイルには、新しいパネルオプションがあります。私はこれを実装して動作しますが、パネルの幅をカスタマイズしたいと思います。標準の幅は272pxです。これは私の使用にはちょっとです。私はCSSセレクタを使用してみましたが、これはパネルの内容のサイズを変更するだけです。パネル自体は表示されたままで、同じ幅のままです。 firefoxとchromeのインスペクタを使って、私はこのパネルを担当する正しいdivを見つけることができませんでした。誰かが正しい方法でパネルのサイズを変更する方法を見つけるのを手伝ってもらえますか？

Answer 1

私はそれを考え出しました！本当に複雑ではありません。私は自分でstructure.cssを使用していますが、他のCSSファイルを使用している場合は、さらにカスタマイズする必要があります。とにかく...

好きなエディタを使って、&を "17em"と置き換えて、実際に必要な値に置き換えてください。左パネルのスタイリングと右パネルのスタイリングがあります。無関係な "17em"がここやそこに存在する可能性があるので、私はこの全過程を急ぐつもりはありません。それはちょうどそれは単純な答えだが、私は自分自身で満足している分...

を取る：P

Answer 2

あなたは誤植をしたと思います。あなたはおそらく、もちろん

<panel style="width: 150px;"> 

をそのインラインを発行している場合

.ui-panel { width: 150px; } 

を試すか、私はjQueryのにしていますように、新しい、私が間違っている可能性があります。

Answer 3

彼らは、このデモでは、パネルの幅を変更する方法を示しています。http://jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html

Answer 4

私は自分自身を同じ問題を持っていたと私は必要な幅で17em交換するtylerlの助言に従いました。どちらがうまくいけば、私はCSSを読み込むためにGoogleのcdnを使用していたので、私はそれを直接変更することはできませんでしたが、一般的に私はライブラリコードを変更する大きなファンではありません。

だからそれで遊んで少し私はあなたが個別に左右のサイドバーのための幅を設定することができ、デフォルトのjqueryの携帯のCSS https://gist.github.com/geekdevs/5433246

を再定義するために、このコードを思い付きました。これはコードが少ないですが、@ left-sidebar-widthと@ right-sidebar-widthを必要な幅に置き換えるだけで、普通のCSSでもうまく動作します。あなたが編集にサイズをグローバルにしたくない場合は

Answer 5

、ご希望の幅に23emを変更し、必要に応じてカスタムCSSの追加IDにこれを追加します。

注：これは左のみです側。

.ui-panel { 
    width: 23em; 
} 
.ui-panel-position-left { 
    left: -23em; 
} 
/* positioning: content wrap, fixed toolbars and dismiss */ 
/* panel left open */ 
.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: 23em; 
    right: -23em; 
} 
/* animated: panel left open (for reveal and push) */ 
.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(23em,0,0); 
    -moz-transform: translate3d(23em,0,0); 
    transform: translate3d(23em,0,0); 
} 

Answer 6

私はので、私はパッチの上にしようとしたライブラリのcssファイルに変更を作りたいと思っていなかったが、それらのどれも私はさらにいくつかのスタイルを追加する必要がありました1.4.1

モバイルjqueryの上で働いていませんそれを働かせる。

ここに私の変更されたCSSがあります。（それぞれ、あなたの左と右のサイズで10emと15 EMを交換）

.ui-panel { 
    width: 10em; 
} 

.ui-panel.ui-panel-position-right { 
    width: 15em; 
} 

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

.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(-10em, 0, 0); 
    -moz-transform: translate3d(-10em, 0, 0); 
    transform: translate3d(-10em, 0, 0) 
} 

.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(15em, 0, 0); 
    -moz-transform: translate3d(15em, 0, 0); 
    transform: translate3d(15em, 0, 0) 
} 

.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(10em, 0, 0); 
    -moz-transform: translate3d(10em, 0, 0); 
    transform: translate3d(10em, 0, 0) 
} 

.ui-panel-animate.ui-panel-page-content-position-left{ 
    -webkit-transform: translate3d(10em, 0, 0); 
    -moz-transform: translate3d(10em, 0, 0); 
    transform: translate3d(10em, 0, 0); 
} 

.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(-15em, 0, 0); 
    -moz-transform: translate3d(-15em, 0, 0); 
    transform: translate3d(-15em, 0, 0) 
}