<

Essential tools for developers in one package: lightweight, jquery support, bootstrap compatible, fast implementation (just one javascript file), GPL 3.0 license


The folks over at MaxCDN graciously provide CDN support for EASY.JS. Just use this EASY.JS CDN link.

Modal 1.0

Example: Show a modal

// Widget: Modal
easyjs.modal.show({
		// title
        title			: false, // title text
        titlecolor		: '#666', // font color
        bgtitle			: '#EEE', // background color
        titleborder		: '1px solid #CCC', // bottom border
 
        // content
        content			: false, // content text
        contentcolor	: '#666',  // font color
        bgcontent		: '#FFF', // background color
 
        // close button
        close			: true,
        bgclose			: '#666', // background color
        closecolor		: '#EEE', // font color
        closeborder		: '0px solid #CCC', // border
        onbeforeclose	: function(){return true;}, // executed before closing, return false if you dont want the modal closed
        onclose			: function(){}, // executed after the window was closed
 
        hoverbgclose	: '#CCC', // hover background color
        hoverclosecolor	: '#000', // hover font color
        closehoverborder: '0px solid #CCC', // hover border
 
        // iframe
        iframe			: false, // iframe path/url
        iframepadding	: 10, // padding
        iframescroll	: 'no', // scrolling
 
        // ajax
        ajax			: false, // ajax path/url
 
        // image
        image			: false, // image path/url
 
        // div
        container		: false, // get container content, for example #modal
 
        // modal general
       	width			: 'auto', // width (5px, full, auto)
    	height			: 'auto', // height (5px, full, auto)
        border			: '0px solid #CCC', // border
        rounded			: true, // rounded
        borderradius	: 5, // border radius
        shadow			: true, // shadow
        background		: true, // background
        draggable		: false, // draggable
        fade			: false, // fade
        escape			: false, // escape key
 
        // Buttons
        buttons			:	null, // buttons
        buttonsborder	: '1px solid #CCC', // bottom border
        buttonsbg		: '#EEE' // background
});
// Close a modal
easyjs.modal.close();

Planned: youtube videos

Helpers

CSS 1.0

// Get the next highest possible zindex
var zindex = easyjs.helpers.zindex();

Cookies 2.4

// Set cookie
easyjs.cookie.set('mycookie','cookievalue',365);
// get cookie
var mycookie = easyjs.cookie.get('mycookie');
// remove a cookie
easyjs.cookie.remove('mycookie');

Mouse 2.0

The mouse position is tracked the whole time, so you can get x and y with two easy functions.

Example: Get x/y of your mouse

// Get mouse positions
var x = easyjs.mouse.getx();
var y = easyjs.mouse.gety();

Tooltip 2.1

The tooltip will be automatically positioned on the top or the bottom of the element. The styling can be configured with the initialization.

Example: tooltip

$(document).ready(function() {
	// tooltip intialization
	easyjs.tooltip.init({
			color			: '#FFF', // font color
			bgcolor			: '#000', // background color
			maxwidth		: '400px', // maximum width
			font			: 'Arial', // font family
			fontsize		: '11px', // font size
			padding			: 6, // padding of the tooltip
			borderradius	: '5px', // rounded borders, border radius
			selector		: '[title]', // selektor for enabling tooltips
			title_attr		: 'title' // attribute that contains the tooltip content
	});
});

Popover/positioning 2.3

Make popovers from div containers or align containers on elements. Click on the buttons to see the effect.

Popover

<div id="popover-target"></div>
<div id="popover-content" class="easyjs-popover">Popover</div> 
<script>
easyjs.popover.show({
	target:$('#popover-target'), // target element
	popover:$('#popover-content'), // popover element
	position:'tlc', // position
	content:'top left corner' // optional: fill with content
});
</script> 

Tour

Build a virtual tour along the elements on a page, with autoscroll and tooltips. Great for "first visits".

Example: tour

// Optional: set configuration
easyjs.tour.config({
		color			: '#333333', // font color
		maxwidth		: '500px', // maximum width
		minwidth		: '300px', // maximum width
		font			: 'Arial', // font family
		fontsize		: '13px', // font size
		padding			: 10, // padding of the tooltip
		borderradius	: '5px', // rounded borders, border radius,
		txt_next		: 'Next »',
		txt_prev		: '« Prev',
		txt_end			: 'End tour'
});
// start a tour
easyjs.tour.start({
	tour: [
	     {element:'#logo',title:'EASY.JS Logo',content:'You would not believe - this is the easy.js logo.'},
	     {element:'#facebook',title:'Follow on facebook',content:'Want to follow easy.js on facebook? :)'}
	]
});

Postform

Uploads with ajax. Coming soon

Contextmenu

Contextmenus on right mouse click. Coming soon