Create jQuery Plugin Tutorials

Here are two excellent jQuery plugin tutorials.  My goal by posting these two links is to try to save you guys some time in searching through all the other links for the right one.  Here you go:

• Tutorial Creating a jQuery plugin – DevHeart
• A Really Simple jQuery Plugin Tutorial

Testing WordPress’s Code Syntax Highlighting

(12/04/11)

TEST 1:

This example introduces a bit of test code we are calling ‘CODE SNIPPET A’. It uses the ‘sourcecode’ tag and has no language attributes or parameters.

Code Snippet A

		<form id="form1">
			<div>
				<input id="btnShowMessage" type="button" value="show message" />
				<div id="divMessage" style="background-color: yellow;">THIS IS THE MESSAGE</div>
			</div>
		</form>
	

NOTE: When you are in your dashboard editing your post you will not be able to see the syntax highlighting. Don’t freak out. Do a save and ‘preview’ and everything should be just fine.

TEST 2:

This is snippet A except now we have added the language=’html’ attribute.

	<form id="form1">
		<div>
			<input id="btnShowMessage" type="button" value="show message" />
			<div id="divMessage" style="background-color: yellow;">THIS IS THE MESSAGE</div>
		</div>
	</form>

TEST 3:

Well that’s all good for plain old html. But, what if our code is from a scripting language, such as PHP, that alternates back and forth between html and the script code? In that case, you could use something like

	1

Code Snippet B

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script type="text/javascript">
		  $(document).ready(function(){
			 nameOutput = jQuery('#nameOutput');
			 nameOutput.css({'background':'yellowgreen'});
			 jQuery('body').css({
				'background':'#A66900',
				'font-family':'comic sans ms',
			 });
			 nameOutput.wrap('<span style="color:purple;">');
			 jQuery('#wrap').addClass('centered');
			 jQuery('#wrap').css({
				'background':'#F2B449',
			 })
		  });
		</script>
		<style type="text/css">
		  /****** COLORS *******
			 #A66900 // brown
		   */
		  .centered {
			margin: 0 auto;
			width: 66%;
		  }
		</style>
	<div id="wrap">
		<?php echo "Welcome to " . 'hell'; ?>
		<br />
		<?php

		  echo "<pre>";
		  print_r($_SERVER);
		  echo "</pre>";

		  $model = new stdClass();
		  $model->smurf = 'Papa';
		  echo "my smurf = " . $model->smurf;

		  $model->_name = isset($_POST['userName']) ? $_POST['userName'] : '[not defined!]';
		  echo "<pre>";
		  print_r($model);
		  echo "</pre>";
		?>
		<H1>THIS PAGE IS CURRENTLY UNDER CONSTRUCTION AND TESTING</H1>

		<form id="main" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
		<input type="text" name="userName" value="Enter Your Name" />
		<input type="submit" name="submit" />

		<div id="nameOutput" name="nameOutput">
		  <?php if(isset($_POST['userName'])) echo stripslashes($_POST['userName']); ?>

		</div>
	<div id="content"></div>
	</div>