как использовать обратный вызов, чтобы применить их к вновь клонированным объектам - PullRequest
Новая
       9

как использовать обратный вызов, чтобы применить их к вновь клонированным объектам

0 голосов
/ 24 февраля 2011

хорошо, я использую зыбучие пески, я хочу использовать подсказки в нем, но я столкнулся с проблемой из-за кода обратного вызова, который я не могу реализовать, это место, где присутствует зыбучие пески, а также рассказано об использовании подсказокэто, хорошо, он не объяснил это подробно, поскольку ожидает, что люди будут знать jquery прежде, чем использовать это.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, это не проблема, но проблема для меня, который глуп.лол, береги себя.

Ответы [ 2 ]

1 голос
/ 24 февраля 2011

Вы можете поместить 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>
0 голосов
/ 28 февраля 2011

хорошо, спасибо, что рассказал мне метод, но я знаю эту вещь, я просто не в состоянии реализовать его. Привет сначала я сделал это, я добавляю этот код 

$("#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

...