Difference between revisions of "Interface"
From Wikicliki
(One intermediate revision by the same user not shown) | |||
Line 13: | Line 13: | ||
* Wall | * Wall | ||
* Chunk Hopper - eg: http://www.treehugger.com/files/2009/12/aged-obama-poster-says-im-sorry.php#ch08 | * Chunk Hopper - eg: http://www.treehugger.com/files/2009/12/aged-obama-poster-says-im-sorry.php#ch08 | ||
+ | |||
+ | [[Image:chunkhopper.png]] | ||
== qTip == | == qTip == | ||
Line 48: | Line 50: | ||
</script> | </script> | ||
</pre> | </pre> | ||
+ | |||
+ | |||
+ | ==Accordian == | ||
+ | |||
+ | <pre><script language="javascript" type="text/javascript"> | ||
+ | $('#tblAc').accordion({ | ||
+ | active: false, | ||
+ | header: '.cs_ac_header', | ||
+ | autoheight: false | ||
+ | }); | ||
+ | $('.cs_ac_content').eq(0).show(); // this is for selecting the first item (eq) | ||
+ | </script> </pre> |
Latest revision as of 02:21, 10 December 2009
An interface defines the communication boundary between two entities, such as a piece of software, a hardware device, or a user. It generally refers to an abstraction that an entity provides of itself to the outside.
Minority report style interface: http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html
Interface ideas
- Carousel - Actionscript Carousel, jQuery Carousel
- Accordian
- Corner - see the top right hand corner of http://sorgalla.com/jcarousel/ (jquery)
- Tool tip - qTip | Simpletip
- Slideshow/Gallery - Slideshowpro
- Wall
- Chunk Hopper - eg: http://www.treehugger.com/files/2009/12/aged-obama-poster-says-im-sorry.php#ch08
qTip
<link rel="stylesheet" href="css/lightbox.css" type="text/css" /> <style> .qtip-content {font-family:arial; font-size:11px} </style> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#pam").qtip({ content: 'Click here to find out more', style: { width: 100, padding: 5, background: '#dddddd', color: 'black', textAlign: 'center', border: { width: 8, radius: 5, color: '#dddddd' }, tip: { corner: 'topMiddle', }, name: 'dark' }, position: { adjust: { x: -105, y: -50 } }, hide: { delay: 300 } }); }); </script>
Accordian
<script language="javascript" type="text/javascript"> $('#tblAc').accordion({ active: false, header: '.cs_ac_header', autoheight: false }); $('.cs_ac_content').eq(0).show(); // this is for selecting the first item (eq) </script>