master

分支 (1)

管理

管理

master

native-js-custom-select-plugin
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/normalize.css" /> -->
    <link rel="stylesheet" href="css/msPlugs.css" />
  </head>
  <style>
    body {
      padding: 50px 2%;
    }
    .title {
      font-size: 16px;
      color: #333;
      padding-top: 10px;
    }
    .intr {
      font-size: 14px;
      color: #999;
      line-height: 1.5;
      margin-top: 5px;
      word-break: break-all;
    }
    pre {
      margin: 0;
      word-break: break-all;
      white-space: pre-wrap;
    }
    .tmp-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      grid-gap: 20px;
      margin-top: 20px;
    }
    .tmp {
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
    }
    select {
      display: block !important;
    }
  </style>
  <body>
    <div class="intr-text">
      <div class="title">原生js自定义select插件</div>
      <div class="title">插件介绍：</div>
      <div class="intr">
        1. 原生js自定义select插件，支持单选、多选、搜索<br />
        2.自定义项添加、自定义数据、树状结构数据（上下级部门）<br />
        3.分PC/移动端主题（插件传参pc 或 mobile）<br />
        4.动态新增、移除、修改select的内部optin，会自动更新对应视图，如果是js手动修改select的值，需要派发一个change事件，插件会自动更新视图，只需要监听select的变动即可<br />
        5.显示列表按钮式插入在select元素后面，列表插入在body内部的最后面，PC会自动计算列表显示位置，有边界限制
      </div>
      <div class="title">使用方法：</div>
      <div class="intr">引用插件msPluge.js、样式public.css<br /></div>
    </div>

    <div class="tmp-list">
      <div class="tmp">
        <div class="title">例子一：单选</div>
        <div class="intr"><pre>&lt;select ms-select&gt;&lt;/select&gt;</pre></div>
        <select ms-select>
          <option value="">请选择</option>
          <option value="1">选项1</option>
          <option value="2">选项2</option>
          <option value="3">选项3</option>
          <option value="4">选项4</option>
        </select>
      </div>
      <div class="tmp">
        <div class="title">例子二：多选</div>
        <div class="intr"><pre>&lt;select ms-select multiple&gt;&lt;/select&gt;</pre></div>
        <select ms-select multiple>
          <option value="">请选择</option>
          <option value="1">选项1</option>
          <option value="2">选项2</option>
          <option value="3">选项3</option>
          <option value="4">选项4</option>
        </select>
      </div>
      <div class="tmp">
        <div class="title">例子三：可搜索单选</div>
        <div class="intr"><pre>&lt;select ms-select ms-search&gt;&lt;/select&gt;</pre></div>
        <select ms-select ms-search>
          <option value="">请选择</option>
          <option value="1">选项1</option>
          <option value="2">选项2</option>
          <option value="3">选项3</option>
          <option value="4">选项4</option>
        </select>
      </div>
      <div class="tmp">
        <div class="title">例子四：可搜索多选</div>
        <div class="intr"><pre>&lt;select ms-select ms-search multiple&gt;&lt;/select&gt;</pre></div>
        <select ms-select ms-search multiple>
          <option value="">请选择</option>
          <option value="1">选项1</option>
          <option value="2">选项2</option>
          <option value="3">选项3</option>
          <option value="4">选项4</option>
        </select>
      </div>
      <div class="tmp">
        <div class="title">例子五：添加自定义项（必须开搜索功能）</div>
        <div class="intr">如果存在option value相同的值，不能添加，value值必须唯一</div>
        <div class="intr"><pre>&lt;select ms-select ms-search ms-custom-value&gt;&lt;/select&gt;</pre></div>
        <select ms-select ms-search ms-custom-value multiple>
          <option value="">请选择</option>
          <option value="1">选项1</option>
          <option value="2">选项2</option>
          <option value="3">选项3</option>
          <option value="4">选项4</option>
        </select>
      </div>
      <div class="tmp">
        <div class="title">例子六：自定义数据</div>
        <div class="intr"><pre>&lt;select ms-select ms-search ms-custom-data&gt;&lt;/select&gt;</pre></div>
        <div class="intr">
          option要有自定义数据ms-data<br />
          <pre>&lt;option value="2" ms-data='["选项2", "13533279571", "广州市天河区棠下涌东路1号"]'&gt;选项2&lt;/option&gt;</pre>
        </div>
        <select ms-select ms-search ms-custom-data>
          <option value="">请选择</option>
          <option value="2" ms-data='["选项2", "13533279571", "广州市天河区棠下涌东路1号"]'>选项2</option>
          <option value="3" ms-data='["选项3", "13533279572", "广州市天河区棠下涌东路2号"]'>选项3</option>
          <option value="4" ms-data='["选项4", "13533279573", "广州市天河区棠下涌东路3号"]'>选项4</option>
          <option value="5" ms-data='["选项5", "13533279574", "广州市天河区棠下涌东路4号"]'>选项5</option>
          <option value="6" ms-data='["选项6", "13533279575", "广州市天河区棠下涌东路5号"]'>选项6</option>
          <option selected value="7" ms-data='["选项7", "13533279576", "广州市天河区棠下涌东路6号"]'>选项7</option>
        </select>
      </div>
      <div class="tmp">
        <div class="title">例子七：树状结构数据（部门选择）</div>
        <div class="intr"><pre>&lt;select ms-select ms-search ms-tree&gt;&lt;/select&gt;</pre></div>
        <div class="intr">
          option要有父级的id值pid，顶级父级id值0或空<br />
          <pre>&lt;option value="1001" pid="0"&gt;技术部&lt;/option&gt;</pre>
        </div>
        <div class="intr">
          第一个option 请选择提示，value要为空或者null<br />
          <pre>&lt;option value=""&gt;请选择&lt;/option&gt;</pre>
        </div>
        <select ms-select ms-search ms-tree>
          <option value="">请选择</option>
          <option value="1001" pid="0">技术部</option>
          <option value="1002" pid="0">财务部</option>
          <option value="1003" pid="0">设计部</option>
          <option value="1004" pid="0">市场部</option>
          <option value="1005" pid="1001">后端开发组</option>
          <option value="1006" pid="1001">前端开发组</option>
          <option value="1007" pid="1002">财务管理</option>
          <option value="1008" pid="1002">会计核算</option>
          <option value="1009" pid="1003">平面设计</option>
          <option value="1010" pid="1003">美术设计</option>
          <option value="1011" pid="1004">市场推广</option>
          <option value="1012" pid="1004">市场策划</option>
          <option value="1013" pid="1005">后端开发一组</option>
          <option value="1014" pid="1005">后端开发二组</option>
        </select>
      </div>
    </div>
  </body>
  <script src="js/msPlugs.js"></script>
</html>