Quora在Jquery Mobile中设置了“添加内容”图标的样式
孤独
使用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>
主题背景色为：rgba（0，0，0，0）; 我在底部确实有一个加号，但是没有什么比Quora能够做到的要高。
我的解决方案不允许用户在页脚中的任何位置触摸和滑动-而quora应用程序没有这种限制。加号按钮几乎是一个孤岛。如何使用JQM实现类似的目标？
赞克
无需使用页脚，只需使用内联按钮，然后添加一些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使其浮动在其他内容之上，其余的将位置固定在底部中心。
这是一个演示
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在jQuery对话框中设置图标样式
- 2
如何在整个div内容中禁用jquery mobile的样式？
- 3
如何在jQuery Mobile中设置“列表项>链接”的样式
- 4
如何在jquery mobile中设置“列表项>链接”的样式
- 5
为CSS中的内容可编辑div设置关闭和调整大小按钮的样式，并通过jQuery添加rsize功能
- 6
如何设置面板高度等于jquery mobile中的内容？
- 7
在JQuery中设置$（this）.text的样式
- 8
设置内容高度100％jQuery mobile
- 9
设置内容高度100％jQuery mobile
- 10
如何设置 PrimeNg 下拉图标的样式
- 11
更新jQuery Mobile中动态添加的复选框的视觉样式
- 12
将.CSS样式元素添加到JQuery Mobile中的链接按钮
- 13
将类名称添加到样式化Jquery UI主题的动态生成内容中
- 14
更改侦听器不适用于JQuery Mobile中动态添加的内容
- 15
如何在JQuery中设置文本样式？
- 16
样式设置菜单jQuery中的错误
- 17
样式设置菜单jQuery中的错误
- 18
jQuery不会在动态内容上添加样式
- 19
刷新jQuery Mobile中的弹出内容
- 20
如何仅更改jQuery Mobile中的内容？
- 21
如何只更改jQuery Mobile中的内容？
- 22
Bower在样式中添加Jquery UI主题
- 23
Jquery Mobile的验证样式
- 24
添加动态内容并设置样式
- 25
如何用CSS设置png图标的样式？
- 26
如何设置md-select图标的样式？
- 27
如何设置项目符号列表图标的样式
- 28
使用jQuery Mobile向面板列表视图动态添加内容
- 29
在 WPF 中设置 DynamicResouce 图标的颜色
我来说两句