jQuerymobile: пользовательский значок в заголовке, чтобы открыть выберите - PullRequest
Новая
       19

jQuerymobile: пользовательский значок в заголовке, чтобы открыть выберите

0 голосов
/ 15 февраля 2012

У меня в шапке есть иконка для открытия меню выбора.

Кнопка отображается без текста, но имеет вид по умолчанию для мобильных кнопок Jquery, как показано ниже:

enter image description here

<form name="actions" action="" method="post">
    <div class="ui-select ui-btn-right" data-inline="true">
        <select name="select-action" id="select-action" data-native-menu="true" data-icon="myapp-actions" data-iconpos="notext" data-inline="true" tabindex="-1">
            <option value="save">Save</option>
            <option value="print">Print</option>
            <option value="share">Share</option>
        </select>
    </div>
</form>

Моя цель - избавиться от фона по умолчанию с помощью круга, чтобы иконка была больше.

enter image description here

Возможно ли это сделать с помощью мобильного телефона jQuery?

Я думаю, что я мог бы добавить нормальную ссылку с моим значком, установленным в качестве фонового изображения в css, но я не знаю, как заставить его отображать выбранные открытыми.

1 Ответ

2 голосов
/ 15 февраля 2012

Вам может потребоваться настроить его здесь и там, но вам придется переопределить CSS, который применяется jQM

CSS 

.ui-icon-myapp-actions {
    background-image: url("http://i.stack.imgur.com/YP6jU.png");
    width:40px;
    height:36px;
}
.ui-btn-icon-notext {
    width:40px;
    height:36px;
}
.ui-btn-up-c {
    border: 0px;
}
.ui-btn-icon-notext .ui-btn-inner {
    padding: 0px;           
}
.ui-btn-inner {
    border-top: 0px;   
}

HTML 

<form name="actions" action="" method="post">
    <div class="ui-select ui-btn-right" data-inline="true">
        <select name="select-action" id="select-action" data-icon="myapp-actions" tabindex="-1" data-inline="true" data-corners="false" data-iconshadow="false" data-shadow="false" data-iconpos="notext">
            <option value="save">Save</option>
            <option value="print">Print</option>
            <option value="share">Share</option>
        </select>
    </div>
</form>​

...