Panel: Added external panel and enhancement #370
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,9 +35,36 @@ | |
| <p>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 (<code>column-count</code>). To resolve this you have to set the following rule for the element or its container:</p> | ||
|
|
||
| <pre><code><![CDATA[ | ||
| -webkit-transform: translate3d( 0, 0, 0 ); | ||
| ]]></code></pre> | ||
|
|
||
| <h3>External Panels</h3> | ||
| <p>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. </p> | ||
|
|
||
| <p>Here is an example of an external panel:</p> | ||
|
|
||
| <pre><code><![CDATA[ | ||
| <div data-role="page"> | ||
| <!-- header --> | ||
| <!-- content --> | ||
| <!-- footer --> | ||
| </div><!-- page --> | ||
|
|
||
| <div data-role="panel" id="mypanel"> | ||
| <!-- panel content goes here --> | ||
| </div><!-- /panel --> | ||
| ]]></code></pre> | ||
|
|
||
| <p>The panel can be enhanced manually as follows:</p> | ||
|
|
||
| <pre><code><![CDATA[ | ||
| $( function() { | ||
|
There was a problem hiding this comment. @arschmitz I think I should actually remove the space before function so it goes |
||
| $( "#mypanel" ).panel(); | ||
| } ); | ||
| ]]></code></pre> | ||
|
|
||
| <p>Note that if the panel contains other jQuery Mobile widgets, such as listviews, these will need to be enhanced manually as well.</p> | ||
|
|
||
| <h3>Panel markup conventions</h3> | ||
| <p>A panel consists of a container with a <code><![CDATA[data-role="panel"]]></code> attribute and a unique <code>ID</code>. This <code>ID</code> will be referenced by the link or button to open and close the panel. The most basic panel markup looks like this:</p> | ||
|
|
||
|
|
@@ -194,44 +221,44 @@ $( "#idofpanel" ).panel( "close" ); | |
| <desc>Class added to the panel, page contents wrapper and fixed toolbars when option animate is true and the 3D transform feature test returns <code>true</code>.</desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.contentFixedToolbar" default='"ui-panel-fixed-toolbar-wrap"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to the page container to suppress scrolling horizontally</p> | ||
| </desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.contentFixedToolbarClosed" default='"ui-panel-content-fixed-toolbar-closed"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to fixed toolbars after the close animation is complete.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.contentFixedToolbarOpen" default='"ui-panel-content-fixed-toolbar-open"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to fixed toolbars when the panel is opening.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.contentWrap" default='"ui-panel-content-wrap"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to the wrapper injected around the page contents (header, content, footer), needed for positioning of the panel.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.contentWrapClosed" default='"ui-panel-content-wrap-closed"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to the page contents wrapper after the close animation is complete.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.contentWrapOpen" default='"ui-panel-content-wrap-open"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to the wrapper injected around the page contents (header, content, footer) when the panel is opening. Used for targeting hardware acceleration only during transitions.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
|
|
@@ -245,24 +272,27 @@ $( "#idofpanel" ).panel( "close" ); | |
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.pageContainer" default='"ui-panel-page-container"'> | ||
| <desc>Class applied to the page container.</desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.pageContentPrefix" default='"ui-panel-page-content"'> | ||
| <desc>Used for wrapper and fixed toolbars position, display and open classes.</desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.pageFixedToolbar" default='"ui-panel-fixed-toolbar"'> | ||
| <desc>Class applied to any fixed toolbars.</desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.pagePanel" default='"ui-page-panel"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to the page container when a panel widget is present.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
| </option> | ||
| <option name="classes.pagePanelOpen" default='"ui-page-panel-open"' removed="1.4"> | ||
| <desc> | ||
| <div class="warning"><strong>Note:</strong> This class is no longer used as of 1.4.0, so setting this option will have no effect on the panel.</div> | ||
| <p>Class added to the page when a panel is open.</p> | ||
| </desc> | ||
| <type name="String" /> | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems odd we originally used this in panel directly and removed it to fix some issues. We don't use this anywhere else including demos. cc @jaspermdegroot
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@arschmitz should this be removed? (the paragraph to avoid blinks... and the code?) I'm ok to wait for @jaspermdegroot 's reply :-)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would prefer to wait for @jaspermdegroot he is the one that worked on all this and knows what happened. I don't remember very well the details
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We still use
translate3d()for panel and page wrapper transitions. This note is about a bug that appears when your page contains a CSS columns layout.Correct, we don't have demo with panels and CSS columns.
This shouldn't be removed unless the bug is fixed in all WebKit browsers/versions that we support.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jaspermdegroot Sorry im not sure what i was doing the other day but i searched and could not find use in the repo, but i see it all over the place now. @agcolom feel free to ignore me and leave this sorry!