mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
aa1f94a81f
Modified sv-test-02.html so that you can dynamically switch the scrolling method used. This will allow us to test the performance of different methods on the different platforms. Modified scrollview.js so that you can specify @data-scroll-method="translate|position|scroll".
60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
function ResizePageContentHeight(page)
|
|
{
|
|
var $page = $(page);
|
|
var $content = $page.children(".ui-content");
|
|
var hh = $page.children(".ui-header").outerHeight(); hh = hh ? hh : 0;
|
|
var fh = $page.children(".ui-footer").outerHeight(); fh = fh ? fh : 0;
|
|
var pt = parseFloat($content.css("padding-top"));
|
|
var pb = parseFloat($content.css("padding-bottom"));
|
|
var wh = window.innerHeight;
|
|
$content.height(wh - (hh + fh) - (pt + pb));
|
|
}
|
|
|
|
$("[data-role=page]").live("pageshow", function(event) {
|
|
var $page = $(this);
|
|
|
|
// For the demos that use this script, we want the content area of each
|
|
// page to be scrollable in the 'y' direction.
|
|
|
|
$page.find(".ui-content").attr("data-scroll", "y");
|
|
|
|
// This code that looks for [data-scroll] will eventually be folded
|
|
// into the jqm page processing code when scrollview support is "official"
|
|
// instead of "experimental".
|
|
|
|
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
|
|
var $this = $(this);
|
|
// XXX: Remove this check for ui-scrolllistview once we've
|
|
// integrated list divider support into the main scrollview class.
|
|
if ($this.hasClass("ui-scrolllistview"))
|
|
$this.scrolllistview();
|
|
else
|
|
{
|
|
var st = $this.data("scroll") + "";
|
|
var paging = st && st.search(/^[xy]p$/) != -1;
|
|
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
|
|
|
|
var opts = {};
|
|
if (dir)
|
|
opts.direction = dir;
|
|
if (paging)
|
|
opts.pagingEnabled = true;
|
|
|
|
var method = $this.data("scroll-method");
|
|
if (method)
|
|
opts.scrollMethod = method;
|
|
|
|
$this.scrollview(opts);
|
|
}
|
|
});
|
|
|
|
// For the demos, we want to make sure the page being shown has a content
|
|
// area that is sized to fit completely within the viewport. This should
|
|
// also handle the case where pages are loaded dynamically.
|
|
|
|
ResizePageContentHeight(event.target);
|
|
});
|
|
|
|
$(document).live("orientationchange", function(event) {
|
|
ResizePageContentHeight($(".ui-page"));
|
|
});
|