9

新しい jQuery モバイルには、新しいパネル オプションがあります。これを実装して動作しますが、パネルの幅をカスタマイズしたいと思います。標準の幅は 272px で、これは私の使用には少し多めです。私は使用してみました

.ui-panel{width:150px;}

CSS セレクターですが、これは単にパネルのコンテンツのサイズを変更するだけです。パネル自体は表示されたままで、同じ幅のままです。firefox と chrome でインスペクターを使用しても、このパネルを担当する正しい div を見つけることができませんでした。正しい方法でパネルのサイズを変更する方法を見つけるのを手伝ってくれる人はいますか?

4

7 に答える 7

16

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

お気に入りのエディターを使用して、「17em」の検索と置換を行い、実際に必要な値に置き換えます。左パネルのスタイリングと右パネルのスタイリングがあります。関係のない「17em」があちこちにある可能性があるため、このプロセス全体を急ぐことはしません。ほんの1分かかります...

それは簡単な答えですが、私は自分自身に満足しています:p

于 2013-03-22T07:06:26.177 に答える
11

私自身も同じ問題を抱えており、tylerl のアドバイスに従い、17em を必要な幅に置き換えました。これはうまく機能しましたが、Google cdn を使用して css を読み込んでいたため、直接変更することはできませんでした。一般的に、ライブラリ コードを変更することはあまり好きではありません。

それで、少し遊んで、デフォルトのjqueryモバイルのcssを再定義するためのこのコードを思いつきましたhttps://gist.github.com/geekdevs/5433246

左右のサイドバーの幅を個別に設定できます。これは LESS コードですが、@left-sidebar-width と @right-sidebar-width を必要な幅に置き換えるだけで、プレーンな CSS でも機能します。

于 2013-04-22T08:33:37.223 に答える
5

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

于 2013-03-11T20:51:50.743 に答える
1

サイズをグローバルに編集したくない場合は、これをカスタム css に追加して、必要に応じて ID を追加し、23emを目的の幅に変更します。

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

.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);
}
于 2013-07-16T19:53:01.173 に答える
0

あなたはタイプミスをしたと思います。試す

.ui-panel { width: 150px; }

または、インラインで発行している場合は、おそらく

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

もちろん、私は jquery に慣れていないので、間違っている可能性があります。

于 2013-03-05T15:06:35.723 に答える