0

私はqTip2を使用して、自分のサイトでいくつかのツールのヒントを処理しています。適用するページのテンプレート内に次のコードがあります。

HTML

<div class="overview"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<div class="estimate"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<!-- More HTML similar to above -->

JS

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
$('.estimate').qtip({
   content: 'Estimating',
   position: {
     my: 'bottom center', 
  at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
//More JS as above

個々のページで、クラスがページと相関している場合はツールチップを表示したいと思います。IE：常に表示site.com/overviewされるクラスのツールチップがあります。ツールチップがoverview表示されるように。site.com/estimateestimate

このコードをページに追加しようとしましたが、機能しません。

$('.overview').qtip({
   hide: false
});

私が求めているのは、ページが読み込まれるときにツールチップが表示されることです。マウスオーバーなどは必要ありません。表示されるツールチップは、表示されるページによって異なります。IE：/overview=.overviewツールチップ。

どうすればこれを達成できますか？

アップデート

次のコードは、私が探しているものを実現します。

$('.overview').qtip({
   content: 'Overview',
   position: {
     my: 'bottom center', 
     at: 'top center'
},
  show: {
    ready: true
},
  hide: false,
  style: {classes: 'qtip-tipsy'}
});

ただし、コードのこの部分はテンプレート内にあり、ページレベルで編集することはできません。

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});

上記のコードの下でこれを試してみると、機能しません：

$('.overview').qtip({
    show: { ready: true },
    hide: false

});

1つがページレベルで編集できない場合、2つを組み合わせるにはどうすればよいですか？IE：ページレベルでコードを編集できない場合、上記のコードにshowとコードを追加するにはどうすればよいですか？hide

4

2 に答える 2

1

デフォルトで表示

$('.overview').qtip({
  content: 'Overview',
  position: {
      my: 'bottom center', 
      at: 'top center'
    },
  style: {classes: 'qtip-tipsy'},
  show: { ready: true }
  });

これはあなたが必要とする行です：

show: { ready: true }

ドキュメントは次のとおりです。gTip：http: //craigsworks.com/projects/qtip/docs/reference/#show gTip2
：http : //craigsworks.com/projects/qtip2/docs/show/#ready

条件付きで表示

<?php
  // Get the url
  $current_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  // Get the two parts of the url, seperated by: /
  $url_array = explode('/', $current_url);
?>

<script>
  $('.overview').qtip({
    content: 'Overview',
    position: {
      my: 'bottom center', 
      at: 'top center'
    },
    /* Check if the second part of the url is 'overview'
       If it is, add the show ready code */
    <?php if( isset( $url_array[1] ) && $url_array[1] == 'overview' ) : ?>
      show: { ready: true },
    <?php endif; ?>
    style: {classes: 'qtip-tipsy'}
  });
</script>

条件付きで表示| JAVASCRIPTのみ

<script type="text/javascript">
  $(document).ready(function() 
    {
      // Prepare some variables
      var current_url = window.location.host + window.location.pathname;
      var url_array = current_url.split('/');
      // The qtip code
      $('.overview').qtip({
        content: 'Overview',
        position: {
          my: 'bottom center', 
          at: 'top center'
        },
        show: { ready: url_array[1] == overview ? true : false },
        style: {classes: 'qtip-tipsy'}
      });
  });
</script>
于 2013-01-18T03:59:04.937 に答える
-2 
 show: {
     ready: true
 },
 hide: {
     event: false
 }
于 2014-01-06T17:34:58.423 に答える