Question

我一直在尝试更改面板按钮的图像和菜单的颜色，但我没有成功。我希望面板按钮与标题类似于Facebook移动应用程序中的标题。此外，我希望能够更改覆盖菜单的文本颜色和背景颜色（菜单分隔符和菜单选项“新闻”）。有人可以帮我这个。提前致谢。

 <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
        <div data-role="header"  data-position="fixed">
            <a data-controltype="panelbutton" data-role="button" data-theme="b" href="#panel_menu" data-icon="bars" data-iconpos="notext" ></a>
            <h1>My App</h1>
        </div>

        <div data-role="panel" id="panel_menu" data-position="left" data-display="overlay" data-theme="b">
            <ul data-role="listview" data-divider-theme="a" data-inset="false">
                <li data-role="list-divider" role="heading"> Menu </li>
                <li data-theme="c"> <a href="" data-transition="turn">News</a> </li>     
            </ul>
        </div>
        <div data-role="main" class="ui-content">
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div> 
</body>
</html>

Answer 1

<body>
        <div data-role="page" id="home">
        <div data-role="header"  data-position="fixed">
            <a id="custom-button" class="custom-button" data-controltype="panelbutton" data-role="button" data-theme="b" href="#panel_menu" data-icon="bars" data-iconpos="notext" ></a>
            <h1>My App</h1>
        </div>

        <div data-role="panel" id="panel_menu" data-position="left" data-display="overlay" data-theme="b">
            <ul data-role="listview" data-divider-theme="a" data-inset="false">
                <li data-role="list-divider" role="heading"> Menu </li>
                <li data-theme="c"> <a href="" data-transition="turn">News</a> </li>     
            </ul>
        </div>
        <div data-role="main" class="ui-content">
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div> 
    </body>

CSS：

#custom-button{
  background: transparent;
}
.custom-button{
background:transparent!important;
}

说明：

编写自定义样式所需的每个元素都可以添加id，就像a元素一样，我添加了自定义按钮ID。请记住，id必须是唯一的，每页一个。并且添加到id的每个样式都将自动覆盖任何类样式。您还可以将类添加到已存在的类中，但使用！important hack来覆盖现有样式。

如何在jquery mobile中更改面板图像和颜色主题

1 个答案: