0

我对 JQueryMobile 和一般网络非常陌生。
如何将按钮约束放置在填充屏幕高度的右侧。

这是我想要实现的目标的说明：
在此处输入图像描述

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

4

1 回答 1

1

工作示例：http: //jsfiddle.net/XF6NV/

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 Mobile 更好的第 3 方网格。我们需要它来将按钮移动到右侧。

于 2013-04-24T10:38:29.783 回答