0

包括我

<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 可以在正文部分调整大小。

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>
4

3 回答 3

3

您正在加载 jQuery UI 文件。您还需要加载标准的 jQuery 文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css">

标准的 jQuery 文件允许您使用选择器$("#div")和函数ready()。jQueryUI 允许您使用该功能resizeable()。所以你需要加载两者。

编辑：由于您将其标记为html5，您可以使用

<script src='script.js'></script>

假设<script>是 HTML5 中的 javascript。

于 2013-02-06T22:25:33.070 回答
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>
于 2013-02-06T22:49:19.353 回答
0

您需要更多的东西来正确设置 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>

在这里找到这个。

于 2013-02-06T22:43:16.937 回答