diff options
| author | vdigital <vdigital@piwigo.org> | 2008-07-21 22:20:47 +0000 |
|---|---|---|
| committer | vdigital <vdigital@piwigo.org> | 2008-07-21 22:20:47 +0000 |
| commit | 60b7843d3a9117694ae5803d5c77e7cb1232183c (patch) | |
| tree | d3c568d232bdfac121b8029a5d9da1db49ca6fb6 /plugins/SwiftThemeCreator/farbtastic/demo2.html | |
| parent | 82148244e442a1dbe72975814ca4c0a59bbcd42f (diff) | |
New standard plugin: Swift Theme Creator (Create new theme elements which can be manually updated later).
git-svn-id: http://piwigo.org/svn/trunk@2445 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'plugins/SwiftThemeCreator/farbtastic/demo2.html')
| -rw-r--r-- | plugins/SwiftThemeCreator/farbtastic/demo2.html | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/plugins/SwiftThemeCreator/farbtastic/demo2.html b/plugins/SwiftThemeCreator/farbtastic/demo2.html new file mode 100644 index 000000000..59a93257a --- /dev/null +++ b/plugins/SwiftThemeCreator/farbtastic/demo2.html @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html> +<head> + <title>Farbtastic</title> + <script type="text/javascript" src="jquery.js"></script> + <script type="text/javascript" src="farbtastic.js"></script> + <link rel="stylesheet" href="farbtastic.css" type="text/css" /> + <style type="text/css" media="screen"> + .colorwell { + border: 2px solid #fff; + width: 6em; + text-align: center; + cursor: pointer; + } + body .colorwell-selected { + border: 2px solid #000; + font-weight: bold; + } + </style> + + <script type="text/javascript" charset="utf-8"> + $(document).ready(function() { + $('#demo').hide(); + var f = $.farbtastic('#picker'); + var p = $('#picker').css('opacity', 0.25); + var selected; + $('.colorwell') + .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); }) + .focus(function() { + if (selected) { + $(selected).css('opacity', 0.75).removeClass('colorwell-selected'); + } + f.linkTo(this); + p.css('opacity', 1); + $(selected = this).css('opacity', 1).addClass('colorwell-selected'); + }); + }); + </script> +</head> +<body> +<h1>jQuery Color Picker: Farbtastic</h1> + +<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div> + +<form action="" style="width: 500px;"> + <div id="picker" style="float: right;"></div> + <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div> + <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div> + <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div> + +</form> + +<p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p> +<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p> +</body> +</html> |