Перемещение функции jQuery из документа, готового нажать на событие - PullRequest
Новая
       13

Перемещение функции jQuery из документа, готового нажать на событие

1 голос
/ 13 августа 2010

У меня есть макет с вкладками, который показывает / скрывает разделы при нажатии на вкладку.У меня также есть функция всплывающей подсказки, которая в данный момент загружает всплывающую подсказку на карту изображения при первой загрузке страницы.Я хотел бы изменить это так, чтобы всплывающая подсказка отображалась только при нажатии на вкладку с идентификатором 2 (# section2) или когда эта вкладка активна (в случае ссылки на url? Tab = 2).Я спотыкаюсь об этом, хотя.Вот мой код:

Событие щелчка по вкладке (здесь отображаются скрытые разделы, основанные на щелчках по вкладкам или при добавлении? Tab = X к URL-адресу: 

    jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section
});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

Что я хотел бы сделатьэто выяснить, как интегрировать следующий код подсказки, чтобы при нажатии на вкладку 2 она вызывала всплывающую подсказку: 

$("area[title='TITLE NAME']").addClass("active"); //adds active class to specified area

// Create the tooltips only when document ready
$(document).ready(function()
{

       $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {
            name: 'dark', 
            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
               color: '#fdcf81'
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); // Hide after a minute
      }
   }
});   
});
$("area").removeAttr("title");

Вот HTML-код для вкладок: 

 <ul class="tablinks">
        <li id="tab1" class="active"><a class="tablink" href="#section1">One</a></li>
        <li id="tab2"><a class="tablink" href="#section2">Two</a></li>
  </ul>

КакВы можете видеть, что это в настоящее время запущено в готовом документе. Любой совет будет присваиваться. Мой jQuery, к сожалению, находится на этом уровне, так как я чувствую, что это должно быть довольно просто.

Спасибо!

Ответы [ 2 ]

1 голос
/ 22 марта 2013

Важно: Да, даже события щелчка должны быть внутри готового блока.В противном случае вы рискуете нарушить ваш код, если ваш DOM загружен после скрипта.Я научился этому сегодня нелегко.Как практика, я всегда буду помещать свои события в готовый блок документа, чтобы быть уверенным.

0 голосов
/ 13 августа 2010

ОК, я нашел частичное решение.Просто вложил функцию всплывающей подсказки в событие нажатия вкладки: 

jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
               $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {

            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); 
      }
   }
});   
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section



});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
...