コニファ・ロゴ

csstest:jquery.enhsplitter.jsを使って、サイズを変更できるアプリのペイン風パネル

jQueryプラグインのjquery.enhsplitter.jsを使って、PCのアプリケーションのペイン風でサイズ変更可能なパネルの実装です。

サンプルの#demoOneAと#demoTwoの間の縦方向の仕切り、#demoTwoAと#demoTwoBの間の横方向の仕切りをクリックすると、一定サイズに比率が変わり、もう一度クリックすると、元に戻ります。また、この部分をつかんでスライドさせて、自由にサイズを変更できます(各ペインの最小サイズはあります)。

#demoThreeAと#demoThreeBの間の横方向の仕切りは、スライド不可で、クリックすると、#demoThreeAが隠れた状態になります。

サンプル

#demoOneA

Welcome to the demo page for hiltonjanfield/jquery.enhsplitter.

This splitter is set with {minSize: 50, vertical: false}. This is the lower pane of the outer splitter; the two panels and splitter above are contained within the upper panel of this splitter.

Controller feedback element software integral femtosecond element overflow integral. Or patch element supporting mainframe software resistor floating-point development broadband, technician development converter generator. Encapsulated logistically kilohertz fragmentation feedback coordinated, anomoly port log read-only plasma deviation deviation scalar. Pulse, capacitance software feedback feedback network, device overflow.

#demoTwoA

This splitter was created with purely default options, resulting in a vertical splitter, 100px minimum panel size, and a standard collapse handle.

#demoTwoB

There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.

#demoThreeA

Sidebar Example with fixed splitter.

#demoThreeB

This splitter was created using with the options {handle: 'bar', position: 150, leftMinSize: 30, fixed: true}. position defines a starting size, {limit, lowerLimit, and upperLimit} define how small the panels may get, and handle sets up a different effect for the collapse handle. The {fixed: true} option disables the ability to drag the splitter around, while leaving the collapse options intact - the result being an unmovable bar with a button that collapses it back and forth.

Pulse recognition metafile ethernet element prompt dithering bus system resistor deviation scalar coordinated transmission adaptive. Prompt reducer record deviation led silicon transmission. Floating-point port development plasma, led phase pulse. High, inversion, recursive, element system broadband, gigabyte extended sampling frequency deviation data software.

 

※参照元:http://janfield.ca/github/jquery.enhsplitter/demo.html
参照元のリンクが切れているかもしれません。

 

 

戻るボタン