This is my first attempt at creating a jQuery plugin and I have almost got it working correctly. You can view the example here. I've been struggling for days to position an element as desired.
The goal is to display some text with an optional downward arrow to the right of the text. When clicked, the text/arrow should be replaced by a list of options where the currently selected option is highlighted in the same location as the original text. Clicking on an option selects it and triggers a user-defined callback. Clicking anywhere else should close the dialog.
The plugin replaces the original select element, and I want to maintain whether it is displayed inline or block. But when set to inline, the position:absolute for the <ul class="selectIt-list"> popup does not appear above the associated text in the
<span class="selectIt-text"><div class="selectIt">, so why is it positioned all the way to the left?
One of the main reasons I'm doing this is to learn a consistent pattern for building plugins. My approach is heavily based on the guidelines provided at http://docs.jquery.com/Plugins/Authoring. I'm hoping someone can review my work, confirm if I'm following the correct plugin-building process, and offer any suggestions. Also, I'm unsure about namespaces. Should I post this as a separate question? Is it appropriate to ask for code critiques?
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/* CSS rules related to the plugin */
div.selectIt {
position:relative;
}
/* Other CSS styles... */
</style>
<script>
// JavaScript code for the jQuery plugin...
</script>
</head>
<body>
<!-- HTML content for horizontal and vertical lists -->
</body>
</html>