How To Create A Widget?

How To Create A Widget?

Hi Sir...
I'm new here and i wanted to make a grid widget but i don't know where to start... i developed some php classes (datagrid and database connector) but when i looked at the jquery code... I was shocked coz its different (or maybe i'm still a newbie in oop haha).. see, i wanted to convert my php datagrid to jquery datagrid for faster searching and column re-ordering... I would like my code to look like this

  1. $("#grid").grid({
  2. hideColumn: "UserId, HouseId",
  3. addControl: {
  4.             "button": function(){
  5.                         $(this).name("btnViewInfo");
  6.                         // this is the row control at the end
  7.                         // this button should get any value of any column in its row only
  8.                         // example $(this).get("UserId");
  9.                   },
  10.             "checkbox": function(){
  11.                         $(this).name("btnCheckRow");
  12.                         // this the row control at the beginning used for dynamic delete and update purposes
  13.                         // same as above
  14.                   }
  15.             },
  16. formatColumn: {
  17.             "ColumnName": function(){
  18.                   // lets say you have a column "Price" that looks like $1000.00
  19.                   // and you want it to look like $1,000.00
  20.                   // format column will do this...
  21.             }
  22.       }
  23. });

I still got some ideas but i don't know where to start...
Please Post your "Jquery Widget How to?" tutorial here ^___^
I really really really wanted to learn how to do this thanks...