Jquery中Quora样式的“添加内容”图标

Question

使用Jquery，我试图模仿quora的“添加问题”按钮所做的事情。添加问题按钮是一个简单的浮动'+‘在底部中央对齐。

​

​

为了模仿我的应用程序，我创建了一个带有ui-格列格-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>

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

这是一个演示