Come creare un plugin per jQuery

by Code4Life

HTML

<div class="demo-content">
	<a class="emphasize" href="https://code4life.it/">Code4Life.it</a>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/come-creare-un-plugin-per-jquery/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Come creare un plugin per jQuery
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/come-creare-un-plugin-per-jquery/
 */
 
 /* Demo style only */
.demo-content { margin-bottom: 70px; padding: 50px 0; text-align: center; }

* { font-family: 'Roboto', sans-serif; }
a.emphasize { padding: 10px; text-decoration: none; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem; text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }

JavaScript

( function( $ ) {
	$.fn.emphasize = function( options ) {
		var settings = $.extend( {
			background: '#ff0000',
			color: '#fff'
		}, options );

		return this.css( {
			'background': settings.background,
			'color' : settings.color
		} );
	}
} )( jQuery );

jQuery( function( $ ) {
	$( 'a.emphasize' ).emphasize( {
		background: '#ff0000',
		color: '#fff'
	} );
} );