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

【问题标题】：how to use callback to apply them on newly cloned objects如何使用回调将它们应用于新克隆的对象
【发布时间】：2011-02-28 17:37:02
【问题描述】：

好吧，我正在使用流沙，我想在其中使用工具提示，但是由于我无法实现的回调代码，我遇到了问题，这是流沙存在的地方，并且还告诉了工具提示的使用它，好吧，他没有详细解释它，因为希望人们在使用它之前了解它。 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 这不是问题，但对于愚蠢的我来说是一个问题。哈哈小心。

【问题讨论】：

“我不知道在哪里放置这段代码以及如何放置，因为我不知道 jquery...” - 是否有可能使用您使用的语言知道吗？

标签： jquery tooltip quicksand

【解决方案1】：

您可以在 HTML <script> 标签中放置 jQuery。

例如

<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>

【讨论】：

【解决方案2】：

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

$("#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 的东西而自豪，如果你知道 jquery，那么我知道会计，我是注册会计师，这是我的职业，你可能是编程，如果我在这方面很弱并寻求帮助，如果你不想帮助它可以，但至少不要虐待别人，因为我还在学习。