Question

这是我的index.jsp文件，但是jQuery mobile CSS和JS不能正常工作。

enter image description here

我的.css和.js文件与index.jsp处于同一目录级别。它们应该在不同的目录中吗？这是我的目录结构

enter image description here

这是我的index.jsp：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0a4.1.css" />
        <script type="text/javascript" src="jquery.mobile-1.0a4.1.js"></script>
    </head>
    <body>
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>
    </body>
</html>

Firebug说两个资源都已加载

enter image description here

Answer 1

您需要在内容周围添加一个data-role =“page”标记，并添加jQuery框架

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="fieldcontain">
                <label for="slider">Input slider:</label>
                <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
            </div>
        </div>
    </body>
</html>

Answer 2

jQuery mobile也需要加载jQuery。下载它，将它放在同一个文件夹中，并在加载jQuery mobile之前添加以下行。

<script type="text/javascript" src="jquery.js"></script>

Answer 3

您的页面远离参考页面结构，如here所示。

你的身体应该包含以下物品：

<div data-role="page">
... your content in the body
</div>

Answer 4

嗯，你需要将它们包含在文件的标题中：

    <link rel="stylesheet" type="text/css" href="something.css" />
<script type='text/javascript' src='something.js'></script>

Answer 5

使用jquery-mobile和jsp需要确保你使用的是cdn路径

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

jQuery移动规则尚未应用

5 个答案: