-1

我已经构建了一个基于 JQuery Mobile 的应用程序，该应用程序包含在 AppMobi 中，适用于 iOS 和 Android。到目前为止，我还没有听说过任何重大问题。今天我听说使用 Android ICS 的用户在访问任何下拉选择框时都会出现可重复的崩溃——我无法用我的旧测试单元重现该问题。我也让他们尝试了我的原始 html 网站——它不会产生相同的行为，但 AppMobi 的人似乎对 JQuery Mobile 的使用持暗淡的态度，所以不要指望那个季度会有太多帮助。

我的主要替代方案可能是用一些替代方案替换标准选择下拉选择框。

任何人都可以提出一个替代方案（越简单越好），它会产生与下面的代码相同的功能？

<select id="punits">
    <option value="in_H2O">in H2O</option>
    <option value="in_HG">in Hg</option>
    <option value="psi">psi</option>
    <option value="cm_H2O">cm H2O</option>
    <option value="cm_HG">cm Hg</option>
    <option value="kPa">kPa</option>
  </select>

提前谢谢你

4

3 回答 3

3

为了越简单越好 - 这是一个单行修复：我可以建议使用 jQuery Mobile 内置的自定义选择菜单吗？文档@ http://view.jquerymobile.com/master/demos/selectmenu-custom

基本上使用相同的 html，但将此行添加到您的 mobileinit

$.mobile.selectmenu.prototype.options.nativeMenu = false;

这将产生由 jQuery Mobile 呈现的所有选择菜单，而不是原生控件

于 2012-06-14T06:41:30.757 回答
2

我做了一个快速而肮脏的例子，此时它没有样式，但这样的东西可以工作。

JsFiddle 运行示例：http: //jsfiddle.net/29vBZ/3/

您可以相应地用 slideDown() 和 slideUp() 替换 show() 和 hide() 以创建某种眼睛糖果，就像我在这里所做的那样：http: //jsfiddle.net/29vBZ/6/

HTML：

<div id="customSelect"> 
    <div id="customSelectCaption"></div>
    <div class="customSelectItem" identifier="in_H2O">in H2O</div> 
    <div class="customSelectItem" identifier="in_HG">in Hg</div> 
    <div class="customSelectItem" identifier="psi">psi</div> 
    <div class="customSelectItem" identifier="cm_H2O">cm H2O</div> 
    <div class="customSelectItem" identifier="cm_HG">cm Hg</div> 
    <div class="customSelectItem" identifier="kPa">kPa</div> 
</div>

JavaScript/jQuery：

$(document).ready(function(){
//hide the options on load
$('#customSelect').children('.customSelectItem').hide();

//give it the caption of the first option as default.
var firstChild = $('#customSelect .customSelectItem');
$('#customSelect').attr('identifier', firstChild.attr('identifier'));
$('#customSelectCaption').html(firstChild.html());

//set a variable so we know in which state it is.
$('#customSelect').data('customSelectState', false);

//bind the click event so you can take action on click.
$('#customSelect').click(function(event){
    if($('#customSelect').data('customSelectState') == false)
    {
        //hide the caption, show the items.
        $('#customSelectCaption').hide();
        $('.customSelectItem').show();

        //set the variable so we know the state is now 'open'.
        $('#customSelect').data('customSelectState', true);
    }
    else
    {
        //set the new identifier.
        $('#customSelect').attr('identifier', $(event.target).attr('identifier'));

        //set the new caption.
        var newCaption = $(event.target).html();
        $('#customSelectCaption').html(newCaption);

        //show the caption, hide the items.
        $('#customSelectCaption').show();
        $('.customSelectItem').hide();

        //set the variable so we know the state is now 'closed'.
        $('#customSelect').data('customSelectState', false);
    }
});
});

要检索当前值，您可以简单地执行以下操作：

var currentSelection = $('#customSelect').attr('identifier');

Ofcource 这仅适用于一个“假”下拉列表，但可以扩展到一个完整的 jQuery 插件，它对多个做同样的事情。我希望这对您有所帮助。

于 2012-06-14T05:59:30.820 回答
0

我最终使用了带有堆叠单选按钮的新 (1.2) JQuery Mobile 弹出功能 ( http://jquerymobile.com/demos/1.2.0/docs/pages/popup/ )。比简单的下拉选择菜单复杂一点，但在 IOS 和 Android 上都可以正常工作

于 2012-12-02T10:04:09.667 回答