澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-07-07 04:47 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

威尼斯娱乐net中ListView的交替背景颜色实现,Ta

新近有客户供给用table呈现一大串数据,由于滚动后就看不到表头,很不便利,所以想到那个作用。
上次做table排序对table有了一部分叩问,此次越来越尖锐摸底了一番,发掘table原本是这般不轻易。
还不精晓这几个功用叫什么,有一些像表头固定的意义,就叫行定位吧,本来想把列定位也做出来,但暂且还没那么些需要,等之后一时光再弄啊。
在天猫商城的货色寻找页也观望类似的职能,但Taobao的不是table,而是li,而自己这么些是用在table上的。
要验证一下的是,小编那么些职能是用在有个别平常的产品列表,当数码比较多时增加用户体验,并不是单单做多少突显,跟excel那样的方法是见仁见智的。

                                                   简易购物车原理

功能预览

在asp.net中ListView的交替背景颜色实现

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript</title>
<style>
table{border-collapse:collapse;}
td{border:1px solid;}
</style>
</head>
<body>
<table>
<tr>
<td>商品名</td><td>价格</td><td>操作</td>
</tr>
专注以为js使用原生,tr td 格式不能够 有空格,
<tr><td><input type="hidden" value="1">水杯</td><td>29</td><td><a class="buy" href="javascript:;">购买</a></td></tr>
<tr><td><input type="hidden" value="2">电脑</td><td>4999</td><td><a class="buy" href="javascript:;">购买</a></td></tr>
<tr><td><input type="hidden" value="3">手机</td><td>1999</td><td><a class="buy" href="javascript:;">购买</a></td></tr>
</table>
<button id="btn">查看购物车</button>
<script type="text/javascript">
//获取跳转到购物车的按键
var oToCart = document.getElementById("btn");
oToCart.onclick = function(){
// 跳转到cart.html购物车页面
window.location = 'cart.html';
}
//获取具有的购置按键
var oA = document.getElementsByTagName('a');
for(var i = 0,len = oA.length;i < len;i ){
oA[i].num = 0;
oA[i].onclick = function(){
//商品ID
var id = this.parentNode.parentNode.firstChild.firstChild.value;
//商品名称
var name = this.parentNode.parentNode.firstChild.lastChild.nodeValue;
//商品价位
var price = this.parentNode.previousSibling.innerHTML;
//商品数量
this.num ;
//'{"id":1,"name":"水杯","price":1999,"num":2}'
// JSON.parse() JSON.stringify()
//'{"id":' id ',"name":"' name '","price":' price ',"num":'

为便于预览,建议降低浏览器。

GridView的管理得比较多,ListView能够如此达成,

  • this.num '}'
    var date = new Date();
    date.setDate(date.getDate() 7);
    //创建cookie
    document.cookie = 'product_' id '=' '{"id":' id ',"name":"' name '","price":' price ',"num":' this.num '}' ';expires=' date ';path=/';
    }
    }
    </script>
    </body>
    </html>
    下边是购物车页:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
    <style>
    table{border-collapse:collapse;}
    td{border:1px solid;}
    </style>
    </head>
    <body>
    <table id="tab">
    <tr><td>序号</td><td>商品名称</td><td>商品单价</td><td>数量</td></tr>
    </table>
    <script type="text/javascript">
    // 查看cookie
    alert(document.cookie);
    // 将cookie字符串截取成数组
    var arr = document.cookie.split('; ');
    // 获取表格
    var oTable = document.getElementById("tab");
    for(var i = 0,len = arr.length;i < len ;i ){
    var list = arr[i].split('=');
    // 判别有误此商品
    if(list[0].indexOf('product_') != -1){
    //将字符串转成对象
    var json = JSON.parse(list[1]);
    //在报表中插入一行
    var _tr = oTable.insertRow();
    var _td = _tr.insertCell(); //在行内插入多个单元格
    _td.innerHTML = json.id;
    _td = _tr.insertCell();
    _td.innerHTML = json.name;
    _td = _tr.insertCell();
    _td.innerHTML = json.price;
    _td = _tr.insertCell();
    _td.innerHTML = json.num;
    }
    }
    </script>
    </body>
    </html>

表头

只一行代码:

图形滑动切换效果

<tr style="<%# (Container.DisplayIndex%2==0)?"background-color:white;":"background-color:#EEEEEE;" %>">

图表转变效果(ie only)

除此以外还会有直接用js管理整个页面中保有tr的交替色:

图表切割效果

view plaincopy to clipboardprint?

仿LightBox内容呈现效果

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <title>网页特效|Linkweb.cn/Js|---全选并转移T汉兰达颜色</title>  
  5. <mce:script language="JavaScript" type="text/javascript" for="checkbox" event="onclick"><!--  
  6. tr_威尼斯娱乐,bgcolor(this);  
  7. // --></mce:script>  
  8. <mce:script language="JavaScript" type="text/javascript"><!--  
  9. function tr_bgcolor(c){  
  10.     var tr = c.parentNode.parentNode;  
  11.     tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';  
  12. }  
  13. function selall(obj){  
  14.     for (var i=0; i<obj.form.elements.length; i )  
  15.     if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){  
  16.         obj.form.elements[i].checked = obj.checked;  
  17.         tr_bgcolor(obj.form.elements[i]);  
  18.     }  
  19. }  
  20. // --></mce:script>  
  21. </head>  
  22. <body>  
  23. <form id="form1" name="form1" method="post" action="">  
  24. <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">  
  25. <tr><td><input name="selectall" type="checkbox" value="全选" onclick="selall(this)" /></td></tr>  
  26. <tr><td>  
  27.     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">  
  28.     <tr style="background-color:#eee;" mce_style="background-color:#eee;"><td width="6%"><input type="checkbox" name="checkbox" /></td><td width="94%">***********************</td></tr>  
  29.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  30.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  31.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  32.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  33.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  34.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  35.     <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  36.     <tr style="background-color:#eee" mce_style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>  
  37.     </table>  
  38. </td></tr>  
  39. </table>  
  40. </form>  
  41. </body>  
  42. </html>  

图形滑动显示效果

 

仿163网盘无刷新文件上传系统

 

拖放效果

图形切割系统

view plaincopy to clipboardprint?

自定义多级联合浮动浮动菜单

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ";  
  2. <html xmlns=";  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>表格行tr颜色交替</title>  
  6. <mce:style><!--  
  7. #ab{border-collapse:collapse;width:800px;margin:10px auto;}  
  8. #ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}  
  9. .tr1{background-color:#eee;color:red;}  
  10. .tr2 {background-color:#ccc;color:blue;}  
  11. --></mce:style><style mce_bogus="1">#ab{border-collapse:collapse;width:800px;margin:10px auto;}  
  12. #ab td{border:1px solid #ccc;border-top:none;padding:4px;text-align:center;}  
  13. .tr1{background-color:#eee;color:red;}  
  14. .tr2 {background-color:#ccc;color:blue;}</style>  
  15. <mce:script type="text/javascript"><!--  
  16. function colortd(ob) {  
  17. obob=ob.rows;  
  18. for(var i=0;i<ob.length;i ) {  
  19.     if(i%2) ob(i).className="tr1";  
  20.     else ob(i).className="tr2";  
  21.     }  
  22. }  
  23. // --></mce:script>  
  24. </head>  
  25. <body onload="colortd(ab)">  
  26. <table id="ab">  
  27. <tr><td>hang------------1</td></tr>  
  28. <tr><td>hang------------2</td></tr>  
  29. <tr><td>hang------------3</td></tr>  
  30. <tr><td>hang------------4</td></tr>  
  31. </table>  
  32. </body>  
  33. </html>  

滑动条效果与利益

 

拖拉缩放效果

 

渐变效果

Table排序

Tween算法及缓动作效果果

颜色梯度和耳濡目染效果

表尾

点击行选拔克隆行:当前仿制第 1 行

ps:为方便预览,提出缩短浏览器。

留意,使用ie8的包容性视图会有摇曳。

程序原理

一起头的供给只是表尾部分在滚动时能直接牢固在头顶,那根本要促成的正是让tr能定点。
第一想到的诀假使给tr设置relative,用ie6/7测量检验以下代码:

威尼斯娱乐 1威尼斯娱乐 2Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<body>
<table cellpadding="5" cellspacing="0" border="1" width="100">
    <tr style="position:relative; left:100px;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

给tr设置relative后就能够相对table定位了,看来很轻便啊,但难点是这一个主意ie8和ff都不算,并且存在相当的多难题,所以高速就被抛弃了。
ps:该意义用来做tr的拖动会很有利。

紧接着想到的是给table插入一个新tr,克隆原本的tr,并安装那几个tr为fixed(ie6为absolute),比方:

威尼斯娱乐 3威尼斯娱乐 4Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<body>
<table cellpadding="5" cellspacing="0" border="1" width="100">
    <tr style="position:fixed; left:100px;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr style="position:absolute; left:200px;">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

第贰个难题是fixed的tr在ie7中无法拓展固化,并且td在一直后并无法保证在表格中的布局,那样在原表格插tr就没意义了。
ps:fixed的连带应用可参照他事他说加以考察仿LightBox效果。

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:威尼斯娱乐net中ListView的交替背景颜色实现,Ta

关键词: 澳门威利斯人 日记本