Question

我包括

<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

在我的index.html标头中，script.js与index.html位于同一文件夹中。我有一个简单的div，可以在body部分调整大小。

script.js有

$(document).ready(function () {
    $("div").resizable();
});

非常简单..但是当我在所有浏览器上加载index.html时，div不可调整大小。包含js文件的方式是不正确的？

我假设我应该能够加载index.html并开始调整div的大小。

更新：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css"/>
        <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <script src='script.js'></script>
    </head>
    <body>
        <div>Resize Me!</div>
    </body>
</html>

Answer 1

在'stylesheet.css'中，您是否引用了jquery UI样式？这可能是问题 - 可调整大小元素右下方出现的可拖动箭头是使用jquery UI css生成的。

来自jquery UI的网站：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Answer 2

您需要更多的东西才能正确设置HTML + JS。

<html>
    <meta name="viewport" content="height=device-height,width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />

    <link href="Styling/jquery-ui/jquery-ui-1.10.0.css" rel="stylesheet" type="text/css" />

    <!-- Add your CSS here -->

    <script src="Scripts/External/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="Scripts/External/jquery-ui-1.10.0.js" type="text/javascript"></script>

    <!-- Add your JS here -->
</head>
<body>
    <div id='sizeableDiv'> Resize me! </div>
</body>
</html>

你做的是忘记为jQuery添加样式。

编辑在文档中也发现了可调整大小的方法略有不同。在<div>标记之后，添加：

<script type="text/javascript">
    $( "#sizeableDiv" ).resizable( "enable" );
</script>

找到此here。

HTML文件没有加载jQuery

2 个答案: