筛选卡-很有美感的

jquery筛选器选项卡 css3制作一个漂亮的HTML5筛选容器选项卡

----------------------------------------------------------------------------------------------------------------------------------

  1 <!DOCTYPE HTML>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <title>jquery筛选器选项卡 css3制作一个漂亮的HTML5筛选容器选项卡</title>
  5 <!-- Our CSS stylesheet file -->
  6 <style type="text/css">
  7 /*-------------------------Simple reset--------------------------*/
  8 *{margin:0;padding:0;}
  9 /*-------------------------General Styles--------------------------*/
 10 html{background:url('img/bg_tile.jpg') #18222b;}
 11 body{color:#fcfcfc;font:14px/1.3 'Segoe UI',Arial, sans-serif;min-height:930px;background:url('img/bg_center.jpg') center 240px no-repeat;}
 12 a, a:visited {text-decoration:none;outline:none;color:#54a6de;}
 13 a:hover{text-decoration:underline;}
 14 /*----------------------------Headers & Footers-----------------------------*/
 15 header{background:url('img/header.png') repeat-x;display:block;height:220px;padding:10px;}
 16 header h1{background:url('img/logo.png') no-repeat center center;height:80px;margin:75px auto;overflow:hidden;text-align:center;text-indent:-99999px;}/*----------------------------Green filter bar-----------------------------*/
 17 #filter {background:url("img/bar.png") repeat-x 0 -94px;display:block;height:39px;margin:55px auto;position:relative;width:600px;text-align:center;-moz-box-shadow:0 4px 4px #000;-webkit-box-shadow:0 4px 4px #000;box-shadow:0 4px 4px #000;}
 18 #filter:before, #filter:after {background:url("img/bar.png") no-repeat;height:43px;position:absolute;top:0;width:78px;content:'';-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);box-shadow:0 2px 0 rgba(0,0,0,0.4);}
 19 #filter:before {background-position:0 -47px;left:-78px;}
 20 #filter:after {background-position:0 0;right:-78px;}
 21 #filter a{color:#FFFFFF;display:inline-block;height:39px;line-height:37px;padding:0 15px;/*text-shadow:1px 1px 1px #315218;*/}
 22 #filter a:hover{text-decoration:none;}
 23 #filter a.active{background:url("img/bar.png") repeat-x 0 -138px;box-shadow:1px 0 0 rgba(255, 255, 255, 0.2),-1px 0 0 rgba(255, 255, 255, 0.2),1px 0 1px rgba(0,0,0,0.2) inset,-1px 0 1px rgba(0,0,0,0.2) inset;}
 24 /*----------------------------Content area-----------------------------*/
 25 #container{display:block;overflow:hidden;width:830px;margin:0 auto;}
 26 #container li{float:left;height:96px;list-style:none outside none;margin:6px;position:relative;width:125px;-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}
 27 #container ul{overflow:hidden;}
 28 #container ul.hidden{display:none;}
 29 </style>
 30 <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 31 </head>
 32 
 33 <body>
 34 
 35 <header>
 36     <h1>我的 文件夹</h1>
 37 </header>
 38 
 39 <nav id="filter"></nav>
 40 
 41 <section id="container">
 42     <ul id="stage">
 43         <li data-tags="印刷设计"><img src="img/shots/1.jpg" alt="Illustration" /></li>
 44         <li data-tags="商标设计,印刷设计"><img src="img/shots/2.jpg" alt="Illustration" /></li>
 45         <li data-tags="网站设计,商标设计"><img src="img/shots/3.jpg" alt="Illustration" /></li>
 46         <li data-tags="网站设计,印刷设计"><img src="img/shots/4.jpg" alt="Illustration" /></li>
 47         <li data-tags="商标设计"><img src="img/shots/5.jpg" alt="Illustration" /></li>
 48         <li data-tags="网站设计,商标设计,印刷设计"><img src="img/shots/6.jpg" alt="Illustration" /></li>
 49         <li data-tags="商标设计,印刷设计"><img src="img/shots/7.jpg" alt="Illustration" /></li>
 50         <li data-tags="网站设计"><img src="img/shots/8.jpg" alt="Illustration" /></li>
 51         <li data-tags="网站设计,商标设计"><img src="img/shots/9.jpg" alt="Illustration" /></li>
 52         <li data-tags="网站设计"><img src="img/shots/10.jpg" alt="Illustration" /></li>
 53         <li data-tags="商标设计,印刷设计"><img src="img/shots/11.jpg" alt="Illustration" /></li>
 54         <li data-tags="商标设计,印刷设计"><img src="img/shots/12.jpg" alt="Illustration" /></li>
 55         <li data-tags="印刷设计"><img src="img/shots/13.jpg" alt="Illustration" /></li>
 56         <li data-tags="网站设计,商标设计"><img src="img/shots/14.jpg" alt="Illustration" /></li>
 57         <li data-tags="印刷设计"><img src="img/shots/15.jpg" alt="Illustration" /></li>
 58         <li data-tags="商标设计"><img src="img/shots/16.jpg" alt="Illustration" /></li>
 59         <li data-tags="网站设计,商标设计,印刷设计"><img src="img/shots/17.jpg" alt="Illustration" /></li>
 60         <li data-tags="网站设计"><img src="img/shots/18.jpg" alt="Illustration" /></li>
 61         <li data-tags="网站设计,印刷设计"><img src="img/shots/19.jpg" alt="Illustration" /></li>
 62         <li data-tags="商标设计,印刷设计"><img src="img/shots/20.jpg" alt="Illustration" /></li>
 63         <li data-tags="网站设计,商标设计"><img src="img/shots/21.jpg" alt="Illustration" /></li>
 64         <li data-tags="印刷设计"><img src="img/shots/22.jpg" alt="Illustration" /></li>
 65         <li data-tags="商标设计,印刷设计"><img src="img/shots/23.jpg" alt="Illustration" /></li>
 66     </ul>
 67 </section>
 68 
 69 <script src="js/jquery-1.8.3.min.js">导入一个jquery文件</script>
 70 <script src="js/jquery.quicksand.js"></script>
 71 <script type="text/javascript">
 72 $(document).ready(function(){
 73     
 74     var items = $('#stage li'),
 75         itemsByTags = {};
 76     
 77     // Looping though all the li items:
 78     
 79     items.each(function(i){
 80         var elem = $(this),
 81             tags = elem.data('tags').split(',');
 82         
 83         // Adding a data-id attribute. Required by the Quicksand plugin:
 84         elem.attr('data-id',i);
 85         
 86         $.each(tags,function(key,value){
 87             
 88             // Removing extra whitespace:
 89             value = $.trim(value);
 90             
 91             if(!(value in itemsByTags)){
 92                 // Create an empty array to hold this item:
 93                 itemsByTags[value] = [];
 94             }
 95             
 96             // Each item is added to one array per tag:
 97             itemsByTags[value].push(elem);
 98         });
 99         
100     });
101 
102     // Creating the "Everything" option in the menu:
103     createList('所有分类',items);
104 
105     // Looping though the arrays in itemsByTags:
106     $.each(itemsByTags,function(k,v){
107         createList(k,v);
108     });
109     
110     $('#filter a').live('click',function(e){
111         var link = $(this);
112         
113         link.addClass('active').siblings().removeClass('active');
114         
115         // Using the Quicksand plugin to animate the li items.
116         // It uses data('list') defined by our createList function:
117         
118         $('#stage').quicksand(link.data('list').find('li'));
119         e.preventDefault();
120     });
121     
122     $('#filter a:first').click();
123     
124     function createList(text,items){
125         
126         // This is a helper function that takes the
127         // text of a menu button and array of li items
128         
129         // Creating an empty unordered list:
130         var ul = $('<ul>',{'class':'hidden'});
131         
132         $.each(items,function(){
133             // Creating a copy of each li item
134             // and adding it to the list:
135             
136             $(this).clone().appendTo(ul);
137         });
138 
139         ul.appendTo('#container');
140 
141         // Creating a menu item. The unordered list is added
142         // as a data parameter (available via .data('list'):
143         
144         var a = $('<a>',{
145             html: text,
146             href:'#',
147             data: {list:ul}
148         }).appendTo('#filter');
149     }
150 });
151 </script>
152 </body>
153 </html>
html和css

-----------------------------------------------------------------------------------------------------------------------------------

  1 /*
  2 
  3 Quicksand 1.2.2
  4 
  5 Reorder and filter items with a nice shuffling animation.
  6 
  7 Copyright (c) 2010 Jacek Galanciak (razorjack.net) and agilope.com
  8 Big thanks for Piotr Petrus (riddle.pl) for deep code review and wonderful docs & demos.
  9 
 10 Dual licensed under the MIT and GPL version 2 licenses.
 11 http://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt
 12 http://github.com/jquery/jquery/blob/master/GPL-LICENSE.txt
 13 
 14 Project site: http://razorjack.net/quicksand
 15 Github site: http://github.com/razorjack/quicksand
 16 
 17 */
 18 
 19 (function ($) {
 20     $.fn.quicksand = function (collection, customOptions) {     
 21         var options = {
 22             duration: 750,
 23             easing: 'swing',
 24             attribute: 'data-id', // attribute to recognize same items within source and dest
 25             adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
 26             useScaling: true, // disable it if you're not using scaling effect or want to improve performance
 27             enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
 28             selector: '> *',
 29             dx: 0,
 30             dy: 0
 31         };
 32         $.extend(options, customOptions);
 33         
 34         if ($.browser.msie || (typeof($.fn.scale) == 'undefined')) {
 35             // Got IE and want scaling effect? Kiss my ass.
 36             options.useScaling = false;
 37         }
 38         
 39         var callbackFunction;
 40         if (typeof(arguments[1]) == 'function') {
 41             var callbackFunction = arguments[1];
 42         } else if (typeof(arguments[2] == 'function')) {
 43             var callbackFunction = arguments[2];
 44         }
 45     
 46         
 47         return this.each(function (i) {
 48             var val;
 49             var animationQueue = []; // used to store all the animation params before starting the animation; solves initial animation slowdowns
 50             var $collection = $(collection).clone(); // destination (target) collection
 51             var $sourceParent = $(this); // source, the visible container of source collection
 52             var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation
 53             
 54             var destHeight;
 55             var adjustHeightOnCallback = false;
 56             
 57             var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations
 58             var offsets = []; // coordinates of every source collection item            
 59             
 60             var $source = $(this).find(options.selector); // source collection items
 61             
 62             // Replace the collection and quit if IE6
 63             if ($.browser.msie && $.browser.version.substr(0,1)<7) {
 64                 $sourceParent.html('').append($collection);
 65                 return;
 66             }
 67 
 68             // Gets called when any animation is finished
 69             var postCallbackPerformed = 0; // prevents the function from being called more than one time
 70             var postCallback = function () {
 71                 
 72                 if (!postCallbackPerformed) {
 73                     postCallbackPerformed = 1;
 74                     
 75                     // hack: 
 76                     // used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
 77                     // but new webkit builds cause flickering when replacing the collections
 78                     $toDelete = $sourceParent.find('> *');
 79                     $sourceParent.prepend($dest.find('> *'));
 80                     $toDelete.remove();
 81                          
 82                     if (adjustHeightOnCallback) {
 83                         $sourceParent.css('height', destHeight);
 84                     }
 85                     options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
 86                     if (typeof callbackFunction == 'function') {
 87                         callbackFunction.call(this);
 88                     }                    
 89                 }
 90             };
 91             
 92             // Position: relative situations
 93             var $correctionParent = $sourceParent.offsetParent();
 94             var correctionOffset = $correctionParent.offset();
 95             if ($correctionParent.css('position') == 'relative') {
 96                 if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {
 97 
 98                 } else {
 99                     correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
100                     correctionOffset.left +=( parseFloat($correctionParent.css('border-left-width')) || 0);
101                 }
102             } else {
103                 correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
104                 correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
105                 correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
106                 correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
107             }
108             
109             // perform custom corrections from options (use when Quicksand fails to detect proper correction)
110             if (isNaN(correctionOffset.left)) {
111                 correctionOffset.left = 0;
112             }
113             if (isNaN(correctionOffset.top)) {
114                 correctionOffset.top = 0;
115             }
116             
117             correctionOffset.left -= options.dx;
118             correctionOffset.top -= options.dy;
119 
120             // keeps nodes after source container, holding their position
121             $sourceParent.css('height', $(this).height());
122             
123             // get positions of source collections
124             $source.each(function (i) {
125                 offsets[i] = $(this).offset();
126             });
127             
128             // stops previous animations on source container
129             $(this).stop();
130             var dx = 0; var dy = 0;
131             $source.each(function (i) {
132                 $(this).stop(); // stop animation of collection items
133                 var rawObj = $(this).get(0);
134                 if (rawObj.style.position == 'absolute') {
135                     dx = -options.dx;
136                     dy = -options.dy;
137                 } else {
138                     dx = options.dx;
139                     dy = options.dy;                    
140                 }
141 
142                 rawObj.style.position = 'absolute';
143                 rawObj.style.margin = '0';
144 
145                 rawObj.style.top = (offsets[i].top - parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
146                 rawObj.style.left = (offsets[i].left - parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
147             });
148                     
149             // create temporary container with destination collection
150             var $dest = $($sourceParent).clone();
151             var rawDest = $dest.get(0);
152             rawDest.innerHTML = '';
153             rawDest.setAttribute('id', '');
154             rawDest.style.height = 'auto';
155             rawDest.style.width = $sourceParent.width() + 'px';
156             $dest.append($collection);      
157             // insert node into HTML
158             // Note that the node is under visible source container in the exactly same position
159             // The browser render all the items without showing them (opacity: 0.0)
160             // No offset calculations are needed, the browser just extracts position from underlayered destination items
161             // and sets animation to destination positions.
162             $dest.insertBefore($sourceParent);
163             $dest.css('opacity', 0.0);
164             rawDest.style.zIndex = -1;
165             
166             rawDest.style.margin = '0';
167             rawDest.style.position = 'absolute';
168             rawDest.style.top = offset.top - correctionOffset.top + 'px';
169             rawDest.style.left = offset.left - correctionOffset.left + 'px';
170             
171             
172     
173             
174 
175             if (options.adjustHeight === 'dynamic') {
176                 // If destination container has different height than source container
177                 // the height can be animated, adjusting it to destination height
178                 $sourceParent.animate({height: $dest.height()}, options.duration, options.easing);
179             } else if (options.adjustHeight === 'auto') {
180                 destHeight = $dest.height();
181                 if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
182                     // Adjust the height now so that the items don't move out of the container
183                     $sourceParent.css('height', destHeight);
184                 } else {
185                     //  Adjust later, on callback
186                     adjustHeightOnCallback = true;
187                 }
188             }
189                 
190             // Now it's time to do shuffling animation
191             // First of all, we need to identify same elements within source and destination collections    
192             $source.each(function (i) {
193                 var destElement = [];
194                 if (typeof(options.attribute) == 'function') {
195                     
196                     val = options.attribute($(this));
197                     $collection.each(function() {
198                         if (options.attribute(this) == val) {
199                             destElement = $(this);
200                             return false;
201                         }
202                     });
203                 } else {
204                     destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
205                 }
206                 if (destElement.length) {
207                     // The item is both in source and destination collections
208                     // It it's under different position, let's move it
209                     if (!options.useScaling) {
210                         animationQueue.push(
211                                             {
212                                                 element: $(this), 
213                                                 animation: 
214                                                     {top: destElement.offset().top - correctionOffset.top, 
215                                                      left: destElement.offset().left - correctionOffset.left, 
216                                                      opacity: 1.0
217                                                     }
218                                             });
219 
220                     } else {
221                         animationQueue.push({
222                                             element: $(this), 
223                                             animation: {top: destElement.offset().top - correctionOffset.top, 
224                                                         left: destElement.offset().left - correctionOffset.left, 
225                                                         opacity: 1.0, 
226                                                         scale: '1.0'
227                                                        }
228                                             });
229 
230                     }
231                 } else {
232                     // The item from source collection is not present in destination collections
233                     // Let's remove it
234                     if (!options.useScaling) {
235                         animationQueue.push({element: $(this), 
236                                              animation: {opacity: '0.0'}});
237                     } else {
238                         animationQueue.push({element: $(this), animation: {opacity: '0.0', 
239                                          scale: '0.0'}});
240                     }
241                 }
242             });
243             
244             $collection.each(function (i) {
245                 // Grab all items from target collection not present in visible source collection
246                 
247                 var sourceElement = [];
248                 var destElement = [];
249                 if (typeof(options.attribute) == 'function') {
250                     val = options.attribute($(this));
251                     $source.each(function() {
252                         if (options.attribute(this) == val) {
253                             sourceElement = $(this);
254                             return false;
255                         }
256                     });                 
257 
258                     $collection.each(function() {
259                         if (options.attribute(this) == val) {
260                             destElement = $(this);
261                             return false;
262                         }
263                     });
264                 } else {
265                     sourceElement = $source.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
266                     destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
267                 }
268                 
269                 var animationOptions;
270                 if (sourceElement.length === 0) {
271                     // No such element in source collection...
272                     if (!options.useScaling) {
273                         animationOptions = {
274                             opacity: '1.0'
275                         };
276                     } else {
277                         animationOptions = {
278                             opacity: '1.0',
279                             scale: '1.0'
280                         };
281                     }
282                     // Let's create it
283                     d = destElement.clone();
284                     var rawDestElement = d.get(0);
285                     rawDestElement.style.position = 'absolute';
286                     rawDestElement.style.margin = '0';
287                     rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
288                     rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
289                     d.css('opacity', 0.0); // IE
290                     if (options.useScaling) {
291                         d.css('transform', 'scale(0.0)');
292                     }
293                     d.appendTo($sourceParent);
294                     
295                     animationQueue.push({element: $(d), 
296                                          animation: animationOptions});
297                 }
298             });
299             
300             $dest.remove();
301             options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
302             for (i = 0; i < animationQueue.length; i++) {
303                 animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
304             }
305         });
306     };
307 })(jQuery);
jquery.quicksand.js

希望大家喜欢

posted @ 2015-12-24 15:12  时光之梦  阅读(57)  评论(0)    收藏  举报