JQuery代码无法运行

时间:2012-02-03 09:21:47

标签: jquery jquery-mobile

我是jquery的新手,请帮助我在 this link上运行该应用。我在我的应用程序中添加了以下资源文件,但它仍然没有渲染颜色块。

这些是我在头标记中包含的内容:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"/>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js" type="text/javascript"/>
<script src="jquery.mobile.carousel.js" type="text/javascript" language="javascript"/>
<script src="jquery.ui.ipad.js" type="text/javascript" language="javascript"/>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function($) {
        $("#carousel1").carousel();
    })(jQuery);
</script>

4 个答案:

答案 0 :(得分:0)

您还使用自动关闭脚本标记,但并非总是允许这样做。即切换

<script src="..." type="text/javascript"/> 

有:

<script src="..." type="text/javascript"></script>

请参阅:Why don't self-closing script tags work?

答案 1 :(得分:0)

似乎你错过了jquery UI框架, 将jquery UI添加到头标记

http://code.google.com/apis/libraries/devguide.html#jqueryUI

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"/>

答案 2 :(得分:0)

  $(function(){
        $("#carousel1").carousel();
});

答案 3 :(得分:0)

你有:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"/>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js" type="text/javascript"/>
<script src="jquery.mobile.carousel.js" type="text/javascript" language="javascript"/>
<script src="jquery.ui.ipad.js" type="text/javascript" language="javascript"/>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function($) {
        $("#carousel1").carousel();
    })(jQuery);
</script>

我的建议是:

可能看起来像:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<!-- I'm asuming this is where you are getting these from -->
<!-- https://github.com/blackdynamo/jQuery-Mobile-Carousel -->
<script src="jquery-ui-1.8.7.custom.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.mobile.carousel.js" type="text/javascript" language="javascript"></script>
<script src="jquery.ui.ipad.js" type="text/javascript" language="javascript"></script>


<script type="text/javascript" language="javascript"  >
    $('#pageId').live('pageinit',function(event){
        $("#carousel1").carousel();
    });
</script>