0

htmlについてはよくわかりません。しかし、何らかの理由で、$(...) のようなものを使用する私のプロジェクトは、Web API から常に機能するとは限りません。プロジェクトをオフラインにしてシステムから実行すると、それらは機能します。

例:

この$('…').bind('dragstart'…)を使用してウィンドウを移動すると、オフラインで動作しますが、webapi ではイベントがキャッチされません。

$(document).ready(function () {を使用 すると、参照を見つける際に問題が発生するようです。関数を削除すると、コードが参照を見つけます。

jqwidgets を使用すると、この行は起動に失敗します $("#jqxgrid").jqxGrid

私はここで完全にアイデアがありません。何か考えはありますか？

コメントが十分なスペースを与えないため、ここに私のコードを追加します。

htmlファイル

<!DOCTYPE html5>
<html lang="en">
<head>
<title>---</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href=           "../../www/jQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../www/jQWidgets/scripts/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.export.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/scripts/gettheme.js"></script>
<script type='text/javascript' src='../../www/javascript/spreadSheet.js'></script>
<script type='text/javascript' src='../../www/javascript/dataLoader.js'></script>
<script type='text/javascript' src='../../www/javascript/windowMaker.js'></script>
<link href="../../www/window.css" rel="stylesheet" />
<style type="text/css" media="screen">
    canvas, img { display:block; margin:1em auto; border:1px solid black; }
    canvas { background:url(../../www/background.png) }
</style>
<script type="text/javascript">

    var loadedData = loadData();
    makeWindow();

    function init()//this is called after the data is loaded. So hult all other action untill its read. 
    {
        var data = loadedData[0].data.Name;
       // makeSpreadSheet()


    }

</script>
</head>
<body  class='default'>
    <div id="demo4_box" class="box message" data-minwidth="75" data-minheight="50">
        <div id="bar" class="handle bar"><h2> window1</h2></div>
        <div id="content" class="contents"><canvas id="canvas1" width="100" height="100"></canvas></div>
        <div id="slider" class="handle resize">//</div>
    </div> 
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
            <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
            </div>
        </div>
    </div>

</body>
</html>

データローダーjsファイル

function loadData()
{
    var loadedData = new Array();
    $document).ready(function () {
        // Send an AJAX request
        $.getJSON("api/DB/",
        function (data) {
            $.each(data, function (key, val) {
                loadedData.push(val);
            }); init();
        });
    });
    return loadedData
}

ウィンドウメーカーjsファイル

function makeWindow( )
{
    $(window).load(function () {

        $('#demo4_box').bind('dragstart', function (event) {

            return $(event.target).is('.handle');
        }).bind('drag', function (event) {
            $(this).css({
                top: event.offsetY,
                left: event.offsetX
            });
        });

        $(".resize").bind('dragstart', function (event) {
            var $box = $(this).closest(".box");

            $box.data("width", $box.width());
            $box.data("height", $box.height());
            $box.data("x", event.offsetX);
            $box.data("y", event.offsetY);

        }).bind("drag", function (event) {
            var $box = $(this).closest(".box");

            $box.width(Math.max($box.data("width") - $box.data("x") + event.offsetX, $box.data("minwidth")));
            $box.height(Math.max($box.data("height") - $box.data("y") + event.offsetY, $box.data("minheight")));
        });
    });



}
4

2 に答える 2

0

試してみてください$.noConflict()。その$兆候が他の拡張子と競合している可能性があります。またjquery.min.js、ヘッドにファイルを指定していることを確認してください。

そして、レビューのためにコードに言及してください。

于 2013-03-07T13:48:44.953 に答える