Gritter demo for jQuery for boedesign

javaEEdevelop

浏览: 876417 次
性别:
来自: 广州

最近访客更多访客>>

gumuzhiyu

babysoon

acoolper

daki5000

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (410)

社区版块

存档分类

红色的部分是增加的,因为这是我的需求，不过可以根据自己的需求定制自己的boedesign

html部分

官网 http://www.boedesign.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Gritter demo for jQuery - boedesign.com</title>

body {

background:#222 url(images/trees.jpg);

color:#fff;

}

a {

color:#00ff00;

}

#container {

width:600px;

background:#333;

padding:10px;

}

</style>

</head>

<body>

<h1>Gritter Demo</h1>

<p>

The super awesome background is just to show you that all notifications are transparent!

<em>Tested in: FF 3+, Opera 9, IE7, IE8, Safari 4+</em>

</p>

<ul>

<li>

<a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification.

</li>

<li>

<a href="#" id="add-sticky">Add sticky notification</a>: Doesn't run on a fade timer. Just sits there until the user manually removes it by clicking on the (X).

</li>

<li>

<a href="#" id="add-without-image">Add notification without image</a>

</li>

<li>

<a href="#" id="add-gritter-light">Add a white notification</a>: has a 'gritter-light' class_name applied to it.

</li>

<li>

<a href="#" id="add-with-callbacks">Add notification (with callbacks)</a>

</li>

<li>

<a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>

</li>

<li>

<a href="#" id="add-max">Add notification with max of 3</a>: If there are 3 messages already on screen, it won't show another one.

</li>

<li>

<a href="#" id="remove-all">Remove all notifications</a>

</li>

<li>

<a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>

</li>

</ul>

</div>

$(function(){

// global setting override

$.extend($.gritter.options, {

class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)

//position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right

//fade_in_speed: 100, // how fast notifications fade in (string or int)

fade_out_speed: 10 // how fast the notices fade out

//time: 3000 // hang on the screen for...

});*/

$('#add-sticky').click(function(){

var unique_id = $.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a sticky notice!',

// (string | mandatory) the text inside the notification

text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',

// (string | optional) the image to display on the left

image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',

// (bool | optional) if you want it to fade out on its own or just sit there

sticky: true,

// (int | optional) the time you want it to be alive for before fading out

time: '',

// (string | optional) the class name you want to apply to that specific message

class_name: 'my-sticky-class'

});

// You can have it return a unique id, this can be used to manually remove it later using

setTimeout(function(){

$.gritter.remove(unique_id, {

fade: true,

speed: 'slow'

});

}, 6000)

return false;

});

$('#add-regular').click(function(){

$.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a regular notice!',

// (string | mandatory) the text inside the notification

text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',

// (string | optional) the image to display on the left

image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',

// (bool | optional) if you want it to fade out on its own or just sit there

sticky: true,

// (int | optional) the time you want it to be alive for before fading out

time: 1000,

speed:10,

position: 'bottom-left',

class_name: 'gritter-light'

});

return false;

});

$('#add-max').click(function(){

$.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a notice with a max of 3 on screen at one time!',

// (string | mandatory) the text inside the notification

// (string | optional) the image to display on the left

image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',

// (bool | optional) if you want it to fade out on its own or just sit there

sticky: false,

// (function) before the gritter notice is opened

before_open: function(){

if($('.gritter-item-wrapper').length == 3)

{

// Returning false prevents a new gritter from opening

return false;

}

});

return false;

});

$('#add-without-image').click(function(){

$.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a notice without an image!',

// (string | mandatory) the text inside the notification

});

return false;

});

$('#add-gritter-light').click(function(){

$.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a light notification',

// (string | mandatory) the text inside the notification

text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',

class_name: 'gritter-light'

});

return false;

});

$('#add-with-callbacks').click(function(){

$.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a notice with callbacks!',

// (string | mandatory) the text inside the notification

text: 'The callback is...',

// (function | optional) function called before it opens

before_open: function(){

alert('I am called before it opens');

// (function | optional) function called after it opens

after_open: function(e){

alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);

// (function | optional) function called before it closes

before_close: function(e, manual_close){

var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';

alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);

// (function | optional) function called after it closes

after_close: function(e, manual_close){

var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';

alert('I am called after it closes. ' + manually);

}

});

return false;

});

$('#add-sticky-with-callbacks').click(function(){

$.gritter.add({

// (string | mandatory) the heading of the notification

title: 'This is a sticky notice with callbacks!',

// (string | mandatory) the text inside the notification

text: 'Sticky sticky notice.. sticky sticky notice...',

// Stickeh!

sticky: true,

// (function | optional) function called before it opens

before_open: function(){

alert('I am a sticky called before it opens');

// (function | optional) function called after it opens

after_open: function(e){

alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);

// (function | optional) function called before it closes

before_close: function(e){

alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);

// (function | optional) function called after it closes

after_close: function(){

alert('I am a sticky called after it closes');

}

});

return false;

});

$("#remove-all").click(function(){

$.gritter.removeAll();

return false;

});

$("#remove-all-with-callbacks").click(function(){

$.gritter.removeAll({

before_close: function(e){

alert("I am called before all notifications are closed. I am passed the jQuery object containing all of Gritter notifications.\n" + e);

after_close: function(){

alert('I am called after everything has been closed.');

}

});

return false;

});

</script>

</body>

</html>

jquery.boedesign.js

* Gritter for jQuery

* http://www.boedesign.com/

* Dual licensed under the MIT and GPL licenses.

* Date: February 24, 2012

* Version: 1.7.4

(function($){

/**

* Set it up as an object under the jQuery namespace

$.gritter = {};

/**

* Set up global options that the user can over-ride

$.gritter.options = {

position: '',

class_name: '', // could be set to 'gritter-light' to use white notifications

fade_in_speed: 'medium', // how fast notifications fade in

fade_out_speed: 1000, // how fast the notices fade out

time: 6000 // hang on the screen for...

}

/**

* Add a gritter notification to the screen

* @see Gritter#add();

$.gritter.add = function(params){

try {

return Gritter.add(params || {});

} catch(e) {

var err = 'Gritter Error: ' + e;

(typeof(console) != 'undefined' && console.error) ?

console.error(err, params) :

alert(err);

}

/**

* Remove a gritter notification from the screen

* @see Gritter#removeSpecific();

$.gritter.remove = function(id, params){

Gritter.removeSpecific(id, params || {});

}

/**

* Remove all notifications

* @see Gritter#stop();

$.gritter.removeAll = function(params){

Gritter.stop(params || {});

}

/**

* Big fat Gritter object

* @constructor (not really since its object literal)

var Gritter = {

// Public - options to over-ride with $.gritter.options in "add"

position: '',

fade_in_speed: '',

fade_out_speed: '',

time: '',

// Private - no touchy the private parts

_custom_timer: 0,

_item_count: 0,

_is_setup: 0,

_tpl_close: '<div class="gritter-close"></div>',

_tpl_title: '<span class="gritter-title">[[title]]</span>',

_tpl_item: '<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]">[[title]]<p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',

_tpl_wrap: '<div id="gritter-notice-wrapper"></div>',

/**

* Add a gritter notification to the screen

* @param {Object} params The object that contains all the options for drawing the notification

* @return {Integer} The specific numeric id to that gritter notification

add: function(params){

// Handle straight text

if(typeof(params) == 'string'){

params = {text:params};

}

// We might have some issues if we don't have a title or text!

if(!params.text){

throw 'You must supply "text" parameter.';

}

// Check the options and set them once

if(!this._is_setup){

this._runSetup();

}

// Basics

var title = params.title,

text = params.text,

image = params.image || '',

sticky = params.sticky || false,

item_class = params.class_name || $.gritter.options.class_name,

position =params.position||$.gritter.options.position,

time_alive = params.time || '';

this._verifyWrapper();

this._item_count++;

var number = this._item_count,

tmp = this._tpl_item;

// Assign callbacks

$(['before_open', 'after_open', 'before_close', 'after_close']).each(function(i, val){

Gritter['_' + val + '_' + number] = ($.isFunction(params[val])) ? params[val] : function(){}

});

// Reset

this._custom_timer = 0;

// A custom fade time set

if(time_alive){

this._custom_timer = time_alive;

}

var image_str = (image != '') ? '<img src="' + image + '" class="gritter-image" />' : '',

class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image';

// String replacements on the template

if(title){

title = this._str_replace('[[title]]',title,this._tpl_title);

}else{

title = '';

}

tmp = this._str_replace(

['[[title]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'],

[title, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp

);

// If it's false, don't show another gritter message

if(this['_before_open_' + number]() === false){

return false;

}

$('#gritter-notice-wrapper').addClass(position).append(tmp);

var item = $('#gritter-item-' + this._item_count);

item.fadeIn(this.fade_in_speed, function(){

Gritter['_after_open_' + number]($(this));

});

if(!sticky){

this._setFadeTimer(item, number);

}

// Bind the hover/unhover states

$(item).bind('mouseenter mouseleave', function(event){

if(event.type == 'mouseenter'){

if(!sticky){

Gritter._restoreItemIfFading($(this), number);

}

else {

if(!sticky){

Gritter._setFadeTimer($(this), number);

}

Gritter._hoverState($(this), event.type);

});

// Clicking (X) makes the perdy thing close

$(item).find('.gritter-close').click(function(){

Gritter.removeSpecific(number, params, null, true);

});

return number;

/**

* If we don't have any more gritter notifications, get rid of the wrapper using this check

* @private

* @param {Integer} unique_id The ID of the element that was just deleted, use it for a callback

* @param {Object} e The jQuery element that we're going to perform the remove() action on

* @param {Boolean} manual_close Did we close the gritter dialog with the (X) button

_countRemoveWrapper: function(unique_id, e, manual_close){

// Remove it then run the callback function

e.remove();

this['_after_close_' + unique_id](e, manual_close);

// Check if the wrapper is empty, if it is.. remove the wrapper

if($('.gritter-item-wrapper').length == 0){

$('#gritter-notice-wrapper').remove();

}

/**

* Fade out an element after it's been on the screen for x amount of time

* @private

* @param {Object} e The jQuery element to get rid of

* @param {Integer} unique_id The id of the element to remove

* @param {Object} params An optional list of params to set fade speeds etc.

* @param {Boolean} unbind_events Unbind the mouseenter/mouseleave events if they click (X)

_fade: function(e, unique_id, params, unbind_events){

var params = params || {},

fade = (typeof(params.fade) != 'undefined') ? params.fade : true,

fade_out_speed = params.speed || this.fade_out_speed,

manual_close = unbind_events;

this['_before_close_' + unique_id](e, manual_close);

// If this is true, then we are coming from clicking the (X)

if(unbind_events){

e.unbind('mouseenter mouseleave');

}

// Fade it out or remove it

if(fade){

e.animate({

opacity: 0

}, fade_out_speed, function(){

e.animate({ height: 0 }, fade_out_speed/100, function(){

Gritter._countRemoveWrapper(unique_id, e, manual_close);

})

}

else {

this._countRemoveWrapper(unique_id, e);

}

/**

* Perform actions based on the type of bind (mouseenter, mouseleave)

* @private

* @param {Object} e The jQuery element

* @param {String} type The type of action we're performing: mouseenter or mouseleave

_hoverState: function(e, type){

// Change the border styles and add the (X) close button when you hover

if(type == 'mouseenter'){

e.addClass('hover');

// Show close button

e.find('.gritter-close').show();

}

// Remove the border styles and hide (X) close button when you mouse out

else {

e.removeClass('hover');

// Hide close button

e.find('.gritter-close').hide();

}

/**

* Remove a specific notification based on an ID

* @param {Integer} unique_id The ID used to delete a specific notification

* @param {Object} params A set of options passed in to determine how to get rid of it

* @param {Object} e The jQuery element that we're "fading" then removing

* @param {Boolean} unbind_events If we clicked on the (X) we set this to true to unbind mouseenter/mouseleave

removeSpecific: function(unique_id, params, e, unbind_events){

if(!e){

var e = $('#gritter-item-' + unique_id);

}

// We set the fourth param to let the _fade function know to

// unbind the "mouseleave" event. Once you click (X) there's no going back!

this._fade(e, unique_id, params || {}, unbind_events);

/**

* If the item is fading out and we hover over it, restore it!

* @private

* @param {Object} e The HTML element to remove

* @param {Integer} unique_id The ID of the element

_restoreItemIfFading: function(e, unique_id){

clearTimeout(this['_int_id_' + unique_id]);

e.stop().css({ opacity: '', height: '' });

/**

* Setup the global options - only once

* @private

_runSetup: function(){

for(opt in $.gritter.options){

this[opt] = $.gritter.options[opt];

}

this._is_setup = 1;

/**

* Set the notification to fade out after a certain amount of time

* @private

* @param {Object} item The HTML element we're dealing with

* @param {Integer} unique_id The ID of the element

_setFadeTimer: function(e, unique_id){

var timer_str = (this._custom_timer) ? this._custom_timer : this.time;

this['_int_id_' + unique_id] = setTimeout(function(){

Gritter._fade(e, unique_id);

}, timer_str);

/**

* Bring everything to a halt

* @param {Object} params A list of callback functions to pass when all notifications are removed

stop: function(params){

// callbacks (if passed)

var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){};

var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){};

var wrap = $('#gritter-notice-wrapper');

before_close(wrap);

wrap.fadeOut(function(){

$(this).remove();

after_close();

});

/**

* An extremely handy PHP function ported to JS, works well for templating

* @private

* @param {String/Array} search A list of things to search for

* @param {String/Array} replace A list of things to replace the searches with

* @return {String} sa The output

_str_replace: function(search, replace, subject, count){

var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0,

f = [].concat(search),

r = [].concat(replace),

s = subject,

ra = r instanceof Array, sa = s instanceof Array;

s = [].concat(s);

if(count){

this.window[count] = 0;

}

for(i = 0, sl = s.length; i < sl; i++){

if(s[i] === ''){

continue;

}

for (j = 0, fl = f.length; j < fl; j++){

temp = s[i] + '';

repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];

s[i] = (temp).split(f[j]).join(repl);

if(count && s[i] !== temp){

this.window[count] += (temp.length-s[i].length) / f[j].length;

}

return sa ? s : s[0];

/**

* A check to make sure we have something to wrap our notices with

* @private

_verifyWrapper: function(){

if($('#gritter-notice-wrapper').length == 0){

$('body').append(this._tpl_wrap);

}

})(jQuery);

jboesch-Gritter-c0d2676.rar (288.3 KB)
下载次数: 69

分享到：

解决js window resize为什么会执行两次 | jaxb的marshal和unmarshall使用

2012-09-14 20:28
浏览 12884
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论