Question

我正在尝试在我的jquery移动网站中添加自定义主题。

我访问了主题滚动网站，我设计了一个主题，然后我下载了一个zip文件。

里面有一个主题文件夹和一个 index.html 。在themes文件夹中有一个 images文件夹和 2个CSS文件：

1） customTheme.css

2） customTheme.min.css

我将2）复制粘贴到我的项目文件夹中。

然后在我的项目中，我做了：

<head>
    <meta charset="utf-8">
    <title>CEID</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="customTheme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="custom.css" />
</head>

它应该正常吗？我在这做错了什么？

主题不起作用..

我正在设计的内容如下：

enter image description here

我得到的是这样的：

enter image description here

我的HTML看起来像这样：

<head>
    <meta charset="utf-8">
    <title>CEID</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themes/CustomTheme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

使用自定义CSS ：

/* Home page banner */
h2#banner {
    background:transparent url(images/banner.png) no-repeat left 10px;
    width:220px;
    height:250px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
    background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
    width:480px;
    height:290px;
    margin:-10px auto -175px auto;
    text-indent:-9999px;
}

.ui-listview .ui-li-icon {
     max-height: 32px !important;
      max-width: 32px !important; 
}

/* Home page icons */
.ui-li-icon {
    top:0.4em !important;
}
/* Make room for icons */
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon {
    padding-left:47px;
}

我的身体：

<body> 

<div data-role="page" id="home">
    <div data-role="header">
    </div>
    <div data-role="content">

        <h2 id="banner">CEID Mobile</h2>

        <div class="menu_list">
            <ul data-inset="true" data-role="listview">
                <li><a href="information.html"><img src="images/info.png" alt="Information" class="ui-li-icon">Πληροφορίες</a></li>
                <li><a href="staff.html"><img src="images/staff.png" alt="Staff" class="ui-li-icon">Προσωπικό</a></li>
                <li><a href="research.html"><img src="images/research.png" alt="Research" class="ui-li-icon">Έρευνα</a></li>
                <li><a href="undergraduates.html"><img src="images/undergraduates.png" alt="undergraduates" class="ui-li-icon">Προπτυχιακά</a></li>
                <li><a href="metaptyxiaka.html"><img src="images/graduates.png" alt="Graduates" class="ui-li-icon">Μεταπτυχιακά</a></li>
                <li><a href="students.html"><img src="images/students.png" alt="Students" class="ui-li-icon">Φοιτητές</a></li>
                <li><a href="news.html"><img src="images/news.png" alt="News" class="ui-li-icon">Ανακοινώσεις</a></li>
            </ul>       
        </div>

        <div class="menu_list">
            <ul data-inset="true" data-role="listview">
                <li><a href="http://www.ceid.upatras.gr"><img src="images/info.png" alt="Information" class="ui-li-icon">Μεταφορά στον Ιστότοπο</a></li>
            </ul>       
        </div>


    </div>
</div>

</body>

Answer 1

你的例子不起作用，看看你有什么：

<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

有3种不同的css文件。第一个是你的自定义主题，第二个是结构css文件（其他一切），最后一个是完整的jQuery Mobile css文件。目前你的最后一个css文件（完整的）是重写自定义css主题。

要解决您的问题，请将所有内容更改为：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />

或者甚至更好地删除 jquery.mobile-1.3.1.min.css 并仅使用：

<link rel="stylesheet" href="customTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />

您需要了解的内容，jQuery Mobile有3个可用的css文件。 jquery.mobile-1.3.1.min.css 应该单独使用，因为它有主题和结构的css。如果您有自定义主题，则只需使用自定义主题css文件和 jquery.mobile.structure-1.3.1.min.css 。

编辑：

不要忘记您还需要将 data-theme 添加到您的页面DIV容器中：

<div data-role="page" id="home" data-theme="b">

或者您只能将它添加到标题，内容和页脚DIV中，但我建议您将其添加到页面DIV。

如何在主题滚动网站的jquery手机中添加自定义主题？

1 个答案: