To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. The CSS that is used to do this can cause issues with buttons and form elements on the page if their container has a CSS multi-column layout (column-count). To resolve this you have to set the following rule for the element or its container:
+
External Panels
+
Since jQuery Mobile 1.4.0, it is also possible to have external panels. This means that you can now have panels located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page. This can be handy when you want to use the same panel on more than one page.
+
+
Here is an example of an external panel:
+
+
+
+
+
+
+
+
+
+
+]]>
+
+
The panel can be enhanced manually as follows:
+
+
+
+
Note that if the panel contains other jQuery Mobile widgets, such as listviews, these will need to be enhanced manually as well.
+
Panel markup conventions
A panel consists of a container with a attribute and a unique ID. This ID will be referenced by the link or button to open and close the panel. The most basic panel markup looks like this:
@@ -194,44 +221,44 @@ $( "#idofpanel" ).panel( "close" );
Class added to the panel, page contents wrapper and fixed toolbars when option animate is true and the 3D transform feature test returns true.
-
-
-
-
-
-
-
-