Javascript 页面加载后jquery可调整大小不工作_Javascript_Jquery_Html_Jquery Ui

Javascript 页面加载后jquery可调整大小不工作

javascript jquery html jquery-ui

Javascript 页面加载后jquery可调整大小不工作,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我有一个在localStorage中存储文档正文html的页面。当页面重新加载时，它应该（并且确实）将内容放在重新加载之前的相同位置。我可以拖动、排序和调整大小，直到刷新页面。之后，拖动和排序继续工作，但调整大小失败我自己解决了这个问题，没有得到那些消极选民的任何帮助。问题在于如何存储jquery的可调整大小。我必须在重新加载页面时删除添加的元素。编辑附加的标记（由Resizeable创建）存在功能问题。以下是作为正文的html保存到localstorage的内容： <header

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

我自己解决了这个问题，没有得到那些消极选民的任何帮助。问题在于如何存储jquery的可调整大小。我必须在重新加载页面时删除添加的元素。

编辑

附加的标记（由Resizeable创建）存在功能问题。以下是作为正文的html保存到localstorage的内容：

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

下面是正文的一个片段：

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


一天之内
html，正文{margin:0px；}
标题{位置：绝对；顶部：0px；左侧：0px；背景：-moz线性渐变（#457995，#1C4961）；颜色：白色；高度：30px；宽度：100%；}
#pgtitle{位置：绝对；顶部：3px；左侧：20px；}
#登录{位置：绝对；顶部：3px；右侧：30px；}
#urname{位置：绝对；填充：10px；显示：无；顶部：30px；右侧：0px；宽度：230px；高度：60px；背景：#1C4961；颜色：白色；}
#问候语{页边空白：0；页边空白顶部：30px；文本对齐：居中；背景：#1C4961；颜色：白色；}
#mymenu{填充：10px；宽度：250px；背景：457995；最小高度：20px；}
#添加菜单{显示：无；}
#rmmenu{显示：无；}
#mylinks div{margin:3px；}
.menuitems{背景：浅灰色；边框：1px白色；}
.header{宽度：100px；背景：1C4961；高度：20px；边距：0px；}
$（函数（）{
//检查是否缓存了页面信息，如果是，则加载
if（localStorage.mypage）{$（“body”）.html（localStorage.mypage）；}
//$（“#mylinks”）.html（localStorage.mylinks）；
//localStorage.removietem（“mypage”）；
//切换登录名，并在需要时进行更改
$（“#登录”）。单击（函数（）{$（“#urname”）.toggle（）；}）；
var xman=$（“#登录”）.text（）
如果（localStorage.myname）{
$（“#login”）.text（localStorage.myname）；
}
else{$（“#登录”）.text（“登录”）；}
//欢迎新用户
$（“#按钮”）。单击（函数（）{
var truname=$（“#name”）.val（）
$（“#问候语”）.text（“你好”+truname+“欢迎光临我的网站！！”；
$（“#登录”）.text（truname）；
$（“#名称”）.val（“”）
$（“#urname”）.hide（）；
localStorage.myname=truname
});
//保存链接信息
$（“#项目提交”）。单击（函数（）{
var itemname=$（“#itemname”）.val（）
var itemlink=$（“#itemlink”）.val（）
$（“#mylinks”）。追加（“”）；
var mylinks=$（“#mylinks”）.html（）
localStorage.mylinks=mylinks
$（“#添加菜单”）.hide（）
});
$（“#添加”）。单击（函数（）{
$（“#添加菜单”）.toggle（）；
$（“#rmmenu”）.hide（）
});
$（“#删除”）。单击（函数（）{
$（“#rmmenu”）.toggle（）；
$（“#添加菜单”）.hide（）
});
$（“#rmitemsubmit”）。单击（函数（）{
var rmitm=“#”+$（“#rmitemname”）.val（）
$（rmitm.remove（））
$（“#rmmenu”）.hide（）
var mylinks=$（“#mylinks”）.html（）
localStorage.mylinks=mylinks
});
$（“.drag”）.draggable（{handle:'.header'}）
//setTimeout（函数（）{
$（“#我的菜单”）.resizeable（）；
//},2000);
$（“#mylinks”）.sortable（）；
$（“#MyLink”）.disableSelection（）；
$（“.min”）。单击（函数（）{
$（this）.parents（）.find（“#mymenu”）.slideToggle（）；
});
setInterval（函数（）{
var mypage=$（'body'）.html（）；
localStorage.mypage=mypage
},1000);
});
一天多少钱？
你的名字叫什么？
提交


快速链接
（十）
添加
去除



提交
提交

我假设代码段顶部的所有代码都在

标记中

尝试将所有脚本向下移动到页面底部，在

拖动

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);
});

加载页面后，使用下面的jquery删除不需要的div $（“div.ui-resizable-handle”）.remove（）； $（“div.ui-resizeable-n”）.remove（）

一旦完成，它就会工作。

是的，它们在标签中。这只是一个片段。在我刷新页面之前，一切都按计划进行。将代码中可调整大小的部分移到页面底部似乎没有帮助。谢谢，这不管用。我已经在$（function（）中包含了所有内容，而将页面加载出去会导致它根本无法加载。请，我们的时间很宝贵。请为我们节省一些时间，并发布相关代码，如

和

$（function（））

wrappers。这很好，但我已经提到它一直在工作，直到页面刷新。我已经更新了代码段以包含它。

if（localStorage.mypage）{$（“body”）.html（localStorage.mypage）；}

不应该进入

$（函数

包装器中。

$（我编写的函数

wrapper正在等待加载。有人能解释一下为什么你不投票，而不解释原因吗？

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

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);
});