Ajax Updates |
- jVal – jQuery Form Field Validation Plugin
- Ext JS Designer Preview
- jQuery maxImage plugin
- Drag to Share like Mashable using jQuery
| jVal – jQuery Form Field Validation Plugin Posted: 28 Oct 2009 11:46 AM PDT jVal is a jQuery form field validation plugin that provides an appealing animated message flyout that doesn't impede form layout/design while being user-friendly. * Current development version is only 8KB and 5.8KB minified Known Issues * There are known formatting issues when the container block with the form field is of a certain type, display:inline-block and TD elements work best with the current version  Related Listings:
| |||||
| Posted: 28 Oct 2009 11:23 AM PDT We are very excited to share our latest version of the Ext JS Designer. This new version adds many new features to improve your efficiency creating application designs. Once you get accustomed to these features its difficult to live without them. For those of you that don’t have the time or ability to download and play around with the Designer, we have created a Preview screencast in which we mock up some interfaces. We have tried to show off as much features and functionality as possible. New Features * Duplicating Components How many times have you copied and pasted a set of source code and/or configuration and modify a couple of values to save on some keystrokes? The designer now has the same ability by providing you the ability to duplicate sets of components and then modify their values. Take a look at this quick sample where I’ve leveraged the duplicate functionality to quickly build a form without dragging and dropping the components and setting up common configurations over and over. When developing you are capable of quickly changing a component from one class to another without losing your configurations by changing the class that you are extending from or instantiating. MyGrid = Ext.extend(Ext.grid.EditorGridPanel, { }); // or new Ext.grid.EditorGridPanel({ }); Developing in the designer should not be any different. If after creating a GridPanel I decide that I really meant to use an EditorGridPanel. I can right click on the component within the inspector and see which transformation options are available. A GridPanel can be transformed to an EditorGridPanel and vice-versa. If you make a mistake while putting together your application you can undo/redo the last change that was made via the Undo and Redo buttons in the top toolbar. A current limitation of this feature is that if you perform a transform on a top level component then the history is reset. Searching for ‘la’ in a Ext.form.FormPanel.A critical feature missing in prior releases was the ability to search configurations which are available to the component you have currently selected. In the past, if you were searching for a component configuration you had to look through the entire list available! The screenshot to the right demonstrates searching for the ‘la’ configuration in a FormPanel. You can now unset configurations by clicking on the x on the right hand side of the configuration. This is useful when you want to remove setting a configuration and not just set it to “”. * EditorGrid Auto-Update We are using Adobe AIR’s Auto Update framework to provide updates to the designer as we push out new public releases. When we release a new version you will be prompted to update to the latest version. You can expand out the “Release Notes” to see what enhancements and bug fixes have been made. Adobe AIR provides us the ability to quickly deploy updates to all of you as new versions are released seamlessly. One feature we wanted to implement within the designer was taking screenshots of your budding prototype directly within the application. Imagine this, you quickly mock up a borderlayout complete with tabs, a grid, and a form and then click the screenshot button. You can then choose to save the screenshot of the component you’ve just created as a PNG. We thought that this would probably be a simple task within AIR but ended up having to do quite some digging to figure out how to accomplish it. In order to create a screenshot of the applications current state we can use air.BitmapData to retrieve the raw bitmap data of the current screen by calling the draw method. var capture = new air.BitmapData( window.htmlLoader.stage.stageWidth, window.htmlLoader.stage.stageHeight); capture.draw( window.htmlLoader ); The contents of the variable capture now has the raw bitmap data of our entire application. We’d like to convert this into a modern format like PNG and save it to the file system. We will use PNGEncoder from as3corelib. You can compile and use any arbitrary actionscript code to a SWF and expose it to JavaScript within Adobe AIR by including it in the page by giving it a type of application/x-shockwave-flash. aaron@aaron-desktop:~/as3corelib-.92.1/src$ mxmlc -source-path=. com/adobe/images/PNGEncoder.as Loading configuration file /home/aaron/FlexSDK/frameworks/flex-config.xml /home/aaron/as3corelib-.92.1/src/com/adobe/images/PNGEncoder.swf (1242 bytes) You can then copy the file into your project and include the file: <script src="adobe/PNGEncoder.swf" type="application/x-shockwave-flash"></script> We can now encode the raw bitmap data and write it to the file system: var file = air.File.documentsDirectory.resolvePath('screenshot.png'); var stream = new air.FileStream(); // Encode image captured from air.BitmapData var png = window.runtime.com.adobe.images.PNGEncoder.encode( capture ); stream.open( file, air.FileMode.WRITE ); stream.writeBytes( png, 0, 0 ); stream.close(); When you import classes from ActionScript into your HTML App they will immediately be placed in the window.runtime namespace with their appropriate package namespaces. Therefore our class com.adobe.images.PNGEncoder is placed in window.runtime.com.adobe.images.PNGEncoder. (As an aside this is all AIRAliases.js file which you include simply provides smaller aliases from window.runtime into the air namespace.) When taking the screenshot we also use a clipping rectangle and the copyPixels method to to grab only the bounding rectangle of the currently active component. We’ve added lots of features which should improve your productivity when building user interfaces with the designer. We hope you like our progress and as always we greatly appreciate your feedback. For those of you that have suggestions, questions, found bugs, or just want to make a remark, we are listening. Related Listings:
| |||||
| Posted: 28 Oct 2009 10:51 AM PDT This plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options. Change the size of your browser to see it’s effect. Download it, try it, let me know what you think. I have tested it and with a little massaging it works in IE7 & IE6. These are the editable options with their defaults first: maxFollows: ('both'|'height'|'width'), verticalOffset:(0), horizontalOffset:(0), leftSpace:(0), topSpace:(0), rightSpace:(0), bottomSpace:(0), position:('absolute'|'relative'), isBackground:(false|true), zIndex:(-10), verticalAlign:('top'|'bottom'), horizontalAlign:('left'|'right'), maxAtOrigImageSize:(false|true), slideShow(false|true), slideDelay(5), slideShowTitle(true|false), loaderClass('loader') and now and now 'resizeMsg({show:true|false, location:before|after,message:'Original [h]h [w]w'}). Related Listings:
| |||||
| Drag to Share like Mashable using jQuery Posted: 28 Oct 2009 10:22 AM PDT Anyone who visited Mashable lately, the popular social news website, might have seen the “drag to share” functionality which appears when hovering an image. It is a smart technique which encourages visitors to share a story by offering a quite fun usage. It makes use of the draggable & droppable components of jQuery UI to make drag'n dropping & targeting objects possible. Getting Started The latest version of jQuery comes with jQuery UI and in this example we only need the core, draggable and droppable components, so make sure only these are selected in the download builder. Once the jQuery UI archive has been downloaded, unpack the js folder from the archive (we don't need the development bundle or CSS framework in this example) in a working folder. Now let's create a basic page, with some text and an image on it, to showcase the behaviour; create the following new page in your code editor: < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Drag to Share Example</title> <link rel="stylesheet" type="text/css" href="dragToShare.css"> </link></meta></head> <body> <p>Lorem ipsum dolor...</p> <img src="rover.png" alt="Mars Rover"/> <p>Lorem ipsum dolor...</p> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> </body> </html> Save this as dragToShare.html in the folder with the js folder in it. Here we've added our layout/example text and an image, both within a container. We're linking to the jQuery and jQuery UI source files at the bottom of the < body > and a custom style sheet in the < head >. We don't need many styles at this point as there isn't much on the page to actually style, but let's add it next anyway with some basic styles for the page elements in it; in a new file in your code editor add the following: #content { width:440px; } #content img { float:right; margin-left:20px; } Save this tiny file as dragToShare.css in the same folder as our HTML page. Don't worry, we'll be adding some more styles to the style sheet very shortly. Our example page should look like this at this point: We need to make the image draggable, which we can do with jQuery UI, add the following < script > element after the others: <script type="text/javascript"> $(function() { var images = $("#content img"), title = $("title").text() || document.title; //make images draggable images.draggable(); }); </script> That's all we need to do! We just cache the selector for the element(s) that we'd like to make draggable, and call the draggable() method on the resulting collection of elements. Now by clicking and holding the mouse button, the image in our example can be dragged around the page. The image will be made draggable as soon as the document is loaded as our code is wrapped in the $(function(){}) shortcut. As well as caching the selector that returns our images, we're also caching a selector that stores the title of the page. IE returns an empty string when using jQuery to retrieve the page title so we revert to document.title in this case. 1. .ui-draggable { cursor:move; } We're targeting the class .ui-draggable which is added by jQuery UI with this style so that the image will only inherit the move cursor if the image is made draggable, which won't happen if JavaScript is switched off or otherwise unavailable. Using the class name instead of the :hover pseudo class is also much better for cross-browser compatibility. var createTip = function(e) { //create tool tip if it doesn't exist ($("#tip").length === 0) ? \/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null; }; images.bind("mouseenter", createTip); images.mousemove(function(e) { //move tooltip $("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 }); }); images.mouseleave(function() { //remove tooltip $("#tip").remove(); }); We've basically added three new event handlers to our code; the first event handler is the createTip function, which is defined as a variable and passed to jQuery's bind() method along with the string mouseenter specifying the event. The next two functions are anonymous and are passed inline to jQuery's mousemove() and mouseleave() helper methods. In the createTip function we first check whether the tooltip already exists by seeing if a selector for it has a length of 0. If it does (have a length of 0) we know it doesn't exist and can then create it. We set the innerHTML of the tooltip so that it features a span containing the message to the visitor, and a second empty span which we'll use for a little decoration when we add the additional CSS in a moment. We give the tooltip an id so that we can select it efficiently later on and set its CSS left and top properties using the pageX and pageY properties from the event object (e) which is passed to our function automatically. We then append the tooltip to the body of the page and fade it in slowly. To avoid HTML errors, we need to escape the forward-slashes in the raw HTML we add to the tooltip. The mousemove function is used to make the tooltip track with the pointer, so when the pointer moves, the tooltip moves with it. We use the css method again as well as the pageX and pageY properties. Finally, the mouseleave function simply removes the tooltip from the page. 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.