jQuery 连续列表实现代码


Posted in Javascript onDecember 21, 2009

这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。
可以先看看示例。
1a.添加jQuery代码
下载jQuery,在<head>标签之间如下添加jQuery代码:

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

jQuery将如下输出html源码:
jQuery 连续列表实现代码 
1b.CSS编码
相应的运用背景图片样式化<li>元素。(step1.png, step2.png, step3.png等等)。
#step .item1 { 
background: url(step1.png) no-repeat; 
} 
#step .item2 { 
background: url(step2.png) no-repeat; 
} 
#step .item3 { 
background: url(step3.png) no-repeat; 
}

jQuery 连续列表实现代码 
2a.添加连续的内容
你也可以运用这种技巧添加有序的内容,运用jQuery的prepend方法。下面就采用此种方法生成计数的留言列表。
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ $("#commentlist li").each(function (i) { 
i = i+1; 
$(this).prepend('<span class="commentnumber"> #' i '</span>'); 
}); 
}); 
</script>

将为每个<li>添加一个<span calss=”commentnumber”>计数</span>.
jQuery 连续列表实现代码 
2b.CSS
样式化<li>:position:relative 用position:absolute把.commentnumber放在留言条目的右上角。
#commentlist li { 
position: relative; 
} 
#commentlist .commentnumber { 
position: absolute; 
right: 0; 
top: 8px; 
}

 2b.CSS
样式化<li>:position:relative 用position:absolute把.commentnumber放在留言条目的右上角。
#commentlist li {
  position: relative;
}
#commentlist .commentnumber {
  position: absolute;
  right: 0;
  top: 8px;
}

jQuery 连续列表实现代码
Javascript 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
javascript之Partial Application学习
Jan 10 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
jQuery解决iframe高度自适应代码
Dec 20 #Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 #Javascript
js控制div及网页相关属性的代码
Dec 19 #Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 #Javascript
JS 的应用开发初探(mootools)
Dec 19 #Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
javascript demo 基本技巧
Dec 18 #Javascript
You might like
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
three.js实现圆柱体
2018/12/30 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Python中shutil模块的学习笔记教程
2017/04/04 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
策划主管的工作职责
2013/11/24 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
《刷子李》教学反思
2016/02/20 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Mysql 设置boolean类型的操作
2021/06/04 MySQL
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
yolov5返回坐标的方法实例
2022/03/17 Python