jquery.contip.js/example.html at master · jojoin/jquery.contip.js · 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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta name="description" content="contips" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>jquery.contip.js - 气泡提示框插件</title>
  <script type="text/javascript" src="lib/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" src="src/jquery.contip.js"></script>
  <style type="text/css">
    body{

    }
    .bg{
      position: absolute; left: 50%; top: 25%; margin: -100px 0 0 -180px;
      width: 360px; height: 200px; background: #eee;
    }
    .item{
      display: inline-block; margin: 10px 25px;
      width: 50px; height: 50px; background: #666;
      border-radius: 10px; cursor: pointer;
      font-size: 12px; line-height: 50px; text-align: center;
    }
    .item:hover{
      background: #333;
    }
    .one4{
      background: #fff;
      border-radius: 3px;
      width: 46px;
    }
    .one4:hover{
      background: #fff;
    }
  </style>
</head>
<body>


<div class="bg">
  <p style="font-size: 14px; text-align: center">contip示例：</p>
  <div class="item one1" title="上方出现提示框，覆盖title属性">滑过上</div>
  <div class="item one2">滑过下</div>
  <div class="item one3">点击出现</div>
  <input class="item one4" value="输入框" />
  <div class="item one5">html延迟</div>
  <div class="item one6">显示</div>
</div>


<script type="text/javascript">


  $('.one1').contip({
    align: 'top',
    bg: '#1B7FA3',
    // html: '上方出现提示框'
    // attr: 'extitle'
    // live: true
  }).show();

  $('.one2').contip({
    align: 'bottom',
    bg: '#f00',
    fade: 360,
    opacity: 0.5,
    html: '下方出现提示框，有动画及透明度'
  }).show();

  $('.one3').contip({
    trigger: 'click',
    align: 'top',
    bg: '#C6BC22',
    color: '#000',
    rise: 10,
    v_pos: 0.0,
    v_px: 5,
    elm_pos: 0.0,
    elm_px: 10,
    html: '点击出现提示框，并有浮动和位移'
  }).show();


  $('.one4').contip({
    trigger: 'focus',
    align: 'left',
    bg: '#0E755A',
    fade: 360,
    rise: 10,
    html: '输入框提示'
  }).show();

  var pop5 = $('.one5').contip({
    align: 'bottom',
    fg: '#fff',
    bg: '#999',
    color: '#000',
    padding: 1,
    delay_in: 500, //延迟显示
    delay_out: 500, //延迟关闭
    html: '<div style="padding:10px;"><div class="item">显示html</div><br>延迟一秒打开关闭<br>鼠标移入不关闭</div>'
    //attr: 'extitle'
    //live: true
  }).show();


  /*
   * 提示框事件监听
   */
  pop5.on('create',function($tip){
    // alert('新建tip！！！');
  });

  pop5.on('show',function($tip){
    // alert('显示tip');
    setTimeout(function(){
      // 改变提示框内容
      // pop5.html('!!!!!!!!!!!!!!!!!!!!!!!<br>!!!!!!改变提示内容!!!!!<br>!!!!!!!!!!!!!!!!!!!!!!!');
    },1000);
  });

  pop5.on('hide',function(){
    // alert('隐藏tip');
  });

  // 默认显示提示框
  pop5.show();


  $('.one6').contip({
    fade: 0,
    rise: 0,
    align: 'bottom',
    show: true,
    live: true,
    html: '始终显示<br>提示框 气泡'
  });


</script>


</body>
</html>