bennyschudel/index.html

## index.html
<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	</head>
	<body>
		<div id="main">

			<div id="element"></div>

		</div>

		<!-- scripts -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
		<script type="text/javascript" src="jquery.plugin.js"></script>
		<!--[if IE]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<script type="text/javascript">
			var plugin;

			jQuery(document).ready(function() {
				plugin = new $.pluginName($('#element'));
				plugin.publicMethod();
			});
		</script>
	</body>
</html>

## jquery.plugin.js
(function($) {

	$.pluginName = function(el, options) {
		var self,
			init, privateMethod;

		self = this;

		self.defaults = {
			property: 'value',
			events: {
				event: function() {}
			}
		};
		self.settings = {};

		// init
		init = function() {
			self.settings = $.extend(true, {}, self.defaults, options);
			self.el = el;
		};

		// public methods
		self.publicMethod = function() {
			privateMethod();
			el.css({'margin': 10});
		};

		// private methods
		privateMethod = function() {
			console.log('privateMethod called');
		};

		init();
	};

})(jQuery);

## main.css
#main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: lightgrey;
}

#element {
	width: 200px;
	height: 50px;
	background-color: grey;
}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	</head>
	<body>
	<div id="main">

	<div id="element"></div>

	</div>

	<!-- scripts -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
	<script type="text/javascript" src="jquery.plugin.js"></script>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script type="text/javascript">
	var plugin;

	jQuery(document).ready(function() {
	plugin = new $.pluginName($('#element'));
	plugin.publicMethod();
	});
	</script>
	</body>
	</html>
	(function($) {

	$.pluginName = function(el, options) {
	var self,
	init, privateMethod;

	self = this;

	self.defaults = {
	property: 'value',
	events: {
	event: function() {}
	}
	};
	self.settings = {};

	// init
	init = function() {
	self.settings = $.extend(true, {}, self.defaults, options);
	self.el = el;
	};

	// public methods
	self.publicMethod = function() {
	privateMethod();
	el.css({'margin': 10});
	};

	// private methods
	privateMethod = function() {
	console.log('privateMethod called');
	};

	init();
	};

	})(jQuery);
	#main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: lightgrey;
	}

	#element {
	width: 200px;
	height: 50px;
	background-color: grey;
	}