zoukankan      html  css  js  c++  java
  • 后台切图

    JS:

    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

    一。

    功能描述:点右边的垃圾桶图标,左边的多行输入框内容被清空,,,支持页面中多个这样的功能

    HTML:

       <div class="delbox">
              <div class="shmsbox"><textarea name="" class="msk"></textarea></div>
              <div class="delpic" onclick="delwby(this);"><img src="img/del.png" /></div>
              <div class="clear"></div>
       </div>

    CSS:

       .delbox{ 65.5%; height:53px; *height:50px; background-color:#3d66a5; border:solid 1px #cacaca;}
       .delbox .shmsbox{ 95%; height:53px;*height:50px; float:left; background-color:#fff;}
      .delbox .shmsbox .msk{ 99%; height:auto; border:0; }
      .delbox .delpic{ 5%; height:auto; float:left; text-align:center; cursor:pointer;}
      .delbox .delpic img{ auto; height:auto; padding-top:16px; margin-left:1px; }

    js:

     
        function delwby(obj){
                $(obj).parent().find("textarea",".msk").first().val('');
      
        }

     注: $(obj).parent().find   对象的父对象 .parent()      在父对象下寻找 .find('')

    二,增加一条功能

    HTML:

           <div id="outplan" class="planbox">

                  <div>要增加(复制)的内容</div>

                  <div>要增加(复制)的内容</div><!--复制内容一-->

           </div>

           <div id="albtn">增加一条</div>

    js:

        $(document).ready(function(){

        $("#albtn").click(function(){
          var tabtr="<div>要增加(复制)的内容</div>";
                 
        $("#outplan").append(tabtr);  

        });


    })

    注:被复制内容和要增加的内容要在同一DIV里

    $("#outplan").append(“<b>Hello World!</b>”)在元素结尾插入内容
      $("<b>Hello World!</b>").appendTo("#outplan");

    $("#outplan").prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。

     $("<b>Hello World!</b>").prependTo("#outplan");

    三,点击选中行,弹出窗口,背景变灰

    HTML:

                       <tr class="modalLink" onclick="bgs(this);">
                            <td>刘春燕</td>
                            <td>其它</td>
                            <td>2015-01-12 08:02:00</td>
                            <td>2015-01-15 06:10:00</td>
                            <td>初始化</td>
                            <td>未完结</td>
                            <td></td>
                          </tr>
                          <tr class="modalLink" onclick="bgs(this);">
                            <td>刘春燕</td>
                            <td>飞机</td>
                            <td>2015-01-12 08:02:00</td>
                            <td>2015-01-15 06:10:00</td>
                            <td>申核通过</td>
                            <td>完结</td>
                            <td>2015-01-11 08:02:00</td>
                          </tr>

    JS:<script type='text/javascript' src='js/jquery.modal.js'></script>
    <script type='text/javascript' src='js/site.js'></script>

      function bgs(obj){
         //  alert("sdrase");
        
        // $(obj).find("td").attr("style","BACKGROUND-COLOR:#e6e7eb").siblings("tr").find("td").attr("style","BACKGROUND-COLOR:#fff");
        
        // $("#tcbox1").fadeIn(100)
        // $(".overlay").animate({ opacity:.6},10);

    $(obj).addClass("trss").siblings("tr").removeClass("trss");
        
      }

    四,分页

    html:

            <div class="allpage">
                        <div class="nopage">下一页</div>
                        <div class="pages">9</div>
                        <div class="pages">8</div>
                        <div class="pages">7</div>
                        <span class="hidepage">...</span>
                        <div class="pages">3</div>
                        <div class="pages">2</div>
                        <div class="onpage">1</div>
                        <div class="pages">上一页</div>
                   </div>

    css:

    .allpage{ auto; height:20px; margin-top:20px; padding:0px 20px;}
    .pages{ auto; height:auto; float:right; margin-right:5px; border:solid 1px #b2b2b2; padding:2px 6px; }
    .pages:hover{ background-color:#3865a4; color:#fff;}
    .hidepage{ auto; height:20px; line-height:20px; float:right; margin-right:5px; display:block;}
    .nopage{ auto; height:auto; float:right; margin-right:5px; border:solid 1px #b2b2b2; padding:2px 6px;  background-color:#9f9f9f; color:#fff;}
    .onpage{ auto; height:auto; float:right; margin-right:5px; border:solid 1px #b2b2b2; background-color:#3865a4; padding:2px 6px;  color:#fff;}

    五,点击第一个多选按钮全选或全不选,,滚动条功能

    html:

    <div class="linklist">
                            <div class="lltit">
                                <div class="lldx"><input name="" type="checkbox" value="" onclick="if(this.checked==true) { checkAll('cusm'); } else { clearAll('cusm'); }" /></div>
                                <div class="llword">我的客户</div>
                                <div class="clear"></div>
                            </div>
                            <div id="Scroller-1"  class="Scroller-1">
                                 <ul id="Scrollbar" class="Scrollbar">
                                     <li>
                                        <div class="lidx"><input name="cusm" type="checkbox" value="" /></div>
                                        <div class="liname">刘春燕</div>
                                        <div class="clear"></div>
                                     </li>
                                      <li>
                                        <div class="lidx"><input name="cusm" type="checkbox" value="" /></div>
                                        <div class="liname">刘春燕</div>
                                        <div class="clear"></div>
                                     </li>
                                     <li>
                                        <div class="lidx"><input name="cusm" type="checkbox" value="" /></div>
                                        <div class="liname">刘春燕</div>
                                        <div class="clear"></div>
                                     </li>
                                    
                                 </ul>
                                
                                 <div id="pannel" class="pannel">
                                    <div id="drag" class="dragbox"></div>
                                </div>
                                
                            </div>
                            
                            <div class="lltit">
                                <div class="lldx"><input name="" type="checkbox" value="" onclick="if(this.checked==true) { checkAll('coll'); } else { clearAll('coll'); }" /></div>
                                <div class="llword">我的同事</div>
                                <div class="clear"></div>
                            </div>
                            
                            
                            <div id="Scroller-2" class="Scroller-1" style="border-bottom:solid 1px #cacaca;">
                                 <ul id="Scrollbar2" class="Scrollbar">
                                     <li>
                                        <div class="lidx"><input name="coll" type="checkbox" value="" /></div>
                                        <div class="liname">刘春燕</div>
                                        <div class="clear"></div>
                                     </li>
                                     <li>
                                        <div class="lidx"><input name="coll" type="checkbox" value="" /></div>
                                        <div class="liname">刘春燕</div>
                                        <div class="clear"></div>
                                     </li>
                                     <li>
                                        <div class="lidx"><input name="coll" type="checkbox" value="" /></div>
                                        <div class="liname">刘春燕</div>
                                        <div class="clear"></div>
                                     </li>
                                 </ul>
                                
                                 <div id="pannel2" class="pannel">
                                    <div id="drag2" class="dragbox"></div>
                                </div>
                                
                            </div>
                           
                        </div>

    css:

    .freembox .mesdate .linklist{ 29%; height:auto; float:left; margin-left:1%; }
    .freembox .mesdate .linklist .lltit{ 131px; height:40px; margin:0 auto; background-color:#f7f7f7; border:solid 1px #cacaca; }
    .freembox .mesdate .linklist .lltit .lldx{ auto; height:auto; float:left; margin-top:11px; *margin-top:10px; margin-left:5px;_margin-left:3px;}
    .freembox .mesdate .linklist .lltit .llword{ auto; height:40px; float:left; margin-left:11px; *margin-left:10px; line-height:40px; font-weight:bold; color:#3b64a4;}


    .Scroller-1{ 131px; height:170px; border-left:solid 1px #cacaca; border-right:solid 1px #cacaca; position:relative; margin:0 auto;  overflow: hidden;}
    .Scrollbar{  120px; height:auto; _padding-top:10px; position:absolute; top:0px; left:0; z-index:10px; }
    .Scrollbar li{ 120px; height:16px; padding-top:10px;_padding-top:0px;  }
    .Scrollbar li .lidx{ auto; height:auto; float:left; margin-left:5px;}
    .Scrollbar li .liname{ auto; height:auto; float:left; margin-left:9px; }

    .pannel{11px; height:170px; top:0; right:0; background-color:#d0d0d0; position:absolute; z-index:11px;}
    .dragbox{ 10px; height:51px; background-color:#fff; left:1px; cursor:pointer; position:absolute;}

    js:
    function checkAll(name) {
        var el = document.getElementsByTagName('input');
        var len = el.length;
        for(var i=0; i<len; i++){
            if((el[i].type=="checkbox") && (el[i].name==name)){
                el[i].checked = true;
            }
        }
    }
    function clearAll(name) {
        var el = document.getElementsByTagName('input');
        var len = el.length;
        for(var i=0; i<len; i++){
            if((el[i].type=="checkbox") && (el[i].name==name)){
                el[i].checked = false;
            }
        }

    }

    <script src="js/scroll1.js" type="text/javascript"></script>
    <script src="js/scroll2.js" type="text/javascript"></script>

  • 相关阅读:
    kafka的一些坑
    文件上传到七牛云oss并刷新cdn
    docker swarm集群常用操作
    kubernets中jenkins使用清华源加速插件安装
    获取jenkins插件最新版本
    kubeadm安装集群系列-7.部署jenkins
    kubeadm安装集群系列-6.ingress-nginx安装
    docker清理
    kubeadm安装集群系列-5.其他操作
    kubeadm安装集群系列-4.证书更新
  • 原文地址:https://www.cnblogs.com/yanyanmammy/p/4449947.html
Copyright © 2011-2022 走看看