zoukankan      html  css  js  c++  java

  • 每日记载内容总结9

    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());
  • 相关阅读:
    小学四则算式扩充
    软件工程初涉之感
    回头
    个人最终总结
    团队作业
    结对编程
    老李的blog使用日记（3）
    进度
    老李的blog使用日记（2）
    红果果
  • 原文地址：https://www.cnblogs.com/cuiyf/p/3099459.html
Copyright © 2011-2022 走看看