Qtip 不加载 REL URL

发布于 2024-10-15 01:34:02 字数 1221 浏览 7 评论 0原文

我将 Jquery 1.4.4 与 Qtip 一起使用，并且尝试为每个单独的列表项加载图像，因此我使用 Content: URL:.attr(rel)，但它不会加载 REL 的 url

<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() {
$('ul.list-one li a[href]').each(function(){
  $(this).qtip({
     Content: { url: $(this).attr('rel') },
     position: {
     corner: {
        target: 'topMiddle',
        tooltip: 'bottomMiddle'
                }
                },
     style: {
       tip: 'bottomMiddle',
       border: { width: 2, radius: 2, color: '#A9D041' },
     background: '#fff',
     padding:0,
     width: 175,
     height:100
       }  

   });
});
});
</script>




 <ul class="list-one">
 <li class="header">Project Management</li>
 <li><a href="#">BGC Bremerholm</a></li>
 <li><a href="#">Medtronic</a></li>
 <li><a href="#">Straumur - Burdaras Bank</a></li>
 <li><a href="#">Straumur Reykjavik</a></li>
 <li><a href="#">Straumur Stockholm</a></li>
 <li><a  rel="/test/test.html" href="#">T. Rowe Price</a></li>

 </ul>

原文

I am using Jquery 1.4.4 with Qtip and i am trying to load an image for each individual list item, so i am using Content: URL:.attr(rel), but it wont load the url of the REL

<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() {
$('ul.list-one li a[href]').each(function(){
  $(this).qtip({
     Content: { url: $(this).attr('rel') },
     position: {
     corner: {
        target: 'topMiddle',
        tooltip: 'bottomMiddle'
                }
                },
     style: {
       tip: 'bottomMiddle',
       border: { width: 2, radius: 2, color: '#A9D041' },
     background: '#fff',
     padding:0,
     width: 175,
     height:100
       }  

   });
});
});
</script>




 <ul class="list-one">
 <li class="header">Project Management</li>
 <li><a href="#">BGC Bremerholm</a></li>
 <li><a href="#">Medtronic</a></li>
 <li><a href="#">Straumur - Burdaras Bank</a></li>
 <li><a href="#">Straumur Reykjavik</a></li>
 <li><a href="#">Straumur Stockholm</a></li>
 <li><a  rel="/test/test.html" href="#">T. Rowe Price</a></li>

 </ul>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧情勿念 2024-10-22 01:34:02

您可以简单地使用 jquery 中的 every 来获取所有元素并对它们应用 qtip。您可以通过这种方式轻松操纵它们。

$('.qtip').each(function(){
    $(this).qtip({
      content: { url: $(this).attr('rel'), method: 'get' },

      style: {
         padding: '7px 13px',
         width: {
            max: 510,
            min: 0
         },
         tip: true
      }
    });
  });

You can simply use each from jquery to get all elements and aply qtip to them. You can easily manipulate them in this way.

$('.qtip').each(function(){
    $(this).qtip({
      content: { url: $(this).attr('rel'), method: 'get' },

      style: {
         padding: '7px 13px',
         width: {
            max: 510,
            min: 0
         },
         tip: true
      }
    });
  });

回复收藏 0 原文

情话墙 2024-10-22 01:34:02

内容应该是小写 c

content: { url: $(this).attr('rel') },

Content should be a lowercase c

content: { url: $(this).attr('rel') },

回复收藏 0 原文

反目相谮 2024-10-22 01:34:02

goetz， document.ready() 函数意味着您不需要将其放在页面底部，它会在触发之前等待页面加载。

我在最近的一个项目中使用了它，效果很好:)

$('.test').each(function(){
        $(this).qtip({
          content: { text: '<img src="' + $(this).attr('href') + '" />' },
          show: { delay: 0 },
        });
      });

goetz, the document.ready() function means you don't need to put it at the bottom of the page, it waits for the page to load before firing.

I used this for a recent project and it works just fine :)

$('.test').each(function(){
        $(this).qtip({
          content: { text: '<img src="' + $(this).attr('href') + '" />' },
          show: { delay: 0 },
        });
      });

回复收藏 0 原文

~没有更多了~