use jquery to build widget

Posted on | In

use jquery to build widget

example1

js

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
(function ($) {
  'use strict';
  var defaults = {};
  function Menu (element, options) {
    this.$el = $(element);
    this.opt = $.extend(true, {}, defaults, options);
    this.init(this);
  }
  Menu.prototype = {
    init: function (self) {
      $(document).on('click', function (e) {
        var $target = $(e.target);
        if ($target.closest(self.$el.data('menu-toggle'))[0]) {
          $target = $target.closest(self.$el.data('menu-toggle'));
          self.$el
            .css(self.calcPosition($target))
            .toggleClass('show');
        } else if (!$target.closest(self.$el)[0]){
          self.$el.removeClass('show');
        }
        e.preventDefault();
      });
    },
    calcPosition: function ($target) {
      var windowWidth, targetOffset, position;
      windowWidth = $(window).width();
      targetOffset = $target.offset();
      position = {
        top: targetOffset.top + ($target.outerHeight() / 2)
      };
      if (targetOffset.left > windowWidth / 2) {
        this.$el
          .addClass('menu--right')
          .removeClass('menu--left');
        position.right = (windowWidth - targetOffset.left) - ($target.outerWidth() / 2);
        position.left = 'auto';
      } else {
        this.$el
          .addClass('menu--left')
          .removeClass('menu--right');
        position.left = targetOffset.left + ($target.outerWidth() / 2);
        position.right = 'auto';
      }
      return position;
    }
  };
  $.fn.menu = function (options) {
    return this.each(function() {
      if (!$.data(this, 'menu')) {
        $.data(this, 'menu', new Menu(this, options));
      }
    });
  };
})(window.jQuery);

css

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
50
51
52
.menu {
  background: #fafafa;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
  color: #757575;
  padding: 16px 0;
  position: absolute;
  top: 48px;
  transform: scale(0);
  transition: transform 0.2s;
  height:300px;
  overflow:auto;
  width:200px;
  z-index: 96; }
.menu.show {
    transform: scale(1); }
.menu.menu--right {
    transform-origin: top right; }
.menu.menu--left {
    transform-origin: top left; }
.menu li {
    display: block;
    min-height: 32px;
    line-height: 16px;
    margin: 8px 0;
    padding: 0 16px;
    width: 100%; }
.menu li.menu-separator {
      background: #eee;
      height: 1px;
      min-height: 0;
      margin: 12px 0;
      padding: 0; }
      .menu li.menu-separator:hover {
        background: #eee; }
.menu li:first-child {
      margin-top: 0; }
.menu li:last-child {
      margin-bottom: 0; }
.menu li:hover {
      background: #eee; }
.menu a {
    color: inherit;
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0;
    text-decoration: none;
    width: 100%;
    white-space: nowrap; }
.menu a:hover {
      color: #444; }

html

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
	<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
	<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<div class="container">
			<a href="javascript:;" class="toggle" id="menu-toggle1">
			    <i class="material-icons">more_vert</i>
			  </a>
			  <a href="javascript:;" class="toggle right" id="menu-toggle2">
			    <i class="material-icons">more_vert</i>
			  </a>
			  <ul class="menu" data-menu-toggle="#menu-toggle1, #menu-toggle2"	>
			    <li>
			      <a href="#">Duis aute irure dolor</a>
			      <a href="#">Duis aute irure dolor</a>
			    </li>
			    <li class="menu-separator"></li>
			    <li>
			      <a href="#">Lorem ipsum dolor sit amet</a>
			    </li>
			    <li>
			      <a href="#">Consectetur adipisicing elit</a>
			    </li>
			    <li>
			      <a href="#">Tempor incididunt ut</a>
			    </li>
			    <li class="menu-separator"></li>
			    <li>
			      <a href="#">Excepteur sint</a>
			    </li>
			  </ul>
		</div>
	<script>$('.menu').menu();</script>

example2

js

1
2
3
4
$( ".button" ).click(function() {
  $(this).toggleClass( "active" );
  $(".icons").toggleClass( "open" );
});

html

1
2
3
4
5
6
7
8
9
10
11
<div id="wrapper">
	<div id="toolbar">
    		<div class="button"></div>
	      <ul class="icons">
	            <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
	            <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
	            <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
	            <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
	            <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
	      </ul>
    	</div>

css


on the left

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
  position: fixed;
  left: 5%;
  bottom: 5%;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:0%;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:5%;
}
.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 45px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-10% 0 0 0%;
  border-radius: 2em;
}
.icons.open {
  width:80%;
  margin:-10% 0 0 5%;
  overflow:hidden;
}
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
.icons.open li {
  width:16%;
  display: inline-block;
}

on the right

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
  position: fixed;
  right: 5%;
  bottom: 5%;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:92%;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:86%;
}
.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 45px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin-top:-10%;
  position: absolute;
  right: 0;
  border-radius: 2em;
}
.icons.open {
  width:50%;
  overflow:hidden;
  right: 10%;
}
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
.icons.open li {
  width:16%;
  display: inline-block;
}

vertical right

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 #wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:170px;
  min-width:150px;
  margin: 70px auto;
  position: fixed;
  right: 5%;
  top: 5%;
  height:100%;
  max-height:300px;
  min-height:250px;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:92%;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:86%;
}
.icons {
  width:0%;
  overflow:hidden;
  height:0%;
  list-style:none;
  padding:0px 20px 0px 20px;
  background-color:#ffffff;
  margin-top:-35%;
  position: absolute;
  right: 0;
  border-radius: 2em;
}
.icons.open {
  width:50%;
  overflow:hidden;
  right: 15%;
  padding:20px 20px 30px 20px;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  height:100%;
}
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
.icons.open li {
  width:16%;
  display: block;
  padding:10px;
}

vertical left

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 #wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:170px;
  min-width:150px;
  margin: 70px auto;
  position: fixed;
  left: 5%;
  top: 5%;
  height:100%;
  max-height:300px;
  min-height:250px;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:-30%;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:-25%;
}
.icons {
  width:0%;
  overflow:hidden;
  height:0%;
  list-style:none;
  padding:0px 20px 0px 20px;
  background-color:#ffffff;
  margin-top:-35%;
  position: absolute;
  left: 0;
  border-radius: 2em;
}
.icons.open {
  width:50%;
  overflow:hidden;
  left: 15%;
  padding:20px 20px 30px 20px;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  height:100%;
}
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
.icons.open li {
  width:16%;
  display: block;
  padding:10px;
}

put 2 together

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
<div id="wrapper">
     <div id="toolbar">
     <ul>
       <li>     
           <div class="button yu"></div>
           <ul class="icons yu">
                 <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
           </ul>
           </li>
           <li>
           <div class="button iu"></div>
           <ul class="icons iu">
                 <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
                 <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
           </ul>
           </li>
           </ul>
         </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
 .button.yu.active,.button.iu.active{
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:86%;
}
.icons.yu.open, .icons.iu.open{
  width:50%;
  overflow:hidden;
  right: 15%;
  padding:20px 20px 30px 20px;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  height:100%;
}
1
2
3
4
5
6
7
8
$( ".yu" ).click(function() {
   $(".button.yu").toggleClass( "active" );
   $(".icons.yu").toggleClass( "open" );
 });
    $( ".iu" ).click(function() {
   $(".button.iu").toggleClass( "active" );
   $(".icons.iu").toggleClass( "open" );
 });