Axure Design Pattern Library
acleandesign.com
 
Advanced Widgets
These advanced widgets showcase the true usefulness of Axure in prototyping.  Many widgets require the creation of Variables in the wireframe.  Widgets using a Variable are noted below.
 
Calendar
Embedded Video
Expand / Collapse Animation
Inline Edit
Lightbox
Live Search
Photo Scroller
Post a Message
Rating
Tabs
< Back to Main
On this page you'll find:
Calendar
 
Su
Mo
Tu
We
Th
Fr
Sa
September 2008
 
 
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
Useful for selecting dates.  It is very difficult to raise a separate event for each day the user might click on, so it raises a generic event.
 
Embedded Video
This shows the wild-card in Axure: iFrames.  You can create your own page and insert it in an iframe.  The example here shows embedding a YouTube video in an iframe.
Youtube Video: Just an iFrame, pointed in the right direction.
 
Expand / Collapse Animation
With the new "Move Panel" and "Wait Time" interactions in Axure RP Pro version 5, animations are made possible (but not simple).  Every frame of animation must be hand-coded.  Still, animation can sell the whole prototype when shown to a user or client.
 
Expanding Box
 
This content moves based on the expansion above.
To make animation:
In the first Case of your Interaction, check for a condition that's always true.
(OnLoadVariable="" if you haven't changed it, or, make a new variable like True="")
 
Add new Cases for each step of animation, using the "Wait Time" property.
These times are independent of each other.
 
Right click each new Case and change to "IF", instead of "Else IF"
 
Use the Move Panel to incrementally move your object.
It's usually easier to move "By" instead of "To" in terms of pixels.
 
On the last frame (Case), show the hidden panel.
 
 
Inline Edit
A relatively simple inline edit function, used in many AJAX-y interactions on the web.
This widget requires a custom Variable to pass the submitted text into the title itself.
Photo Name
 
Lorem ipsum dolor sit amet.
 
Lightbox
With the new translucent background fills, we can easily create Lightbox type functionality for showing modal popups.  This example also incorporates a two-stage animation to show asynchronous loading.
 
Clicking the image thumbnail will produce a Lightbox. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ac mauris. Quisque eget metus eget tellus ultrices rhoncus. Phasellus id lacus semper lacus suscipit pretium. Nulla mollis ligula id tellus. Duis ac libero. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sodales lacus a risus. Sed quis lectus. Morbi condimentum nulla non purus. Praesent a mauris. Sed faucibus aliquam ipsum. Nam sit amet velit. Morbi tincidunt ultrices lacus. Aliquam vehicula adipiscing leo. In vel arcu. Nullam vitae nisi interdum nibh mollis cursus.

Etiam mollis commodo tellus. Nullam ultricies dui eu diam. Praesent scelerisque varius diam. Sed venenatis porta quam. Nam lacinia. Proin quis sem. Praesent ultrices imperdiet tellus. Maecenas dictum. Fusce lorem. Nulla facilisi. Praesent fringilla fermentum nulla.
 
This is a page full of content.
Preview
 
Live Search
Live search is becoming a standard of the interactive Web.  This widget shows off live search behavior, but lacks keyboard support (pressing down arrow to move through choices, esc to close) and only works on canned strings; here, "crabby".
Live Search works for the string "crabby"
http://www.artandtech.com/type-ahead/type-ahead/type-ahead.html
Technique developed by Ezra Schwartz at:
 
Photo Scroller
Scrolls through a list of images or other objects, which can be clicked to show in larger detail.
Prototype developed by Andrea at Axure
Picture 1
 
First picture
Pic 1
Previous
Next
 
 
Post a Message
Good for commenting, forum posts, status updates, or any other user posting system.  This implementation is only set up to show a single post, but more can be added.  This example uses a two stage animation to temporarily highlight the new post.
Keep in mind that this whole page is an Axure-generated HTML document
This widget requires a custom Variable to pass the submitted text into the post.
Post a Message
Messages
Joe, 12:45p, 8/31/2008
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lisa, 11:15a, 8/31/2008
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolores, 7:39p, 8/30/2008
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
Rating
Rate content.  This one is a great candidate for using Rasied Events to create different behavior across different screens.
 
Rate This:
 
 
 
 
 
Tabs
A simple tab widget for dynamic tabbed content.
Tab 3
Tab 2
 
Tab 1
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
< Back to Main
Version 2