2

自分のサイトで JQuery UI を選択可能にするのに苦労しています。私はまだコーディングに非常に慣れていないので、何が間違っているのかわかりません。関連する質問を検索しましたが、それを理解できるものを見つけることができませんでした。

私は、本質的に仕事用の栄光のラベルメーカーを作成しようとしています.マウスの「なげなわ」を使用してグリッド内のセルを選択できるようにしたいと考えています. しかし、何らかの理由で、まったく選択可能にできません。

ここにjsがあります：

    $('document').ready(function() {

        for (i=0; i<117;i++)    {
                $('#plateActual').append('<div class="cell"/>');
                }

                $('#plateActual').selectable();
        });

HTMLは次のとおりです。

    <!DOCTYPE html>
<html>
        <head>
                    <title></title>
                    <link rel="stylesheet" href="style.css" />
                    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
                    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
                    <script type="text/javascript"  src="script.js"></script>
                    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        </head>

        <body>
        <div id="wrapper">

                 <div id="navbar">      
                 </div>
                 <div id="controlPanel">
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>

                 </div>
                 <div id="plateEditor">
                            <div id="plateActual">

                            </div>

                 </div>
                 <div id="bottom">
                 </div>
        </div>

        <script type="text/javascript"  src="script.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        </body>

CSSは次のとおりです。

 body   {
        margin: 0px auto;
        padding: 0;
}


p       {
        color: yellow;
}

#wrapper    {
                border: 1px dotted black;
                width: 980px;
                margin: 0px auto;
                padding: 0;
}

#navbar  {
             width: 980px;
             background: black;
             height: 50px;
             position: fixed;
             margin: 0;
             padding: 0;
             top: -10px;
}

#controlPanel        {

                                 width: 250px;
                                 background-color: red;
                                 float:left;
                                 top: 100px;    
                                 margin-bottom: 0;

}

#plateEditor             {
                                 position:    relative;
                                 overflow: auto;
                                 width: 730px;
                                 float:right;
                                 top: 100px;
                                 margin-bottom: 0;
                                 margin-top: 150px;
}

#plateActual             {
                                 border: 1px solid;
                                 width: 403px;
                                 height: 279px;
                                 margin: 0px auto;
                                 pading: 0;
}

#bottom                      {
                                 width: 980px;
                                 height: 30px;
                                 background:green;
                                 clear: both;
                                 bottom: 0;
                                 margin: 0px auto;
                                 padding: 0;
}

.cell                            {
                                 float: left;
                                 width: 29px;
                                 height: 29px;
                                 border: 1px    dotted;

}

コードが乱雑で整理されていない場合は、お詫び申し上げます。私はまだそれを整理し、一般的に受け入れられる方法で書くのが最善の方法を考えています. どうもありがとうございました。

更新:安藤が提案した変更を加えましたが、まだ選択可能にできません。#plateActual を ol または ul に変更し、代わりに li.cell を追加しようとしましたが、どちらも機能しませんでした。

私のcssが何らかの形で干渉しているのではないかと思っていましたが、フォーマットを破壊せずにそれを修正する方法がわかりません。

4

1 に答える 1

0

append によって返される要素は、追加が実行される要素になるため、クラスを間違った要素にplateActual追加することになります。cell

セルを追加する場合 (使用する場合)、「dom から$('<div/>')型の要素を取得し'<div/>'、'plateActual' 要素内に移動する」と解釈されます。まだ存在しない要素を作成しているため、$ なしで追加する必要があります。

このようなものが動作するはずです ( http://jsfiddle.net/k3YJY/ ):

for (var i=0; i<5;i++)    {                          
          $('#plateActual').append('<div class="cell"/>');                                           
}
于 2012-07-22T05:54:23.277 に答える