jquery和jqueryui:使用resizable后设置宽度不工作? [英] Jquery and Jqueryui: set width not working after using resizable?

查看:137
本文介绍了jquery和jqueryui:使用resizable后设置宽度不工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我在display:block中有一组div,当文档准备就绪时,我使用javascript和jqueryui来显示任务的持续时间。 :
1)将子div添加到块div
2)使子div可拖动并调整大小
这可以正常工作。
我也想预设divs宽度(任务持续时间),但是有一个奇怪的行为:div在文档加载后不能调整大小。然而,只要我点击div边框来调整它的大小,宽度就会弹出到我在脚本中使用的值。



以下是简化的HTML

p>

 < div id =gridcontainer> 
< div id =railing_1class =railing>< / div>
< div id =railing_2class =railing>< / div>
< / div>

这里是html文档头部的JS:

 < script type =text / javascriptsrc =http://code.jquery.com/jquery-1.9.1.js><<<< ; /脚本> 

< script type =text / javascriptsrc =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}
]
};
//获取任务列表并创建/追加子元素到每行
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],
句柄:e,w,
containment:#gridcontainer
});
}
});

/ *
这里是我尝试预设其中一个任务的例子;我也
尝试使用$('#task_2')。width(100);
但无效
* /

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

我为这个问题设置了一个Jsfiddle:

http://jsfiddle.net/tPUpN/



您会注意到,如果您尝试调整数字2的大小,它将弹出100px,然后它可以根据可调整大小的网格(24px)进行大小调整。 $ b

当然,我想要任务2预设为100 ...



有什么想法?

对于乱七八糟的代码抱歉。



编辑
这似乎与Jquery没有任何关系 - 我尝试简单地使用Javascript宽度和setAttribute方法,而不关心JQ - 但结果是没有调整大小。
关于JQ的互动部分是,当我点击调整大小时,div弹出到所尝试的大小 - 这似乎表明文档没有正确重新加载(??),当我单击div时,一些魔术发生了。

解决方案



显示:内嵌重置高度和宽度



INLINE ELEMENTS没有宽度,所以这不是Javascript问题。问题在于CSS定义。

感谢所有人在SO中发布精彩信息。


I am writing a grid to show task durations.

I have a set of divs in a display:block and when document is ready I use javascript and jqueryui to: 1) add child divs to the block divs 2) make the child divs draggable and resizable This works fine. I would also like to preset the divs width (the task duration), but there is a strange behavior: the divs do not resize after the document is loaded. However as soon as I click on the div border to resize it, the width "pops" to the value I used in the script.

Here is the simplified HTML

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

And here is the JS on the head of the html doc:

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

I've set a Jsfiddle with the problem:

http://jsfiddle.net/tPUpN/

You'll notice that if you try to resize number 2, it pops 100px, then it is able to resize according to the resizable grid (24px)

Of course, I would like task 2 to be preset as 100...

Any ideas?

Apologies for the messy code.

EDIT This doesn't seem to have anything to do with Jquery -- I've tried simply using Javascript width and setAttribute methods, without caring about JQ -- but the result is no resize. The interesing part about JQ is that when I click to resize, the div pops to the attempted size -- which seems to indicate the document is not "reloading" properly (??) and when I click the div, some magic happens.

解决方案

Root of the issue found on this Stackoverflow thread:

display:inline resets height and width

INLINE ELEMENTS do not have width, so this is not a Javascript problem. The issue was with the CSS definition. Removed the display: inline instruction and it worked fine.

Thanks for everyone posting bits of wonderful information in SO.

这篇关于jquery和jqueryui:使用resizable后设置宽度不工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆