r2438 - watermark prototype
Author: joern.zaefferer
Date: Tue Apr 7 06:49:57 2009
New Revision: 2438
Added:
branches/dev/watermark/demos/watermark/
branches/dev/watermark/demos/watermark/default.html (contents, props
changed)
branches/dev/watermark/demos/watermark/from-label.html (contents,
props changed)
branches/dev/watermark/demos/watermark/index.html (contents, props
changed)
branches/dev/watermark/themes/base/ui.watermark.css
branches/dev/watermark/ui/ui.watermark.js
Modified:
branches/dev/watermark/demos/index.html
branches/dev/watermark/themes/base/ui.base.css
Log:
watermark prototype
Modified: branches/dev/watermark/demos/index.html
==============================================================================
--- branches/dev/watermark/demos/index.html (original)
+++ branches/dev/watermark/demos/index.html Tue Apr 7 06:49:57 2009
@@ -19,6 +19,7 @@
<script type="text/javascript" src="../ui/ui.slider.js"></script>
<script type="text/javascript" src="../ui/ui.sortable.js"></script>
<script type="text/javascript" src="../ui/ui.tabs.js"></script>
+ <script type="text/javascript" src="../ui/ui.watermark.js"></script>
<script type="text/javascript" src="../ui/effects.core.js"></script>
<script type="text/javascript" src="../ui/effects.blind.js"></script>
<script type="text/javascript" src="../ui/effects.bounce.js"></script>
@@ -249,6 +250,7 @@
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
<dd><a href="tabs/index.html">Tabs</a></dd>
+ <dd><a href="watermark/index.html">Watermark</a></dd>
<dt>Effects</dt>
<dd><a href="addClass/index.html">Add Class</a></dd>
<dd><a href="removeClass/index.html">Remove Class</a></dd>
Added: branches/dev/watermark/demos/watermark/default.html
==============================================================================
--- (empty file)
+++ branches/dev/watermark/demos/watermark/default.html Tue Apr 7 06:49:57
2009
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Accordion - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.watermark.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(":text, :password").watermark();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<form id="loginform" autocomplete="off">
+ <fieldset>
+ <legend>Login</legend>
+ <div>
+ <label for="email">E-Mail Address</label>
+ <input type="text" id="email" name="email" placeholder="E-Mail" />
+ </div>
+ <div>
+ <label for="password">Your password</label>
+ <input type="password" id="password" name="password"
placeholder="Password" />
+ </div>
+ <input type="submit" />
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Click headers to expand/collapse content that is broken into logical
sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+
+
+The underlying HTML markup is a series of headers (H3 tags) and content
divs so the content is
+usable without JavaScript.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/dev/watermark/demos/watermark/from-label.html
==============================================================================
--- (empty file)
+++ branches/dev/watermark/demos/watermark/from-label.html Tue Apr 7
06:49:57 2009
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Accordion - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.watermark.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("input").watermark({
+ placeholder: function() {
+ return $("label[for=" + this.id + "]").hide().text();
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<form id="loginform" autocomplete="off">
+ <fieldset>
+ <legend>Login</legend>
+ <div>
+ <label for="email">E-Mail Address</label>
+ <input type="text" id="email" name="email" />
+ </div>
+ <div>
+ <label for="password">Your password</label>
+ <input type="password" id="password" name="password" />
+ </div>
+ <input type="submit" />
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Click headers to expand/collapse content that is broken into logical
sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+
+
+The underlying HTML markup is a series of headers (H3 tags) and content
divs so the content is
+usable without JavaScript.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/dev/watermark/demos/watermark/index.html
==============================================================================
--- (empty file)
+++ branches/dev/watermark/demos/watermark/index.html Tue Apr 7 06:49:57
2009
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Watermark Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+ <div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ <li><a href="from-label.html">From label</a></li>
+ </ul>
+ </div>
+</body>
+</html>
Modified: branches/dev/watermark/themes/base/ui.base.css
==============================================================================
--- branches/dev/watermark/themes/base/ui.base.css (original)
+++ branches/dev/watermark/themes/base/ui.base.css Tue Apr 7 06:49:57 2009
@@ -7,3 +7,4 @@
@import url("ui.resizable.css");
@import url("ui.slider.css");
@import url("ui.tabs.css");
+@import url("ui.watermark.css");
Added: branches/dev/watermark/themes/base/ui.watermark.css
==============================================================================
--- (empty file)
+++ branches/dev/watermark/themes/base/ui.watermark.css Tue Apr 7 06:49:57
2009
@@ -0,0 +1,4 @@
+/* Watermark
+----------------------------------*/
+.ui-watermark-container { position: relative; }
+.ui-watermark-label { position: absolute; cursor: text; }
\ No newline at end of file
Added: branches/dev/watermark/ui/ui.watermark.js
==============================================================================
--- (empty file)
+++ branches/dev/watermark/ui/ui.watermark.js Tue Apr 7 06:49:57 2009
@@ -0,0 +1,61 @@
+/*
+ * jQuery UI Watermark @VERSION
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Watermark
+ *
+ * Depends:
+ * ui.core.js
+ */
+(function($) {
+
+$.widget("ui.watermark", {
+
+ _init: function() {
+
+ var o = this.options, self = this;
+ var input = this.element;
+ var placeholder = $.isFunction(o.placeholder) ?
o.placeholder.apply(this.element[0]) : o.placeholder;
+ var label = (this.label = $('<label for="' + input.attr("id") + '">' +
placeholder + '</label>').insertBefore(input));
+ label.addClass("ui-watermark-label");
+ label.parent().addClass("ui-watermark-container");
+ label.css({
+ left: parseInt(input.css("borderLeftWidth")) +
parseInt(input.css("paddingLeft")),
+ top: parseInt(input.css("borderTopWidth")) +
parseInt(input.css("paddingTop"))
+ });
+ if (input.val()) {
+ label.hide();
+ }
+ if (!input.attr("title")) {
+ input.attr("title", label.text());
+ }
+ input.focus(function() {
+ if (!this.value)
+ label.fadeOut("fast");
+ }).blur(function() {
+ if (!this.value)
+ label.fadeIn("fast");
+ });
+ },
+
+ destroy: function() {
+ this.label.parent().removeClass("ui-watermark-container").end().remove();
+ }
+});
+
+
+$.extend($.ui.watermark, {
+ version: "@VERSION",
+ defaults: {
+ placeholder: function() {
+ var result = $(this).attr("placeholder");
+ $(this).removeAttr("placeholder");
+ return result;
+ }
+ }
+});
+
+})(jQuery);