自定义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;}