自定义select-box

创建控件

function newSelectBox(icoCls, items) {
  icoCls = icoCls ? icoCls : 'saveIcon';
  let sb = $(`
  <div class="selectBox" tabindex="1">
    <div class="icon ${icoCls}"></div>
    <div class="textOutterDiv">
      <div class="text"><label>Current Selection</label></div>
    </div>
    <div class="myButton">...Type List</div>
    <div class="dropList">
    </div>  
  </div>`);
  let isVisible = false;
  let dl = sb.children(".dropList");
  let doToggle = genToggleFunc(dl);
  let currentSel = sb.children(".textOutterDiv").children(".text").children("label");
  items.forEach((e) => {
    let item = $(`<div class="dropItem">${e}</div>`);
    dl.append(item);
    item.click(() => {
      // console.log(`You select ${e}`);
      console.log("Current-Select is %s", currentSel);
      currentSel.text(`click on ${e}`);
      doToggle(true);
    });
  });
  let tb = sb.children(".myButton");

  let ut = (isHidden) => {
    tb.text(isHidden ? "UnFold" : "Fold");
    if (!isHidden) {
      sb.focus();
    }
    // if (!isHidden) {
    //   //sb.focus(); // set focus to dl.
    //   //console.log("set focus to all");
    // }
  };
  tb.click(() => ut(doToggle()));
  // Do not use toggle button's blur.
  //tb.blur(() => ut(doToggle(true)));
  sb.blur(() => {
    ut(doToggle(true));
    console.log("lost focus");
  });
  return sb;
}

function initTest() {
  let fv = $(".testFieldView");
  fv.append(newSelectBox("saveIcon", [
    "Uno", "Dos", "Tres", "Cuatro", "Cinco",
    "Seis", "Siete", "Ocho", "Nueve", "Diez"
  ]));
}

相应的css设置:

.testFieldView {
    width: 100%;
    height: 900px;
    margin-top: 50px;
    /* background: lightgreen; */
    border-style: dashed;
    border-width: 1px;
}

.selectBox {
    margin: 10px;
    position: relative;
    width: 600px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    height: 40px;
}

.selectBox > .icon.saveIcon {
    outline: 1px;
    outline-color: cyan;
    width: 64px;
    height: 100%;
    display: inline-block;
    background: url("./svgs/saveFile.svg") center center no-repeat;
}

.selectBox > .textOutterDiv {
    height: 100%; 
    width: 200px; 
    display: inline-block;
}

.selectBox .textOutterDiv .text {
    position: absolute;
    height: 50%;
    /* text-align: center; */
    top: 50%;
    bottom: 50%;
}

/* .selectBox button {
    height: 100%;
    position: absolute;
    right: 10px;
    border-radius: 9px;
    width: 160px;
    background: lightcyan;
    text-transform: capitalize;
} */

/* .selectBox button:focus {
    outline: 0;
} */

.selectBox .dropList {
    width: 100%;
    display: none;
    position: absolute;
    top: 40px;
}

.selectBox .myButton {
    height: 100%;
    /*display: inline-block;*/
    border-style: solid;
    border: 1px;
    border-radius: 4px;
    border-color: red;
    background: green;
    float: right;
    width: 120px;
}

/* Common */
.selectBox > .dropList .dropItem {
    width: 100%;
    height: 32px;
    border-left: 1px solid;
    border-right: 1px solid;
}

/* LoveHated :link visited hover active */
.selectBox > .dropList .dropItem:hover {
    background: grey;
}

.selectBox > .dropList .dropItem:first-child {
    /* border-radius: 6px; */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid;
}

.selectBox > .dropList .dropItem:last-child {
    /* border-radius: 6px; */
    border-bottom: 1px solid;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}