Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Entries Tagged as 'Widget'

Google Charts API

Posted by Don Albrecht

Yellow line chartOutsource your charting to Google!  Yesterday I discussed my initial experiences with the Flot charting library.   Today, I’m going to give you a brief introduction to the excellent new Google Charting API.How it works, simply embed an image tag in your source that references the google chart API location followed by a set of parameters specifying the actual chart.  Google then renders the chart as a PNG that can be displayed in the browser.Features:

 

Parameter Line chart Scatter plot Bar chart Venn diagram Pie chart 
Chart title Yes Yes Yes Yes Yes
Chart legend Yes Yes Yes Yes Yes
Colors Yes Yes Yes Yes Yes
Chart and background fill Yes Yes Yes Yes Yes
Multiple axis labels Yes Yes Yes    
Grid lines Yes Yes      
Shape markers Yes Yes      
Horizontal range markers Yes Yes      
Vertical range markers Yes Yes      
Line styles Yes        
Fill area Yes        
Pie chart labels         Yes

24 Hours with Flot

Posted by Don Albrecht

flot2.pngAlright, So Flot 0.1 has been out in the wild for just under 2 days now and it’s gotten some pretty decent traction with the Ajax blogs.  I’ve taken some time over the past 24 hours to work with the library and I have to say, It’s pretty awesome. Highlights:  

  • The presets really are excellent , simple charts are very little work.
  • The charts look great, the integrated support for shadows & alpha channels really makes them shine
  • The underlying architecture is excellent.  I’ve been able to get under the hood and add needed features without any major headaches. 
  • jQuery based

Shown: A chart created with a modified version of Flot with normal range highlighted. You can get flot at: http://code.google.com/p/flot/

ExtJS 2.0 Released

Posted by Don Albrecht

It’s official, ExtJS 2.0 has landed.  ExtJS is one of the best toolkits out there for achieving ajax applications that rival desktop applications in interface richness.  Some of the new features in 2.0.

  •  Grouping & Group Summary fields: Allows you to group related grid items and create summary rows.  Data sorts within each group set instead of across the grid.
  • Scrolling tabs: You can now optimize screen Real Estate by allowing tabs to scroll off the tab par (Ala firefox)
  • Anchor Layouts: Tack the dimensions of form elements to their parent container.
  • Column Tree: The best of both worlds, integrate the powerful extjs grid & tree widgets

I should also point out that ExtJS continues its tradition of excellent documentation with a new API documentation center and rich set of demo applications to work from.   Check out ExtJS 2.0 here:http://extjs.com/blog/2007/12/04/ext-20-final-released/

A New Version of Proto.Menu has landed

Posted by Don Albrecht

Proto.Menu .5
 Proto.Menu is an amazing prototype based context menu.  It’s packaged as a prototype extension and is quite honestly, one of the best ways to through a context menu into the mix on your next project.Features:  

  • iFrame Shim so IE6 plays nice
  • explicit z-Index control
  • Callbacks (”beforeShow”, “beforeHide”, “beforeSelect”)
  • Improved Callbacks for Menu Items
  • “className” option
  • Semantic Markup

You can find the new version here: http://thinkweb2.com/projects/prototype/2007/12/03/protomenu-gets-facelift/ P.S.Whether or not you use prototype in your development process, I encourage all of you to take a few minutes and read  Kangax’s excellent write up of the release.  It’s a valuable look into the decision process that went into making an excellent widget significantly better.  

Coda Slider 1.1.1 Has Landed

Posted by Don Albrecht

Coda 1.1.1

Niall Doherty just released a minor update to the powerful & sexy jQuery CodaSlider widget. The version 1.1.1 release increases the visual styling capabilities of the widget by adding more css support.

Not a major update, but the drop in nature and dramatically increased styling ability make this an obvious addition to any projects currently using the widget.

Get it at ndoherty.com:

Edit In Place with Tiny MCE, Prototype & Scriptaculous

Posted by Don Albrecht

Edit in Place rich text areas has been a bit of a holy grail for me lately. Several of my project call for the ability to provide rich text on demand.  You can already do this with the YUI rich text editor using some positioning magic.  In this Prototype extension,  the entire rich text area toggles to replace the inline content.

Rails support is provided out of the box.

Check it out here:  http://inplacericheditor.box.re/

Via: Scripteka

Slick CSS Based Menu From CSS Play

Posted by Don Albrecht

CSSPlay Pro Menu

Stu Nicolls released this excellent CSS menu.  It’s javascript free and provides incredibly rich interaction for something solely CSS based.

Check it out here: http://www.cssplay.co.uk/menus/pro_drop6#nogo53 

Image Cropper, Smooth Ajax Based Image Cropping for Prototype

Posted by Don Albrecht

 Prototype Image Cropper

David Spurr’s Image Cropper is a powerful and easy to use widget for image cropping.

Some Features:

  •  Un-obtrusive
  • Selection can be moved & resized
  • Drag & Drop interface
  • Size can be restricted to ratio
  • Size can be restricted to minimum dimensions
  • Size can be restricted to maximum dimensions
  • Dynamic Preview
  • All operations bounded by image

Get it here: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Spectacular, Unobtrusive Table Script From Frequency Decoder

Posted by Don Albrecht

Frequency Decoder Table

Following in his tradition of delivering, simple, easy to use widgets for beautiful design driven development, Brian McAllister has released this spectacular table widget.

Here are some of the key features:

Check it out at http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script

A Lightweight Rich Text Editor in jQuery

Posted by Don Albrecht

jQuery RTE

As excellent as Xinha, YUI RTE, Tiny MCE, FCK & the other heavyweight Rich Text Widgets are, they can be massive overkill for many projects Weighing in at only 7k (uncompressed). This jQuery Editor is an incredibly light weight and responsive alternative to the big guns for most projects.

Features:

  • Stylesheet based formatting
  • Image support
  • Link Support
  • Strong, emphasis
  • Bulleted list
  • Source view

Supported Browsers

  • IE6+
  • Safari 3+
  • Firefox
  • Opera

Check it out online here:

http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html