Проблемы со стилем отключенного изображения кнопки jQuery Mobile - PullRequest
4 голосов
/ 20 декабря 2011

Я снова в растерянности здесь.Я пробовал множество разных вещей, чтобы заставить эту кнопку изображения выглядеть отключенной БЕЗ потери моего изображения.Я предоставляю Javascript здесь о том, как кнопка отключена:

$('#button2').attr('data-href', $('#button2').attr('href'));
$('#button2').attr('data-onclick', $('#button2').attr('onclick'));
$('#button2').attr('href', '#');
$('#button2').attr('onclick', 'return');
$('#button2').button('disabled');

Это мой HTML-код кнопки, которая отключена в зависимости от того, что пользователю разрешено смотреть в этом приложении:

<div data-role="content" >
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <a  href="page1.html" data-role="button" data-transition="flip" id="button1"><img src="image.png" alt="Browse" /></a>
    </div>
    <div class="ui-block-b">
      <a href="page2.html" data-role="button" data-transition="flip" id="button2"><img src="image.png" alt="Search" /></a>
    </div>
  </div>
</div>

И, наконец, это тот CSS, с которым я работал, который, как я видел, задокументирован для работы с CSS3:

button[disabled],
button[disabled]:active {
    background: #000;
}

1 Ответ

5 голосов
/ 21 декабря 2011

Просто удалите href, чтобы отключить его, и снова включите.Визуально вы можете использовать opacity: .5;, чтобы сделать его отключенным.

$( '#button2' ).removeAttr( 'href' );

Демонстрация: http://jsfiddle.net/ThinkingStiff/Y7v7w/

HTML:

<div data-role="content" >
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <a  href="page1.html" data-role="button" data-transition="flip" id="button1"><img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/48x48/actions/agt_login.png" alt="Browse" /></a>
    </div>
    <div class="ui-block-b">
      <a href="page2.html" data-role="button" data-transition="flip" id="button2"><img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/48x48/actions/agt_login.png" alt="Search" /></a>
    </div>
  </div>
</div>

Сценарий:

$( '#button2' ).css( 'opacity', '.5' );
$( '#button2' ).removeAttr( 'href' );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...