Ajax Updates |
- Notimoo: Growl-Like Notifications With MooTools
- TinyTable V3: Advanced JavaScript Table Sorter
- Mootools Ajax Calendar (Vista-Like)
- Customizable jQuery Gallery Plugin: Ad Gallery
- Ajax Standard Tabs Module
- AJAX Tab Module – Closeable Implementation
- Ajax Tabbed Page Interface
- Ajax Dynamic Tab Panes
| Notimoo: Growl-Like Notifications With MooTools Posted: 20 Nov 2009 12:35 PM PST Notimoo is a lightweight MooTools plugin (4kb) for displaying growl-like notifications. It comes with several options for a better customization of “how the plugin functions”.  Related Listings:
| |||||
| TinyTable V3: Advanced JavaScript Table Sorter Posted: 20 Nov 2009 12:27 PM PST TinyTable, a lightweight JavaScript table sorter that was featured before, has its 3rd version released. The new version has fresh features like: search, column averages and totals, record numbering, a view all & a reset function. Since using tables is still the best option to display tabular data, it is a must-bookmark. var sorter = new TINY.table.sorter('sorter','table',{ headclass:'head', // Header Class // ascclass:'asc', // Ascending Class // descclass:'desc', // Descending Class // evenclass:'evenrow', // Even Row Class // oddclass:'oddrow', // Odd Row Class // evenselclass:'evenselected', // Even Selected Column Class // oddselclass:'oddselected', // Odd Selected Column Class // paginate:true, // Paginate? (true or false) // size:10, // Initial Page Size // colddid:'columns', // Columns Dropdown ID (optional) // currentid:'currentpage', // Current Page ID (optional) // totalid:'totalpages', // Current Page ID (optional) // startingrecid:'startrecord', // Starting Record ID (optional) // endingrecid:'endrecord', // Ending Record ID (optional) // totalrecid:'totalrecords', // Total Records ID (optional) // hoverid:'selectedrow', // Hover Row ID (optional) // pageddid:'pagedropdown', // Page Dropdown ID (optional) // navid:'tablenav', // Table Navigation ID (optional) // sortcolumn:1, // Index of Initial Column to Sort (optional) // sortdir:1, // Sort Direction (1 or -1) // sum:[8], // Index of Columns to Sum (optional) // avg:[6,7,8,9], // Index of Columns to Average (optional) // columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}], // Sorted Column Settings (optional) // init:true // Init Now? (true or false) // }); Related Listings:
| |||||
| Mootools Ajax Calendar (Vista-Like) Posted: 20 Nov 2009 12:21 PM PST Vista-like Ajax calendar is an unobtrusive, slick calendar script which looks and functions similar to the Vista taskbar calendar. It is built with Mootools and PHP and has datepicker functionality. Source: http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html Related Listings:
| |||||
| Customizable jQuery Gallery Plugin: Ad Gallery Posted: 20 Nov 2009 12:17 PM PST Ad Gallery is a jQuery plugin for creating an image gallery/showcase quickly. The plugin uses unordered lists & converts them by offering lots of options for a better customization. And, depending on the image size to be presented, it auto-arranges the dimensions of the “container div” for a better fit. Related Listings:
| |||||
| Posted: 20 Nov 2009 11:45 AM PST The Standard Tab widget provides standard features for a tab widget. (related blog post) * Uses event delegation The html markup for standard tabs looks like this: <div id="mTab" class="mTab" > <ul class="tab"> <li class="on"><a href="tabA.html" class="tab">Tab A</a> <div class="pane paneShow"> <p>Lorem ipsum</p> </div> </li> <li><a href="tabB.html" class="tab">Tab B</a> <div class="pane paneHide"> <p>Lorem ipsum</p> </div> </li> <li><a href="#tabC" class="tab">Tab C</a> <div class="pane paneHide"> <p>Lorem ipsum</p> </div> </li> </ul> </div> Configuration The initiating javascript looks like this: //Config object literal var mTabConfig = { bDoHilite : true, oHiliteArgs : { from:"00be00", to:"9eff9e", duration:1, bTransparent:true, fEase:(YAHOO.util.Easing) ? YAHOO.util.Easing.easeOut : null } }; //instantiate object mTab = new YAHOO.NT.TabsModule('mTab',mTabConfig); //add listeners (optional) mTab.addListener('TabAdded',exampleHandler); mTab.addListener('TabRemoved',exampleHandler); mTab.addListener('TabActivated',exampleHandler); mTab.addListener('TabDeactivated',exampleHandler); Related Listings:
| |||||
| AJAX Tab Module – Closeable Implementation Posted: 20 Nov 2009 11:39 AM PST The Closeable Tab widget allows tabs to be removed. (related blog post) * Implements the Fadeout pattern An Example : Click on the close icon to remove a tab. Note: At the moment, it is possible to close all tabs, which results in a module with no tabs. A possible solution for this is to remove the module once all tabs have been closed. This example is also draggable, using the draggable specific initialisation properties. Markup The html markup for closeable tabs is exactly the same as standard tabs and looks like this: <div id="mTab" class="mTab" > <ul class="tab"> <li class="on"><a href="tabA.html" class="tab">Tab A</a> <div class="pane paneShow"> <p>Lorem ipsum</p> </div> </li> <li><a href="tabB.html" class="tab">Tab B</a> <div class="pane paneHide"> <p>Lorem ipsum</p> </div> </li> <li><a href="#tabC" class="tab">Tab C</a> <div class="pane paneHide"> <p>Lorem ipsum</p> </div> </li> </ul> </div> Configuration The initiating javascript looks like this: //Config object literal var mTabConfig = { bDoHilite : true, oHiliteArgs : { from:"00be00", to:"9eff9e", duration:1, bTransparent:true, fEase:(YAHOO.util.Easing) ? YAHOO.util.Easing.easeOut : null }, bCloseable:true, //denotes tabs are to be closeable sCloseIconClass:YAHOO.NT.TabsModule.CSS_CLOSE_ICON, bDoFadeOut:false }; //instantiate object mTab = new YAHOO.NT.TabsModule('mTab-closeable',mTabConfig); //add listeners (optional) mTab.addListener('TabAdded',exampleHandler); mTab.addListener('TabRemoved',exampleHandler); mTab.addListener('TabActivated',exampleHandler); mTab.addListener('TabDeactivated',exampleHandler); Related Listings:
| |||||
| Posted: 20 Nov 2009 11:30 AM PST There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages. We are going to use the AHAH functions described in the Metatag Grabber project to implement the interface. The pages themselves are simply styled via CSS: The structure of the tab system contains an unordered list containing the tabs (each tab being a list item) and a DIV containing the content: <ul id="tabmenu" > <li onclick="makeactive(1)"><a class="" id="tab1">First Page</a></li> <li onclick="makeactive(2)"><a class="" id="tab2">Second Page</a></li> <li onclick="makeactive(3)"><a class="" id="tab3">Third Page</a></li> </ul> <div id="content"></div> Note that the list element and the content both have an id defined, while the list items themselves have a class which is initially set to null, and a unique id (tab1, tab2,….). When a user clicks on a pagetab, we want to make that pagetab ‘active’ and show the associated content. We do this via the makeactive() function attached to the onClick event handler of the relevant list item. Let’s have a look at the code in the head section of the page: <script language="JavaScript" type="text/javascript" src="ahahLib.js"></script> <script language="JavaScript" type="text/javascript"> function makeactive(tab) { document.getElementById("tab1").className = ""; document.getElementById("tab2").className = ""; document.getElementById("tab3").className = ""; document.getElementById("tab"+tab).className = "active"; callAHAH('content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error'); } </script> The first line includes the ahahLib.js file containing the AHAH functions. This is described in the Metatag Grabber Project. Next we have the makeactive function, called when a pagetab is clicked. The first three lines reset the class names of all pagetab to be null. Obviously, if we had more pagetab in our interface, we’d include extra lines here in the same format. Next we must change the class of the clicked pagetab to ‘active’. Since the pagetabs (the list items) have ids of ‘tab1′, ‘tab2′ and so on, we can construct the id of the required pagetab using the tab parameter which has been passed to the function. CSS is then used to change how the pagetab appears, based on the new class definition. In order to display the required content, we can now call our Ajax function, passing the number of the required pagetab as a suffix to the URL. Here’s our server-side PHP routine, content.php: if ($_GET['content'] == 1) { echo 'Content for Page 1'; } if ($_GET['content'] == 2) { echo 'Content for Page 2'; } if ($_GET['content'] == 3) { echo 'Content For Page 3'; } Finally, let’s have a look at the CSS for the tabbed interface: pre {text-indent: 30px} #tabmenu { color: #000; border-bottom: 1px solid black; margin: 12px 0px 0px 0px; padding: 0px; z-index: 1; padding-left: 10px } #tabmenu li { display: inline; overflow: hidden; list-style-type: none; } #tabmenu a, a.active { color: #aaaaaa; background: #295229; font: normal 1em verdana, Arial, sans-serif; border: 1px solid black; padding: 2px 5px 0px 5px; margin: 0px; text-decoration: none; cursor:hand; } #tabmenu a.active { background: #ffffff; border-bottom: 3px solid #ffffff; } #tabmenu a:hover { color: #fff; background: #ADC09F; } #tabmenu a:visited { color: #E8E9BE; } #tabmenu a.active:hover { background: #ffffff; color: #DEDECF; } #content {font: 0.9em/1.3em verdana, sans-serif; text-align: justify; background: #ffffff; padding: 20px; border: 1px solid black; border-top: none; z-index: 2; } #content a { text-decoration: none; color: #E8E9BE; } #content a:hover { background: #aaaaaa; } Related Listings:
| |||||
| Posted: 20 Nov 2009 09:06 AM PST The latest two versions of Tab Panes by DHTMLGoodies, with Close-Buttons: Configuration It’s easy to configure this script. You put your content into separate <DIV>s and then call a javascript function which creates the tabs dynamically. <div id="dhtmlgoodies_tabView1"> <div class="dhtmlgoodies_aTab"> Content of tab 1 </div> <div class="dhtmlgoodies_aTab"> Content of tab 2 </div> <div class="dhtmlgoodies_aTab"> Content of tab 3 </div> <div class="dhtmlgoodies_aTab"> Content of tab 4 </div> </div> <script type="text/javascript"> initTabs(Array('Menu scripts','Calender', 'Menus','About us'),1,500,400); </script> < div id="dhtmlgoodies_tabView1" > is parent to the content of all your tabs. Inside it, you have one for each tab window. Put the content of your tabs inside them. You initialize the script by calling the initTabs() function. Arguments sent to this are: * ID of parent element, example: dhtmlgoodies_tabView1 Create new tab dynamically You can call the function createNewTab() when you need to create a new tab dynamically. Arguments to this functions are: * Tab title = Tab title as string Remove a tab You can remove a tab by calling the function deleteTab(tabTitle). Input to this function is the label of the tab you want to remove, example: deleteTab('Menu scripts'); Add content dynamically to one of the tabs You can use the function addAjaxContentToTab to add content from an external file dynamically to one of the tabs. This function takes two arguments: 1. Title of tab, example: “Menu scripts” Example: <a href="#" onclick="addAjaxContentToTab('Menu scripts','includes/external.inc');return false">Add content</a><a> Doctype: There’s also a variable you have to modify if you’re not using a valid doctype in your document. This is needed for the tabs to display correctly in Internet Explorer. The doctype is specified in the first line of your code. Example: < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> If no doctype is specified in your document, change the variable strictDocType from true to false. I.e.: var strictDocType = false; Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.