jquery 移动设备未在 jsfiddle 中显示

jquery mobile not displaying in jsfiddle

我无法在 jquery 移动应用程序中使用 select 菜单,并认为我会 post 这里的问题,但我什至无法获得在 fiddle 中正确显示的内容。我想我会先解决 fiddle 问题。

这是我的 fiddle,其中包含以下代码:

html

<div data-role='content'>
<table class='my-tables'>
    <caption style='text-align: left;'>Table A</caption>
    <thead>
        <TR>
            <TH align='left'>Type</TH>
            <TH align='left'>Amount</TH>
            <th colspan='4' scope='col'>
                <label for='selmenu'></label>
                <select id='selmenu' class='sel' data-native-menu='false' style='width: 100px'>
                    <option class='type1' value='type1'>type1</option>
                    <option class='type2' value='type2'>type2</option>
                    <option class='type3' value='type3'>type3</option>
                    <option class='type4' value='type4'>type4</option>
                </select>
        </TR>
        <TR>
            <TH align=l eft>Cars</TH>
            <TD>5,000</TD>
            <TD class='exhaust type1'>7000</TD>
            <TD class='exhaust type2'>6000</TD>
            <TD class='exhaust type3'>5000</TD>
            <TD class='exhaust type4'>4000</TD>
        </TR>
        <TR>
            <TH align=l eft>Trucks</TH>
            <TD>45672</TD>
            <TD class='exhaust type1'>154</TD>
            <TD class='exhaust type2'>1.1</TD>
            <TD class='exhaust type3'>3.7</TD>
            <TD class='exhaust type4'>55.2</TD>
        </TR>
        <TH align=l eft>Motorcycles</TH>
        <TD>224455</TD>
        <TD class='exhaust type1'>88</TD>
        <TD class='exhaust type2'>99</TD>
        <TD class='exhaust type3'>77</TD>
        <TD class='exhaust type4'>55</TD>
        </TR>
</TABLE>
<div data-role='footer'>
     <h4>my footer</h4>

</div>
<!-- /footer -->

jquery

$(document).ready(function () {
$('.exhaust').hide();
$('.type1').show();

$('.sel').change(function () {
    $('.exhaust').hide();
    $('.' + this.value).show();
    $('.sel').val(this.value);
});
});

为什么我的 fiddle 甚至不显示 jqm 样式?我在 Whosebug 中研究了类似的问题,发现 this question on the same thing,但我的 fiddle 页面没有显示该问题中给出的示例中可用的选项。

我错过了什么?

两件事:

  1. 使用jQuery 1.8.3 库。包含的外部资源 JQM 1.2.0 不适用于更高版本。
  2. 使用 HTTPS 加载外部资源:

    https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

在那之后,你的 fiddle 应该可以工作了。

更新:

除此之外,一旦您选择jQuery 1.8.3 版本,fiddle 将在框架选择菜单下方为您提供JQM 库。所以,不需要包含外部文件。