Related properties of the JQuery Mobile panel

Reference website: http://www.lampweb.org/jquerymobile/19/64.html Panel data-role= "Panel"

In a jQuery Mobile "page", the panel and "header", "Footer", "content" must be sibling elements. You can add tags to the panel before or after them, but not in the middle of them. Note: This constraint will be removed in a future release.

data-role= "page" data-role= "panel" id= "mypanel" <!--/panel-<!--header-- <!--Content-<!--footer -

Also, the markup for adding a panel is behind the header, content, footer, or just before the page container terminator. The placement of the panel markers in the code order will depend on the C level (HTML only) or screen reader, how you want to show the content to the reader.

A "page" that contains "panel" (the screen), if the frame contains headings, content, and footer sections in a div, transitions are applied to this container when the panel is opened in the displayed mode "reveal" or "push". A fixed header and footer is an exception. Those that are not included in this container, but will be synchronized with its transitions. Note that all of your visible page content should live in these page sections.

to avoid flashing when the panel is opened, we force the hardware of the WebKit browser to accelerate. If the container has a CSS multi-column layout (number of columns), the buttons on the page form elements that can cause problems in CSS. To resolve this, the following rules must be set on the element or its container:
-webkit-transform:translate3d (0,0,0);

Panel markers The Convention panel has a container data-role= "Panel"Property and a unique ID。 This ID is the identity of the link or button that opens the close panel.

data-role= "panel" id= "mypanel" <!--panel content goes here--

The position of the Panel on the screen is set using the Data-position property

• Data-position= "left", which is the default value, means that it will appear on the right edge of the screen.
• Data-position= "Right", it appears on the left edge.

The display mode setting of the panel uses the Data-display property

• Data-display= "reveal", default value, slide the page out of the screen like a slideshow, and display the panel
• data-display= "Overlay", the panel appears on top of the page content.
• Data-display= "Push" is also a "push" panel and page.

data-role= "panel" id= "mypanel" data-position= "right" data-display= "push" <!-- Panel content goes here--

Dynamic content

You must trigger the updatelayout event on the panel when the panel opens in the open state, dynamically making the content visible to the panel or hiding the contents of the panel.

"#mypanel" "updatelayout" );

The jquery mobile framework checks the new height of the panel content, and if it exceeds the screen height, the settings page is min-height to display at the screen height, and the new positioning panel data-position-fixed= "true".

Open panel

• Click a link to a panel somewhere on the page. The href attribute value is the ID value of the panel. Click on it, open the Panel, click Again, close the panel.
• Switch directly by invoking the open method of the panel.
• The default display panel is on the left.

href= "#mypanel" "#idofpanel""Open" optionsHash );

When using the tag to control the panel, only one single panel can be opened at a time. Click on the next panel link and the previous open panel will automatically close. This is done in order to keep the tags simple to configure.

<! DOCTYPE html> Data-role="page"Style= "max-height:440px; min-height:440px; " > <divData-role="header"> Data-role="content"><a href="#defaultpanel" Data-role="button" Data-inline="true" Data-icon="bars">Default panel</a> </div><!--defaultpanel --<divData-role="panel" ID="defaultpanel" Data-theme="b"> <div class= "panel-content" > <a href="#demo-links" Data-rel="close" Data-role="button" Data-theme="c" Data-icon="delete" Data-inline="true">Close Panel</a></div> <!--/content wrapper for padding----</div><!--/defaultpanel --</div> </body> 
Close panel
 
 

  
  
 
   
Click the Panel link to open the panel and slide left or right. Tap the ESC key to close the panel. Cancel this "off behavior" and add the data-swipe-close= "false" property to the panel.
 
   
By default, the panel can be turned off by clicking on the "page" section outside of "Panel". To prevent this behavior, add the data-dismissible= "false" property to the panel.
 
   
Panels and pages may also side-by-side on the screen. In order to prevent accidental hits, only the application programming method.
 
   
The Add Close button inside the panel is also common. Add a link, close the panel, and add the data-rel= "Close" property. When clicked, the JQM frame closes the panel. To ensure that this link is working properly, it is important to prevent JavaScript from being unavailable, so the hyperlink points to the ID of the page, so that it jumps back when the button is clicked.
 
  
 
 
//Use the panel's Close method to close the panel "#idofpanel" "close" //Click the button in the header bar to open the Panel, the header column ID value my-header. The Close button in the panel is as follows: <a href= "#my-header" Data-rel= "close" > Close Panel</a>
Panel animations
If the browser supports 3D transformations, the panel will have animations, and the same standard CSS animations support the page conversions we use. Panel animations use Translatex CSS transforms to ensure that their hardware is accelerated and smooth.
The JQuery Mobile Framework has a feature that tests the required CSS property support, and if not available, will fall back to a simple hide/show. After thorough testing, the ability of non-animated panels is poor because there is no undulating platform animation a better experience than a simple hide/show.
The animation option allows you to turn off the panel animation for all devices. Turn off animation by giving the Panel container HTML tags, adding data-animate= "false" property.
When you open the Panel, use hardware acceleration to trigger the page initialization period to prevent blinking. Because this increases the use of memory, if you use a long list or script to dynamically inject the content on the page with the animation panel, you must be aware of the efficiency issue.
Panel positioning
The display position of the panel is the absolute positioning of the CSS property:position:absolute. This means that the panel will scroll along with the page. When a panel is open, the jquery mobile framework checks whether the bottom of the panel content is inside the view, and if not, the panel scrolls to the top of the page.
You can set the position of a panel:position:fixed, and add the data-position-fixed= "true" property to the panel, so no matter how far you scroll the page, its contents will be displayed. The jquery mobile framework also checks to see if the contents of the Panel are within the window before fixing the positioning. Because this property will prevent the panel's content from scrolling and using overflow does not support enough to use at this time. If the panel content is too long, within the viewport, the frame will not have a fixed positioning display panel at all.
In general, we recommend that you put the button on the open panel and place it on top. This avoids the need for scrolling and makes the transition a little smoother.
Note that having fixed positioning on Android WebView application issues (not the browser) can cause layout problems, especially when hardware acceleration is not enabled. We recommend that you do not use the Fixed location panel option if you deploy to an Android application. Also, if there is a toolbar pinned to a fixed page, the toolbar may not transition with the page content.
The style of the panel
By default, panels have a very simple way to customize your own needs. The panel is basically just a simple block without margin, sitting on one side of the Web content. The framework includes the contents of the panel in a Div container, its CSS is the Ui-pannel-inner class, and the padding is 15 pixels. If you want, you can override this custom CSS or use the option Classes.panelinner to set different class names for the Div.
When the panel is opened, the Panel has a fixed width of 17em (272px), enough to display some page content, on a wider tablet or desktop screen, looks good. Setting the style width for the panel is quite complex, but these can be overridden as needed by CSS.
Note: Adding padding, borders, or margins directly to the Panel container will change the overall size and may also result in the effects of positioning and animation. To avoid this situation, apply a style (. ui-pannel-inner) to the panel content container.
In addition to the theme background, width and height of the 100% style, the panel has a very small shape on its own. The default theme for the panel is "C". You can add a different theme to the panel by adding Data-theme through the Panel container, or set data-theme= "None" to add your own CSS class style.
This framework uses the theme for the Web content container. Open a panel, display the mode reveal or push, the theme of the Web page will be set to the same theme as the panel used. This is done to cover up the background animation of the screen board that most mobile browsers have not finished yet, when opening it has already started. If you use a background image of a webpage, you must set it as the theme of the ui-body-* CSS class, giving you the use of the page, which will be used as the background content container.
Setting the response of the panel
When pushing or revealing the display with the panel, turn the page on one side. Because some pages are push-to-draw, the panel is modal and must be closed to interact with the page content again. On the larger screen, there may be more like a collapsible tray that you want to work with, which can be opened and used together to make better use of screen real estate.
To make the page work together, open the panel and it needs to flow again to a narrow width to fit the panel next to it. This allows you to add a left or right edge to the width of the panel (17EM) to re-flow the content of the Web page through a pure CSS. Second, the invisible layer placed on the page clicked on the dismiss behavior is hidden CSS you can click on the page instead of closing the menu.
Here is an example of these rules, wrapped in a media query only applicable to the above behavior 35em (560px):
@media (min-width:35em) {/* Wrap on wide viewports once open */.ui-page-panel-open. Ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,.ui-page-panel-open. Ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,.ui-page-panel-open . Ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,.ui-page-panel-open. ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {margin-right:17em;}. Ui-page-panel-open. Ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,. Ui-page-panel-open. Ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right ,. Ui-page-panel-open. Ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,. Ui-page-panel-open. ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {margin-left:17em;}. Ui-page-panel-open. Ui-panel-content-fixed-toolbar-display-push,.ui-page-paNel-open. ui-panel-content-fixed-toolbar-display-reveal {Width:auto;} /* Disable "dismiss" on wide viewports */.ui-panel-dismiss {display:none;} /* Same as the above but for panels with display mode ' push ' only */.ui-panel-dismiss-display-push {display:none;}}
Apply a preset Breakpoint
The type of control contained in is a breakpoint, this behavior preset, kicked at 55em (880px). This breakpoint is not used by default to enable you to write custom breakpoints that are most suitable for your content and design easier. To apply a breakpoint preset, add a Ui-responsive-panel class page wrapper (not a panel).
Related properties of the JQuery Mobile panel