JQUERY MOBILE对话而不是JS Alert

时间:2015-10-16 03:03:46

标签: javascript jquery jquery-mobile

我正在构建我的第一个JQ移动应用程序,我一直试图找到一种方法来替换Alert(MyResult),使用更好的JQMobile Modal弹出,如下所示:DIALOG

我试过几乎所有东西,但没有任何作用。

我的应用程序中的技术我需要填充3个字段,而不是验证并运行一些计算来显示结果

我只是一个带有Onclick功能的按钮:

<div class="ui-grid-a ui-responsive">
        <div class="ui-block-a"><button class="ui-btn ui-shadow ui-corner-all ui-btn-b" onclick="Calculer_BMI()">CALCULER</button></div>            
        <div class="ui-block-b"><button class="ui-btn ui-shadow ui-corner-all ui-btn-b" onclick="Delete_fields()">EFFACER</button></div>            
    </div> 

我的函数Calculer_BMI()看起来像这样:

<script>
function Calculer_BMI(){

    var heightFeet   = parseInt($('#feetInput').val());
    var heightInches = parseInt($('#inchesInput').val());
    var weightPds    = parseFloat($('#weightInput').val()); 

    if ($.isNumeric(heightFeet) && $.isNumeric(heightInches) && $.isNumeric(weightPds) ){
        var result = ((weightPds / Math.pow((heightFeet * 12)+heightInches,2)) * 703).toFixed(2);
        alert("Votre IMC est: " +result);   


    }
    else
    {                       
    alert("Tous les champs sont obligatoires et doivent seulement contenir des chiffres.")
    }
}

我只是觉得iOS或任何其他移动平台上的警报真的很糟糕。我想要像Dialog

这样的更好的东西

这是JQMobile网站上提供的用于对话框的代码......我尝试了60,000种方法从我的Onclick功能启动它,但它确实有效。

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
    <h1>Delete Page?</h1>
    </div>
    <div role="main" class="ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
    <p>This action cannot be undone.</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
    </div>
</div>

这里有人有Modals的经验吗?我只需要显示能够构建它并从我的函数调用它以显示计算结果。

谢谢:)

0 个答案:

没有答案
相关问题