我的问题是没有加载日期框CSS。在我的main.js文件中,我有以下代码:
var mainRouter;
require.config({
paths: {
text: 'libs/require/text',
underscore: 'libs/underscore/underscore-min',
jquery: 'libs/jquery/jquery-1.11.1.min',
//jqueryUI:'libs/jqueryUI/jquery-ui-1.10.4.custom.min',
backbone: 'libs/backbone/backbone-min',
jqueryKnob:'libs/jqueryKnob/jquery.knob',
jqueryMobile:'libs/jqueryMobile/jquery.mobile-1.4.2.min',
dateBoxCore:'libs/jqm-datebox-1.1.0.core',
dateBox:'libs/jqm-datebox-1.1.0.mode.datebox',
dateBoxi18n:'libs/jquery.mobile.datebox.i18n.en_US.utf8',
dateBox1:'libs/jqm-datebox.mode.calbox.min',
dialog:'libs/jquery.mobile.simpledialog.min'
},
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
jqueryMobile:{
deps:["jquery"]
},
dateBoxCore:{
deps:["jqueryMobile"]
},
dateBox:{
deps:["jquery","dateBoxCore"]
},
dateBoxi18n:{
deps:["jquery","dateBox"]
},
dateBox1:{
deps:["jquery","jqueryMobile","dateBox"]
},
jqueryKnob:{
deps:["jquery"]
},
tmpl: {
exports: "tmpl"
},
dialog:{
deps:["jquery","jqueryMobile"]
}
},
catchError: {
define: true
},
waitSeconds: 0
});
require(['app/errorhandler'], function(handler) {
console.log('error handler loaded');
require.onError = handler;
});
require(['jquery', 'backbone', 'controllers/router','jqueryMobile','jqueryKnob','dateBoxCore','dateBox','dateBoxi18n','dateBox1','dialog'], function($, Backbone, router) {
function onReady() {
mainRouter = new router();
// Tells Backbone to start watching for hashchange events
Backbone.history.start();
}
onReady();
});
我的index.html文件位于下方。
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"/>
<link rel="stylesheet" href="css/jqm-datebox.css"/>
<link rel="stylesheet" href="css/demos.css"/>
<link rel="stylesheet" href="css/jquery.mobile.datebox.css"/>
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"/>
</head>
<body>
<div data-role="page" id="droIndex">
<div data-role="header" data-position="fixed">
<h1>jQueryMobile - DateBox</h1>
</div>
<div data-role="content">
<div class="content-secondary">
<div id="jqm-homeheader">
<p>A Date and Time Picker plugin for jQueryMobile</p>
</div>
<div class="modedemos sidebar"></div>
</div>
<div class="content-primary">
<div data-role="collapsible-set" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h2>Android Default</h2>
<p>Using the android mode is as simple as setting the 'mode' option to "datebox".</p>
<div data-role="fieldcontain">
<label for="defandroid">Some Date</label><input name="defandroid" type="date" data-options='{"mode":"datebox"}' data-role="datebox" id="defandroid" />
</div>
<pre class="prettyprint"><label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "datebox"}'></pre>
</div>
<div data-role="collapsible">
<h2>Credit Cards</h2>
<p>Credit Card expiration dates can be gathered by setting 'overrideDateFormat' to "%m/%Y" and 'overrideDateFieldOrder' to ["m", "y"]</p>
<div data-role="fieldcontain">
<label for="droidcard">Expires</label><input name="droidcard" type="date" data-role="datebox" data-options='{"mode":"datebox", "overrideDateFormat": "%m/%Y", "overrideDateFieldOrder": ["m", "y"]}' id="droidcard" />
</div>
<pre class="prettyprint"><label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode":"datebox", "overrideDateFormat": "%m/%Y", "overrideDateFieldOrder": ["m", "y"]}'}'></pre>
</div>
<div data-role="collapsible">
<h2>Theme Options</h2>
<ul data-role="listview" data-inset="true">
<li><h3>themeButton</h3><p>Theme swatch for +/- Buttons</p></li>
<li><h3>themeInput</h3><p>Theme swatch for input elements</p></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
datepicker正在打开,但是没有加载css文件,所以像datepicker这样的android没有打开。我该如何解决这个问题?