Как сделать переключатель в правом углу фиксированного заголовка в jQuery Mobile?

Я пробовал следующее:

<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox" />
</div>

но он показывает переключатель слева, под h1


jquery-mobile jquery-mobile-flipswitch
person johnnaras    schedule 29.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

HTML

<div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1>My Page</h1>
    <div class="switch">
        <label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
        <input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox"/>
    </div>
</div>

CSS

.switch
{
    position: absolute;
    top: 0px;
    right: 0px;
}

JSFiddle

person Sga    schedule 29.07.2014
comment
спасибо, работает, но не идеально. состояние «выключено» почти скрыто. - person johnnaras; 29.07.2014
comment
...Ярлыки некрасивые, но это уже другой вопрос - person Sga; 29.07.2014