-1

iOS と Android の両方でリリースされた、AppMobi にラップされた JQuery Mobile ベースのアプリを作成しました。今のところ大きな問題は聞いていません。今日、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

シンプルなものほど良い - ここに 1 行の修正があります: カスタム選択メニューに組み込まれている 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/

ここで行ったように、show() と hide() を slideDown() と slideUp() に置き換えて、ある種の目の保養を作成することができます: 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');

もちろん、これは1つの「偽の」ドロップダウンリストに対してのみ機能しますが、複数に対して同じことを行う完全な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 に答える