Difference between revisions of "Interface"
From Wikicliki
(→qTip) |
|||
Line 14: | Line 14: | ||
== qTip == | == qTip == | ||
− | <pre>$("#pam").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 about Prudential Asset Management', | content: 'Click here to find out more about Prudential Asset Management', | ||
− | style: { | + | style: { |
− | + | width: 100, | |
padding: 5, | padding: 5, | ||
− | background: '# | + | background: '#dddddd', |
color: 'black', | color: 'black', | ||
textAlign: 'center', | textAlign: 'center', | ||
border: { | border: { | ||
− | width: | + | width: 8, |
radius: 5, | radius: 5, | ||
color: '#dddddd' | color: '#dddddd' | ||
}, | }, | ||
tip: { | tip: { | ||
− | corner: ' | + | corner: 'topMiddle', |
}, | }, | ||
name: 'dark' | name: 'dark' | ||
}, | }, | ||
− | position: { adjust: { x: - | + | position: { adjust: { x: -105, y: -50 } }, |
+ | hide: { delay: 300 } | ||
}); | }); | ||
}); | }); | ||
+ | </script> | ||
</pre> | </pre> |
Revision as of 09:16, 16 June 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
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 about Prudential Asset Management', 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>