Quora在Jquery Mobile中设置了“添加内容”图标

Question

使用Jquery Mobile，我试图用“添加问题”按钮来模拟quora做了什么。 “添加问题”按钮是一个简单的浮动“ + ”，位于底部的中央。

要为我的应用程序模拟相同的效果，我创建了一个带有ui-grid-b的透明页脚，并在块-b中放置了加号图标

       <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                <div class="ui-grid-b">
                    <div class="ui-block-a" style="text-align: left;"></div>
                    <div class="ui-block-b" style="text-align: center;">
                    <a href="#" data-role="button" data-icon="flat-plus" class="ui-nodisc-icon"></a>
                    </div>
                    <div class="ui-block-c" style="text-align: right;"></div>                
                </div><!-- /grid-a -->
            </h3>                
        </div>

主题为background-color：rgba（0,0,0,0）;我的底部确实有一个加号，但Quora无法做到这一点。

我的解决方案不允许用户触摸并滑动页脚中的任何位置 - 而quora应用程序没有这样的疑虑。加号按钮几乎是一个独立的岛屿。我怎样才能用JQM实现这样的目标？

Answer 1

不使用页脚，只需使用内联按钮，然后添加一些CSS以使其居中并将其修复到页面底部：

按钮标记（添加了bottomCenter类）：

<a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-icon-plus ui-btn-icon-notext ui-corner-all bottomCenter">Add</a>

bottomCenter类的CSS：

.bottomCenter {
    position: fixed;
    z-index: 9999;
    bottom: 4px;
    left: 50%;
    margin: 0;
    margin-left: -15px;
}

高z-index使其浮动在其他内容之上，其余的将位置设置为固定在底部中心。

  

这是 DEMO