jqueryレイアウトでマージンを取り除く方法

8


2

jqueryレイアウトでマージンを取り除く方法

私はhttp://layout.jquery-dev.net/[jquery layout]を使用していますが、ペインの余白を取り除くのは非常に困難です。 常にマージンがあり、CSSがそれらを取り除くことはありません。 私はシンプルなデモを実装しています。http：//layout.jquery-dev.net/demos/simple.html [シンプルなデモ]だから基本的には同じことをしたいのですが、内側のペインにマージン/パディングはありません。 これらを自分で調整します。 目的は、境界から境界に広がる背景画像をそこに配置できるようにすることです。

私が十分に明確であることを願っています。

css jquery jquery-ui

Source

2 Answer

10


次のCSSルールが問題を解決する可能性があると思います。

.ui-layout-pane {
  padding: 0px !important;
}

残念ながら、ペインプラグインは多くの絶対配置を行うように見えるので、コンテナのサイズはそれぞれ20pxずれている可能性があります。 それを修正するjQueryを書くことができるかもしれません：

jQuery('.ui-layout-pane').each( function() {
  var el = jQuery(this);
  el.width( el.width() + 20 );
} );

…​or somesuch, but…​ yea, it’s not ideal. You might want to look for a 異なるプラグインを使用するか、このプラグインのソースを変更して、ペインのサイズの20pxの不一致を考慮します。

Source

2


O.P.のときよりも新しいバージョンのUIレイアウトを使用しています。 この質問を作成しましたが、このペインオプションはしばらく前からあったと思います。 以下は私のために働いたので、ハッキングを必要とするべきではありません（むしろソースを精査する/ドキュメントを読む）

applyDefaultStylesをfalseに設定してみてください。 （または多分今ではapplyDemoStylesと呼ばれています）

E.g.

$("body").layout({applyDefaultStyles:false});

or

$("body").layout({applyDemoStyles:false});

'' '' '

更新：

FWIW-http://layout.jquery-dev.net/demos/complex.html[complex layout]を使用しています-jquery.layout 1.3.0-Release Candidate 30.79

具体的には、これは「ウェストサイドバー」の内部設定ペインで機能しました。 私にとって、applyDefaultStylesは、ターゲットとしていたペインの不要な白いパディングを制御します。 さまざまなペインの設定を宣言するさまざまな方法があります。 次のような「リスト形式」を使用しました…​

//'list format'
westSidebarSettings_Inner = {
  applyDefaultStyles: false  // basic styling for testing & demo purposes
  , // (other settings ommitted in this stackoverflow snippet for brevity)
}

//'sub-key format'
var layoutSettings_Outer = {
  name: "outerLayout"
  // options.defaults apply to ALL PANES - but overridden by pane-specific settings
 , defaults: {
    size: "auto"
    , minSize: 50
    , paneClass: "pane"         // default = 'ui-layout-pane'
    , resizerClass: "resizer"   // default = 'ui-layout-resizer'
    , togglerClass: "toggler"   // default = 'ui-layout-toggler'
    , buttonClass: "button" // default = 'ui-layout-button'
  }
 , north: {
    spacing_open: 21                // cosmetic spacing
    , togglerLength_open: 21        // to HIDE the toggler button, set = 0
    , togglerLength_closed: 21      // "100%" OR -1 = full width of pane
  }
}


$(document).ready(function () {
  // create the OUTER LAYOUT
  outerLayout = $("body").layout(layoutSettings_Outer);

  // create an INNER LAYOUT to split my west sidebar into 2 pieces
  // (actual settings ommitted in this stackoverflow snippet for brevity)
  innerLayout = $(outerLayout.options.west.paneSelector).layout(westSidebarSettings_Inner);
});

Source

Linked
Related