master

分支 (1)

标签 (6)

管理

管理

master

v0.3.1-dz1

v0.3.1-dz0

0.3.0

0.2.2

0.2.0

0.1.0

combobox
/
example.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="build/build.css" type="text/css">
  <script src="build/build.js"></script>
  <style>
    body {
      font-size: 16px;
      font-family: "Helvetica Neue", "Helvetica", "Arial";
    }

    input {
      font-size: 16px;
      padding: 10px;
    }

    .combobox {
      width: 300px;
    }

    .combobox .label {
      background: #efefef;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .combobox:focus,
    .combobox .search:focus {
      outline: none;
    }

    .combobox.closed:focus .label{
      border-color: blue;
    }

    .combobox .search {
      margin: 0;
      border: 1px solid #ccc;
      border-width: 0 0 1px 0;
    }

    .combobox .label:after {
      content: "▼";
      padding-left: 10px;
      line-height: 18px;
      font-size: 10px;
      float: right;
    }

    .combobox .inner {
      border: 1px solid #ccc;
    }

    .combobox.south .inner {
      border-top-width: 0;
    }

    .combobox.north .inner {
      border-bottom-width: 0;
    }

    .combobox .group-label {
      font-weight: bold;
      padding: 10px;
    }

    .combobox .list {
      max-height: 230px;
    }

    .combobox .option {
      padding: 10px;
    }

    .combobox .group .option {
      padding-left: 15px;
    }

    .combobox .option.focus {
      background: #efefef;
    }
  </style>
</head>
<body>
  <script>
    var Combo = require('combobox')
    var combo = new Combo({
        search      : true
      , placeholder : 'Select something...'
    });

    combo.group('Group 1')
      .add(1, 'Option 1')
      .add(2, 'Option 2')
      .add(3, 'Option 3');

    combo.group('Group 2')
      .add(4, 'Option 4')
      .add(5, 'Option 5')
      .add(6, 'Option 6');

    combo.appendTo(document.body);
  </script>
</body>
</html>