A complete iGoogle like interface example with jQuery

5 05 2010

After my previous post about how to mimic the iGoogle interface with database, I have been working in a new version. Now I have added all you need to build a simple page, with these features:

  • The user starts with an empty page, where he can add widgets. There is a link “Add widget at column …” that creates a new widget at the selected column.
  • Any widget can be configured in the same way that before.
  • Widget content comes from an ajax request to a page called “widgets_rpc.php”. This page receives the id of the widget and should respond with the HTML content of that widget.
  • Widget configuration is stored in the database when the user changes something and loaded at the beginning.

You can see a working example here: http://www.jsabino.com/test

And you can download the complete source code here: http://www.jsabino.com/iNettutsDB2.zip

Inside the ZIP file, you can find:

  • script.sql: the script to create the required table in the database. You must execute it.
  • iNettuts_rpc.php: the same file for saving and loading widget configuration. Change here the database connect parameters (server, database, username and password).
  • index.html: now it is a simple page with the columns layout but without any widget, because they are created dynamically by a function called “Add”. It looks for the last added widget id and creates a new one in the selected column.
function Add() {
  var i=1;
  while ($("#widget"+i).length>0) i++;
  iNettuts.addWidget("#"+$("#col").val(), {
    id:    "widget"+i,
    color: "color-blue",
    title: "widget "+i
  })
}
  • widgets_rpc.php: file that retrieves the content of each widget. It is a simple version showing only “This is the content for widget n” yet.
  • inettuts.js: the core file where the widget logic is located. It was first programmed by James Padolsey but I have changed many things. There are three new functions: initWidget (returns the default widget layout), loadWidget (gets widget content with an ajax call) and addWidget (creates a new widget). I have also modified makeSortable (now it is called several times) and sortWidgets (draws widgets in a different way).
initWidget : function (opt) {
  if (!opt.content) opt.content=iNettuts.settings.widgetDefault.content;
  return '<li class="new widget '+opt.color+'"><div class="widget-head"><h3>'+opt.title+'</h3></div><div class="widget-content">'+opt.content+'</div></li>';
},

loadWidget : function(id) {
  $.post("widgets_rpc.php", {"id":id},
    function(data){
      $("#"+id+" "+iNettuts.settings.contentSelector).html(data);
    }
  )
},

addWidget : function (where, opt) {
  $("li").removeClass("new");
  var selectorOld = iNettuts.settings.widgetSelector;
  iNettuts.settings.widgetSelector = '.new';
  $(where).append(iNettuts.initWidget(opt));
  iNettuts.addWidgetControls();
  iNettuts.settings.widgetSelector = selectorOld;
  iNettuts.makeSortable();
  iNettuts.savePreferences();
  iNettuts.loadWidget(opt.id);
},

I have tested this example both in Firefox and Internet Explorer. Some users have reported problems in the comments of my last article, but it works fine for me.


Acciones

Information

30 responses

6 05 2010
Eli

hola,

can you load ajax content into these widgets?

or maybe have a widget already made and add that to the columns, like a weather widget for example. Just like the iGoogle widgets that are already made and you can just add them to the list…

gracias,
Eli

6 05 2010
jsabino

Hola

In my example widgets are loaded with ajax content. But this doesn’t mean you can’t have already made widgets. It depends on the code you write in widgets_rpc.php.

In this file you could have something like:

if ($id=="widget1")
  echo "Madrid weather: sunny...";

Of course, a serious project should have a more complex widgets_rpc.php file, with content loaded from database or a web service (for the weather example).

25 05 2010
Alexis

Hello, excellent work with this API, I have a question how you could add a new attribute to the container, for example there is now a title and color, if you would like to have an image as a third attribute, this could be?

25 05 2010
jsabino

Of course. You have to add some lines to the load and save functions. I am now working in a new version that stores this data in json format, instead of a string with separators. This data structure will allow to add new variables, like an image (as you want) or a RSS feed URL easily.

28 05 2010
Doug

Excelent job !!!!
Is it possible in the Settings area to have the height of the widget?
Or to make the widget resizable (just the height).

Thanks a lot

7 12 2010
Ricky

Awesome script. Couple questions:

Is there a way to have a widget span multiple columns? Maybe have a setting to allow a widget to span across all 3 columns.

How’s the new version coming? Any idea of a release date?

Thx

24 02 2011
Alex V

Ricky, could you make this to span across columns? I would really apprciate to get your insight in this.

Thanks a lot,

Alex

8 02 2011
Daniel

Thx for the sharing🙂

Say how can i make the widgets become resizable ?

Thanks ahead

Daniel.

13 02 2011
Daniel

never mind – not relevant…

5 08 2011
rakesh

can we add more columns on run

24 08 2011
กฤษณวัฒน์ แก้วเเสนเมือง

I got problem when reload page it’s empty
why in db have value

thank

7 10 2011
jsabino

Fixed. It was a problem with my hosting. Database connection was lost.

Now it’s working fine.

5 09 2011
iGoogle interface updated to lastest version of jQuery « El blog de Súper Mario

[…] people has asked me to update my example of an iGoogle interface to the lastest version of jQuery. I have also repair a problem with database connection (I had […]

23 11 2011
Aaron

Hello, great work with this tutorial, I do have 2 questions. How can I make it so that instead of selecting the location, I let them select which widget they want. For example facebook rss feed, twitter feed… I would also like to limit the amout of times that they can add the widget to 1. Is this possible, and if so how can this be accomplished?

Thanks a lot,

Aaron

26 12 2011
Rishi Pal

Thanks dear for this awesome script.

21 02 2012
Yuriy

Author forgot to describe $(settings.columns).sortable(‘destroy’);
string in makeSortable function. Because it was not impossible to move already created widgets.

28 02 2012
Jerry

How can the front end user edit the “This is the content for widget1” text?

Thanks anyways for this wonderfull script!

26 04 2012
Ceyd

Just PERFECT !!! Thx a lot !!!

23 06 2012
OriginalCompo

If you are interested, there is an alternative at iNettuts
It’s oc.WidgetInterface
You can find the sources here:
http://mywebdev.free.fr/JQUERY/index.php

23 07 2012
Viral Trivedi

Drag and drop does not work in IE9. Is there a solution to it?

31 12 2012
shahzeb

Nice Post, when i drag left to right any div its add new row, could you tell me how do i add replacement functionality, like A1, A2, B1, B2, C1, C2, if i move A2 to C1 then C1 should move to the A2 place and A2 move to the C2 place.

19 01 2013
Raja Ghosh

Can we modify the column size. Like for the first colum it is 40% and rest two 30% reach?

22 01 2013
jsabino

You should change columns width in the CSS. For example, edit line 48 for .column class and change width to 30% (default width). Then edit line 56 for .column1 class and add width:60%;

31 01 2013
shahzeb

kindly reply to my question, if you don’t understand my question do tell me i will explain in detail.

7 03 2013
Anujmansa

This is not working on IE9 and there is no Way out for the same.

7 03 2013
jsabino

Hi Anujmansa

Please check my updated version here:

https://jsabino.wordpress.com/2011/09/05/igoogle-interface-updated-to-lastest-version-of-jquery/

It works fine with IE 9.

30 04 2013
paypoddina@gmail.com

Hi jsabino,

Please can you provide me some tips to dynamically set widgetindividual based on our condition.

Eg, widget1 – movable
widget3 – non movable

Widget sequence created dynamically.

Thanks in advance.

Regards
Deena

30 04 2013
how to get good with girls

It’s nearly impossible to find knowledgeable people for this topic, however, you seem like you know what you’re talking about!

Thanks

2 05 2013
Deena

Hi jsabino,

Please can you provide me some tips to dynamically set widgetindividual based on our condition.

Eg, widget1 – movable
widget3 – non movable

Widget sequence created dynamically.

Thanks in advance.

Regards
Deena

7 05 2013
www.seoorganics.net

I am regular visitor, how are you everybody?
This paragraph posted at this web page is truly good.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: