Javascript JQuery UI可拖动无法使用我的应用程序
我试图使blankWindow类可拖动,并且句柄必须是#blankWindowHandle。我下载了JQuery UI的自定义下载,但什么都没用。它仍然只是高亮显示句柄元素顶部的文本:Javascript JQuery UI可拖动无法使用我的应用程序,javascript,jquery,html,jquery-ui,user-interface,Javascript,Jquery,Html,Jquery Ui,User Interface,我试图使blankWindow类可拖动,并且句柄必须是#blankWindowHandle。我下载了JQuery UI的自定义下载,但什么都没用。它仍然只是高亮显示句柄元素顶部的文本: <!DOCTYPE html> <html> <head> <title>ModularWiz_B</title> <link rel="stylesheet" href="style.css" type="
<!DOCTYPE html>
<html>
<head>
<title>ModularWiz_B</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="apple-touch-icon-precomposed" href="images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/icon.png">
<link rel="apple-touch-startup-image" href="images/startup.png">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"> </script>
<script>
var online = navigator.onLine;
$(document).ready(function() {
if (online == false) {
$('#wifiwarning').fadeToggle("fast");
};
});
</script>
<script>
$( ".blankWindow" ).draggable({ handle: "#blankWindowHandle" });
// getter
var handle = $( ".blankWindow" ).draggable( "option", "handle" );
// setter
$( ".blankWindow" ).draggable( "option", "handle", "#blankWindowHandle" );
</script>
</head>
<body>
<div id="addButton">
<img src="images/add.png" alt="Add" onClick="$('#appMkt').fadeToggle('fast');"/>
</div>
<appWindow id='appMkt'>
<div class="close" onClick="$('#appMkt').fadeToggle('fast');"></div>
~APPS~<HR/>
<div onClick="$('.blankWindow').fadeToggle('fast');$('#appMkt').fadeToggle('fast');"><img src="images/icon.png"> .blankWindow()</div><hr/>
<div onClick="$('.info').fadeToggle('fast');$('#appMkt').fadeToggle('fast');"><img src="images/icon.png"> App Info</div>
</appWindow>
<appWindow class="blankWindow">
<div class="appClose" onClick="$('.blankWindow').fadeToggle('fast');"></div>
<center id="blankWindowHandle">
~Blank~<hr/>
</center>
This is a .blankWindow<br/><br/>
We can use this to house the apis (apps).
</appWindow>
<appWindow class="info">
<div class="close" onClick="$('.info').fadeToggle('fast');"></div>
~INFO~<HR/>
<a rel="license" href="https://creativecommons.org/licenses/by-nd/4.0/"><img alt="Creative Commons License" style="border-width:0;width:88px;height:31px;" src="https://i.creativecommons.org/l/by-nd/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">ModularWiz</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons Attribution-NoDerivatives 4.0 International License</a>.<hr/>
Developed by:<br/> ... and ...<hr/>
</appWindow>
<div id="wifiwarning">
<!-- NOTE: THIS DIV ALWAYS NEEDS TO BE THE VERY LAST THING ON THE PAGE INSIDE THE BODY TAGS -->
<br />
<br />
You need to be connected to the internet to use this app.
<br />
Please try going to settings and toggling wifi on
<br />
<br />
</div>
</body>
ModularWiz_B
var online=navigator.online;
$(文档).ready(函数(){
如果(在线==错误){
$('wifiwarning').fadeToggle(“fast”);
};
});
$(“.blankWindow”).draggable({handle:#blankWindowHandle});
//吸气剂
变量句柄=$(.blankWindow”).draggable(“选项”、“句柄”);
//塞特
$(.blankWindow”).draggable(“选项”、“句柄”、“blankWindowHandle”);
ModularWiz是根据。
开发人:
。。。和…
您需要连接到internet才能使用此应用程序。
请尝试转到“设置”并打开wifi
您的JS代码可能在创建DOM之前执行。尝试使用$(document.ready(function(){});或其缩写$(function(){});确保JS在创建DOM后运行。您还可以将JS放在主体的底部,以确保JS在DOM创建之后立即运行 更新:正如我所建议的,我把你的JS放在身体底部,效果很好
<!DOCTYPE html>
<html>
<head>
<title>ModularWiz_B</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="apple-touch-icon-precomposed" href="images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/icon.png">
<link rel="apple-touch-startup-image" href="images/startup.png">
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<div id="addButton">
<img src="images/add.png" alt="Add" onClick="$('#appMkt').fadeToggle('fast');"/>
</div>
<appWindow id='appMkt'>
<div class="close" onClick="$('#appMkt').fadeToggle('fast');"></div>
~APPS~<HR/>
<div onClick="$('.blankWindow').fadeToggle('fast');$('#appMkt').fadeToggle('fast');"><img src="images/icon.png"> .blankWindow()</div><hr/>
<div onClick="$('.info').fadeToggle('fast');$('#appMkt').fadeToggle('fast');"><img src="images/icon.png"> App Info</div>
</appWindow>
<appWindow class="blankWindow ui-draggable">
<div class="appClose" onClick="$('.blankWindow').fadeToggle('fast');"></div>
<center id="blankWindowHandle">
~Blank~<hr/>
</center>
This is a .blankWindow<br/><br/>
We can use this to house the apis (apps).
</appWindow>
<appWindow class="info">
<div class="close" onClick="$('.info').fadeToggle('fast');"></div>
~INFO~<HR/>
<a rel="license" href="https://creativecommons.org/licenses/by-nd/4.0/"><img alt="Creative Commons License" style="border-width:0;width:88px;height:31px;" src="https://i.creativecommons.org/l/by-nd/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">ModularWiz</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons Attribution-NoDerivatives 4.0 International License</a>.<hr/>
Developed by:<br/> ... and ...<hr/>
</appWindow>
<div id="wifiwarning">
<!-- NOTE: THIS DIV ALWAYS NEEDS TO BE THE VERY LAST THING ON THE PAGE INSIDE THE BODY TAGS -->
<br />
<br />
You need to be connected to the internet to use this app.
<br />
Please try going to settings and toggling wifi on
<br />
<br />
</div>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script>
var online = navigator.onLine;
$(document).ready(function() {
if (online == false) {
$('#wifiwarning').fadeToggle("fast");
};
});
</script>
<script>
$( ".blankWindow" ).draggable({ handle: "#blankWindowHandle" });
// getter
var handle = $( ".blankWindow" ).draggable( "option", "handle" );
// setter
$( ".blankWindow" ).draggable( "option", "handle", "#blankWindowHandle" );
</script>
</body>
ModularWiz_B
ModularWiz是根据。
开发人:
。。。和…
您需要连接到internet才能使用此应用程序。
请尝试转到“设置”并打开wifi
var online=navigator.online;
$(文档).ready(函数(){
如果(在线==错误){
$('wifiwarning').fadeToggle(“fast”);
};
});
$(“.blankWindow”).draggable({handle:#blankWindowHandle});
//吸气剂
变量句柄=$(.blankWindow”).draggable(“选项”、“句柄”);
//塞特
$(.blankWindow”).draggable(“选项”、“句柄”、“blankWindowHandle”);
我回家后会做得更好我保证:谢谢!这就是为什么我喜欢这些科技社区。。。每个人都非常友好和乐于助人:)一个问题,你正在使用的appWindow标签是什么?非常感谢!!!我不知道为什么它对我不起作用。我完全理解了你告诉我要做的事情,但它不起作用,直到我将你的代码复制到我的文档中。至于
标签,我自己做的,并通过css文件导入到文档中。你不必为我弄明白这一点,但现在我想知道是否有办法在苹果移动设备(如iPod Touch或iPad)上实现这一点。。。