A simple example of tinyMCE integration is
theme : “advanced”,
elements : “elm1”,
theme_advanced_toolbar_location : “top”,
theme_advanced_buttons1 : “bold,italic,underline,strikethrough,separator,”
theme_advanced_buttons2 : “link,unlink,anchor,image,separator,”
theme_advanced_buttons3 : “”,
<textarea id=“elm1” name=“elm1” rows=“15” cols=“80”><?php echo $sContent;?></textarea>
In the code sample above first we are actually including tinyMCE.js in the next line we are calling tinyMCE init method to initialise tinyMCE and we pass some parameters on the basis of what behaviour we expect. The most noticeable property is “elements” which defines which textarea element needs to be converted into a tinyMCE control.
Colorbox is a customizable lightbox. Lightboxes can be used in several ways.
1. In Showing Image SlideShows.
2. In preventing popup windows and providing a better alternative for showing intermediate warnings, confirmations or extra information.
I came to know about FFMPEG.exe in one of the joomla components “seyret” which is basically a component for uploading,downloading, playing of Multimedia files. In its core seryret uses ffmpeg.exe for conversion of one video format to another and for creation of thumbnails for videos and images. Since joomla is a php cms it uses shell_exec command to execute a ffmpeg.exe command.
An example of ffmpeg command line is:
ffmpeg.exe -i “imageLarge.jpg” -y -f mjpeg -s 72×92 -vframes 1 -an thumbnail7292.jpg
As the command suggests a larger image’s thumbnail of size 72*92 is generated in this command.
Another example where conversion from one video format to other happens
ffmpeg.exe -i video1.avi -ab 56 -ar 44100 -b 200 -r 15 -s 320×240 -f flv video2.flv
The command converts avi format to flv format.
While searching Content on Google you start getting Suggestions based on what you are typing this helps users in many ways, A user can have certain words on mind and he is not aware of exactly what to type AutoSuggest helps him certain matching results based on what he has typed and eases the search. Search as you Type or as popularly called SAYT is an open source script from Google which provides Auto Suggest behavior the SAYT implementation guide is available at http://code.google.com/p/search-as-you-type/wiki/SearchAsYouTypeInstallationGuide . Another similar implementation is with jQuery UI plugin and is called AutoComplete.
We wanted our users to rate articles contributed by business and we wanted the rating system to be natural and intuitive.
We found star rating control as a wonderful idea for doing this.
7.Date-picker or Calendar ControlWhen on a HTML form you need your user to enter date in a particular format. It’s better to provide him a date control jQuery-UI provides a comprehensive api for using date control and using its variations in different ways.
We are having a metrics site which shows some tabular data in a grid. Quite recently we had to modify some of the information in this grid and we found that the grid is basically a jQuery plugin named flexigrid, what I found wonderful about flexigrid was its clean approach for fetching and populating data inside it. Flexigrid has a Constructor in which a settings object is passed. Settings object takes several parameters important of which are “URL” which tells which url to hit for getting the data. “dataType” which tells what kind of dataType its expecting like JSON XML etc.
Carousels are great UI component to show a series of thumbnails in a small space on your web page. Several JS Libraries provides implementation of Carousels. The one we have used is from jQuery http://plugins.jquery.com/project/uicarousel .
Graph are great way of doing quick analysis of your data to gain to understand trends and retrieve information. There are various api’s available in different programming languages for drawing graphs based on certain input parameters like in php we have API’s like jpgraph and graphpite in java we have JgraphT and EasyCharts. We used jQuery’s sparkline plugin for creating graph.