2

ページで作業しているjQM 1.3.1のパネルがありますが、幅を広げる必要があります。私はこのCSSを適用しました：

.ui-pannel-inner {
    width: 25em;
}

これにより、幅が「視覚的に」増加するため、パネルは「幅」になりましたが、フレームワークは<div class="ui-panel-dismiss ui-panel-dismiss-position-right ui-panel-dismiss-display-push ui-panel-dismiss-open" data-panelid="PanelOptions"></div>、デフォルトのパネル幅に基づいて幅が明確に定義された を作成します。これ<div>は、パネルを閉じる「クリック可能な」領域として機能します。通常、この領域はパネルでカバーされていないページの領域と正確に一致しますが、実際にはパネルもカバーしています。その結果、(これは「右側」のパネルです) パネルの左端近くをクリックすると (たとえば、ラジオ ボタンをクリックします)、 で覆われた領域をクリックする<div class="ui-panel-dismiss...と、パネルが閉じます。つまり<div class="ui-panel-dismiss、パネルの左側の一部をカバーします。

data-dismissible="false"この動作を防ぐために <タグに追加できることはわかってdiv data-role="panel" ...いますが、ページをクリックしてパネルを閉じることができなくなります。

@ jQuery Mobile パネル幅で提示された提案を試してみましたが、どちらも「表示される」パネル幅を変更しますが、どちらもパネル<div class="ui-panel-dismiss...の追加幅とまだ重なっているという事実を扱っていません。

Panel の幅を「正しく」変更して、使用する必要がないようにするにはどうすればよい-dismissible="false"ですか?

ありがとうございました。

4

3 に答える 3

0

head セクションに追加するだけです：

  <style>
    .ui-panel-dismiss-open.ui-panel-dismiss-position-left { left: 356px !important }
  </style>

jQuery Mobile 1.4.5で私のために働いた

于 2015-03-19T21:11:41.057 に答える
0

このように ui-panel-dismiss-position-left をオーバーライドして、閉じるパネルの位置を指定できます

 .ui-panel-dismiss-position-left{
     left: -240px;
     right: 240px;
 }

または、パネルを開いた後に位置を動的に変更できます。

http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-styling.html#&ui-state=dialogを参照してください

于 2013-05-10T02:54:28.007 に答える