Difference between revisions of "Interface"
From Wikicliki
| (11 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
Minority report style interface: | Minority report style interface: | ||
http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html | 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 - [http://craigsworks.com/projects/qtip/ qTip] | [http://craigsworks.com/projects/simpletip Simpletip] | ||
| + | * Slideshow/Gallery - [http://slideshowpro.net/products/slideshowpro/slideshowpro_for_flash Slideshowpro] | ||
| + | * Wall | ||
| + | * Chunk Hopper - eg: http://www.treehugger.com/files/2009/12/aged-obama-poster-says-im-sorry.php#ch08 | ||
| + | |||
| + | [[Image:chunkhopper.png]] | ||
| + | |||
| + | == qTip == | ||
| + | |||
| + | <pre><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> | ||
| + | </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>
