JQ DateBox插件无法正常工作

时间:2015-08-10 11:54:32

标签: jquery jquery-plugins

我试图将该插件应用到网站中,我正在关注这个小教程:http://js-tutorial.com/jquerymobile-datebox-date-and-time-picker-plugin-369是的'我也已经阅读了该插件制作者的原始网站。

我在输入代码中输入了这个>

<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>

这是<body>

      <input name="mode3" id="mode3" type="text" data-role="datebox" data-options='{"mode":"flipbox", "useNewStyle":true}' />
      <input name="mode6" id="mode6" type="text" data-role="datebox" data-options='{"mode":"custombox", "useNewStyle":true}' />

我没有任何错误,在场上按下时不会弹出任何错误。

在我加载插件所需的所有内容之前,我的标题中也有这个:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">      
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>      
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>         
<script src="js/leslider.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />

1 个答案:

答案 0 :(得分:0)

我通过重新排序标题并加载索引文件中的所有内容来修复此问题。

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>        
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/date.js"></script>      
    <script src="js/leslider.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />    
    <script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>       
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
    <link rel='stylesheet' href='http://photoswipe.s3.amazonaws.com/pswp/dist/photoswipe.css'>
    <link rel='stylesheet' href='http://photoswipe.s3.amazonaws.com/pswp/dist/default-skin/default-skin.css'>
    <script src='http://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe.min.js'></script>
    <script src='http://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe-ui-default.min.js'></script>
    <link rel="stylesheet" type="text/css" href="index.css" /> 
    <script src="index.js"></script>