1.可以实现类似于淘宝的搜索选项卡
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>AJAX.NET控件之ModalPopup </title> <style type="text/css"> .fenl{ color: #FF7003; text-decoration: none; display: block; border: 1px solid #FFFFFF; } .fenl2{ text-decoration: none; background-color: #FFECCC; border: 1px solid #FF9900; color: #006600; } #fenl { line-height: 150%; padding: 0px; } #fenl li { width: 60px; display: block; float: left; text-align: center; list-style-type: none; } #fenl ul { margin: 3px; clear: both; height: 28px; border: 1px dashed #F8CD98; padding: 3px; } #fenl a { color: #FF7003; text-decoration: none; display: block; border: 1px solid #FFFFFF; } #fenl a:hover { text-decoration: none; background-color: #FFECCC; border: 1px solid #FF9900; color: #006600; } </style> <script> var td1; function show(obj){ var p = obj.parentNode.getElementsByTagName('li'); var f = document.getElementById('form1'); for(var i=0;i <p.length;i++) p[i].className ='fenl'; obj.className='fenl2'; switch(obj.parentNode.className){ case 'u1': f.cls.value=obj.getElementsByTagName('a')[0].innerHTML; break; case 'u2': f.variety.value=obj.getElementsByTagName('a')[0].innerHTML; break; case 'u3': f.price.value=obj.getElementsByTagName('a')[0].innerHTML; break; } alert('cls.value='+f.cls.value+'\n' + 'variety.value='+f.variety.value+'\n' + 'price.value='+f.price.value ); } </script> </head> <body style="text-align: center"> <form id="form1" runat="server"> <input type="hidden" value="" name="cls" /> <input type="hidden" value="" name="variety" /> <input type="hidden" value="" name="price" /> </form> <div id="fenl"> <ul class="u1"> <li style=" 80px; font-weight: bold">按商品类别: </li> <li onclick='show(this)' id="li3_1"> <a href='#'>上衣 </a> </li> <li onclick='show(this)' id="li3_2"> <a href='#'>裤子 </a> </li> <li onclick='show(this)' id="li3_3"> <a href='#'>职业装 </a> </li> <li onclick='show(this)' id="li3_4"> <a href='#'>休闲装 </a> </li> <li onclick='show(this)' id="li3_5"> <a href='#'>鞋帽 </a> </li> <li onclick='show(this)' id="li3_6"> <a href='#'>其它 </a> </li> </ul> <ul class="u2"> <li style=" 80px; font-weight: bold">按商品品牌: </li> <li onclick='show(this)' id="li1_1"> <a href='#'>派克 </a> </li> <li onclick='show(this)' id="li1_2"> <a href='#'>韩国国SZ </a> </li> <li onclick='show(this)' id="li1_3"> <a href='#'>花园街 </a> </li> <li onclick='show(this)' id="li1_4"> <a href='#'>与狼花舞 </a> </li> <li onclick='show(this)' id="li1_5"> <a href='#'>IBM </a> </li> </ul> <ul class="u3"> <li style=" 80px; font-weight: bold">按商品价格: </li> <li onclick='show(this)' id="li2_1"> <a href="#">50以下 </a> </li> <li onclick='show(this)' id="li2_2"> <a href="#">50-100 </a> </li> </ul> </div> </body> </html>
2.用js通过li模拟select下拉框(隐藏原来的select,把其option获取,并给于li)另外,select下拉框超过20个数据会自动出现滚动条,也可以用div模拟
<head> <title>Select Replacement Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="author" content="Aaron Gustafson (aaron at easy-designs dot net)" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="ROBOTS" content="ALL" /> <meta name="Copyright" content="(CC) 1999-2005 Easy! Designs, LLC. Except where otherwise noted, this site is licensed under a Creative Commons License." /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="Rating" content="General" /> <style type="text/css"> body { font: 80% "Trebuchet MS", verdana, helvetica, arial, sans-serif; } input { display: block; margin: 0 0 10px; border: 1px solid #666; color: #999; } legend { font-size: 1.2em; font-weight: bold; } label { display: block; font-weight: bold; color: #666; } select { display: block; width: 300px; } select.replaced { display: none; } ul.selectReplacement { background: url(http://www.easy-designs.net/articles/replaceSelect/files/top.jpg) top left no-repeat; margin: 0; padding: 0; height: 1.65em; width: 300px; } ul.selectReplacement li { background: #cf5a5a; color: #fff; cursor: pointer; display: none; font-size: 11px; line-height: 1.7em; list-style: none; margin: 0; padding: 1px 12px; width: 276px; } ul.selectOpen li { display: block; } ul.selectReplacement li.selected { background: url(http://www.easy-designs.net/articles/replaceSelect/files/bottom.gif) bottom left no-repeat; color: #000000; display: block; } ul.selectOpen li.selected { background: #9e0000; display: block; } ul.selectOpen li:hover, ul.selectOpen li.hover, ul.selectOpen li.selected:hover { background: #9e0000; color: #fff; } </style> <script type="text/javascript"> // <![CDATA[ //设置ul.selectReplacement li 不显示 //设置 ul.selectOpen li显示 //用js调整className实现li的显示与隐藏 function selectReplacement(obj) { obj.className += ' replaced'; var ul = document.createElement('ul'); ul.className = 'selectReplacement'; var opts = obj.options; for (var i=0; i<opts.length; i++) { var selectedOpt; if (opts[i].selected) { //得到选中的那个 selectedOpt = i; break; } else { selectedOpt = 0; } } for (var i=0; i<opts.length; i++) { var li = document.createElement('li'); var txt = document.createTextNode(opts[i].text); li.appendChild(txt); li.selIndex = opts[i].index; li.selectID = obj.id; //实现普通li的点击事件 li.onclick = function() { selectMe(this); } if (i == selectedOpt) { //说明此时只存在一个选中的li,点击实现显示所有li li.className = 'selected'; li.onclick = function() { this.parentNode.className += ' selectOpen'; this.onclick = function() { selectMe(this); } } } if (window.attachEvent) { li.onmouseover = function() { //加上hover ,调用对应的css this.className += ' hover'; } li.onmouseout = function() { this.className = this.className.replace(new RegExp(" hover\\b"), ''); } } ul.appendChild(li); } obj.parentNode.insertBefore(ul,obj); } function selectMe(obj) { var lis = obj.parentNode.getElementsByTagName('li'); for (var i=0; i<lis.length; i++) { if (lis[i] != obj) { //未选中的剩下的7个li lis[i].className=''; lis[i].onclick = function() { selectMe(this); } } else { //选中的那个li setVal(obj.selectID, obj.selIndex); obj.className='selected'; obj.parentNode.className = obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), ''); obj.onclick = function() { obj.parentNode.className += ' selectOpen'; this.onclick = function() { selectMe(this); } } } } } function setVal(objID, selIndex) { var obj = document.getElementById(objID); obj.selectedIndex = selIndex; } function setForm() { var s = document.getElementsByTagName('select'); alert(s.length); for (var i=0; i<s.length; i++) { selectReplacement(s[i]); } } window.onload = function() { (document.all && !window.print) ? null : setForm(); } // ]]> </script> </head> <body> <h1>Select Replacement Test</h1> <form action="#" method="post"> <fieldset> <legend>Sample Form</legend> <label for="something">Select to Replace</label> <select id="something" name="something"> <option value="1">This is option 1</option> <option value="2">This is option 2</option> <option value="3">This is option 3</option> <option value="4">This is option 4</option> <option value="5" selected="selected">This is option 5</option> <option value="6">This is option 6</option> <option value="7">This is option 7</option> <option value="8">This is option 8</option> </select> </fieldset> </form> </body> </html>
3.关于垂直居中 :
vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
但是对于div内元素的垂直居中,vertical-align属性不起作用,可以用table中td代替,其中table的width和height与div的长宽设置一样。
4.将时间转为时间戳:
//转成时间戳 SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String dateString = formatter.format(new Date());