Минимизация кода для всплывающих окон Javascript / jQuery - PullRequest
Новая
       7

Минимизация кода для всплывающих окон Javascript / jQuery

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

Я создаю персональный сайт для демонстрации демонстрационного материала, и я хотел бы позволить пользователям нажимать на миниатюру, которая приводит к небольшому окну для анимации вниз и отображения деталей.В настоящее время у меня это работает отлично, но, поскольку я продолжаю добавлять элементы, код становится очень повторяющимся.Мне нужно повторить весь этот код для "item2", "item3" и т. Д. ... Есть ли более эффективный способ справиться с этим, возможно, с 1 сценарием и, возможно, 1 анимированным ящиком с содержимым для моего контента?Я новичок в jQuery и Javascript, и я бы хотел улучшить мой код.

Вот что я использую: 

 <script type="text/javascript">
 $(function() {
 $('#activator_item1').click(function(){
    $('#overlay').fadeIn('fast',function(){
        $('#box_item1').animate({'top':'250px'},500);
    });
  });
  $('#boxclose_item1').click(function(){
    $('#box_item1').animate({'top':'-500px'},500,function(){
        $('#overlay').fadeOut('fast');
    });
  });

 });
 </script>

CSS 

 .box_item1{
        position:fixed;
        top:-800px;
        height:400px;
        width:550px;
        left:30%;
        right:30%;
        background-color:#fff;
        color:#333;
        padding:20px;
        border:2px solid #ccc;
        -moz-border-radius: 20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        -moz-box-shadow: 0 1px 5px #333;
        -webkit-box-shadow: 0 1px 5px #333;
        z-index:101;
        text-align:left;
    }
    .box_item1 h1{
        border-bottom: 1px solid #7F7F7F;
        margin:-20px -20px 0px -20px;
        padding:10px;
        background-color:#1E87BE;
        color:#fff;
        font-family:"Arial Black", Gadget, sans-serif;
        -moz-border-radius:20px 20px 0px 0px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-top-right-radius: 20px;
        -khtml-border-top-left-radius: 20px;
        -khtml-border-top-right-radius: 20px;
    }
    a.boxclose_item1{
        float:right;
        width:26px;
        height:26px;
        background:transparent url(images/cancel.png) repeat top left;
        margin-top:-30px;
        margin-right:-30px;
        cursor:pointer;
    }
    a.activator_item1{
        width:153px;
        height:150px;
        position:relative;
        top:0px;
        left:0px;
        z-index:1;
        cursor:pointer;

HTML 

 <div id="item1"><a class="activator_item1" id="activator_item1"><img    src="images/item1_button.png"/></a></div>

 <div class="overlay" id="overlay" style="display:none;"></div>

 <div class="box_item1" id="box_item1">
  <a class="boxclose_item1" id="boxclose_item1"></a>
  <h1>Title</h1>

   <h2>Content</h2>
   <h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3>

 </div>
 </div>

Ответы [ 2 ]

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

Это можно решить с помощью лучшего именования. У вас есть отдельный класс для каждого элемента, который лишает вас группирующей силы классов. Рассмотрите возможность разделения класса для лучшего доступа к итератору. Например, у вас есть <a class="activator_item1" id="activator_item1">, где вы можете вместо <a class="activator item1" id="activator_item1">. Это позволит вам выбрать все активаторы в JQuery и перебрать их: 

$('.activator').each(function() {
    //your code
});
0 голосов
/ 11 февраля 2012

Вы совсем близко.Вместо выбора элементов с помощью «id», выберите их, используя связанный с ними класс (используя точку «.» Вместо «#»), например.$ ('. activator_item1') - этот код будет применяться ко всем активаторным элементам.

...