1

ここにコンテキストがあります-私は、選択ボックスが大きな画面でjQuery Mobileが選択し、小さな画面でMobiScrollが選択するように表示される適応設計を作成しようとしています。HTMLの元のselectはこのように書かれています

<select data-mini='true' data-inline='true' class='variants' data-role='none' style='display:none'>
  <option value='1'>Small</option>
  <option value='2'>Medium</option>
  <option value='3'>Large</option>
</select>

の

style='display:none'

ビットは重要です。これがないと、小さな画面に 2 つのコントロールが表示されることになります。最初は元の選択、次に mobiscroll スタイルの選択です。これは、MobiScroll のドキュメントではあまり詳しく説明されていません。

私のdocument.readyコードでは、次の行に沿って何かを入れました

if (600 > $(window).width()) {
    $('.variants').scroller({
        preset: 'select',
        theme: 'android-
      ics',
        rows: 1,
        mode: 'scroller',
        display: 'inline',
        inputClass: 'i-txt',
        showLabel: false,
        width: 40,
        height: 20
    });
} else {
    $('.variants').css('display', 'inline-block').removeData('role');
}​

これにより、スタイル設定されていないブラウザーの選択ボックスが大きな画面に表示されます。選択を jQuery Mobile 選択として表示したいので、removeData を介してデータ ロール ビットを取り出そうとしています。ただし、これは起こっておらず、 removeData は何もしていません。私が間違っていることは何ですか？

4

2 に答える 2

3

jQuery docs .removeData()によると

.removeData() メソッドを使用すると、以前に .data() を使用して設定された値を削除できます。キーの名前で呼び出されると、.removeData() はその特定の値を削除します。引数なしで呼び出すと、すべての値が削除されます。jQuery の内部 .data() キャッシュからデータを削除しても、ドキュメント内の HTML5 data- 属性には影響しません。それらを削除するには、.removeAttr() を使用します。

ドキュメントで HTML5 data-attribute を使用しているようです...removeAttr('data-role')代わりに使用してください

于 2012-12-18T17:24:49.533 に答える
1

私はそれを考え出した！重要なのは、data-role = 'none' 属性を削除する必要がないことです。問題の要素に対してアップスタイルを試みないようにjQueryに指示する目的にのみ役立ちます。ただし、次のようなことをすると

$('.variants').css('display', 'inline-block').selectmenu()

選択の .variants ファミリーを jQuery Mobile 選択メニューに明示的に変換しているため、 data-role 属性はまったく画像に含まれません。私が求めていたことを行う変更されたコードは

if (600 > $(window).width()) {
$('.variants').scroller({
    preset: 'select',
    theme: 'android-
  ics',
    rows: 1,
    mode: 'scroller',
    display: 'inline',
    inputClass: 'i-txt',
    showLabel: false,
    width: 40,
    height: 20
});
} else {
$('.variants').css('display', 'inline-block').selectmenu();
}​
于 2012-12-18T17:49:10.837 に答える