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>
  • 相关阅读:
    MFC tab页面中获到其它页面的数据
    sqlite数据库中"Select * From XXX能查到数据,但是Select DISTINCT group From xxx Order By group却查不出来
    关闭程序出现崩溃(exe 已触发了一个断点及未加载ucrtbased.pdb)
    springboot 通用Mapper使用
    springBoot 发布war包
    springCloud Zuul网关
    springboot hystrix turbine 聚合监控
    springBoot Feign Hystrix Dashboard
    springBoot Ribbon Hystrix Dashboard
    springBoot Feign Hystrix
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/13180614.html
Copyright © 2011-2022 走看看