Как изменить изображение панели и цветную тему в jQuery mobile

Я пытаюсь изменить изображение кнопки панели и цвета меню, но я не увенчался успехом. Я хотел бы, чтобы кнопка панели сочеталась с заголовком, подобным заголовку в мобильном приложении facebook. Также я хотел бы иметь возможность изменять цвет текста и цвет фона меню наложения (разделитель меню и пункт меню «новости»). Может кто-то, пожалуйста, помогите мне с этим. Заранее спасибо.Как изменить изображение панели и цветную тему в jQuery mobile

<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>

источник

2014-11-13 speedracer2003

Проверьте эту ссылку http://themeroller.jquerymobile.com/ –

<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, автоматически отменяет любой стиль класса. Вы также можете добавлять классы уже существующий один раз, но использовать! Important hack для переопределения существующих стилей.

источник

2014-11-13 05:49:04 n1cko

Благодарим за отзыв. Он работал =) – speedracer2003

Как изменить изображение панели и цветную тему в jQuery mobile

ответ

Смежные вопросы