I'm trying to improve texts quality, so if you find an error, please select it and press button
Report an error
You can use this plugin with buttons, menus, texts or any elements you may find. It includes the mechanism to work with $.Deferred for changing the content of a popup or performing some other operations. Also it remembers all popups instances and is able to manipulate them, for example to close all other popups except for the currently open one.
Deferred
You can use $.ajax or $.get as beforeOpen and beforeClose functions, and use recieved data as popup's content or just to check something. Let us see how $.Deferred works.

Let us do the same, but with some emulated errors while getting data before opening.


Add $.notify() to add notification centre.


This plugin also may be used for tooltips


Inform me

Usage

Let us show tooltip. We will need tooltip template, some javascript code and some content to show (for example text "Some information").
Javascript
$('.js-tooltip').popup({
	trigger: 'click',
	animation: 'easeOutElastic',
	animationDuration: 400,
	template: '#tooltip-template',
	content: 'Some information'
	placement: 'top',
	onlyOne: true
});
Template
<div id="tooltip-template"><div class="-tooltip"><i class="-arrow"></i><div class="js-content"></div></div></div>
Button
<a class="-btn js-tooltip">Inform me</a>

All content will show inside .js-content. If property content is not set, then plugin will search information within data-content="Some information"

Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of popup.
animationstringnullName of animation.

Css animations:
'scaleIn', 'growUp', 'rotateIn', 'fadeIn', 'dropIn', 'blurIn', 'releaseIn'

Javascript animations
If you use plugins for animation (for example jQuery Easing v1.3), you can use it names
'easeOutQuad', 'easeInCubic', 'easeOutElastic', 'easeInOutElastic', etc.

animationDurationnumber0In ms
Duration of the animation. It works just for javascript animations.
themestring'dark'Name of the theme from maxmertkit framework.
placementstring'top'Where to put popup instead of element.
Can be 'top', 'bottom','left', 'right'
offsetarray[0, 0]In px
Offset from top left position of popup (from place where it appears)
Example: [0, 10] – x-offset = 0, y-offset = 10px
autoOpenbooleanfalseOpen popup after initialization
templatestring'<div class="js-content"></div>'Template of the popup. It understands selectors or html text.

Example: { template: '#js-tooltip' } – will find #js-tooltip (it can be any tag, even script) and use it content as a template.
Example: { template: '.js-dropdown' }
Example: { template: '<div class="-tooltip"><i class="-arrow"></i><div class="js-content"></div></div>' }

onlyOnebooleanfalseClose all other instanses of popup when current instance opens.
All instanses are stored in global scope $.popups
contentstringnullText to set inside .js-content in popup. If null then look for content inside data-content='' of button (or element which trigered opening). If it have not been found, then do nothing.
headerstringnullText to set inside .js-header in popup. If null then look for content inside data-header='' of button (or element which trigered opening). If it have not been found, then do nothing.
triggerstringclickAction to show popup. Through comma.

Example: { trigger: 'hover, click' } – show on hover, hide on click
Example: { trigger: 'hover' } – show and hide on hover

delaynumber0In ms
Delay before show popup (if you use { trigger: 'hover' } and do not want to show popup immediately after hover)

Methods

Remember, that you do not need to call any methods to change theme, animation or anything else. All you need to do is change property, plugin will do the rest.

NameDescription
initInit current popup instance.
openOpen current popup instance.
closeClose current popup instance.


Callbacks
NameTypeDefaultDescription
beforeOpenfunction$.noop()Execute function before opening. Understands $.Deferred, including $.ajax() and $.get()
$('.js-tooltip').popup({
	trigger: 'click',
	template: '#tooltip-template',
	content: 'Some information'
	placement: 'top',
	onlyOne: true,
	beforeOpen: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeOpen before check it, Popup will wait for it.

openfunction$.noop()Triger after popup opened.
ifOpenedOrNotfunction$.noop()Triger after popup opened or just tried to open but failed. Useful to remove loading status or something like that.
ifNotOpenedfunction$.noop()Triger only if popup failed to open. Useful if you want to inform user about fail.
beforeClosefunction$.noop()Execute function before popup close. Understands $.Deferred, including $.ajax() and $.get()
$('.js-tooltip').popup({
	trigger: 'click',
	template: '#tooltip-template',
	content: 'Some information'
	placement: 'top',
	onlyOne: true,
	beforeClose: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeClose before check it, Popup will wait for it.

closefunction$.noop()Triger after popup closed.
ifClosedOrNotfunction$.noop()Triger after popup closed or just tried to close but failed. Useful to remove loading status or something like that.
ifNotClosedfunction$.noop()Triger only if popup failed to close. Useful if you want to inform user about fail or when he forgot to perform some operations inside popup.

Tabs maxmertkit.tabs.js

Not for tabs only. This is universal plugin, you can use it for different switchers.

Content for first tab

You can recieve data for each tab from the server. Or recieve some additional information to decide what to show to user inside tab.

Usage

To use tabs we will need tab container (ul in our case), containers with content and some javascript magic.
Javascript
$('.js-tabs').tabs({
	animation: 'true',
	itemsSelector: 'li'
});
HTML
<ul class="-tabs _huge js-tabs"><li data-tabs-target="#tab-first"><a>First tab</a></li><li data-tabs-target="#tab-second"><a>Second tab</a></li><li data-tabs-target="#tab-third" class="_active_"><a>Third tab</a></li></ul><div id="tab-first" style="display: none;">Content for first tab</div><div id="tab-second" style="display: none;">Content for second tab</div><div id="tab-third" style="display: block;">Content for third tab</div>

If you do not have content for tab yet and you need to get it somewhere, you can use data-tabs-data="URL/to/content". Plugin will put all recieved data into the data container for this tab.

HTML
<ul class="-tabs _huge js-tabs"><li data-tabs-target="#tab-first" data-tabs-data="url/to/package.json"><a>First tab</a></li><li data-tabs-target="#tab-second"><a>Second tab</a></li><li data-tabs-target="#tab-third" class="_active_"><a>Third tab</a></li></ul><div id="tab-first" style="display: none;">Content for the first tab will be here</div><div id="tab-second" style="display: none;">Content for second tab</div><div id="tab-third" style="display: block;">Content for third tab</div>
Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of popup.
animationbooleannullIf true use fadeIn() for content, else just show()
animationDurationnumber0In ms
Duration of the animation.
themestring'dark'Name of the theme from maxmertkit framework.
itemsSelectorstringundefinedSelector for tabs inside tabs container.
itemsSelectorstringundefinedSelector for tabs inside tabs container.
itemsDatastringundefinedIf itemsSelector is undefined, then find all elements with data-tabs="tabsNameHere" as tabs items.
dataTargetstring'tabs-target'Each tabs element's data contains selector of a container with content for current tab.

Example: if we click on a tab with data-tabs-target="#content-for-tab-1", then plugin will find in document $('#content-for-tab-1') and use it as a tab content.

triggerstring'click'Event to show tab content. Example: { trigger: 'hover' } – show tabs on hover

Methods

Remember, that you do not need to call any methods to change theme, animation, change items or anything else. All you need to do is change property, plugin will do the rest.

NameDescription
initInit current popup instance.

Callbacks
NameTypeDefaultDescription
beforeOpenfunction$.noop()Execute function before opening. Understands $.Deferred, including $.ajax() and $.get()
$('.js-tooltip').tabs({
	beforeOpen: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeOpen before check it, tab will wait for it.

openfunction$.noop()Triger after tab opened.
ifOpenedOrNotfunction$.noop()Triger after tab opened or just tried to open but failed. Useful to remove loading status or something like that.
ifNotOpenedfunction$.noop()Triger only if tab failed to open. Useful if you want to inform user about fail.
closefunction$.noop()Triger after tab closed.

Button maxmertkit.button.js

You can use this plugin for emulating checkboxes or radiobuttons. Or just to perform some action on click.

This button emulating data sending and checking answer.


Send data

This group of buttons emulating checkboxes with data sending.


The funniest part! This group of buttons emulates radiobuttons with sending data. Try to click several buttons at once.


  • console

Usage

The same code will work for single buton, for checkbox buttons and for radion buttons. Main difference is in data field on each button. If buttons have data-checkbox="checkboxNameHere" with the same name inside, then it is a checkbox group. If group of buttons have data-radio="radioGroupNameHere", then it is a radio group. Notice that those buttons do not need to be inside one container. They could be anywhere in DOM.
An example below shows how to use $.Deferred in plugin (to emulate data sending in this case).
Javascript
var selectors = '[data-radio="radio1"],'+
				 ' [data-checkbox="checkbox1"],'+
				 ' .js-button';
$(selectors).button({
	action: function() {
		$(this).addClass('_active_')
	},
	beforeAction: function() {
		$(this).addClass('_loading_ _active_');
		
		var d = $.Deferred();
		setTimeout(function(){ d.resolve() },1000);
		return d.promise();
	},
	ifNotAction: function() {
		alert('Oh no!');
	},
	clicked: function() {
		$(this).removeClass('_loading_')
	},
	beforeUnset: function() {
		$(this).addClass('_loading_');
		var d = $.Deferred();
		setTimeout(function(){ d.resolve() },1000);
		return d.promise();
	},
	unsetted: function() {
		$(this).removeClass('_active_')
	},
	ifUnsettedOrNot: function() {
		$(this).removeClass('_loading_');
	}	
});
HTML
<a class="-btn -info- _big js-button -default-">Send data</a>
<div class="-group"><a data-checkbox="checkbox1" class="-btn _big -default-">Check me</a><a data-checkbox="checkbox1" class="-btn _big -default-">Check me</a><a data-checkbox="checkbox1" class="-btn _big -default-">Check me</a></div>
<div class="-group"><a data-radio="radio1" class="-btn _big -default-">Choose me</a><a data-radio="radio1" class="-btn _big -default-">Choose me</a><a data-radio="radio1" class="-btn _big -default-">Choose me</a></div>
Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of button (or group in case of radio).
themestring'default'Name of the theme from maxmertkit framework.
Methods

Remember, that you do not need to call any methods to change theme or anything else. All you need to do is change property, plugin will do the rest.

NameDescription
initInit current button instance.
actionPerform click on a button.
unsetUnset button if it is in clicked state.
Callbacks
NameTypeDefaultDescription
beforeActionfunction$.noop()Execute function before action. Understands $.Deferred, including $.ajax() and $.get()
$('.js-button').button({
	beforeAction: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeAction before check it, button will wait for it.

actionfunction$.noop()Triger after button clicked and $.Deferred returned resolve().
clickedfunction$.noop()Triger after button clicked and $.Deferred returned resolve() or reject(). In other words it will triggered in any case. Useful to remove loading status or something like that.
ifNotActionfunction$.noop()Triger only if $.Deferred returned reject(). Useful if you want to inform user about fail.
beforeUnsetfunction$.noop()Execute function before button unset. Understands $.Deferred, including $.ajax() and $.get()
$('.js-button').button({
	beforeUnset: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeUnset before check it, button will wait for it.

unsettedfunction$.noop()Triger after button unsetted.
ifUnsettedOrNotfunction$.noop()Triger after $.Deferred returned resolve() or reject(). Useful to remove loading status or something like that.
ifNotUnsettedfunction$.noop()Triger only if button failed to unset. Useful if you want to inform user about fail or when he forgot to perform some operations.

Modal maxmertkit.modal.js

Plugin for modal windows.

Usage

We will need modal window element and some javascript code.
Javascript for Modal
$('.js-modal').modal({
	animation: 'dropIn',
	theme: 'primary'
});
Javascript for Button
$('.js-modal-show').on('click', function() {
	$('.js-modal').data('kit-modal').open();
});
Modal HTML
<div class="-modal js-modal"><div class="-modal-header">Header<i class="-closer">×</i></div><div class="-modal-content">Some content to show. It can be buttons, other plugins inside (dropdowns, for example), videos and other stuff. You can use any DOM element as modal window, actually.<a class="-btn js-tooltip js-button -default-">Show tooltip</a></div></div>
Button HTML
	
<a class="-btn js-modal-show">Show modal</a>
Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of modal.
animationstringnullName of animation.

Css animations:
'scaleIn', 'growUp', 'rotateIn', 'fadeIn', 'dropIn', 'blurIn', 'releaseIn'

Javascript animations
If you use plugins for animation (for example jQuery Easing v1.3), you can use it names
'easeOutQuad', 'easeInCubic', 'easeOutElastic', 'easeInOutElastic', etc.

animationDurationnumber0In ms
Duration of the animation. It works just for javascript animations.
themestring'dark'Name of the theme from maxmertkit framework.
autoOpenbooleanfalseOpen current instance of modal after initialize.
onlyOnebooleantrueClose other instances of modal when current instance of modal is open.
shaderClassstring'-shader'Class name of element that shade other content under modal window.
closerClassstring'-closer'Class name of the element that will close current instance of modal window.
Methods

Remember, that you do not need to call any methods to change theme, animation or anything else. All you need to do is change property, plugin will do the rest.

NameDescription
initInit current modal instance.
openOpen current modal instance.
closeClose current modal instance.
Callbacks
NameTypeDefaultDescription
beforeOpenfunction$.noop()Execute function before open modal window. Understands $.Deferred, including $.ajax() and $.get()
$('.js-modal').modal({
	beforeOpen: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeOpen before check it, modal window will wait for it.

openfunction$.noop()Triger after modal opened.
ifOpenedOrNotfunction$.noop()Triger after modal opened or just tried to open but failed. Useful to remove loading status or something like that.
ifNotOpenedfunction$.noop()Triger only if modal failed to open. Useful if you want to inform user about fail.
beforeClosefunction$.noop()Execute function before modal close. Understands $.Deferred, including $.ajax() and $.get()
$('.js-modal').modal({
	beforeClose: function() {
		var d = $.Deferred();
		if( someData = 0 )
			d.resolve()
		else
			d.reject()
		d.promise();
	}
});

In this example you can get someData by AJAX inside beforeClose before check it, modal will wait for it.

closefunction$.noop()Triger after modal closed.
ifClosedOrNotfunction$.noop()Triger after modal closed or just tried to close but failed. Useful to remove loading status or something like that.
ifNotClosedfunction$.noop()Triger only if modal failed to close. Useful if you want to inform user about fail or when he forgot to perform some operations inside modal.

Affix maxmertkit.affix.js

You can see the result on the left menu: while you scrolling document it follows you.

Usage

We will need element you want to follow your scroll and some javascript code. This element will follow your scroll only inside it's parent container!
Javascript
$('.js-affix').affix();
HTML
<div class="any-parent-container-or-body"><div class="js-affix">Any element you want</div></div>
Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of affix.
offsetnumber0Offset by Y-axis (from top of the visible document part).
insidestring'parent'Limit following by parent's sizes. It can be a selector.

Scrollspy maxmertkit.scrollspy.js

You can see a result at the left menu. When you scroll to specified element, plugin activate menu item.

Usage

We will need menu and some javascript code.
Javascript for Scrollspy
$('.js-scrollspy').scrollspy();
HTML
<ul class="-menu -primary- _vertical_ js-affix js-scrollspy"><li data-target="#idea" class="_active_ -mx-start"><a href="#idea"><b>Idea</b></a></li><li class="-menu-separator"></li><li data-target="#typography"><a href="#typography">Typography</a></li><li data-target="#tables"><a href="#tables">Tables</a></li><li data-target="#forms"><a href="#forms">Forms</a></li><li class="-menu-separator"></li><li data-target="#buttons"><a href="#buttons">Buttons</a></li>...</ul>

As you can see I've applied Affix plugin direct to menu too.
It will find every element by selector in data-target="#selector", and when you will scroll to it, plugin will activate specified menu item. It is very simple.

Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of scrollspy.
itemSelectorstring'li'This is selector for items, that plugin will activates. Each of this elements should contain data-target="#selector".
offsetnumber2In px.
Activate menu item when you scrolled to target item's Y-offset minus this offset.
animationbooleantrueWorks only with css animation. Css animation class should be set on parent by hands (sorry for that, I'll fix it when I have more time).
Methods
NameDescription
initInit current modal instance.
refreshIf some elements were added dynamically.
processStart spying.

Notify maxmertkit.notify.js

Plugin to notify your users.

Usage

All we will need is javascript code. Create button and notify on click. Or on other event.
Javascript

Create primary notification and remove it after 9 seconds.

$.notify('This is an example of primary notify.<br>It will be deleted in 9000ms. :)',
	{
		header: 'Gooood!',
		theme: 'primary',
		type: 9000
	}
)

Create error notification and remove it after 5 seconds.

$.notify('This is an example of primary notify.<br>It will be deleted in 5000ms. :)',
	{
		header: 'Baaad!',
		theme: 'error',
		type: 5000
	}
)

Create warning notification and do not remove it.

$.notify('This is an example of warning notify.<br>It will not be deleted.',
	{
		header: 'Warning!!!',
		theme: 'warning',
		type: 'stick'
	}
)
Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable notification system.
themestring'dark'Name of the theme from maxmertkit framework.
templatestring'<div class="-notify-container js-notify-container"></div>'Template of a container where notifications will be put to.
templateNotifystring'<div class="-notify -mx-releaseIn _bottom_"></div>'Template of one notify.
templateNotifyHeaderstring'<div class="-notify-header"></div>'Template of the header of one notify.
templateNotifyContentstring'<div class="-notify-content"></div>'Template of the content of one notify.
templateCloserstring'<div class="-notify-closeAll -label -dark-">close all <i class="-icon-remove-circle -icon-light-"></i></div>'Template of the element, which will close all opened notifications.
Methods
NameDescription
initInit notification system.
notifyAdd notification to notification center and show it.

Carousel maxmertkit.carousel.js

Plugin to create beautiful galleries.

Usage

Notice that navigation for carousel can be anywhere in DOM, plugin understands which carousel to use (if there are several carousels on page) by href="#js-carousel" attribute. And what to do by click from data-slide="prev" or data-slide="next" atttributes.

Javascript
$('#js-carousel').carousel();
HTML
<div id="js-carousel" class="-carousel"><div class="js-carousel-item -carousel-item"><img src="images/carousel/1.jpg"><div class="-carousel-caption"><div class="-carousel-caption-title"><h3>Geisha</h3></div><div class="-carousel-caption-text">Japan, Kioto. <a href="http://www.flickr.com/photos/michaelchandler/">Momoyama's photo</a> ©</div></div></div><div class="js-carousel-item -carousel-item"><img src="images/carousel/2.jpg"><div class="-carousel-caption"><div class="-carousel-caption-title"><h3>Geisha</h3></div><div class="-carousel-caption-text">Japan, Kioto. <a href="http://www.flickr.com/photos/michaelchandler/">Momoyama's photo</a> ©</div></div></div>...<a href="#js-carousel" data-slide="prev" class="js-carousel-control -carousel-arrow-left"><i class="-icon-chevron-left -icon-light-"></i></a><a href="#js-carousel" data-slide="next" class="js-carousel-control -carousel-arrow-right"><i class="-icon-chevron-right -icon-light-"></i></a></div>
<div id="js-carousel-nav" class="-carousel-nav"></div>

Try to move mouse cursor through last carousel. Funny, right?

Javascript
$('#js-carousel').carousel({
	navigationSelector: '#js-carousel-nav2',
	navigationPlacement: 'top',
	theme: 'dark',
	autoSlide: 10000,
	imageFillMouseMove: true
});
Options
NameTypeDefaultDescription
enabledbooleantrueEnable or disable current instance of carousel.
themestring'info'Name of the theme from maxmertkit framework. Applying to navigation.
itemSelectorstring'.js-carousel-item'Selector for carousel items.
controlSelectorstring'.js-carousel-control'Selector for carousel controls (arrows). This controls can be anywhere in DOM. Plugin understands which carousel to use (if there are several carousels on page) by href="#js-carousel" attribute. And what to do by click from data-slide="prev" or data-slide="next" atttributes.
navigationSelectorstring'#js-carousel-nav'Selector for container where navigation dots will be.
itemAnimationstring or boolean'css'Animation type for sliding between images.

If 'css' – use css animation for sliding.
If true – use jQuery animation.
hideControlsDistancenumber200In px
Hide navigation arrows when cursor farther then 200px from each side (left and right)
autoSlidenumber15000In ms
If 0 – turn autoscroll off. If > 0 – scroll to the next slide after some miliseconds.
imageFillbooleantrueFill images by width and height of the carousel.
imageFillAnimationIntervalnumber20000In ms
Time to scroll image of the current active carousel item. Working if imageFill is on.
If 0 – turn scroll off.
imageFillAnimationboolean or stringtrueIf true – simple scroll animation by jQuery. If 'string' – it should be a jQuery animation name (if you using plugins for animation).

Css animation is not available (yet) because we need an ability to stop animation at any time.
imageFillMouseMovebooleanfalseMove image of current active carousel item after mouse cursor.
captionAnimationstring'blurIn'Name of the css animation for caption.
Css animations:
'scaleIn', 'growUp', 'rotateIn', 'fadeIn', 'dropIn', 'blurIn', 'releaseIn'
captionAnimationDelaynumber1000In ms
If there are several captions inside active carousel item, then show them with interval.
Methods

Remember, that you do not need to call any methods to change theme, animation or anything else. All you need to do is change property, plugin will do the rest.

NameDescription
initInit current carousel instance.
enableEnable current carousel instance (allows to click on navigation).
disableDisable current carousel instance (forbif to click on navigation).
updateCheck for new carousel items. Useful when items quantity is dynamic.
nextShow next item.
prevShow previous item.
to(number)Go to item.
Header×
Some content to show.
It can be buttons, other plugins inside (dropdowns, for example), videos and other stuff.
You can use any DOM element as modal window, actually.

Show tooltip