jQuery qTip плагин, как разделить атрибут 'title' и применить стили - PullRequest
0 голосов
/ 19 августа 2011

Я пытаюсь использовать плагин qTip jQuery здесь: http://craigsworks.com/projects/qtip2/demos/#mouse

Я получил код для работы на основе демоверсии, но я хотел бы иметь возможность "взорвать" содержимое из атрибута TITLE, и чтобы первый элемент массива был "header", а второй элемент быть "контентом"

У меня есть следующий код:

<script>
$(document).ready(function()
{

   $('.tip3').qtip({
      content: {
            text: function(api) {
                  var titleAttr = $(this).attr('title');
                  var titleAttrArray = titleAttr.split(' :: ');
                  return titleAttrArray[1];
               },
            title: {
               text: function(api) {
                  // Retrieve content from TITLE attribute of the $('.selector') element
                  // return $(this).attr('title');
                  return titleAttrArray[0];
               }
            }
         },
      position: {
         my: 'top left',
         target: 'mouse',
         viewport: $(window), // Keep it on-screen at all times if possible
         adjust: {
            x: 10,  y: 10
         }
      },
      hide: {
         fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
      },
      style: 'ui-tooltip-youtube'
   });

});
</script>


<div class="box tip3" title="Some cool title here! :: Some subheader here?">
   <h3>Hover over this box to see mouse tracking in action</h3>
</div>

Просто для справки, приведенный ниже код прекрасно работает, просто загружая TITLE и ничего не делая с ним:

<script>
$(document).ready(function()
{
   $('.tip2').qtip({
      content: {
            text: 'I really like owls!',
            title: {
               text: function(api) {
                  // Retrieve content from TITLE attribute of the $('.selector') element
                  return $(this).attr('title');
               }
            }
         },
      position: {
         my: 'top left',
         target: 'mouse',
         viewport: $(window), // Keep it on-screen at all times if possible
         adjust: {
            x: 10,  y: 10
         }
      },
      hide: {
         fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
      },
      style: 'ui-tooltip-youtube'
   });

});
</script>

Любые идеи / идеи были бы фантастическими! Все еще новичок, пытающийся понять jQuery:).

1 Ответ

1 голос
/ 19 августа 2011

Вы не можете получить доступ к titleAttrArray в функции заголовка, так как она не входит в область Просто обработайте атрибут title дважды или используйте другой атрибут.

$('.tip3').qtip({
    content: {
        text: function(api) {
            return $(this).attr('title').split(' :: ')[1];
        },
        title: {
            text: function(api) {
                return $(this).attr('title').split(' :: ')[0];
                //OR
                return $(this).attr('title_header');
           }
        }
    }
});
...