r3071 committed - watermark: added a multiline demo and .ui-watermark-textarea which is ...
Revision: 3071
Author: pazu2k@gmail.com
Date: Mon Aug 17 10:56:36 2009
Log: watermark: added a multiline demo and .ui-watermark-textarea which is
automatically added if the original element is a textarea (this approach
requires more thought).
http://code.google.com/p/jquery-ui/source/detail?r=3071
Added:
/branches/dev/watermark/demos/watermark/multiline.html
Modified:
/branches/dev/watermark/demos/watermark/index.html
/branches/dev/watermark/themes/base/ui.watermark.css
/branches/dev/watermark/ui/ui.watermark.js
=======================================
--- /dev/null
+++ /branches/dev/watermark/demos/watermark/multiline.html Mon Aug 17
10:56:36 2009
@@ -0,0 +1,38 @@
+<!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() {
+ $("textarea").watermark();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<form id="loginform" autocomplete="off">
+ <fieldset>
+ <legend>Add Comment</legend>
+ <label for="comment">Your Comment</label><br />
+ <textarea id="comment" name="comment" cols="35" rows="7"
placeholder="Please place your comment in this area and please do not spam
or use profanity or else! (you've been warned)"></textarea><br />
+ <input type="submit" value="Add" />
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Focus one of the text fields and blur to see the placeholder disappear and
reappear again.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
=======================================
--- /branches/dev/watermark/demos/watermark/index.html Tue Apr 7 06:49:57
2009
+++ /branches/dev/watermark/demos/watermark/index.html Mon Aug 17 10:56:36
2009
@@ -10,6 +10,7 @@
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
<li><a href="from-label.html">From label</a></li>
+ <li><a href="multiline.html">Mulitline</a></li>
</ul>
</div>
</body>
=======================================
--- /branches/dev/watermark/themes/base/ui.watermark.css Wed Jul 29
09:04:32 2009
+++ /branches/dev/watermark/themes/base/ui.watermark.css Mon Aug 17
10:56:36 2009
@@ -2,3 +2,4 @@
----------------------------------*/
.ui-watermark-container { position: relative; overflow: hidden; display:
inline-block; }
.ui-watermark-label { position: absolute; cursor: text; white-space:
nowrap; }
+.ui-watermark-textarea .ui-watermark-label { white-space: normal; }
=======================================
--- /branches/dev/watermark/ui/ui.watermark.js Thu Apr 30 07:51:41 2009
+++ /branches/dev/watermark/ui/ui.watermark.js Mon Aug 17 10:56:36 2009
@@ -19,7 +19,7 @@
var o = this.options, self = this;
var input = this.element;
var placeholder = $.isFunction(o.placeholder) ?
o.placeholder.apply(this.element[0]) : o.placeholder;
- this.element.wrap("<span/>").parent().addClass("ui-watermark-container");
+ this.element.wrap("<span/>").parent().addClass("ui-watermark-container
ui-watermark-" + input[0].tagName.toLowerCase());
var label = (this.label = $('<label for="' + input.attr("id") + '">' +
placeholder + '</label>').insertBefore(input));
label.addClass("ui-watermark-label");
label.css({
Topic Participants
Jörn Zaefferer