设为首页|加入收藏| 联系站长

网站首页特效插件

css3和HTML5特效jquery筛选器插件选项卡

发布时间:2017/2/8 10:48:44 编辑:佚名 阅读(

css3和HTML5特效jquery筛选器插件选项卡
  • 源码来源: 互联网
  • 源码类别: 插件效果
  • 源码大小: 228KB
  • 源码语言: 简体中文
  • 源码评级:
  • 兼容平台: Firefox/Chrome/Safari/IE11/IE10
  • 源码授权: 免费版
  • 相关链接:
  • 源码描述

    jquery筛选器插件选项卡、帮助用户筛选和分类内容,提高用户体验是一种筛选容器选项卡形式,包含了css3特效和html5特效,让这个网页效果更加的酷炫。

    因为使用了css3特效和html5特效,所以此效果不支持IE低版本的浏览器,要注意!!!

    使用方法

    使用此效果徐引用JQuery和jquery.quicksand.js文件

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.quicksand.js"></script>

    HTML结构

    因为选项卡形式,包含了css3特效和html5特效,所以html结构我也引用了html5标签

    <nav id="filter"></nav>
    <section id="container">
    	<ul id="stage">
    		<li data-tags="分类"><img src=" " alt="" /></li>
    		<li data-tags="分类,分类"><img src=" " alt="" /></li>     
    		<li data-tags="分类,分类,分类"><img src=" " alt="" /></li>
    	</ul>
    </section>

    data-tags:填写你所要分类的属性,可以是一个,也可以是多个。

    <nav>:这里调用是分类导航。会根据data-tags里的属性值自动获取。

    li元素里面内容不一定非要是图片,也可以是其他内容

    主要JS代码

    $(document).ready(function(){	
    	var items = $('#stage li'),
    		itemsByTags = {};	
    	items.each(function(i){
    		var elem = $(this),
    			tags = elem.data('tags').split(',');		
    		elem.attr('data-id',i);		
    		$.each(tags,function(key,value){			
    			value = $.trim(value);			
    			if(!(value in itemsByTags)){
    				itemsByTags[value] = [];
    			}
    			itemsByTags[value].push(elem);
    		});		
    	});
    	createList('ALL',items);   //ALL 可以改字 也可为空,为空时必须注释掉该行
    	$.each(itemsByTags,function(k,v){
    		createList(k,v);
    	});	
    	$('#filter a').live('click',function(e){
    		var link = $(this);		
    		link.addClass('active').siblings().removeClass('active');		
    		$('#stage').quicksand(link.data('list').find('li'));
    		e.preventDefault();
    	});	
    	$('#filter a:first').click();	
    	function createList(text,items){		
    		var ul = $('<ul>',{'class':'hidden'});		
    		$.each(items,function(){	
    			$(this).clone().appendTo(ul);
    		});
    		ul.appendTo('#container');
    		var a = $('<a>',{
    			html: text,
    			href:'#',
    			data: {list:ul}
    		}).appendTo('#filter');
    	}
    });

    下载说明:

    1、解压提取密码:bnmg

    2、模板页面仅为图片所展示的样式。

    3、如果您发现模板有错,或者您有其他更好的意见、建议请给我们留言,我们会及时处理!

    4、如果您遇到什么问题,可以关注本站微信进行学习交流!

    * 下载本站源码以及作品仅供学习研究之用,如需转载何使用请注明出去 *

    0% (0)
    0% (10)