jquery定时器跳转页面_jQuery列表页面增强器

jquery定时器跳转页面

介绍

基本的客户列表页面有些呆板。 上面的设计将是本教程的最终结果，我们还将尝试添加服务列表，并将这两个列表映射在一起。 指向服务将显示购买该服务的客户，而指向客户将显示该客户端购买的服务。 在jQuery的帮助下将这两个映射在一起是可能的。

HTML

我们将使用专为现代浏览器量身定制HTML 5标签。 尽管几乎没有任何标记和文档类型需要更改才能使其在每种浏览器上都可以使用。 文件的结构
由两个HTML 5标签组成：标题和部分。

  
  

	
   
   
	
   
   
Services
	
   
   
Clients

  
  

  
  

	
   
   
Systems Development
			
     
     
 Business Needs 
 Design & Development 
 Test & Implement 
		
Design & Branding
			
     
     
 Market Research 
 Business Strategy 
 Corporate Identity 
 Online Brand Presence 
 User Experience 
 Information Architecture 
 Application Development 
		
	
   
   
 Nike 
 Adidas 
 Hugo Boss 
 Canal + 
 TV shop plus 
 CBS 
 NBC 
 GOL TV 
 Petrom 
 OMV 
 La pizza 
 The shop 

  
  

如您所见，每个列表项都有不同数量的类。 这些用于标识服务以及将服务映射到客户端，反之亦然。 使用锚标签内的class属性
强调选择了哪些客户或服务。
CSS
在本教程中，我们将使用圆角。

/* reset basic styling and set rounded corners */
*
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
.all-rounded,
ul.services li a,
ul.clients li a
{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.btlft-rounded
{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded
{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.top-rounded
{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }

/* styling of the general structure: size, position and alike */
header
{ display:block; width:801px; height:40px; margin:0px auto; margin-top:100px; border:1px solid #888;  border-bottom:none; }
header h1, header h2
{ display:block; margin:0px; padding:0px; }
header h1
{ width:200px; float:left; }
section
{ display:block; width:803px; margin:0px auto; margin-bottom:50px; overflow:auto; }
ul
{ display:block; float:left; list-style:none; padding-bottom:15px; }
ul.services
{ width:200px; }
ul.clients
{ width:600px; }

/* visual styling: colors, font size etc */
header
{ background:#999 url('../images/top.png') repeat-x; }
header h1, header h2
{ font-size:20px; color:#F6F6F6; line-height:40px; text-align:center; }
ul.services
{ background-color:#999; border:1px solid #888; border-right:none; }
ul.clients
{ background-color:#F0F0F0; border:1px solid #888; }

ul.services a, ul.clients a
{ text-decoration:none; }
ul.services li a
{ display:block; color:#F0F0F0; height:23px; line-height:25px; padding:0px 5px; border:1px solid #999; }
ul.services li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
ul.services li ul
{ margin-left:20px; }
ul.services li
{ overflow:hidden; }

ul.clients li a
{ display:block; float:left; width:138px; padding:0px 5px; line-height:25px; height:23px; text-align:center; border:1px solid #F0F0F0; }
ul.clients li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

ul.services li a.selected,
ul.clients li a.selected
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

jQuery的

现在，我们将两列设置为相同的高度。

// resize column for same height
var servicesHeight = $('.services').height(); // get height of services ul
var clientsHeight = $('.clients').height(); // get height of clients ul
// check who's bigger and set height accordingly
if(servicesHeight>clientsHeight) $('.clients').height(servicesHeight);
   else $('.services').height(clientsHeight);

下一部分代码将创建单击服务时所需的行为。

//如果单击左侧的服务
$（'。services a'）。click（function（）{
$（'。selected'）。attr（'class'，”）; //单击服务，将其选中（如果选中）
//当我们单击一项服务时，我们需要强调它已被选中
$（this）.attr（'class'，'selected'）; //将当前链接设置为选中

//获取服务类
var classesString = $（this）.parent（）。attr（'class'）;
var classes = classesString.split（''）; //现在，类包含单击的服务的所有类属性
//遍历所有类
for（var i = 0; i <classes.length; i ++）{//将选择设置为具有此类服务的所有客户端$（'。clients li。'+ classes [i] +'a'）。attr（'类”，“选定”）； }}）; [/ cc]单击客户端时，将执行相同的过程，但以完全相反的方式执行该工作。 我们将首先获取客户端的class属性，以检查购买的服务，然后循环通过这些服务并将其设置为选中状态。 [js] //如果单击了右边的客户$（'。clients li a'）。click（function（）{$（'。selected'）。attr（'class'，''）; //一个客户被单击，使任何一个都被选中（如果未选中）//当我们单击一个客户端时，我们需要强调的是选中它$（this）.attr（'class'，'selected'）; //将当前链接设置为选中状态//获取客户端的类var classesString = $（this）.parent（）。attr（'class'）; var classes = classesString.split（''）; //现在，类包含了被单击的客户端的所有类属性//遍历所有类for（var i = 0; i <classes.length; i ++）{//设置选择为客户端购买的所有服务$（'。services li。'+ classes [i] +'a' ）.attr（'class'，'selected'）;}}）; [/ js] 观看现场演示
资源

翻译自: https://www.sitepoint.com/jquery-list-page-enhancer/

jquery定时器跳转页面