Пользовательский значок в JQuery Mobile Header

Я пытаюсь использовать пользовательский значок в заголовке моего приложения JQuery Mobile. Конкретная иконка, которую я пытаюсь использовать, - это только значок «play» из Glyphish (http://glyphish.com/). Когда я пытаюсь использовать его в правой кнопке внутри заголовка, как описано здесь: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html, мой значок выглядит все странно. Кажется, я не могу просто нажать кнопку «играть» в моей панели заголовка. Вот мой код:Пользовательский значок в JQuery Mobile Header

<style type="text/css"> 
    .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; } 
    .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } 
    #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; } 
</style> 

<div id="myPage" data-role="page" data-dom-cache="false"> 
    <div data-role="header"> 
     <h1>My Title</h1> 
     <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a> 
    </div> 

    <div data-role="content"> 
    <!-- page content goes here --> 
    </div> 
</div>

Может кто-нибудь рассказать мне, как это исправить?

источник

2012-03-10 JQuery Mobile

нечетные, с именем пользователя, как @JQuery Mobile, я думаю, вы бы ответ на этот вопрос. – shanabus

Что «codaniel» пытался сказать, это не то, что вам нужно. Он пытается объяснить пользовательский значок кнопки, но я понимаю, что вы ищете значок пользователя Navbar. посмотреть это сообщение: http://stackoverflow.com/questions/6243871/glyphish-icons-display-in-jquery-mobile –

JQuery Mobile имеет способ делать пользовательские значки кнопок. Вот рабочий пример http://jsfiddle.net/codaniel/88kQu/1/

Ниже приведен пикантная из http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Чтобы использовать пользовательские иконки, укажите значение, значок данных, который имеет уникальное имя, как MYAPP-адрес электронной почты и кнопки плагин будет генерировать класс, префикс ui-icon- в значение значка данных и применить его к кнопке: ui-icon-myapp-email.

Затем вы можете написать правило CSS в своей таблице стилей, которое предназначено для класса ui-icon-myapp-email, чтобы указать источник фона значка. Чтобы сохранить визуальную согласованность с остальными значками, создайте белый значок 18x18 пикселей, сохраненный как PNG-8 с альфа-прозрачностью.

В этом примере мы просто указываем на автономное изображение значка, но вы можете так же легко использовать значок справки и вместо этого указывать позиционирование, точно так же как спрайт значка, который мы используем в рамках.

.ui-icon-myapp-email { 
    background-image: url("app-icon-email.png"); 
}

источник

2012-03-11 06:54:37 codaniel

Изменить имя CSS для пользовательского значка следующего образом «UI-значок»

<style type="text/css"> 
    ... clipped... 
.ui-icon-custom 
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; 
}

JQuery мобильного удлинения значения, которое обеспечивает для атрибута-иконок данных для построения имени класса CSS. Поскольку ваш атрибут data-icon имеет значение «custom». Связанный класс css следует называть «.ui-icon-custom».

Ref: http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

источник

2012-03-11 12:22:46 sumitkm

Пользовательский значок в JQuery Mobile Header

ответ

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