Quora在Jquery Mobile中添加「添加內容」圖標

Question

使用Jquery Mobile，我試圖模擬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> 

CSS爲bottomCenter類：

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

高的z-index保持它上面漂浮其他內容，其餘設置位置至固定在底部中心。

這裏是一個DEMO