Question

任何人都可以帮我使用quicksand插件，我试图首先加载web数据值，而不是加载在pageload上的所有数据值。这个想法是当我点击我的下拉菜单进行网页设计时web.html已经加载了web项目而不是默认的所有值。这是我的html：谢谢！

<div id="smoothmenu1" class="ddsmoothmenu"> 
  <ul>
    <li>Home</li>
    <li>Design
      <ul>
        <li>Web design</li>
        <li>Banners</li>
        <li>Posters</li>

      </ul>
    </li>
    <li>Video<
      <ul>
        <li>Category 1</li>
        <li>Category 2</li>
        <li>Category 3</li>
      </ul>
    </li>
    <li>Games</li>

    <li>Contact</li>
  </ul>
<ul id="content" class="gallerynav">

<li class="selected-1 button2">< data-value="all">All</li>
<li class="button2">< data-value="web">Web Design</li>
<li class="button2">< data-value="photo">Banners</li>
<li class="button2"><  data-value="video">Posters</li>

 <ul id="gallery" class="qsmall">
    <li data-id="id-1" class="web"> <span class="qcaption peek"> <span class="meta"> <span class="name">Om Du Möter Varg</span></span>
<a href rel="zoombox[web]" title="Om Du Möter Varg"> </a></li></ul>

等等。
和我的javascript文件：

$(function() {

  var read_button = function(class_names) {
    var r = {
      selected: false,
      type: 0
    };
    for (var i=0; i < class_names.length; i++) {
      if (class_names[i].indexOf('selected-') == 0) {
        r.selected = true;
      }
      if (class_names[i].indexOf('segment-') == 0) {
        r.segment = class_names[i].split('-')[1];
      }
    };
    return r;
  };

  var determine_sort = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
  };

  var determine_kind = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
  };

  var $preferences = {
    duration: 800,
    easing: 'easeInOutQuad',
    adjustHeight: false
  };

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

  var $controls = $('ul.gallerynav');

  $controls.each(function(i) {

    var $control = $(this);
    var $buttons = $control.find('a');

    $buttons.bind('click', function(e) {

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

  if (!selected) {

    $buttons.parent().removeClass('selected-1'); $button_container.addClass('selected-' + 1);

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

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

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

    $list.quicksand($sorted_data, {
  enhancement: function() {
  zoombox.init();
}

}, function() {

$('.qcaption.peek').hover(function(){
    $(".cover", this).stop().animate({top:'25px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
    });
});

}

  e.preventDefault();
});

}）;

Answer 1

这就是我所做的：

<script type="text/javascript">
   $(document).ready(function() {
      $(".class").trigger('click');
   });
</script>

这可能不是最好的解决方案，但它对我有用。 .class必须是您将使用触发器复制的链接的类。这样，当您加载页面时，您就会伪造该锚点上的点击，以使流沙相信您实际点击了那里。

使用quicksand插件获取特定数据

1 个答案: