我需要使用本地jquery.mobile-1.3.1.js (不是 http,来自互联网,因为我设计了自定义主题)。但现在我没有 jquery 移动项目(例如弹出窗口和滑块)。我的应用程序是 phonegap 并且有 cordova-2.6.0.js 文件。
以下是 index.html 头部的链接:(我不使用jquery.mobile-1.3.1.css
,因为我想使用我的主题)
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<script src="jquery-1.9.1.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<link rel="stylesheet" href="C:\Users\rv\workspace\test1\assets\www\css\themes\SensorsTheme.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.3.1.css" />
<!--<link rel="stylesheet" href="C:\Users\r\workspace\test1\assets\www\jquery.mobile-1.3.1.css" />-->
<link rel="stylesheet" type="text/css" href="css/index.css" />
这是看起来不太好的弹出窗口:
function aboutPopup(popupHeader, popupContent) {
var $aboutPopup = $("<div/>").popup({
theme: "c",
dismissible: false,
});
//create a title for the popup
$("<h2/>", {
text: popupHeader
}).appendTo($aboutPopup);
//create a content for the popup
$("<h3/>", {
}).html(popupContent).appendTo($aboutPopup);
这是我使用 jquery mobile 的 ThemeRoller 工具创建的 theme.css:
ui-bar-a {
border: 1px solid #ffffff /*{a-bar-border}*/;
background: #006FD0 /*{a-bar-background-color}*/;
color: #ffffff /*{a-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #444444 /*{a-bar-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #007ae4 /*{a-bar-background-start}*/), to( #0063bb /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #007ae4 /*{a-bar-background-start}*/, #0063bb /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #007ae4 /*{a-bar-background-start}*/, #0063bb /*{a-bar-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #007ae4 /*{a-bar-background-start}*/, #0063bb /*{a-bar-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #007ae4 /*{a-bar-background-start}*/, #0063bb /*{a-bar-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #007ae4 /*{a-bar-background-start}*/, #0063bb /*{a-bar-background-end}*/);
}
.ui-bar-a .ui-link-inherit {
color: #ffffff /*{a-bar-color}*/;
}
.ui-bar-a a.ui-link {
color: #7cc4e7 /*{a-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-a a.ui-link:visited {
color: #2489ce /*{a-bar-link-visited}*/;
}
.ui-bar-a a.ui-link:hover {
color: #2489ce /*{a-bar-link-hover}*/;
}
.ui-bar-a a.ui-link:active {
color: #2489ce /*{a-bar-link-active}*/;
}
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-a,
.ui-overlay-a {
border: 1px solid #ffffff /*{a-body-border}*/;
color: #ffffff /*{a-body-color}*/;
background: #006FD0 /*{a-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #006fd0 /*{a-body-background-start}*/), to( #006fd0 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #006fd0 /*{a-body-background-start}*/, #006fd0 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #006fd0 /*{a-body-background-start}*/, #006fd0 /*{a-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #006fd0 /*{a-body-background-start}*/, #006fd0 /*{a-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #006fd0 /*{a-body-background-start}*/, #006fd0 /*{a-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #006fd0 /*{a-body-background-start}*/, #006fd0 /*{a-body-background-end}*/);
}
.ui-overlay-a {
background-image: none;
border-width: 0;
}
.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-a .ui-link-inherit {
color: #ffffff /*{a-body-color}*/;
}
.ui-body-a .ui-link {
color: #ffffff /*{a-body-link-color}*/;
font-weight: bold;
}
.ui-body-a .ui-link:visited {
color: #9273c4 /*{a-body-link-visited}*/;
}
.ui-body-a .ui-link:hover {
color: #c3e0f9 /*{a-body-link-hover}*/;
}
.ui-body-a .ui-link:active {
color: #9273c4 /*{a-body-link-active}*/;
}
.ui-btn-up-a {
border: 1px solid #cccccc /*{a-bup-border}*/;
background: #eeeeee /*{a-bup-background-color}*/;
font-weight: bold;
color: #2f3e46 /*{a-bup-color}*/;
text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #ffffff /*{a-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{a-bup-background-start}*/), to( #f1f1f1 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/);
}
.ui-btn-up-a:visited,
.ui-btn-up-a a.ui-link-inherit {
color: #2f3e46 /*{a-bup-color}*/;
}
.ui-btn-hover-a {
border: 1px solid #bbbbbb /*{a-bhover-border}*/;
background: #dfdfdf /*{a-bhover-background-color}*/;
font-weight: bold;
color: #2f3e46 /*{a-bhover-color}*/;
text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #ffffff /*{a-bhover-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f6f6f6 /*{a-bhover-background-start}*/), to( #e0e0e0 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f6f6f6 /*{a-bhover-background-start}*/, #e0e0e0 /*{a-bhover-background-end}*/);
}
.ui-btn-hover-a:visited,
.ui-btn-hover-a:hover,
.ui-btn-hover-a a.ui-link-inherit {
color: #2f3e46 /*{a-bhover-color}*/;
}
.ui-btn-down-a {
border: 1px solid #bbbbbb /*{a-bdown-border}*/;
background: #d6d6d6 /*{a-bdown-background-color}*/;
font-weight: bold;
color: #2f3e46 /*{a-bdown-color}*/;
text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #ffffff /*{a-bdown-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #d0d0d0 /*{a-bdown-background-start}*/), to( #dfdfdf /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/);
}
.ui-btn-down-a:visited,
.ui-btn-down-a:hover,
.ui-btn-down-a a.ui-link-inherit {
color: #2f3e46 /*{a-bdown-color}*/;
}
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
非常感谢你帮助我!