1. 首页
  2. 问答
  3. 页面加载后jquery大小调整不起作用

页面加载后jquery大小调整不起作用

2014-06-19 48 views
-2

我有一个页面，它将文档的body html存储在localStorage中。当页面重新加载时，它应该（并且）将内容放置在重新加载之前的相同位置。我可以拖动，排序和调整大小，直到我刷新页面。之后，拖动和排序继续工作，但调整大小失败。页面加载后jquery大小调整不起作用

我在没有任何负面选民帮助的情况下自己想清楚了。问题在于如何存储jquery的可调整大小。我必须在页面重新加载时删除添加的元素。

EDIT

有功能问题在所附的标签（通过可调整大小的创建）。下面就是保存到localStorage的是身体的HTML：

<header> 
    <div id="pgtitle">How much in a day?</div> 
    <div id="login">Bob</div> 
    <div id="urname"> 
    <div>What is your name?</div> 
    <input id="name"> 
    <button type="button" id="button">Submit</button> 
    </div> 
</header> 

<div id="greeting"></div> 
<br> 
<div style="position: relative; left: 162px; top: 28px;" class="drag ui-draggable"> 
    <div class="header"> 
    <span style="color:white;">Quicklinks </span> 
    <span style="color:white;width:10px" id="minmin" class="min">(X)</span> 
    </div> 

<div style="width: 577px; height: 312px;" id="mymenu" class="ui-widget-content ui-resizable"> 
    <button id="add">Add</button> 
    <button id="remove">Remove</button> 
    <br><br> 

    <div id="addmenu" style="position:absolute;"> 
    <input id="itemname" placeholder="Enter name here" autocomplete="off"> 
    <input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off"> 
    <button id="itemsubmit">Submit</button> 
    </div> 

    <div id="rmmenu" style="position:absolute;"> 
    <input id="rmitemname" placeholder="Item name" autocomplete="off"> 
    <button id="rmitemsubmit">Submit</button> 
    </div> 

    <div class="ui-sortable" id="mylinks"></div> 
    <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> 
    <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> 
    <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> 
    <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> 
    <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> 
    <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> 

</div> 
</div> 
<div id="mynextmenu"></div>

所以问题是以下保存的部分，但我不知道为什么它打破东西或者为什么它甚至还有：

<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> 
     <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> 
     <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> 
     <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div> 
     <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div> 
     <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>

下面是我原来放的时候我碰到的问题：

这里是jQuery代码的一个片段：

$(function() { 

    if (localStorage.mypage) { $("body").html(localStorage.mypage); } 

    $(".drag").draggable({ handle:'.header'}) 
    $("#mymenu").resizable(); 
    $("#mylinks").sortable(); 
    $("#mylinks").disableSelection(); 

    setInterval(function(){ 
    var mypage = $('body').html(); 
    localStorage.mypage = mypage 
    },1000); 
    });

这里是人体的一个片段，以及：

<body> 

<div class="drag"> 
    <div class="header"> 
    <span style="color:white;">Quicklinks </span> 
    <span style="color:white;width:10px" id="minmin" class="min">(X)</span> 
    </div> 
    <div id="mymenu" class="ui-widget-content"> 
    <div id="mylinks"></div> 
    </div> 
</div> 

</body>

这里是整个事情：

<!DOCTYPE html> 
<html> 
<head> 
<title>In a day</title> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<style> 
html, body { margin:0px; } 
header { position:absolute; top:0px; left:0px; background: -moz-linear-gradient(#457995,#1C4961); color:white; height:30px; width:100%; } 
#pgtitle { position:absolute; top: 3px; left:20px; } 
#login { position:absolute; top: 3px; right:30px; } 
#urname { position:absolute; padding:10px; display: none; top: 30px; right:0px; width: 230px; height: 60px; background:#1C4961; color: white; } 
#greeting { margin:0; margin-top:30px; text-align: center; background: #1C4961; color: white; } 
#mymenu { padding:10px; width: 250px; background: #457995; min-height: 20px; } 
#addmenu { display: none; } 
#rmmenu { display: none; } 
#mylinks div { margin:3px; } 
.menuitems { background:lightgray;border:1px outset white; } 
.header { width:100px;background:#1C4961;height:20px;margin:0px; } 
</style> 

<script> 

$(function() { 

    //check if cached page info and load if so 
    if (localStorage.mypage) { $("body").html(localStorage.mypage); } 
    //$("#mylinks").html(localStorage.mylinks); 
    //localStorage.removeItem("mypage"); 

    //toggle login name and let change if needed 
    $("#login").click(function() { $("#urname").toggle(); }); 
    var xman = $("#login").text() 
    if (localStorage.myname) { 
    $("#login").text(localStorage.myname); 
    } 
    else { $("#login").text("Login"); } 

    //Greeting for new user 
    $("#button").click(function() { 
    var truname = $("#name").val() 
    $("#greeting").text("Hello " + truname + " Welcome to my site!!"); 
    $("#login").text(truname); 
    $("#name").val("") 
    $("#urname").hide(); 
    localStorage.myname = truname 
    }); 

    //save links info 
    $("#itemsubmit").click(function() { 
    var itemname = $("#itemname").val() 
    var itemlink = $("#itemlink").val() 
    $("#mylinks").append("<div id='" + itemname + "' class='menuitems'><a href='" + itemlink + "' target='_blank'>" + itemname + "</a></div>"); 
    var mylinks = $("#mylinks").html() 
    localStorage.mylinks = mylinks 
    $("#addmenu").hide() 
    }); 

    $("#add").click(function() { 
    $("#addmenu").toggle(); 
    $("#rmmenu").hide() 
    }); 

    $("#remove").click(function() { 
    $("#rmmenu").toggle(); 
    $("#addmenu").hide() 
    }); 

    $("#rmitemsubmit").click(function() { 
    var rmitm = "#" + $("#rmitemname").val() 
    $(rmitm).remove() 
    $("#rmmenu").hide() 
    var mylinks = $("#mylinks").html() 
    localStorage.mylinks = mylinks 
    }); 

    $(".drag").draggable({ handle:'.header'}) 

// setTimeout(function() { 
    $("#mymenu").resizable(); 
    //},2000); 

    $("#mylinks").sortable(); 
    $("#mylinks").disableSelection(); 

    $(".min").click(function() { 
    $(this).parents().find('#mymenu').slideToggle(); 
    }); 

    setInterval(function(){ 
    var mypage = $('body').html(); 
    localStorage.mypage = mypage 
    },1000); 

}); 

</script> 

</head> 
<body> 
<header> 
<div id="pgtitle">How much in a day?</div> 
<div id="login"></div> 

<div id="urname"> 
<div>What is your name?</div> 
<input id="name"> 
<button type="button" id="button">Submit</button> 
</div> 
</header> 

<div id="greeting"></div> 
<br> 
<div class="drag"> 
<div class="header"> 
    <span style="color:white;">Quicklinks </span> 
    <span style="color:white;width:10px" id="minmin" class="min">(X)</span> 
</div> 
<div id="mymenu" class="ui-widget-content"> 
<button id="add">Add</button> 
<button id="remove">Remove</button> 
<br><br> 
<div id="addmenu" style="position:absolute;"> 
<input id="itemname" placeholder="Enter name here" autocomplete="off"> 
<input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off"> 
<button id="itemsubmit">Submit</button> 
</div> 
<div id="rmmenu" style="position:absolute;"> 
<input id="rmitemname" placeholder="Item name" autocomplete="off"> 
<button id="rmitemsubmit">Submit</button> 
</div> 
<div id="mylinks"></div> 
</div> 
</div> 
<div id="mynextmenu"></div> 
</body> 
</html>

来源

2014-06-19 Jeight

+0

有人可以解释为什么你投了这个没有任何解释为什么？ – Jeight

回答

0

我承担所有的代码在你的片断的顶部是内部一个<script>标签？

尝试将所有脚本移动到页面底部，在drag div之后。这样，你的jQuery就会在写完后找到它们。

尝试包裹如下，等待DOM准备：

if (localStorage.mypage) { $("body").html(localStorage.mypage); } // this outside the function wrapper. You have it inside. 

$(function() {  // wait for domready 
    $(".drag").draggable({ handle:'.header'}) 
    $("#mymenu").resizable(); 
    $("#mylinks").sortable().disableSelection(); 

    setInterval(function(){ 
     var mypage = $('body').html(); 
     localStorage.mypage = mypage; 
    },1000); 
});

来源

2014-06-20 00:08:45 GAEfan

+0

是的，他们在

0

一旦页面加载，然后用下面的jQuery中删除不需要的div $（“div.ui调整大小手柄”）删除（） ; $（“div.ui-resizable-n”）。remove（）;

一旦完成，那么它将工作。

来源

2015-12-28 07:43:47 Ashok

相关问题

 相关问题