1. дома
  2. Вопрос и ответ
  3. Как я могу сделать эти кнопки javascript (изображения) менее неуклюжими?

Как я могу сделать эти кнопки javascript (изображения) менее неуклюжими?

2012-04-23 2 views
0

Я смотрю, есть ли способ сделать этот код менее неуклюжим? Я думаю, что должен быть более элегантный способ сделать 2 кнопки, которые переключаются между 2 и более состояниями кнопок при наведении и нажатии.Как я могу сделать эти кнопки javascript (изображения) менее неуклюжими?

Спасибо!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript"> 

    img1 = "images/buy1.png"; 
    img2 = "images/buy2.png"; 
    function chng(c_img) { 
    if (c_img.src.indexOf(img1)!= -1) c_img.src = img2; 
    else c_img.src = img1; 
    } 
    img3 = "images/sell1.png"; 
    img4 = "images/sell2.png"; 
    function chng2(c_img) { 
    if (c_img.src.indexOf(img3)!= -1) c_img.src = img4; 
    else c_img.src = img3; 
    } 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="sell"> 
     <a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115" 
     border="0" height="50" id="img" /></a> 
    </div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2" 
    width="115" border="0" height="50" id="img2" /></a> 
    </div> 
</body> 
</html>

источник

2012-04-23 WoJo

ответ

1

Это звучит как идеально подходит для использования справочных спрайтов CSS.Создание образов, которые имеют оба состояния в них уложены вертикально:

---------------------- 
|  "on" image | 
---------------------- 
---------------------- 
|  "off" image | 
----------------------

Дайте ссылки на класс и применять образы их к элементам, используя свойство background-image (используя сокращенную нотацию ниже):

<a href="#" class="buy1"></a> 

.buy1 { 
    display: block; 
    width: 115px; 
    height: 50px; 
    background: transparent url(images/buy1.png) left bottom no-repeat; 
} 

.buy1.on { background-position: left top; }

Затем с JavaScript, вы можете просто переключать класс:

$(document).ready(function(){ 
    $("#sell a").on('click',function(){ 
     $(this).toggleClass('on'); 
    }); 
});

Такой подход имеет ряд преимуществ:

  • Меньшее сервер запрашивает (вы можете объединить все изображения в одном шприце листа, и они будут загружать в одном запросе) означает более высокую производительность
  • Там не будет отставать от парить, как «на» уже загружено состояние
  • Гораздо легче поддерживать

Редактировать Я хотел бы добавить, вы должны поместить некоторое реальное содержание в связи с получением Экранных пользователям что-то перемещаться с помощью. Я обычно использую метод замены изображения для этого:

<a href="#" class="buy1"><span>Buy Now</span></a> 

.buy1 span { 
    position: absolute; 
    display: block; 
    top: -10000px; 
    left: -10000px; 
    font-size: 1px; 
}

источник

2012-04-23 06:07:04 steveax

+0

Объедините это с переключением-событием для включения и выключения – mplungjan

+0

@mplungjan, если я что-то не хватает, нет необходимости добавлять 'toggle()', 'toggleClass()' будет переключать стиль при каждом щелчке и сдвиньте изображение до желаемого внешнего вида. – steveax

+0

Предполагая, что пользователь хочет изменить внешний вид, но если это добавление и удаление из корзины для покупок, вам нужно немного больше, на мой взгляд. – mplungjan

0

It похоже прекрасный. Я могу придумать более элегантный способ, используя jQuery:

Прежде всего, дайте каждому из своих элементов класс toggleImg. Затем дайте каждой кнопке атрибуты data-toggleon и data-toggleoff. Удалите id и name, если хотите.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".toggleImg").on('click',function(){ 
     if($(this).attr('src')==$(this).data('toggleon')){ 
     $(this).attr('src',$(this).data('toggleoff')) 
     }else{ 
     $(this).attr('src',$(this).data('toggleon')) 
     } 
    }); 

    }); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="sell"> 
     <a href="#"><img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png" width="115" border="0" height="50" /></a> 
    </div><a href="#"><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50" /></a> 
    </div> 
</body> 
</html>

Код может быть, таким образом, легко расширена - вы можете просто добавить новые img сек, куда вы хотите с appropirate класса/атрибутов и не беспокоиться о добавлении новых JS.

источник

2012-04-23 05:16:09 Manishearth

+0

Если вы придерживаетесь подхода к сохранению альтернативных изображений в разметке, не создавайте фиктивные атрибуты, а используйте соответствующий атрибут 'data-' ('data-toggleon') – steveax

+0

@steveax: Aah yes (HTML5/jQuery новичок здесь). Я видел это раньше. Благодаря! – Manishearth

+0

Нельзя сказать, что [toggle-event] (http://api.jquery.com/toggle-event/), вероятно, создано для решения этой проблемы в первую очередь – mplungjan

1

Использования jQuery toggle-event

ПРИМЕЧАНИЕ

код будет обрабатывать любую ссылку и изображение, где идентификатор ссылки и изображения имеет какое-то матч - выполнимо с data как хорошо, но совместимым с не- html5 браузеры тоже. Вам нужно будет предоставить изображения или имена классов для каждого изображения, но скрипт переключения исправлен.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    var icons = { 
     buy:{ 
      on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
     off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" 
     }, 
     sell:{ 
      on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
     off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" 
     } 
    } 
    $(document).ready(function() { 
     $(".toggleLink").toggle(
      function() { 
      var id = $(this).attr("id"); 
      $("#"+id+"Img").attr("src",icons[id].on); 
      // OR change the className of the link 
      // OR use data-toggle - but no need to test the image src 
      }, 
      function() { 
      var id = $(this).attr("id"); 
      $("#"+id+"Img").attr("src",icons[id].off); 
      } 
     ); 
    }); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="sell"> 
     <a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="buyImg" width="115" 
     border="0" height="50" /></a> 
     <a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="sellImg" width="115" 
     border="0" height="50" /></a> 
    </div> 
</body> 
</html>

UPDATE Использование данных атрибутов, чтобы доказать точку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
     $(".toggleLink").toggle(
      function() { 
      var img = $(this).find("img"); 
      img.attr("src",img.data('toggleon')); 
      }, 
      function() { 
      var img = $(this).find("img"); 
      img.attr("src",img.data('toggleoff')); 
      } 
     ); 
    }); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="buy"> 
     <a href="#" class="toggleLink"><img src="images/buy1.png" 
     data-toggleon="images/buy1.png" 
     data-toggleoff="images/buy2.png" 
     width="115" border="0" height="50" id="img" /></a> 
    </div> 
</body> 
</html>

PS: Посмотрите здесь для большой версии

Element with hover then click removes hover effect and click again adds hover again с fiddle by Greg Pettit

источник

2012-04-23 06:04:12 mplungjan

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

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