资源预览内容
第1页 / 共10页
第2页 / 共10页
第3页 / 共10页
第4页 / 共10页
第5页 / 共10页
第6页 / 共10页
第7页 / 共10页
第8页 / 共10页
第9页 / 共10页
第10页 / 共10页
亲,该文档总共10页全部预览完了,如果喜欢就下载吧!
资源描述
基于 jQuery / Looping though all the li items: items.each(function(i) var elem = $(this), tags = elem.data(tags).split(,); / Adding a data-id attribute. Required by the Quicksandplugin: elem.attr(data-id,i); $.each(tags,function(key,value) / Removing extra whitespace: value = $.trim(value); if(!(value in itemsByTags) / Create an empty array to hold this item: itemsByTagsvalue = ; / Each item is added to one array per tag: itemsByTagsvalue.push(elem); ); ); 每个标签作为一个数组对象添加到 itemsByTags。 这意味着 itemsByTagsWeb Design将是包含所有项的数组。我们使用这个对象为 Quicksand 在页面上创建隐藏的无序列表。 script.js Part 2 function createList(text,items) / This is a helper function that takes the / text of a menu button and array of li items / Creating an empty unordered list: var ul = $(,class:hidden); $.each(items,function() / Creating a copy of each li item / and adding it to the list: $(this).clone().appendTo(ul); ); ul.appendTo(#container); / Creating a menu item. The unordered list isadded / as a data parameter (available via.data(list): var a= $(, html: text, href:#, data: list:ul ).appendTo(#filter); 此函数需要以分组的名称以及包含 LI 项的数组作为参数, 然后克隆这些项至新的 UL, 同时在绿色栏中添加链接。 现在我们需要遍历所有分组并调用上面的函数,同时监听菜单项上的点击事件。 script.js Part 3 / Creating the “Everything” option in themenu: createList(Everything,items); / Looping though the arrays in itemsByTags: $.each(itemsByTags,function(k,v) createList(k,v); ); $(#filter a).live(click,function(e) var link = $(this); link.addClass(active).siblings().removeClass(active); / Using the Quicksand plugin to animate the liitems. / It uses data(list) defined by our createListfunction: $(#stage).quicksand(link.data(list).find(li); e.preventDefault(); ); / Selecting the first menu item by default: $(#filter a:first).click(); 现在,一切已经就绪,我们就可以继续页面造型设计。 CSS 页面样式本身并不是很有趣(你可以在 assets/css/styles.css 中看到) 。绿色导航栏(filterbar)使用:before/:after 伪元素在两端添加华丽的边角。由于它们也都是绝对定位的,他们也将随导航栏一同变化。 styles.css #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; #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); #filter:before background-position: 0 -47px; left: -78px; #filter:after background-position: 0 0; right: -78px; #filter a color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; #filter a:hover text-decoration:none; #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; Before/After 元素 结论 您可以使用此模板来展示你的工作,它最好的一点就是,很容易进行定制。你唯一需要做的只是更改#stage list 的相应项目,并定义一些新的标签其余的工作都将由脚本去完成。如果没有启用 JavaScript,他们依然会看到你所有的内容,同样也是出于搜索引擎优化的目的。
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号