0

タスクの期間を表示するグリッドを作成しています。

display:block に一連の div があり、ドキュメントの準備ができたら、javascript と jqueryui を使用して、1) 子 div をブロック div に追加します 2) 子 div をドラッグおよびサイズ変更可能にします これは正常に機能します。div の幅 (タスクの期間) も事前に設定したいのですが、奇妙な動作があります。ドキュメントが読み込まれた後に div のサイズが変更されません。ただし、div ボーダーをクリックしてサイズを変更するとすぐに、スクリプトで使用した値に幅が「ポップ」されます。

簡易HTMLはこちら

<div id="gridcontainer">
    <div id="railing_1" class="railing"></div>      
    <div id="railing_2" class="railing"></div> 
</div>

そして、これが html ドキュメントの先頭にある JS です。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript">

            var displayRange = { "slots": "24", "unit":"h","start":"0" };
            var taskList = {
                "tasks": [
                { "id":"1" , "line":"1", "start":"0","duration":"72" }, 
                { "id":"2" , "line":"1", "start":"73","duration":"48" }, 
                { "id":"3" , "line":"2", "start":"0","duration":"120" }
                ]
            };
    </script>
    <script type="text/javascript">
        $().ready(function(){
            var railingId;
            var taskId;
            var jTaskId;
            var oNewP;
            var oText;
            var displayRange = { "slots": "24", "unit":"h","start":"0" };
            var taskList = {
                "tasks": [
                { "id":"1" , "line":"1", "start":"0","duration":"72" }, 
                { "id":"2" , "line":"1", "start":"73","duration":"48" }, 
                { "id":"3" , "line":"2", "start":"0","duration":"120" }
                ]
            };
            //get the task list and create/append the children to each line
            for(var i = 0; i<taskList.tasks.length; i++){
                //alert(taskList.tasks[i].duration);
                railingId = "railing_" + taskList.tasks[i].line;
                taskId = "task_" + taskList.tasks[i].id;
                oNewP = document.createElement("div");
                oText = document.createTextNode(taskList.tasks[i].id);
                oNewP.setAttribute("id",taskId);
                oNewP.setAttribute("class","taskbar");
                oNewP.appendChild(oText);
                document.getElementById(railingId).appendChild(oNewP);
                jTaskId = "#" + taskId;
                $(jTaskId)
                    .draggable({ 
                                grid: [ 24, 44 ],
                                containment: "#gridcontainer",
                                axis: "x, y" 
                                })
                    .resizable({
                                grid: [ 24, 0 ],
                                handles: "e, w",
                                containment: "#gridcontainer"
                                });
            }
         });

/*
Here is where I try to preset one of the tasks as an example; I've also
tried using $('#task_2').width("100");
but didn't work
*/

             $('#task_2').css("width","100px");
     </script>

問題のあるJsfiddleを設定しました：

http://jsfiddle.net/tPUpN/

2 番目のサイズを変更しようとすると、100 ピクセルがポップされ、サイズ変更可能なグリッド (24 ピクセル) に従ってサイズを変更できることがわかります。

もちろん、タスク 2 を 100 にプリセットしてほしいのですが...

何か案は？

乱雑なコードをお詫びします。

EDIT これはJqueryとは何の関係もないようです.JQを気にせずにJavascriptの幅とsetAttributeメソッドを使ってみましたが、結果はサイズ変更されません. JQ の興味深い部分は、クリックしてサイズを変更すると、div が試行されたサイズにポップされることです。これは、ドキュメントが適切に「リロード」されていないことを示しているようで (??)、div をクリックすると、いくつかの魔法が起こります。

4

1 に答える 1

0

このStackoverflowスレッドで見つかった問題のルート：

display：inlineは高さと幅をリセットします

インライン要素には幅がないため、これはJavascriptの問題ではありません。問題はCSS定義にありました。表示を削除しました：インライン命令とそれは正常に動作しました。

SOに素晴らしい情報を投稿してくれた皆さんに感謝します。

于 2013-03-24T01:09:23.333 に答える