search

frequent / multiview

jQuery Mobile panels (menu/main)
66 stars 30 forks source link

Additional Slideover "Drawer" Panel? #19

Open ErnoRubik opened 12 years ago

ErnoRubik commented 12 years ago

Hey. This isn't an "issue", per se, but more a question of how to accomplish something somewhat unique.

Using SplitView on an iPad with PhoneGap. Pretty standard layout and functionality so far.

I'm also using an HTML5 editor to create an editable area for the user. I would like this to be accessed like this:

User uses navigation and main panels to view content and information, like normal splitview. I want to place a control in the lower-right-hand corner that looks basically like a page-flag. Tapping this control will open a "drawer", i.e. a div outside the normal flow of navigation will slide into view, occupying the lower-half of the main panel's area. The main panel and navigation panel will both still be displayed when this extra panel is visible. Tapping this page flag again will hide the 'drawer' without disturbing the main or navigation panels.

Any ideas on how to accomplish this? Anything inside SplitView I can use that will make this easier?

Thank you!

Rubik

PS - Split View is AMAZING. Has totally saved my bacon on this project. Thank you so much for developing it and sharing it with the JQM community.

frequent commented 12 years ago

Out of the box, I would use a popover panel. See on this page for example.

Popovers are like main/mid/menu, so just insert after your last panel:

<div data-role="panel" data-panel="popover" data-id="your_panel_name">
       // your pages here
</div>

You can set shape, size and postion of the popover (I'm using class popover1), so you can put it on the bottom and expand it to any size your want. If positioning with CSS from the top, use margin-top and left. From the bottom you have to try what works best.

The toggle-button to hide/show should look like this:

 <a href="#" data-role="button" data-panel="your_panel_name" class="toggle_popover">Button</a>

This will hide/show the popover. Should be good to go.

ErnoRubik commented 12 years ago

That sounds straight forward...I'll try that and report back. Thank you!!

ErnoRubik commented 12 years ago

I must be missing some magic runes, because I'm not able to get the panel to ever display. Am I missing something obvious?

Added the button to the footer of the navigation panel (cuz it's an easy place to put it for testing) and added the new panel after the main panel in index.html. Added a page with some content to the panel. Set height, width, bottom, and right params to the new panel.

Tap the button and nothing happens...

What am I missing?

Thank you so much for your help!!!

Garrett Rohde Atlanta, Georgia