Question

我对JQueryMobile和网络很新。
如何将按钮约束定位到填充屏幕高度的右侧。

以下是我想要实现的目标：
enter image description here

所有内容（徽标+文字）都应该在<div data-role="content">，（或者可能不是？）。我再次对这个平台很陌生关于如何做到这一点的任何想法？

Answer 1

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <fieldset class="container_12">
                    <div class="grid_11">
                       Put your content here
                    </div>
                    <div class="grid_1"><a data-role="button" id="custom-btn">></a></div>                  
                </fieldset>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>    
    </body>
</html>

Javascript：

$(document).on('pageshow', '#index', function(){     
    //Remove button corners
    $("#custom-btn").buttonMarkup({corners: false });    
    // Set content height to full availabe, normaly content will only be high as its content
    $('[data-role="content"]').height(getRealContentHeight());

    // horizontaly center button text
    $('.ui-btn-inner').css({
        position:'absolute',
        top: (getRealContentHeight() - $('.ui-btn-inne').outerHeight())/2
    });    
});

// Used to determine real availabe content size    
function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height - 1;
}

CSS：

 /* remove content padding */
.ui-content {
    padding: 0 !important;
}

#custom-btn {
    margin: 0 0 !important;
    height: 99.7%;
    width: 100%;
}
/* Set grid height to be full 100% of content height */
.container_12, .grid_1, .grid_11 {
    height: 100% !important;
}

其他框架：

Fluid960 for jQuery Mobile - 用作更好的第三方网格，然后是官方jQuery移动网格。我们需要它将按钮移到右侧。

如何使用JQueryMobile创建一个按钮约束到右侧屏幕

1 个答案: