ZombieUI
All UI elements are built using Prototype.js and Scriptaculous
Instructions:
1: Click link to left.
2: Read Documentation
Also, stuff here is still very early in development so not everything is ready.. in fact a lot is missing. Aaaaand I've used a lot of CSS3 features so if things look wonky, try a webkit browser for now.
Modal
Just your plain old Modal Window with an optional lightbox effect. Offers support to make a lightbox style gallery,
show modal notifications and make ajax calls and lots more. Docs below.
Demos
Normal Modal |
Modal.Notify |
Modal.Confirm |
Modal.Image
Installation
You will need to include modal.js and modal.css. And because it's built
on prototype and scriptaculous you'll need those too. So go ahead and add this to your <head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/modal.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/modal.css"/>
Creating a normal Modal Window
//the options in Modal.initialize() are all optional.
//Full list of options below
var myModal = new Modal({
title: 'Tada!',
width: '400px',
effect: 'appear',
effectDuration: 0.5,
overlayID: 'myModalOverlay',
});
//add some content to the modal
myModal.update("<p>Some content.. can be any HTML, Text or HTML element</p>");
//and show it
myModal.show();
The options for the normal Modal
id: 'modal', //the HTML ID of the modal window
overlayID: 'overlay', //the HTML ID of the overlay
className: 'modal', //class-name for the modal window
overlay: true, //display the overlay
width: 'auto', //width of the modal window
height: 'auto', //height of the modal window
title: '', //title of the modal window
overlayColor: '#000000', //the color of the overlay
overlayOpacity: 0.8, //the opacity of the overlay
effect: 'appear', //show/hide animation, can be blind|slide|appear
effectDuration: 0.5, //animation duration for show/hide
closeOnOverlay: true, //hide modal when user clicks overlay?
hasCloseButton: false, //display close button in upper right corner of modal
vertical: 'center' //modal window's vertical alignement. top|center|bottom
Notification
Alright, the notification is finally written. And looks pretty good for now.
Demo
Just show me a notification or better yet, show me a notification that will auto-hide in 3 seconds
Selectbox
The selectbox is still very buggy and not at all optimized. But it does support clicking options and
selecting options with down/up arrows.
Tooltip
The tooltip is the simplest UI-element to implement. Hover over me for a demo
Demos
Hover over this link.. and that image
Installation
you will need prototype.js, tooltip.js and tooltip.css for this.
also, make sure the file-paths are all right.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/tooltip.css"/>
Using it
You can use it on any element really. Just add a rel="tooltip" and alt="my text" tag to it
//the title and body of the tooltip are seperated by a vertical bar (|)
//if there is no vertical bar there will only be a body
<img src="myimage.png" rel="tooltip" alt="This text will show up in the tooltip">
<a href="mypage.html" rel="tooltip" alt="click here|to go to my site">