zoukankan      html  css  js  c++  java
  • 一个模拟select

    在PC端可以代替普通的select控件,因为普通的select控件有限制,显示值无法使用html标签,在手机端的话显示效果不太好,还是使用picker之类的控件比较合适

    1、js

    $(function() {
      /**
       * 模拟select
       **/
      $(".select-header").click(function() {
        $(this)
          .parent()
          .siblings(".select-box")
          .find(".select-content")
          .slideUp("fast");
        if (
          $(this)
            .siblings(".select-content")
            .is(":hidden")
        ) {
          $(this).addClass("select-arrow");
          $(this)
            .siblings(".select-content")
            .slideDown("fast");
          var evt = new Object();
          if (typeof window.event == "undefined") {
            //如果是火狐浏览器
            evt = arguments.callee.caller.arguments[0];
          } else {
            evt = event || window.event;
          }
          evt.cancelBubble = true;
        } else {
          $(this).removeClass("select-arrow");
          $(this)
            .siblings(".select-content")
            .slideUp("fast");
          //去除事件冒泡
          var evt = new Object();
          if (typeof window.event == "undefined") {
            //如果是火狐浏览器
            evt = arguments.callee.caller.arguments[0];
          } else {
            evt = event || window.event;
          }
          evt.cancelBubble = true;
        }
      });
      $(document).click(function() {
        $(".select-header").removeClass("select-arrow");
        $(".select-content").slideUp("fast");
      });
      $(".select-content li").on("click", function() {
        $(this)
          .parent()
          .siblings(".select-header")
          .removeClass("select-arrow");
        $(this)
          .parent()
          .siblings(".select-header")
          .html(
            $(this)
              .html()
              .myReplace('"', "")
          )
          .end()
          .slideUp("fast");
        $(this)
          .parent()
          .siblings(".select-header")
          .attr("data-values", $(this).attr("data-values")); //data('values',$(this).data('values'));
        renderTxlBind();
      });
      $(".select-content li").hover(
        function() {
          $(this).css("background-color", "#cfcfcf");
        },
        function() {
          $(this).css("background-color", "#fff");
        }
      );
    });
    String.prototype.myReplace = function(f, e) {
      //f替换成e
      var reg = new RegExp(f, "g"); //创建正则RegExp对象
      return this.replace(reg, e);
    };

    2、css

    /**
    * 模拟select
    **/
    .select-box {
        position: relative;
        float: left;
        margin-right: 8px;
    }
    
    .select-moni .select-header {
        height: 42px;
        background-position: 95px 15px;
        line-height: 42px;
        text-indent: 14px;
        font-size: 16px;
        color: #a9a9a9;
        cursor: pointer;
        overflow: hidden;
        text-align: right;
        background-color: white;
        border: none;
        width: 100%;
        padding-right: 15px
    }
    
    .select-moni .select-arrow {
        background-position: 95px -9px;
    }
    
    .select-moni .select-content {
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 99;
        display: none;
        background-color: #f9f9f9;
        width: 100%;
        border: 1px solid lightgray;
    
    }
    
    .select-moni .select-content li {
            height: 42px;
            margin: 0;
            border-bottom: 1px solid #c1c1c1;
            line-height: 42px;
            text-indent: 14px;
            font-size: 16px;
            color: #a9a9a9;
            cursor: pointer;
            width: 100%;
            text-align: right;
            padding-right: 10px;
            background-color: rgb(255, 255, 255);
    }
    ol, ul {
        list-style: none;
    }

    3、html代码

    <div class="select-box select-shenpiren" style="z-index: 1;position:absolute;top:0px;bottom:42px;left:100px;right:15px;height:42px">
        <div class="select-header select-arrow" id="drpPerson" data-values="8871"><ww-open-data type="userName" openid="LiSi"></ww-open-data></div>
        <ul class="select-content" style="display: block;">
            <li data-values="1" style="background-color: rgb(255, 255, 255);"><ww-open-data type="userName" openid="ZhangSan"></ww-open-data></li>
            <li data-values="2" style="background-color: rgb(255, 255, 255);"><ww-open-data type="userName" openid="LiSi"></ww-open-data></li>
            <li data-values="3" style="background-color: rgb(255, 255, 255);"><ww-open-data type="userName" openid="WangWu"></ww-open-data></li>
        </ul>
    </div>
  • 相关阅读:
    创建型模式
    创建、修改、删除表总结
    分页式存储管理及地址转换(网易笔试题)
    二进制、十进制、十六进制相互转换
    转 String,StringBuffer与StringBuilder的区别??
    IDEA 修改某个Module名称
    IDEA Git 修改后的文件无法Commit
    git git push某一次的commit记录
    git merge 结果是 git merge Already up-to-date. 该怎么解决?
    火币网API文档——REST 行情、交易API简介
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/13180614.html
Copyright © 2011-2022 走看看