My First Plugin
My First Plugin
Hi, I'm Mikey, I'm new to jquery and I'm looking to creating my first plugin.
I'm doing a quick textarea limit, however im not sure how to do it.
index.htm:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xml:lang="en">
<head>
<title>Textarea Limit</title>
<meta http-equiv="Content-Type" content="txt/html; charset=utf-8" />
<script language="javascript" src="../jquery.js"></script>
<script language="javascript" src="limit.js"></script>
<script type="text/javascript">
$().ready(function() {
$(".limit").limit({
limit: 100,
location: 1
});
});
</script>
<style type="text/css">
* { margin: 0px; padding: 0px; }
body { padding: 0; font-family: verdana, arial, tahoma; color: #000; font-size: 0.8em; margin: 0; background: #fff; }
#wrapper { width: 750px; margin: 50px auto 0 auto; background-color: #fff; line-height: 1.2; }
h2 { clear: both; border-bottom: 1px solid #000; padding: 2px; width: 760px; margin-bottom: 10px; }
#form { width: 750px; padding: 5px; background: #eee; border: 1px solid #ccc; }
#form textarea { width: 747px; height: 200px; margin-bottom: 5px; }
#form input { float: right; }
.spacer { clear: both; }
</style>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<h2>Textarea Limit</h2>
<div id="form">
<form action='index.htm' method='post'>
<textarea name="limit" class="limit"></textarea>
<input type="button" name="submit" value="Submit" />
</form>
<div class="spacer"></div>
</div>
</div>
<!-- /Wrapper -->
</body>
</html>
and then limit.js:
-
/**
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
* View the GNU General Public License <http://www.gnu.org/licenses/>.
*/
(function($){
$.fn.limit = function(options) {
var defaults = {
maxlength: 300,
position: 1
};
var options = $.extend(defaults, options);
return this.each(function() {
};
})(jQuery);
What I'm asking, is if someone can instead of completing the script, just find a way to show me how to use a variable as a simple test, and add a span tag with the word "test" either before or after the textarea,
Thank you in advance. :]