1

如果您访问 jquery mobile，您会看到该站点具有实现移动工具的代码，但这些工具也适用于他们的桌面版本，所以我想知道他们是如何做到的。

链接在这里：http: //jquerymobile.com/demos/1.2.0/docs/forms/switch/

我试图在网站上实施代码，但我没有运气。

In the header:
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


In the body:    
<div class="containing-element">
        <label for="flip-min">Flip switch:</label>
        <select name="flip-min" id="flip-min" data-role="slider">
            <option value="off">Switch Off</option>
            <option value="on">Switch On</option>
        </select>
    </div>

为什么这会导致不同的结果？这将返回如下所示的内容： 在此处输入图像描述

4

1 回答 1

3

我相信这可能是因为您没有链接库附带的 Jquery 移动样式表。正是它附带的 css 样式使许多 ui 元素看起来像您在他们的网站上看到的那样。

把它记在你的脑海里

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

并将其添加到您的主包装器 div

<div data-role="page">
于 2013-02-26T23:05:39.657 回答