javascript - Quora 在 Jquery Mobile 中样式化了 "add content"图标

Question

使用 Jquery Mobile，我试图模拟 quora 使用其“添加问题”按钮所做的事情。 “添加问题”按钮是一个简单的 float “+”，居中对齐在底部。

为了对我的应用程序进行同样的模拟，我使用 ui-grid-b 创建了一个透明的页脚，并将加号图标放在 block-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>

以主题背景颜色: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 使其 float 在其他内容之上，其余的将位置固定在底部中心。

Here is a DEMO