Question

我正在尝试使blankWindow类可拖动，并且句柄必须是#blankWindowHandle。我下载了JQuery UI的自定义下载，但没有任何工作。它仍然只是突出显示句柄元素顶部的文本：

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

Answer 1

您的JS代码可能在创建DOM之前执行。尝试使用$（document）.ready（function（）{}）;或其缩写$（function（）{}）;确保在创建DOM之后运行JS。您也可以将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>

JQuery UI Draggable无法使用我的应用程序

1 个答案: