jquery - 如何使用回调将它们应用于新克隆的对象

Question

好吧，我正在使用流沙，我想在其中使用工具提示，但是由于我无法实现的回调代码，我遇到了问题，这是流沙存在的地方，并且还告诉了它的工具提示使用情况，好吧他没有详细解释它，因为希望人们在使用它之前了解它。http://razorjack.net/quicksand/docs-and-demos.html 说要使用的代码是这个

$("#content").quicksand($("#data > li"),
{
duration: 1000,
}, function() { // callback function
$('#content a').tooltip();
}
);

我不知道在哪里放置此代码以及如何放置，因为我不知道 jquery，如果此代码要放置在工具提示脚本中，那么放置在哪里以及如何放置，例如我可能会使用这个 http:// www.sohtanaka.com/web-design/...ement-tooltip/ 然后在此代码中放置上述代码的位置。如果上面的工具提示不可能，那么我准备使用任何可以在其中显示图片的工具提示。感谢您阅读它并给我时间，请帮助我，因为我知道您 jquery kings 这不是问题，但对于愚蠢的我来说是一个问题。大声笑保重。

score 1 · Accepted Answer

您可以将 jQuery 放在 HTML<script>标记中。

例如

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      //jQuery code can go here....

      $("#content").quicksand($("#data > li"), {
        duration: 1000,
      }, function() { // callback function
    $('#content a').tooltip();
  });
   });
</script>
</head>
<body>


</body>
</html>

score -1 · Accepted Answer

好吧，感谢您告诉我方法，但我知道那件事，我只是无法在其中实施。嗨，首先我这样做了，我添加了这段代码

$("#gamecategoriest").quicksand(

  $("#data > li"), 
  { duration: 1000 },
  function() { // callback function
        $('#gamecategories a.tip_trigger').hover(function(){
              tip = $(this).find('.tip');
              .....
              tip.css({  top: mousey, left: mousex });
        });
  }

);

就在你的这些代码行之后，我添加了上面的代码 $preferences.useScaling = true;

  $performance_container.html($original_html);
  high_performance = true;
}
e.preventDefault();

}); });

所以最终的结果看起来像这样

<script type="text/javascript"> (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) {

return a.text();

} }; $.extend(options, customOptions);

$data = $(this); arr = $data.get(); arr.sort(function(a, b) {

  var valA = options.by($(a));
  var valB = options.by($(b));

if (options.reversed) {

return (valA &lt; valB) ? 1 : (valA &gt; valB) ? -1 : 0;    

} else {

return (valA &lt; valB) ? -1 : (valA &gt; valB) ? 1 : 0; 

} }); return $(arr); };

})(jQuery);

$(function() {

var read_button = function(class_names) {

var r = {
  selected: false,
  type: 0
};
for (var i=0; i &lt; class_names.length; i++) {
  if (class_names[i].indexOf(&#39;selected-&#39;) == 0) {
    r.selected = true;
  }
  if (class_names[i].indexOf(&#39;segment-&#39;) == 0) {
    r.segment = class_names[i].split(&#39;-&#39;)[1];
  }
};
return r;

};

var determine_sort = function($buttons) {

var $selected = $buttons.parent().filter(&#39;[class*=&quot;selected-&quot;]&#39;);
return $selected.find(&#39;a&#39;).attr(&#39;data-value&#39;);

};

var determine_kind = function($buttons) {

var $selected = $buttons.parent().filter(&#39;[class*=&quot;selected-&quot;]&#39;);
return $selected.find(&#39;a&#39;).attr(&#39;data-value&#39;);

};

var $preferences = {

duration: 800,
easing: &#39;easeInOutQuad&#39;,
adjustHeight: false

};

var $list = $('#data'); var $data = $list.clone();

var $controls = $('ul#gamecategories ul');

$controls.each(function(i) {

var $control = $(this);
var $buttons = $control.find(&#39;a&#39;);

$buttons.bind(&#39;click&#39;, function(e) {

  var $button = $(this);
  var $button_container = $button.parent();
  var button_properties = read_button($button_container.attr(&#39;class&#39;).split(&#39; &#39;));      
  var selected = button_properties.selected;
  var button_segment = button_properties.segment;

  if (!selected) {

    $buttons.parent().removeClass(&#39;selected-0&#39;).removeClass(&#39;selected-1&#39;).removeClass(&#39;selected-2&#39;);
    $button_container.addClass(&#39;selected-&#39; + button_segment);

    var sorting_type = determine_sort($controls.eq(1).find(&#39;a&#39;));
    var sorting_kind = determine_kind($controls.eq(0).find(&#39;a&#39;));

    if (sorting_kind == &#39;all&#39;) {
      var $filtered_data = $data.find(&#39;li&#39;);
    } else {
      var $filtered_data = $data.find(&#39;li.&#39; + sorting_kind);
    }

    if (sorting_type == &#39;size&#39;) {
      var $sorted_data = $filtered_data.sorted({
        by: function(v) {
          return parseFloat($(v).find(&#39;span&#39;).text());
        }
      });
    } else {
      var $sorted_data = $filtered_data.sorted({
        by: function(v) {
          return $(v).find(&#39;strong&#39;).text().toLowerCase();
        }
      });
    }

    $list.quicksand($sorted_data, $preferences);

  }

  e.preventDefault();
});

});

var high_performance = true;
var $performance_container = $('#performance-toggle'); var $original_html = $performance_container.html();

$performance_container.find('a').live('click', function(e) {

if (high_performance) {
  $preferences.useScaling = false;
  $performance_container.html(&#39;CSS3 scaling turned off. Try the demo again. &lt;a href=&quot;#toggle&quot;&gt;Reverse&lt;/a&gt;.&#39;);
  high_performance = false;
} else {
  $preferences.useScaling = true;
  $performance_container.html($original_html);
  high_performance = true;
}
e.preventDefault();

}); });

$("#gamecategoriest").quicksand(

  $("#data > li"), 
  { duration: 1000 },
  function() { // callback function
        $('#gamecategories a.tip_trigger').hover(function(){
              tip = $(this).find('.tip');
              .....
              tip.css({  top: mousey, left: mousex });
        });
  }

); </script>

通过做上述事情，我的工具提示正在工作，但在动画之后它停止了。所以我做了这个然后我用这个替换$list.quicksand($sorted_data, $preferences); 了这个$list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } ); 并添加了这个代码

jQuery.fn.tooltip = function () {

this.each ( function ( index, element ) {
    $(element).mouseover(function(){
        tip = $(this).find('.tip');
         tip.show(); //Show tooltip
     }).mouseout ( function() {
         tip.hide(); //Hide tooltip
     }).mousemove(function(e) {
         var mousex = e.pageX + 20; //Get X coodrinates
         var mousey = e.pageY + 20; //Get Y coordinates
         var tipWidth = tip.width(); //Find width of tooltip
         var tipHeight = tip.height(); //Find height of tooltip

         //Distance of element from the right edge of viewport
         var tipVisX = $(window).width() - (mousex + tipWidth);
         //Distance of element from the bottom of viewport
         var tipVisY = $(window).height() - (mousey + tipHeight);

         if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
             mousex = e.pageX - tipWidth - 20;
         } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
             mousey = e.pageY - tipHeight - 20;
         }
         //Absolute position the tooltip according to mouse position
         tip.css({  top: mousey, left: mousex });
     });
});

};

就在代码末尾的这段代码之后

$preferences.useScaling = true;

  $performance_container.html($original_html);
  high_performance = true;
}
e.preventDefault();

}); });

所以最终结果将如下所示

<script type="text/javascript"> (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) {

return a.text();

} }; $.extend(options, customOptions);

$data = $(this); arr = $data.get(); arr.sort(function(a, b) {

  var valA = options.by($(a));
  var valB = options.by($(b));

if (options.reversed) {

return (valA &lt; valB) ? 1 : (valA &gt; valB) ? -1 : 0;    

} else {

return (valA &lt; valB) ? -1 : (valA &gt; valB) ? 1 : 0; 

} }); return $(arr); };

})(jQuery);

$(function() {

var read_button = function(class_names) {

var r = {
  selected: false,
  type: 0
};
for (var i=0; i &lt; class_names.length; i++) {
  if (class_names[i].indexOf(&#39;selected-&#39;) == 0) {
    r.selected = true;
  }
  if (class_names[i].indexOf(&#39;segment-&#39;) == 0) {
    r.segment = class_names[i].split(&#39;-&#39;)[1];
  }
};
return r;

};

var determine_sort = function($buttons) {

var $selected = $buttons.parent().filter(&#39;[class*=&quot;selected-&quot;]&#39;);
return $selected.find(&#39;a&#39;).attr(&#39;data-value&#39;);

};

var determine_kind = function($buttons) {

var $selected = $buttons.parent().filter(&#39;[class*=&quot;selected-&quot;]&#39;);
return $selected.find(&#39;a&#39;).attr(&#39;data-value&#39;);

};

var $preferences = {

duration: 800,
easing: &#39;easeInOutQuad&#39;,
adjustHeight: false

};

var $list = $('#data'); var $data = $list.clone();

var $controls = $('ul#gamecategories ul');

$controls.each(function(i) {

var $control = $(this);
var $buttons = $control.find(&#39;a&#39;);

$buttons.bind(&#39;click&#39;, function(e) {

  var $button = $(this);
  var $button_container = $button.parent();
  var button_properties = read_button($button_container.attr(&#39;class&#39;).split(&#39; &#39;));      
  var selected = button_properties.selected;
  var button_segment = button_properties.segment;

  if (!selected) {

    $buttons.parent().removeClass(&#39;selected-0&#39;).removeClass(&#39;selected-1&#39;).removeClass(&#39;selected-2&#39;);
    $button_container.addClass(&#39;selected-&#39; + button_segment);

    var sorting_type = determine_sort($controls.eq(1).find(&#39;a&#39;));
    var sorting_kind = determine_kind($controls.eq(0).find(&#39;a&#39;));

    if (sorting_kind == &#39;all&#39;) {
      var $filtered_data = $data.find(&#39;li&#39;);
    } else {
      var $filtered_data = $data.find(&#39;li.&#39; + sorting_kind);
    }

    if (sorting_type == &#39;size&#39;) {
      var $sorted_data = $filtered_data.sorted({
        by: function(v) {
          return parseFloat($(v).find(&#39;span&#39;).text());
        }
      });
    } else {
      var $sorted_data = $filtered_data.sorted({
        by: function(v) {
          return $(v).find(&#39;strong&#39;).text().toLowerCase();
        }
      });
    }

    $list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } );

  }

  e.preventDefault();
});

});

var high_performance = true;
var $performance_container = $('#performance-toggle'); var $original_html = $performance_container.html();

$performance_container.find('a').live('click', function(e) {

if (high_performance) {
  $preferences.useScaling = false;
  $performance_container.html(&#39;CSS3 scaling turned off. Try the demo again. &lt;a href=&quot;#toggle&quot;&gt;Reverse&lt;/a&gt;.&#39;);
  high_performance = false;
} else {
  $preferences.useScaling = true;
  $performance_container.html($original_html);
  high_performance = true;
}
e.preventDefault();

}); });

jQuery.fn.tooltip = function () {

this.each ( function ( index, element ) {
    $(element).mouseover(function(){
        tip = $(this).find(&#39;.tip&#39;);
         tip.show(); //Show tooltip
     }).mouseout ( function() {
         tip.hide(); //Hide tooltip
     }).mousemove(function(e) {
         var mousex = e.pageX + 20; //Get X coodrinates
         var mousey = e.pageY + 20; //Get Y coordinates
         var tipWidth = tip.width(); //Find width of tooltip
         var tipHeight = tip.height(); //Find height of tooltip

         //Distance of element from the right edge of viewport
         var tipVisX = $(window).width() - (mousex + tipWidth);
         //Distance of element from the bottom of viewport
         var tipVisY = $(window).height() - (mousey + tipHeight);

         if ( tipVisX &lt; 20 ) { //If tooltip exceeds the X coordinate of viewport
             mousex = e.pageX - tipWidth - 20;
         } if ( tipVisY &lt; 20 ) { //If tooltip exceeds the Y coordinate of viewport
             mousey = e.pageY - tipHeight - 20;
         }
         //Absolute position the tooltip according to mouse position
         tip.css({  top: mousey, left: mousex });
     });
});

}; </script>

我想我在你给定的脚本中将代码添加到错误的地方测试页面位于http://letseedrop.blogspot.com/2011/01/testing-3.html 如果代码不是很好可读那么你可以也从这里检查一下我也在那里发表了评论 https://github.com/razorjack/quicksand/issues/44

jquery - 如何使用回调将它们应用于新克隆的对象

2 回答 2

Related

Reference