Использование пользовательского прямоугольного значка в кнопке в jquery mobile - PullRequest
Новая
       19

Использование пользовательского прямоугольного значка в кнопке в jquery mobile

1 голос
/ 05 июля 2011

Мне нужно использовать пользовательский значок в кнопке в jquery mobile. У меня есть значок, и он появляется в кнопке. Но проблема, с которой я сталкиваюсь, заключается в том, что вокруг моей иконки появляется круг по умолчанию. Мне нужно убрать этот круг и просто показать значок как есть. Как решить эту проблему?

Это HTML-код, который у меня есть: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
           </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                <input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"></a>
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
               <h1>Test</h1>
            </div>    
        </div>
   </body>
</html>

и следующий CSS: 

.ui-icon-save-icon{
    background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}

Вы можете увидеть это здесь - http://jsfiddle.net/yPRpt/

Обратите внимание, что значок отсутствует, но вы можете видеть круг в примере.

Ответы [ 7 ]

4 голосов
/ 13 июля 2011

Единственный способ, который я нашел для этого, - это установить для атрибута data-icon элемента значение «custom», а затем стилизовать его в CSS с использованием прозрачного фонового изображения

т.е. в разметке: 

<a id="hlFind" data-role="button" data-icon="custom">Find</a>

в css: 

#hlFind .ui-icon-custom {
    background:url("images/icon_phone_green.png") no-repeat scroll 0 0 transparent;
}
2 голосов
/ 05 июля 2011

Единственный способ, которым вы сможете удалить полупрозрачный круг, добавляемый темой jQuery Mobile к кнопкам, - это определить и переопределить соответствующий ответственный за CSS и / или Javascript.

В качестве альтернативы, почемуне изменить свой собственный значок для работы с тем, что делает JQM?

1 голос
/ 05 февраля 2013

На этот пост хорошо ссылаются в Google.Если кто-то еще ищет простое решение, я только что нашел: 

<p data-role="button"><img align="left" width="35px" src="something.jpg"/>Button name<p>

Надеюсь, это поможет

1 голос
/ 25 июля 2012

переопределить приведенный ниже код в jquery mobile css файле 

.ui-icon-searchfield:after {
    background:                         #666 /*{global-icon-color}*/;
    background:                         rgba(0,0,0,.4) /*{global-icon-disc}*/;
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius:                 9px;
    -webkit-border-radius:              9px;
    border-radius:                      9px;
}

эта часть вызывает прозрачное черное изображение по умолчанию и округленные обрезки

1 голос
/ 05 июля 2011

Не думаю, что вы можете удалить круг.

Документация:

Платформа jQuery Mobile ... автоматически добавляет полупрозрачный черный круг

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-icons.html

Возможно, вам удастся создать непрозрачный значок с фоном размером с круг и тем же цветом, что и кнопка, но я не уверен, что это сработает,(Непроверенные)

0 голосов
/ 15 октября 2014

Ни одно из решений не сработало для меня ...

Просто поставьте свой код CSS 

.ui-icon-save-icon{
    background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}

и добавьте событие: after css, чтобы установить размер круга по умолчанию равным 0, икруг по умолчанию исчезнет!:) 

.ui-icon-save-icon:after {
    width: 0px;
    height: 0px;
}
0 голосов
/ 13 октября 2012

переопределить этот CSS 

.ui-btn-corner-all {

}
...