react-tab-selector/tab_selector_jquery.html at master · supermars01/react-tab-selector · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" tpe="text/css" href="style.css"/>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      var data = [
        {name: 'Red', value: 'red'},
        {name: 'Blue', value: 'blue'},
        {name: 'Yellow', value: 'yellow'},
        {name: 'Green', value: 'green'},
        {name: 'White', value: 'White'}
      ];

      $.fn.TabSelector = function (options) {

        var arr = ['<div class="tab-selector">'];
        arr.push('<label>', options.label, '</label>');
        arr.push('<ul>');
        options.data.forEach(function (item) {
          arr.push('<li data-value="', item.value, '">');
          arr.push(item.name);
          arr.push('</li>');
        });
        arr.push('</ul></div>');

        this.html(arr.join(''));

        var lastSelected = null;
        this.on('click', 'li', function () {
          var $this = $(this);
          if (lastSelected) {
            lastSelected.removeClass('selected');
          }
          $this.addClass('selected');
          lastSelected = $this;
        });

        return this;
      }

      $('#container').TabSelector({data: data, selected: null, label: 'Color'});

    </script>
  </body>
</html>