DateBox在我的项目中不起作用

时间:2015-09-12 11:20:25

标签: jquery jquery-mobile datebox

我不知道如何将datebox添加到我的项目中。

我打开页面:script builder
我选择版本和组件FlipBoxTimeFlipBox模式,
我点击下载并将内容保存为picker.js

接下来,我点击CCS Version 1.45 Full并将内容保存到picker.css

我在页面中添加到标题中的文件:

<script src="~/Content/extension/datapicker/picker.js"></script>
<link href="~/Content/extension/datapicker/picker.css" rel="stylesheet" />

我尝试使用flipBox,如:

<input type="text" data-role="datebox" data-options='{"mode" : "flipbox"}' />

但输入仍然只是文字。我做错了什么?

1 个答案:

答案 0 :(得分:0)

此代码正常,请在您的页面中包含所有jquery和jquery mobile。
注意:从jqm-datebox下载时选择包含“AMD Bindings”。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQueryMobile - DateBox Demos</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <!-- Change path of your downloaded css here -->
    <!--<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />-->
    <link rel="stylesheet" href="picker.css" />

    <link type="text/css" href="css/demos.css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/external/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/js/doc.js"></script>

    <!-- Change path of your downloaded scirpt here -->
    <script type="text/javascript" src="picker.js"></script>

  </head>
  <body>
          <div class="ui-field-contain">
            <label>DateBox</label>
            <input type="text" data-role="datebox" data-options='{"mode":"flipbox"}' />
          </div>
  </body>
</html>

Result