Проблема с отключенной кнопкой изображения jQuery Mobile

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

$('#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; 
}

источник

2011-12-20 tjoenz

Ну HTML не имеет кнопок, так что нет ничего, чтобы отключить. У вас есть якоря. Вам нужно будет использовать CSS, чтобы настроить внешний вид якоря, чтобы он выглядел отключенным. Но, поскольку это якорь, он никогда не будет отключен, если вы не удалите клик с помощью jquery. – Scott

Это то, что ошеломило меня. JS отключает кнопку перехода на страницу2.html, но выглядит как сломанная кнопка. Есть ли лучший способ сделать эту кнопку и сохранить изображение внутри? – tjoenz

Сначала прекратите называть его «кнопкой». Нигде нет кнопки. Это привязанный тег с изображением. Вы можете сделать что-то вроде $ ('# button2'). Click (function() {$ (this) .css ({'opacity': '0.3'}); return false;}); Фактические элементы кнопок написаны как

Просто удалите 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');

источник

2011-12-20 23:43:06 ThinkingStiff

Большое спасибо! Это сработало :) – tjoenz

Проблема с отключенной кнопкой изображения jQuery Mobile

ответ

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