jbar.js
4.56 KB
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
/*
jBar v1.0.1
by Todd Motto: http://www.toddmotto.com
Latest version: https://github.com/toddmotto/jBar
Copyright 2012 Todd Motto
Licensed under the MIT license
http://www.opensource.org/licenses/mit-license.php
The jBar plugin, a simple and lightweight notification banner.
*/
;(function ($) {
$.jBar = function (options) {
// jBar Defaults
var defaults = {
startClosed: false,
type: 'fixed', // Fixed/Static
delay: '1000', // In milliseconds
barheight: '47px',
backgroundColor: '#DB5903', // Background Color
borderColor: '#FFF', // Background Color
buttonTextColor: '#FFF', // Button Text
buttonColor: '#333', // Button Color
buttonColorHover: '#222', // Button Color Hover
calltoAction: '欢迎加入极客标签社区', // Call to action text
buttonText: '加入极客', // Button Text
buttonLink: 'http://www.gbtags.com'
};
// jBar Options
var options = $.extend(defaults, options);
// Shorten Option Names
var type = options.type,
delay = options.delay,
backgroundColor = options.backgroundColor,
borderColor = options.borderColor,
buttonTextColor = options.buttonTextColor,
buttonColor = options.buttonColor,
buttonColorHover = options.buttonColorHover,
calltoAction = options.calltoAction,
barheight = options.barheight,
buttonText = options.buttonText,
buttonLink = options.buttonLink;
// jBar Markup
var jbar_html = '<div id="jbar" class="jbar" style="display:none;">' + '<span class="jbar-cta">' + '<p class="text">' + calltoAction + '<a class="bigger" href="' + buttonLink + '">'
+ buttonText + '</a></p>' + '<p class="downarrow"><img src="' + global_contextPath + '/networks/themes/img/arrow-down.png" class="jtrigger arrow" alt="Arrow Up"></p>'
+ '</span></div>' + '<span class="jribbon"><img src="' + global_contextPath + '/networks/themes/img/arrow-up.png" class="arrow jtrigger" alt="Arrow Down"></span>';
// jBar Styles
var styles = '<style>' + '.jbar{box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 0 #FFFFFF inset, 0 3px 0 #F4F4F4 inset, 0 -3px 0 #F4F4F4 inset, 0 0 5px rgba(0, 0, 0, 0.1);background:' + backgroundColor + ';height:' + barheight + ';bottom:0;left:0;right:0;z-index:10000;color:#666666;border-top:1px solid '
+ borderColor + ';display:none;}' + '.jbar-cta{display:block;max-width:1190px;margin:0 auto;padding:14px;}'
+ '.jribbon{padding:0;z-index:999999;bottom:0;right:15px;display:none;width:42px;height:42px;text-align:center;background:' + backgroundColor
+ ';border:1px solid #F4F4F4;' + 'border-bottom:none;color:#FFF;cursor:pointer;border-radius:5px 5px 0 0;}'
+ '.downarrow{top:0px;right:12px;width:50px;text-align:center;position:absolute;margin:0;padding:0;}' + '.jribbon:hover{cursor:pointer;}'
+ '.text{color:#F08000;font-size:18px;display:block;padding:0;margin:0;font-family:\'microsoft yahei\',Arial,sans-serif;text-align:center;}' + '.text a{display:inline-block;text-decoration:none;color:'
+ buttonTextColor + ';margin:5px 10px;padding:5px 10px;background:' + buttonColor
+ ';border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}' + '.text a:hover{background:' + buttonColorHover
+ ';}.arrow{cursor:pointer;margin-top:8px;}.fixed{position:fixed;}.static{position:absolute;}</style>';
// Append Styles to <head>
$('head').append(styles);
// Prepend jBar to <body>
$('body').prepend(jbar_html);
// Options 'Top' and 'Fixed' are selected
if(type == 'fixed') {
// Add class 'position-top-fixed'
$('#jbar').addClass('position-top fixed');
$('.jribbon').addClass('fixed');
if (options.startClosed) {
$('.jribbon').delay(delay).slideToggle(200);
} else {
$('#jbar').delay(delay).slideDown(300);
}
// User Animation
$('.jtrigger').parent().click(function () {
$('#jbar').slideToggle();
$('.jribbon').slideToggle(200);
});
}
// Options 'Top' and 'Static' are selected
if(type == 'static') {
// Add class 'position-top-fixed'
$('#jbar').addClass('position-top');
$('.jribbon').addClass('static');
// Initial Animation
if (options.startClosed) {
$('.jribbon').slideToggle(200);
} else {
$('#jbar').delay(delay).slideDown(300);
}
// User Animation
$('.jtrigger').parent().click(function () {
$('#jbar').slideToggle();
$('.jribbon').slideToggle(200);
});
}
function cycleThru(){
$('.jtrigger')
.animate({"opacity" : "1"} , 800)
.animate({"opacity" : "1"}, 800)
.animate({"opacity" : "0.5"}, 400, function(){
cycleThru();
});
};
cycleThru();
};
})(jQuery);