SunLe’Blog—孙乐

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Table Stripes and Row Locking</title> <style type="text/css"> body {background:#fff;} h1 {font:bold 20px/26px Arial;} p, li, td {font:normal 12px/17px Arial;} table {border:0;border-collapse:collapse;} td {padding:4px;} th {font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} tr.odd {background:#e4dcd9;} tr.highlight {background:#BDA9A2;} tr.selected {background:#4a1200;color:#fff;} td+td+td {text-align:right;} </style> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } } function stripeTables() { var tables = document.getElementsByTagName("table"); for (var m=0; m<tables .length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var i=0; i<tbodies.length; i++) { var odd = true; var rows = tbodies[i].getElementsByTagName("tr"); for (var j=0; j<rows.length; j++) { if (odd == false) { odd = true; } else { addClass(rows[j],"odd"); odd = false; } } } } } } function highlightRows() { if(!document.getElementsByTagName) return false; var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var j=0; j<tbodies.length; j++) { var rows = tbodies[j].getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className rows[i].onmouseover = function() { if( this.className.indexOf("selected") == -1) addClass(this,"highlight"); } rows[i].onmouseout = function() { if( this.className.indexOf("selected") == -1) this.className = this.oldClassName } } } } } } function selectRowCheckbox(row) { var checkbox = row.getElementsByTagName("input")[0]; if (checkbox.checked == true) { checkbox.checked = false; } else if (checkbox.checked == false) { checkbox.checked = true; } } function lockRow() { var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var j=0; j<tbodies.length; j++) { var rows = tbodies[j].getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; rows[i].onclick = function() { if (this.className.indexOf("selected") != -1) { this.className = this.oldClassName; } else { addClass(this,"selected"); } selectRowCheckbox(this); } } } } } } addLoadEvent(stripeTables); addLoadEvent(highlightRows); addLoadEvent(lockRow); function lockRowUsingCheckbox() { var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var j=0; j<tbodies.length; j++) { var checkboxes = tbodies[j].getElementsByTagName("input"); for (var i=0; i<checkboxes.length; i++) { checkboxes[i].onclick = function(evt) { if (this.parentNode.parentNode.className.indexOf("selected") != -1){ this.parentNode.parentNode.className = this.parentNode.parentNode.oldClassName; } else { addClass(this.parentNode.parentNode,"selected"); } if (window.event && !window.event.cancelBubble) { window.event.cancelBubble = "true"; } else { evt.stopPropagation(); } } } } } } } addLoadEvent(lockRowUsingCheckbox); </script> </tables></script></head> <body> <h1>Table 2</h1> <table id="striped2" class="pickme" caption="Top Grossing Movies"> <thead> <tr> <th> </th> <th>Category</th> <th>Movie</th> <th>Gross</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" name="tablechoice1" value="walalala" /> </td> <td>Domestic</td> <td>Titanic</td> <td>$600,788,188</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice2" value="walalala" /> </td> <td>Adjusted for Inflation</td> <td>Gone with the Wind</td> <td>$1,329,453,600</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice3" value="walalala" /> </td> <td>Worldwide</td> <td>Titanic</td> <td>$1,845,034,000</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice4" value="walalala" /> </td> <td>R-Rating</td> <td>The Passion of the Christ</td> <td>$370,274,604</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice5" value="walalala" /> </td> <td>PG-13 Rating</td> <td>Titanic</td> <td>$600,788,188</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice6" value="walalala" /> </td> <td>PG-Rating</td> <td>Star Wars</td> <td>$460,998,007</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice7" value="walalala" /> </td> <td>G-Rating</td> <td>Finding Nemo</td> <td>$339,714,978</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice8" value="walalala" /> </td> <td>NC-17 Rating</td> <td>Showgirls</td> <td>$20,350,754</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice9" value="walalala" /> </td> <td>Movies that never hit #1</td> <td>My Big Fat Greek Wedding</td> <td>241,438,208</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice10" value="walalala" /> </td> <td>IMAX</td> <td>Everest</td> <td>$87,178,599</td> </tr> </tbody></table> </body> </html>

提示：你可以先修改部分代码再运行。

阅读全文…

分类: 网站制作标签: checkbox, Table

scrollingbox – Textarea vs Div

2008年12月25日没有评论

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <meta http-equiv="content-type" content="text/html; charset=gbk"> <head> <title>Terms and Conditions for div vs textarea</title> <style type="text/css"> h1 {font:bold 1.2em/1.6em arial;margin:4px 0;padding:4px 0;} h2 {font:normal 1.1em/1.5em arial;margin:14px 0 0 0;padding:4px 0;} div, p {font: normal 1em/1.3em arial;} textarea.terms { width:600px; height:200px; border:1px solid #ccc; background:#f2f2f2; font:normal 11px/15px arial; padding:6px; color:#333; } div.terms { width:600px; height:200px; border:1px solid #ccc; background:#f2f2f2; padding:6px; overflow:auto; } div.terms p, div.terms li {font:normal 11px/15px arial;color:#333;} div.terms h3 {font:bold 14px/19px arial;color:#000;} div.terms h4 {font:bold 12px/17px arial;color:#000;} div.terms strong {color:#000;} </style> </head> <body> <h1>Scrolling boxes of terms: textarea vs div</h1> <h2>Using textarea:</h2> <textarea class="terms" readonly="readonly"> Terms and Conditions GENERAL Servicing servicing resistor video computer element transponder prototype analog solution mainframe network. Solution video debugged feedback sampling extended, infrared, generator generator. * list item number one * list item number two * list item number three Harmonic gigabyte generator in sequential interface. Services, integer device read-only supporting cascading cache capacitance. Proxy boolean solution or data overflow element overflow processor arrray video, reflective extended. Gigabyte debugged distributed, reflective controller disk encapsulated phase network arrray feedback element cache high silicon. Sampling backbone analog remote adaptive extended bridgeware n-tier integer audio femtosecond. IMPORTANT STUFF Interface broadband developer backbone fragmentation messaging software transmission, sampling cascading element high silicon backbone. Reflective servicing coordinated boolean connectivity extended inversion sequential for. Data distributed backbone bridgeware connectivity logarithmic, sampling ethernet for. Extended logarithmic log video echo gigabyte. or procedural phaselock sequential port extended deviation sequential, disk recognition gigabyte phaselock proxy messaging arrray. Encapsulated echo deviation boolean system ethernet reducer, pc. Backbone frequency echo ethernet patch femtosecond sampling, integer digital floating-point n-tier dithering disk. Processor reflective boolean includes phase deviation, with log, integral logistically femtosecond, in, integral infrared phaselock. Element developer pc harmonic, plasma with, integral floating-point. Reflective feedback infrared, echo anomoly integral generator reflective led, high overflow servicing gigabyte. Extended integral data, infrared frequency disk broadband transistorized processor disk anomoly, sampling potentiometer kilohertz. Bus overflow, bridgeware fragmentation bypass prototype, interface, for internet pc generator integral, bypass disk, frequency. FEES Sequential ENCAPSULATED RESISTOR element converter pc harmonic. Feedback cache hyperlinked debugged generator infrared device network, fragmentation connectivity, debugged. For, dithering interface debugged sequential recognition bypass bridgeware processor backbone sampling logarithmic software. Anomoly infrared logarithmic logarithmic procedural plasma resistor integral silicon deviation. Computer broadband plasma, encapsulated cable kilohertz scan. With logarithmic bridgeware indeterminate sampling, port. Development procedural hyperlinked mainframe, encapsulated boolean software processor transistorized cable with backbone. Reflective backbone log transmission cable logarithmic mainframe. Messaging backbone debugged feedback development phaselock metafile n-tier coordinated, cable coordinated coordinated in. Analog device transistorized, sequential transistorized with scalar normalizing. Mainframe phase cache anomoly feedback servicing harmonic. Services software pc, femtosecond bypass scalar data element extended cascading capacitance harmonic. Adaptive plasma bypass supporting cascading deviation system pulse broadband bridgeware. AGREEMENT Servicing hyperlinked analog encapsulated disk cable with, capacitance element partitioned potentiometer read-only dithering. Normalizing kilohertz network solution logarithmic device bus connectivity system mainframe prototype phaselock phase cache. Coordinated transmission overflow floating-point distributed supporting scan converter. Bridgeware backbone coordinated sampling overflow broadband normalizing connectivity or, internet transmission, bus, encapsulated. Extended element element echo messaging scan, cache video deviation debugged broadband. Pc, supporting hyperlinked coordinated patch, bridgeware transistorized, led frequency scalar. Servicing, plasma recursive boolean includes, computer, femtosecond inversion. Services integer harmonic mainframe scalar prototype broadband n-tier. Echo software application indeterminate dithering bypass plasma bus harmonic patch. Digital, mainframe scalar anomoly bypass, bus potentiometer phaselock plasma, phaselock prompt data disk inversion. </textarea> <h2>Using div :</h2> <div class="terms"> <h3>Terms and Conditions</h3> <h4>General</h4> <p>Servicing servicing resistor <strong>video computer</strong> element transponder prototype analog solution mainframe network. Solution video debugged feedback sampling extended, infrared, generator generator. </p> <ul> <li>list item number one</li> <li>list item number two</li> <li>list item number three</li> </ul> <p>Harmonic gigabyte generator in <strong>sequential interface</strong>. Services, integer device read-only supporting cascading cache capacitance. Proxy boolean solution or data overflow element overflow processor arrray video, reflective extended. Gigabyte debugged distributed, reflective controller disk encapsulated phase network arrray feedback element cache high silicon. Sampling backbone analog remote adaptive extended bridgeware n-tier integer audio femtosecond. </p> <h4>Important Stuff</h4> <p>Interface broadband <strong>developer backbone fragmentation</strong> messaging software transmission, sampling cascading element high silicon backbone. Reflective servicing coordinated boolean connectivity extended inversion sequential for. Data distributed backbone bridgeware connectivity logarithmic, sampling ethernet for. Extended logarithmic log video echo gigabyte. or procedural phaselock sequential port extended deviation sequential, disk recognition gigabyte phaselock proxy messaging arrray. Encapsulated echo deviation boolean system ethernet reducer, pc. </p> <p><strong>Backbone frequency echo ethernet</strong> patch femtosecond sampling, integer digital floating-point n-tier dithering disk. Processor reflective boolean includes phase deviation, with log, integral logistically femtosecond, in, integral infrared phaselock. Element developer pc harmonic, plasma with, integral floating-point. Reflective feedback infrared, echo anomoly integral generator reflective led, high overflow servicing gigabyte. Extended integral data, infrared frequency disk broadband transistorized processor disk anomoly, sampling potentiometer kilohertz. Bus overflow, bridgeware fragmentation bypass prototype, interface, for internet pc generator integral, bypass disk, frequency. </p> <h4>Fees</h4> <p>Sequential <strong>encapsulated resistor</strong> element converter pc harmonic. Feedback cache hyperlinked debugged generator infrared device network, fragmentation connectivity, debugged. For, dithering interface debugged sequential recognition bypass bridgeware processor backbone sampling logarithmic software. Anomoly infrared logarithmic logarithmic procedural plasma resistor integral silicon deviation. Computer broadband plasma, encapsulated cable kilohertz scan. With logarithmic bridgeware indeterminate sampling, port. Development procedural hyperlinked mainframe, encapsulated boolean software processor transistorized cable with backbone. </p> <p>Reflective backbone log transmission cable logarithmic mainframe. Messaging backbone debugged feedback development phaselock metafile n-tier coordinated, cable coordinated coordinated in. <strong>Analog device</strong> transistorized, sequential transistorized with scalar normalizing. Mainframe phase cache anomoly feedback servicing harmonic. Services software pc, femtosecond bypass scalar data element extended cascading capacitance harmonic. Adaptive plasma bypass supporting cascading deviation system pulse broadband bridgeware. </p> <h4>Agreement</h4> <p>Servicing hyperlinked analog encapsulated disk cable with, capacitance element partitioned potentiometer read-only dithering. <strong>Normalizing kilohertz</strong> network solution logarithmic device bus connectivity system mainframe prototype phaselock phase cache. </p> <p>Coordinated transmission overflow floating-point distributed supporting scan converter. <strong>Bridgeware backbone</strong> coordinated sampling overflow broadband normalizing connectivity or, internet transmission, bus, encapsulated. Extended element element echo messaging scan, cache video deviation debugged broadband. Pc, supporting hyperlinked coordinated patch, bridgeware transistorized, led frequency scalar. Servicing, plasma recursive boolean includes, computer, femtosecond inversion. Services integer harmonic mainframe scalar prototype broadband n-tier. Echo software application indeterminate dithering bypass plasma bus harmonic patch. Digital, mainframe scalar anomoly bypass, bus potentiometer phaselock plasma, phaselock prompt data disk inversion. </p> </div> </body> </meta></html>

提示：你可以先修改部分代码再运行。

查看代码：
阅读全文…

分类: 网站制作标签: div, Textarea

table美化-鼠标滑动单元格变色

2008年12月24日没有评论

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank">http://www.w3.org/TR/html4/strict.dtd</a>"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>orbitz-like behavior for hovering over table cells</title> <style type="text/css"> .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:collapse;} thead th { font:bold 13px/18px georgia; text-align:left; background:#fff4c6; color:#333; padding:8px 16px 8px 8px; border-right:1px solid #fff; border-bottom:1px solid #fff; } thead th.null {background:#fff;} tbody th { font:bold 12px/15px georgia; text-align:left; background:#fff9e1; color:#333; padding:8px; border-bottom:1px solid #f3f0e4; border-right:1px solid #fff; } tbody td { font:normal 12px/15px georgia; color:#333; padding:8px; border-right:1px solid #f3f0e4; border-bottom:1px solid #f3f0e4; } /* 这3个是关键 --cssrain.cn */ tbody td.on {background:green;} thead th.on {background:red;} tbody th.on {background:red;} </style> <script type="text/javascript"> /* For functions getElementsByClassName, addClassName, and removeClassName Copyright Robert Nyman, <a href="http://www.robertnyman.com" target="_blank">http://www.robertnyman.com</a> Free to use if this text is included */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function getElementsByClassName(className, tag, elm){ var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; } function addClassName(elm, className){ var currentClass = elm.className; if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){ elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className; } return elm.className; } function removeClassName(elm, className){ var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i"); elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, ""); return elm.className; } function makeTheTableHeadsHighlight() { // get all the td's in the heart of the table... var table = document.getElementById('rockartists'); var tbody = table.getElementsByTagName('tbody'); var tbodytds = table.getElementsByTagName('td'); // and loop through them... for (var i=0; i<tbodytds.length; i++) { // take note of their default class name tbodytds[i].oldClassName = tbodytds[i].className; // when someone moves their mouse over one of those cells... tbodytds[i].onmouseover = function() { // attach 'on' to the pointed cell addClassName(this,'on'); // attach 'on' to the th in the thead with the same class name var topheading = getElementsByClassName(this.oldClassName,'th',table); addClassName(topheading[0],'on'); // attach 'on' to the far left th in the same row as this cell var row = this.parentNode; var rowheading = row.getElementsByTagName('th')[0]; addClassName(rowheading,'on'); } // ok, now when someone moves their mouse away, undo everything we just did. tbodytds[i].onmouseout = function() { // remove 'on' from this cell removeClassName(this,'on'); // remove 'on' from the th in the thead var topheading = getElementsByClassName(this.oldClassName,'th',table); removeClassName(topheading[0],'on'); // remove 'on' to the far left th in the same row as this cell var row = this.parentNode; var rowheading = row.getElementsByTagName('th')[0]; removeClassName(rowheading,'on'); } } } addLoadEvent(makeTheTableHeadsHighlight); </script> </head> <body> <div class="cssguycomments"> <p>Final example with JavaScript applied. Hover over a table cell to see effects. "View Source" and copy if you'd like to use.</p> </div> <table id="rockartists"> <thead> <tr> <th class="null"> </th> <th class="stones">Rolling Stones</th> <th class="u2">U2</th> <th class="crue">Mötley Crüe</th> </tr> </thead> <tbody> <tr> <th>Lead Vocals</th> <td class="stones">Mick Jagger</td> <td class="u2">Bono</td> <td class="crue">Vince Neil</td> </tr> <tr> <th>Lead Guitar</th> <td class="stones">Keith Richards</td> <td class="u2">The Edge</td> <td class="crue">Mick Mars</td> </tr> <tr> <th>Bass Guitar</th> <td class="stones">Ron Wood</td> <td class="u2">Adam Clayton</td> <td class="crue">Nikkie Sixx</td> </tr> <tr> <th>Drums</th> <td class="stones">Charlie Watts</td> <td class="u2">Larry Mullen, Jr.</td> <td class="crue">Tommy Lee</td> </tr> </tbody> </table> </body> </html>

提示：你可以先修改部分代码再运行。

分类: 网站制作标签: 变色, 美化, 表格

301转向代码合集

2008年12月22日没有评论

在上次的利用.htaccess不加www域名301跳转www域名的方法中收集了利用.htaccess不加www域名301跳转www域名的方法下面收集了全部的 301 代码：

1、IIS下301设置

Internet信息服务管理器 -> 虚拟目录 -> 重定向到URL，输入需要转向的目标URL，并选择“资源的永久重定向”。

2、ASP下的301转向代码阅读全文…

分类: 网站制作标签: 301, apache, asp, asp.net, iis, jsp, php

存档

2008年Google Pagerank最后一次更新

影响网站收录排名的45个因素

腾讯软件管理器

未知大小图片在已知容器中的垂直和水平居中

圆角效果.–带阴影

Hoverbox.–鼠标经过图片显示大图

Table Stripes and Row Locking.-(checkbox)

scrollingbox – Textarea vs Div

table美化-鼠标滑动单元格变色

301转向代码合集

Random Posts

Categories

Blogroll

Archives

Meta

存档

Random Posts

Tag Cloud

Categories

Blogroll

Archives

Meta