如何使用 nativedroid2 库在屏幕右上角创建一个浮动按钮？答案

【问题标题】：How to create a floating button in the right corner of a screen using nativedroid2 library?如何使用 nativedroid2 库在屏幕右上角创建一个浮动按钮？
【发布时间】：2016-05-26 06:34:28
【问题描述】：

我将cordova 与jquery mobile 和nativedroid2 库一起使用。我想在屏幕的右下角创建一个浮动按钮（就像我们在 gmail 应用程序中一样）。我无法完成必须将其声明为浮动按钮的部分。

<a href="#" class="ui-btn ui-btn-right ui-btn-fab" style="background-color:rgb(100,200,250);"><i class="zmdi zmdi-plus zmd-2x"></i></a>

我该怎么做？

【问题讨论】：

我知道必须添加一个特定的按钮类才能实现这一点，但真的不知道那是什么。

标签： android jquery html css cordova

【解决方案1】：

您需要将浮动按钮放置在主容器中。如果您在 jQuery mobile 上使用 nativedroid2，下面是您可以使用的代码示例 -

    <!-- message page -->
<div data-role="page" id="messages-page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>Messages</h1>
    </div> <!-- /header-->
    <div data-role="content">
        <ul id="listMessage" data-role="listview" data-icon="false" class="ui-listview" data-inset="true">
            <li class="ui-li-has-thumb">
                <a href="#" class="ui-btn waves-effect waves-button waves-effect waves-button">
                    <h2>Amit Anmol</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </a>
            </li>
            <li class="ui-li-has-thumb">
                <a href="#" class="ui-btn waves-effect waves-button waves-effect waves-button">
                    <h2>Amit Anmol</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </a>
            </li>
        </ul>

        <!-- floating button -->
        <a id="btn-compmsg" href="#compose-msg-page" class="ui-btn-fab ui-btn-raised clr-warning ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button" data-transition="flow">
            <i class='zmdi zmdi-plus zmd-2x'></i>
        </a>
    </div> <!-- /content -->
</div><!-- /message page -->

这段代码的输出是

【讨论】：