等待-放飞梦想 » 列表 http://leotheme.cn 勤现在-乐将来 Mon, 21 May 2012 09:45:24 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 用jQuery实现个性有序列表 http://leotheme.cn/javascript/jquery-to-sequential-list.html http://leotheme.cn/javascript/jquery-to-sequential-list.html#comments Tue, 24 Mar 2009 06:43:54 +0000 Await http://leotheme.cn/?p=321 您可能也喜欢：
jQuery中queue和dequeue的用法
jQuery 实现 tab 切换一例
jQuery性能优化指南
JQ弹出层插件(tipsWindow 2.8)
jQuery实现背景图渐变切换 无觅 ]]> 本文转载自：http://iinterest.net/blog/2009/02/11/jquery-sequential-list/

当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决。

但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表.

先来看Demo

实现起来也很简单,看看第一个例子,首先是载入javascript代码

<script type=“text/javascript” src=“js/jquery-1.3.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
  
    $(“#step li”).each(function (i) {
        i = i+1;
        $(this).addClass(“item”+i);
   });
</script>

经过jQuery处理后,原来的代码将发生变化,jQuery为每个li增加了一个有序的不同类:

有了类之后就好办了,为每个类定义不同的样式表(我为item1,item2…增加了不同的背景图片):

#step .item1 {
  background: url(step1.png) no-repeat;
}
#step .item2 {
  background: url(step2.png) no-repeat;
}
#step .item3 {
  background: url(step3.png) no-repeat;
}

最后的效果:

当然除了图片也可以增加任意你想要的代码,比如第三个例子就是在li中增加一个 容器

<script type=“text/javascript”>
 
    $(“#commentlist li”).each(function (i) {
        i = i+1;
        $(this).prepend(‘<span class=”commentnumber”> #’+i+‘</span>’);
   });
 
});
</script>

jQuery处理过程:

51737245200902111307463352842657555_003

样式表:

#commentlist li {
  position: relative;
}
 
#commentlist .commentnumber {
  position: absolute;
  right: 0;
  top: 8px;
}

最终效果:

您可能也喜欢：

jQuery中queue和dequeue的用法
jQuery 实现 tab 切换一例
jQuery性能优化指南
JQ弹出层插件(tipsWindow 2.8)
jQuery实现背景图渐变切换
无觅

相关文章

  • 2011-09-08 -- jQuery中queue和dequeue的用法 (1)
    今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
  • 2011-08-17 -- Flight主题更新 (19)
    这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
  • 2010-11-24 -- JQ弹出层插件(tipsWindow 3.0) (166)
    已更新为2.7...
  • 2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
    关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
  • 2010-10-12 -- jquery ajax方法如load,get等 在Chrome下失效的问题 (4)
    最近碰到一个问题，发现jquery在chrome 中， ajax的load get等方法完全失效。 代码如下： function getHtml(url,ctner){ //alert(c...
]]> http://leotheme.cn/javascript/jquery-to-sequential-list.html/feed 3 li 列表隔行变换背景颜色的一些方法 http://leotheme.cn/javascript/ul-li-background-color.html http://leotheme.cn/javascript/ul-li-background-color.html#comments Sun, 09 Nov 2008 12:39:30 +0000 Await http://leotheme.cn/?p=151 您可能也喜欢：
jQuery实现背景图渐变切换
看着非常舒服的颜色
CSS中关于背景图的应用技巧
JavaScript实现WordPress自由颜色主题切换
使用lesscss来编码编写css 无觅 ]]> 这个应用好像很广了.在wopus的评论中也可以看到这样的一个效果.隔行变换背景色.
以前的做法是偶数行时给li加一个class,方法当然不可取，如果后台读取再加class就很麻烦了.我们来看下怎么用JavaScript来实现.
我们首先定义两个CSS

<style type="text/css">
<!--
.li_bg1 { background:#FFF; }
.li_bg2 { background:#F0F; }
-->
</style>
<ul id="list1">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul>

接下来写JS代码:

var objName= document.getElementById("list1").getElementsByTagName("li")
for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li_bg1"):(objName(i).className = "li_bg2");
}

好了,现在你也可以做隔行变色的效果了,其实还有种更方便的方法就是通过WP自带的JQUERY,看下面的代码:

$(document).ready(function(){
     $("#list1 li:even").addClass("li_bg2");
}

一行代码就行了.是不是更简单更方便!

您可能也喜欢：

jQuery实现背景图渐变切换
看着非常舒服的颜色
CSS中关于背景图的应用技巧
JavaScript实现WordPress自由颜色主题切换
联想IdeaPad S9/S10的视频广告《爱，永远在线》
无觅

相关文章

  • 2009-03-24 -- 用jQuery实现个性有序列表 (3)
    本文转载自：http://iinterest.net/blog/2009/02/11/jquery-sequential-list/ 当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为...
  • 2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
    在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
]]> http://leotheme.cn/javascript/ul-li-background-color.html/feed 7