使用Jquery设计列表

1、截取文字内容实现控制列表宽度

使用的技术

1、 jQuery的ready（）函数—文档加载完成
2、 jQuery的each（）函数—遍历jQuery对象
3、 jQuery的text（）函数—所有匹配元素的内容

 $(document).ready(function()){
$(“.list”).each(function(){
Var inText=$(this).text();//获取<span>中的文字内容
if(inText.length>10)
{
   $(this).text(inText.substr(0,10)+”…”)
}
})
});

2、修改层的宽度控制列表的宽度

可以把所有列表项所在的层设置为长度相同，这样截取出来的列表项宽度就一致了。

功能实现：
1、 先使用 ready()函数加载整个页面
2、 在function()内部使用each函数遍历列表项 
3、 判断每个列表项的整体宽度是否DAU预定宽度
4、 如果大于，计算出列表项第一部分需要的长度并设置
5、 适当调整每个列表项的高度

  $( function(){

 var linelen=120;

 $.each($(“.list”),function(i)

If(($(“.suone:eq(“+i+”)”).width()+$(“.subtwo:eq(“+i+”)”).width())>linelen())

)

(太复杂，自行百度)

})

3、控制列表项符号图片
利用jQuery与css控制列表项符号图片
原理：利用jQuery为 每个列表项动态加载CSS样式背景图片，并把原有的列表项符号隐藏

jQueryde addClass函数—添加样式类的选择

语法：addClass(class|fn)
例：

<style type=”text/css”>
#ulstyle {list-style:none;}
.list{background:url(img/listico.jpg) no-repeat;padding-left:20px}
</style>

<script>
ready(function(){
$(“#ulstyle li”).each（function(){//分层选择器
$(this).addClass(“list”)
} 
})
</script>

4、列表项的滚动
让静态列表滚动起来，出现滚动新闻的效果。
列表项滚动一般适用于实时更新的网站内容标题
使用jQuery产生滚动列表的原理是两个动作：隐藏与添加。
步骤：
1、 先需要取得列表的滚动区间
2、 使用jQuery的hover函数分别响应鼠标的悬停与离开事件
3、 在鼠标悬停时间中获取滚动内容的第一列表项，将隐藏的第一列表项添加到整个列表的结尾
4、 设定滚动间隔，及滚动过程中的动画持续事件
$(function() 
{ 
var area=$('ul.scorllline');//取得滚动区域 
var timespan=1000;//定义滚动时间间隔 
var timeID;//需要清除的动画 
area.hover( 
function(){ 
clearInterval(timeID);//当鼠标在滚动区域中停止滚动，移出事件处理 
}, 
function() 
{//悬停事件处理 
timeID=setInterval(function(){//设置滚动时间间隔及滚动动作 
var moveline=area.find('li:first'); 
var lineheight=moveline.height();//获取每次滚动的高度 
moveline.animate({marginTop:-lineheight+'px'},500, 
function(){ 
moveline.css('marginTop',0).appendTo(area); 
}) 

},timespan) 
}).trigger('mouseleave'); 

}); 




14.4图片列表
大小不一的图片实现图片大小统一规则摆放
原理：为每张图片设定一个相同大小的显示区域，并把这些显示区域通过列表的形式规则摆放。
.imglist{float: left;width: auto;list-style: none}
 .imglist li{float:left;width: auto;margin: 3px;text-align: center}
 .imglist li .area{height: 250px;width: 200px;display: block}


14.5 列表的显示与收缩
页面加载完成后 ，某一部分只显示大的标题。当把鼠标移动到标题上，会在标题下动态的出现列表的信息项。
使用ready(),hover(),或者toggle()、slideDown()、slideUp()


14.6 列表项的动态排序
使用的函数ready(),get(),text(),each(),append(),javascript函数sort()


1、 jQuery函数get()—获取匹配元素集合
语法：object.get()
2、 jQuery函数text（）--获取和设置元素的内容
语法：object.text([val|fn])
3、 jQuery函数append()—向元素末尾追加内容
object.append([content|fn])


javascript函数sort()—元素排序
arrayObject.sort([sortby])


实现无序列表排序功能如下
1、 获取所有的列表项，并将其装入数组
2、 对数组对象进行排序
3、 将排好序的数组重新填充到无序列表中




ready(function(){
var items=$(“.orderobj li”).get();//获取所有排序li装如数组item
items.sort(function(a,b){
var one=$(a).text();
var two=$(b).text();
if(one>two) return 1;
else return -1;


})
Var ul=$(“.oorderobj”);
$.each(items,function(i,li)
{
ul.append(li);
})
})