jQuery也能实现类似系统重新排序文件的功能

前台部分代码如下

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD><TITLE>Quicksand : Examples : Sorting one set of HTML (cloning)</TITLE>
<META charset=utf-8><LINK href="Quicksan_files/main.css" rel=stylesheet>
<SCRIPT src="Quicksan_files/jquery-1.4.1-and-plugins.min.js"
type=text/javascript></SCRIPT>

<META content="MSHTML 6.00.3790.4696" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrapper>
<DIV id=site>
<DIV id=title>
<H1>Quicksand<SPAN></SPAN></H1>
<P>Reorder and filter items with a nice shuffling animation.</P><A
href="http://www.jscss8.com">Examples</A>
</DIV>
<H2 class=splitter>Advanced: Sorting one set of HTML (cloning)</H2>
<DIV class=demo>
<FORM id=filter>
<FIELDSET><LEGEND>Filter by type</LEGEND><LABEL><INPUT type=radio CHECKED
value=all name=type>Everything</LABEL> <LABEL><INPUT type=radio value=app
name=type>Applications</LABEL> <LABEL><INPUT type=radio value=util
name=type>Utilities</LABEL> </FIELDSET>
<FIELDSET><LEGEND>Sort by</LEGEND><LABEL><INPUT type=radio CHECKED value=size
name=sort>Size</LABEL> <LABEL><INPUT type=radio value=name
name=sort>Name</LABEL> </FIELDSET> </FORM>
<UL class=image-grid id=applications>
  <LI data-type="util" data-id="id-1"><IMG height=128 alt=""
  src="Quicksan_files/activity-monitor.png" width=128> <STRONG>Activity
  Monitor</STRONG> <SPAN data-type="size">348 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-2"><IMG height=128 alt=""
  src="Quicksan_files/address-book.png" width=128> <STRONG>Address Book</STRONG>
  <SPAN data-type="size">1904 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-3"><IMG height=128 alt=""
  src="Quicksan_files/finder.png" width=128> <STRONG>Finder</STRONG> <SPAN
  data-type="size">1337 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-4"><IMG height=128 alt=""
  src="Quicksan_files/front-row.png" width=128> <STRONG>Front Row</STRONG> <SPAN
  data-type="size">401 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-5"><IMG height=128 alt=""
  src="Quicksan_files/google-pokemon.png" width=128> <STRONG>Google
  Pokémon</STRONG> <SPAN data-type="size">12875 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-6"><IMG height=128 alt=""
  src="Quicksan_files/ical.png" width=128> <STRONG>iCal</STRONG> <SPAN
  data-type="size">5273 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-7"><IMG height=128 alt=""
  src="Quicksan_files/ichat.png" width=128> <STRONG>iChat</STRONG> <SPAN
  data-type="size">5437 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-8"><IMG height=128 alt=""
  src="Quicksan_files/interface-builder.png" width=128> <STRONG>Interface
  Builder</STRONG> <SPAN data-type="size">2764 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-9"><IMG height=128 alt=""
  src="Quicksan_files/ituna.png" width=128> <STRONG>iTuna</STRONG> <SPAN
  data-type="size">17612 KB</SPAN> </LI>
  <LI data-type="util" data-id="id-10"><IMG height=128 alt=""
  src="Quicksan_files/keychain-access.png" width=128> <STRONG>Keychain
  Access</STRONG> <SPAN data-type="size">972 KB</SPAN> </LI>
  <LI data-type="util" data-id="id-11"><IMG height=128 alt=""
  src="Quicksan_files/network-utility.png" width=128> <STRONG>Network
  Utility</STRONG> <SPAN data-type="size">245 KB</SPAN> </LI>
  <LI data-type="util" data-id="id-12"><IMG height=128 alt=""
  src="Quicksan_files/sync.png" width=128> <STRONG>Sync</STRONG> <SPAN
  data-type="size">3788 KB</SPAN> </LI>
  <LI data-type="app" data-id="id-13"><IMG height=128 alt=""
  src="Quicksan_files/textedit.png" width=128> <STRONG>TextEdit</STRONG> <SPAN
  data-type="size">1669 KB</SPAN> </LI></UL></DIV>
<SCRIPT type=text/javascript>
          // Custom sorting plugin
          (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 < valB) ? 1 : (valA > valB) ? -1 : 0;
                      } else {
                          return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
                      }
                  });
                  return $(arr);
              };
          })(jQuery);

          // DOMContentLoaded
          $(function() {

            // bind radiobuttons in the form
              var $filterType = $('#filter input[name="type"]');
              var $filterSort = $('#filter input[name="sort"]');

              // get the first collection
              var $applications = $('#applications');

              // clone applications to get a second collection
              var $data = $applications.clone();

            // attempt to call Quicksand on every form change
              $filterType.add($filterSort).change(function(e) {
                  if ($($filterType+':checked').val() == 'all') {
                      var $filteredData = $data.find('li');
                  } else {
                      var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
                  }

              // if sorted by size
                  if ($('#filter input[name="sort"]:checked').val() == "size") {
                      var $sortedData = $filteredData.sorted({
                          by: function(v) {
                              return parseFloat($(v).find('span[data-type=size]').text());
                          }
                      });
                  } else {
                  // if sorted by name
                      var $sortedData = $filteredData.sorted({
                          by: function(v) {
                              return $(v).find('strong').text().toLowerCase();
                          }
                      });
                  }

                  // finally, call quicksand
                $applications.quicksand($sortedData, {
                  duration: 800,
                  easing: 'easeInOutQuad'
                });

              });

          });
        </SCRIPT>

<H2 class=splitter>JavaScript</H2><PRE><CODE>// Custom sorting plugin
(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 < valB) ? 1 : (valA > valB) ? -1 : 0;
      } else {
        return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
      }
    });
    return $(arr);
  };
})(jQuery);

// DOMContentLoaded
$(function() {

  // bind radiobuttons in the form
  var $filterType = $('#filter input[name="type"]');
  var $filterSort = $('#filter input[name="sort"]');

  // get the first collection
  var $applications = $('#applications');

  // clone applications to get a second collection
  var $data = $applications.clone();

  // attempt to call Quicksand on every form change
  $filterType.add($filterSort).change(function(e) {
    if ($($filterType+':checked').val() == 'all') {
      var $filteredData = $data.find('li');
    } else {
      var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
    }

    // if sorted by size
    if ($('#filter input[name="sort"]:checked').val() == "size") {
      var $sortedData = $filteredData.sorted({
        by: function(v) {
          return parseFloat($(v).find('span[data-type=size]').text());
        }
      });
    } else {
      // if sorted by name
      var $sortedData = $filteredData.sorted({
        by: function(v) {
          return $(v).find('strong').text().toLowerCase();
        }
      });
    }

    // finally, call quicksand
    $applications.quicksand($sortedData, {
      duration: 800,
      easing: 'easeInOutQuad'
    });

  });

});</CODE></PRE>
<H2 class=splitter>HTML</H2><PRE><CODE><form id="filter">
  <fieldset>
    <legend>Filter by type</legend>
    <label><input type="radio" name="type" value="all" checked="checked">Everything</label>
    <label><input type="radio" name="type" value="app">Applications</label>
    <label><input type="radio" name="type" value="util">Utilities</label>
  </fieldset>
  <fieldset>
    <legend>Sort by</legend>
    <label><input type="radio" name="sort" value="size" checked="checked">Size</label>
    <label><input type="radio" name="sort" value="name">Name</label>
  </fieldset>
</form>

<ul id="applications" class="image-grid">
  <li data-id="id-1" data-type="util">
    <img src="activity-monitor.png" width="128" height="128" alt="" />
    <strong>Activity Monitor</strong>
    <span data-type="size">348 KB</span>
  </li>
  <li data-id="id-2" data-type="app">
    <img src="address-book.png" width="128" height="128" alt="" />
    <strong>Address Book</strong>
    <span data-type="size">1904 KB</span>
  </li>
  <li data-id="id-3" data-type="app">
    <img src="finder.png" width="128" height="128" alt="" />
    <strong>Finder</strong>
    <span data-type="size">1337 KB</span>
  </li>
  <li data-id="id-4" data-type="app">
    <img src="front-row.png" width="128" height="128" alt="" />
    <strong>Front Row</strong>
    <span data-type="size">401 KB</span>
  </li>
  <li data-id="id-5" data-type="app">
    <img src="google-pokemon.png" width="128" height="128" alt="" />
    <strong>Google Pokémon</strong>
    <span data-type="size">12875 KB</span>
  </li>
  <li data-id="id-6" data-type="app">
    <img src="ical.png" width="128" height="128" alt="" />
    <strong>iCal</strong>
    <span data-type="size">5273 KB</span>
  </li>
  <li data-id="id-7" data-type="app">
    <img src="ichat.png" width="128" height="128" alt="" />
    <strong>iChat</strong>
    <span data-type="size">5437 KB</span>
  </li>
  <li data-id="id-8" data-type="app">
    <img src="interface-builder.png" width="128" height="128" alt="" />
    <strong>Interface Builder</strong>
    <span data-type="size">2764 KB</span>
  </li>
  <li data-id="id-9" data-type="app">
    <img src="ituna.png" width="128" height="128" alt="" />
    <strong>iTuna</strong>
    <span data-type="size">17612 KB</span>
  </li>
  <li data-id="id-10" data-type="util">
    <img src="keychain-access.png" width="128" height="128" alt="" />
    <strong>Keychain Access</strong>
    <span data-type="size">972 KB</span>
  </li>
  <li data-id="id-11" data-type="util">
    <img src="network-utility.png" width="128" height="128" alt="" />
    <strong>Network Utility</strong>
    <span data-type="size">245 KB</span>
  </li>
  <li data-id="id-12" data-type="util">
    <img src="sync.png" width="128" height="128" alt="" />
    <strong>Sync</strong>
    <span data-type="size">3788 KB</span>
  </li>
  <li data-id="id-13" data-type="app">
    <img src="textedit.png" width="128" height="128" alt="" />
    <strong>TextEdit</strong>
    <span data-type="size">1669 KB</span>
  </li>
</ul></CODE></PRE></DIV></DIV>
<P class=footer><SPAN>Powered by <A href="http://jquery.com/">jQuery</A> – Made
by <A href="http://agilope.com/">agilope</A></SPAN> <SPAN>Design by <A
href="http://twitter.com/riddle">@riddle</A></SPAN> </P>
<SCRIPT type=text/javascript>
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </SCRIPT>

<SCRIPT type=text/javascript>
      try {
        var pageTracker = _gat._getTracker("UA-1121012-6");
        pageTracker._trackPageview();
      } catch(err) {}
    </SCRIPT>
</BODY></HTML>

posted @ 2010-06-19 09:28 深邃老马阅读(353) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

深邃老马

逆水行舟，不进则退

jQuery也能实现重新排序文件

公告