JQuery: Example of The Structure of a File That Will Manage a Page

This is an example of the Structure of a file that will manage a page.
This is also a good example on how to manage dropdown boxes.

$(document).ready(
       function ()
       {
               // shows the tags related to the selected category
               function showTags()
               {
                   var categoryValue = $('#category').val(); // the selected value of the dropdown menu
                   var categoryIds = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

                   for (var i in categoryIds)
                   {
                       if ($('#tags_' + categoryIds[i]).css('display') == 'block')
                       {
                           $('#tags_' + categoryIds[i]).slideUp('fast');
                           $('#tags_' + categoryIds[i]).css('display', 'none');
                       }
                   }

                   $('#tags_' + categoryValue).slideDown('fast');
                   $('#tags_' + categoryValue).css('display', 'block');

                   // other examples
                  if ( ($('#smallImage').html() == "") ) // it checkes the actual content of the div
                  {
                    var id = $('#bigImageDiv').children('span').attr('id');
                  }
                  if ($('#featured:checked').val() != null) // it checkes whether the checkbox is ticked
                  {
                    // something
                  }
               }

		// showTags must be shown both when the page is loaded
		// and in the event of a change in the dropdown 'category'
               showTags();
               $('#category').change(function() { showTags() });

               // set up tool tips
               $('label').Tooltip({showURL: false, delay: 0, track: true});

               return false;
       });

Leave a Reply