Ajax Updates

Posted by education training on Wednesday, September 2, 2009

Ajax Updates

Row checkbox toggle using Jquery

Posted: 02 Sep 2009 06:09 AM PDT

So since I've been playing with jQuery on my spare time while putting together an ajax site, I've decided to tackle a design issue I've run into many times at work with jQuery. This idea originally comes from phpMyAdmin. If you've used that software, you know that when you click on any table row, it automatically toggles the checked state of the checkbox in the first cell. I think that's an extremely user friendly thing to have since checkboxes are so small and hard to click on.

Let me present you my friends, my first jQuery plugin. It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, I added an initialization step in the script that correctly marks a row when it's considered checked on page load.
tableRowCheckboxToggle

* It generically adds the toggle checkbox function to any table rows you specify based on the css class names.
* It will by default toggle any checkboxes within the table row.
* You can manually exclude checkboxes based on name, id or css classes in the script.
* If there is any applicable checkboxes inside of the table row that are checked, it will apply a class to the table row.
* It also marks table rows when there are checked applicable checkboxes on page load.

Demo: http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html
Download: http://pure-essence.net/stuff/webTips/jquery.tableRowCheckboxToggle.zip
Source: http://plugins.jquery.com/project/tableRowCheckboxToggle
tafbutton blue16 Row checkbox toggle using Jquery

Related Listings:

  1. JQuery : Checkbox Plugin Provides for the styling of checkboxes that degrades nicely...
  2. Checkbox filters with jQuery Script Perhaps I’m using delicious.com wrong, but sometimes I wish I...
  3. Jquery Toggle Elements ToggleElements is designed to hide informations on your site and...

Table Drag n Drop Script

Posted: 02 Sep 2009 05:56 AM PDT

I've been using JQuery for a while now and really agree with its tag line that it's the "The Write Less, Do More, JavaScript Library". We've also got this code for dragging and dropping table rows that has proved very popular, so it seemed natural to combine the two and wrap up the table drag and drop as a JQuery plugin.
Why have another plugin?

Dragging and dropping rows within a table can't be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don't work well with table rows on all browsers, so we have to go for simpler effects.
What does it do?

This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can't be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.
How do I use it?

1. Download Download jQuery (version 1.2 or above), then the TableDnD plugin (current version 0.5).
2. Reference both scripts in your HTML page in the normal way.
3. In true jQuery style, the typical way to initialise the tabes is in the $(document).ready function. Use a selector to select your table and then call tableDnD(). You can optionally specify a set of properties (described below).
The HTML for the table is very straight forward (no Javascript, pure HTML):

 HTML |  copy code |? 
1
<table id="table-1" cellspacing="0" cellpadding="2"> 
2
    <tr id="1"><td>1</td><td>One</td><td>some text</td></tr> 
3
    <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr> 
4
    <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr> 
5
    <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr> 
6
    <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr> 
7
    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr> 
8
</table> 
9
 To add in the "draggability" all we need to do is add a line to the $(document).ready(...) function
as follows:

 Javascript |  copy code |? 
1
<script type="text/javascript"> 
2
$(document).ready(function() { 
3
    // Initialise the table 
4
    $("#table-1").tableDnD(); 
5
}); 
6
</script>
 
In the example above we're not setting any parameters at all so we get the default settings. There are a number
of parameters you can set in order to control the look and feel of the table and also to add custom behaviour
on drag or on drop. The parameters are specified as a map in the usual way and are described below:

onDragStyle
    This is the style that is assigned to the row during drag. There are limitations to the styles that can be
    associated with a row (such as you can't assign a border—well you can, but it won't be
    displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
    a map (as used in the jQuery css(...) function).
onDropStyle
    This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
    to what you can do. Also this replaces the original style, so again consider using onDragClass which
    is simply added and then removed on drop.
onDragClass
    This class is added for the duration of the drag and then removed when the row is dropped. It is more
    flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
    is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
    stylesheet.
onDrop
    Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
    and the row that was dropped. You can work out the new order of the rows by using
    table.tBodies[0].rows.
onDragStart
    Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
    table and the row which the user has started to drag.
scrollAmount
    This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
    window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
    FF3 beta)

This second table has has an onDrop function applied as well as an onDragClass. The javascript to set this up is
as follows:

 Javascript |  copy code |? 
01
$(document).ready(function() { 
02
 
03
	// Initialise the first table (as before) 
04
	$("#table-1").tableDnD(); 
05
 
06
	// Make a nice striped effect on the table 
07
	$("#table-2 tr:even').addClass('alt')"); 
08
 
09
	// Initialise the second table specifying a dragClass and an onDrop function that will display an alert 
10
	$("#table-2").tableDnD({ 
11
	    onDragClass: "myDragClass", 
12
	    onDrop: function(table, row) { 
13
            var rows = table.tBodies[0].rows; 
14
            var debugStr = "Row dropped was "+row.id+". New order: "; 
15
            for (var i=0; i<rows .length; i++) { 
16
                debugStr += rows[i].id+" "; 
17
            } 
18
	        $(#debugArea).html(debugStr); 
19
	    }, 
20
		onDragStart: function(table, row) { 
21
			$(#debugArea).html("Started dragging row "+row.id); 
22
		} 
23
	}); 
24
}); 
25
 
Demo: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
Download: http://www.isocra.com/articles/jquery.tablednd_0_5.js.zip
Source: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
 
   
tafbutton blue16 Table Drag n Drop Script
  
Related Listings:
  1. Drag Drop Tree – EXTJs This script shows basic drag and drop node moving in...
  2. Collapsible-Drag-Drop Javascript Panels This script will give you a good idea of what...
  3. Dynamic Drag n Drop With jQuery And PHP Drag'n drop generally looks hard-to-apply but it is definitely not...
 		 
 
  
 Fancy Sliding Tabs Menu 
 
 Posted: 02 Sep 2009 05:45 AM PDT
 
The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I've included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation.  I have really put it up here for now to hear peoples comments.

Demo: http://www.andrewsellick.com/examples/tabslideV2/
Download: http://www.andrewsellick.com/examples/tabslideV2/tabslideV2.rar
Source: http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2
 
   
tafbutton blue16 Fancy Sliding Tabs Menu
  
Related Listings:
  1. Sliding Menu for script.aculo.us It's been a while since the original post Sexy sliding...
  2. Sliding Tabs using Mootools Sliding Tabs is a mootools 1.11 plugin which adds a...
  3. Ajax Fancy Captcha – jQuery Plugin Ajax Fancy Captcha is a jQuery plugin that helps you...
 		 
 
  
 






































0
comments:
        












Post a Comment






Note: Only a member of this blog may post a comment.