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>

script.jsindex.htmlは index.html と同じフォルダーにあります。body セクションでサイズ変更できる単純な 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">

$("#div")標準の jQuery ファイルでは、セレクターと関数を使用できます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 の Web サイトから:

<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 に答える