Upon opening a panel, checks for .ui-header
(internal), .ui-content
and .ui-footer
(internal) to wrap them in .ui-panel-wrappr
div. That div (.ui-panel-wrapper
) receives open and close animation classes. If panel fails to find any of the aforementioned div's, the close animation classes won't be added and panel remains open.
_getWrapper: function () {
var wrapper = this._page().find("." + this.options.classes.pageWrapper);
if (wrapper.length === 0) {
wrapper = this._page().children(".ui-header:not(.ui-header-fixed), .ui-content:not(.ui-popup), .ui-footer:not(.ui-footer-fixed)")
.wrapAll("<div class='" + this.options.classes.pageWrapper + "'></div>")
.parent();
}
return wrapper;
},
In light of the above, any page should contain at least a header, footer or a content div in order to function as it should.
<div data-role="page">
<div data-role="panel">
<!-- panel content -->
</div>
<div role="main" class="ui-content">
<!-- contents -->
</div>
</div>