/**\r
* Set a key/value object as style properties to all matched elements. This\r
* serves as the best way to set a large number of style properties on all\r
- * matched elements.\r
+ * matched elements. You can use either js maps or pure css syntax.\r
* \r
* Example:\r
* \r
* <pre class="code">\r
* $(".item").css(Properties.create("color: 'red', background:'blue'"))\r
+ * $(".item").css(Properties.create("color: red; background: blue;"))\r
* </pre>\r
*/\r
public GQuery css(Properties properties) {\r
/**
* Set a key/value object as style properties to all matched elements. This
* serves as the best way to set a large number of style properties on all
- * matched elements.
+ * matched elements. You can use either js maps or pure css syntax.
*
* Example:
*
* <pre class="code">
* $(".item").css(Properties.create("color: 'red', background:'blue'"))
+ * $(".item").css(Properties.create("color: red; background: blue;"))
* </pre>
*/
LazyGQuery<T> css(Properties properties);
*/\r
public class SelectorEngineCssToXPath extends SelectorEngineImpl {\r
\r
- JsNamedArray<String> cache = JsNamedArray.create();\r
+ JsNamedArray<String> cache;\r
\r
/**\r
* Interface for callbacks in replaceAll operations.\r
}\r
\r
public NodeList<Element> select(String sel, Node ctx) {\r
+ if (cache == null) {\r
+ JsNamedArray.create();\r
+ }\r
JsNodeArray elm = JsNodeArray.create();\r
String xsel = cache.get(sel);\r
if (xsel == null) {\r
package com.google.gwt.query.client.impl;
import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.RunAsyncCallback;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Node;
import com.google.gwt.dom.client.NodeList;
private static HasSelector impl;
+ NodeList<Element> result = null;
+
public SelectorEngineNative() {
- if (impl == null) {
- impl = GWT.create(HasSelector.class);
+ }
+
+ RunAsyncCallback callBack = new RunAsyncCallback() {
+ public void onSuccess() {
+ if (impl == null) {
+ impl=GWT.create(HasSelector.class);
+ }
+ }
+ public void onFailure(Throwable reason) {
}
+ };
+
+ private NodeList<Element> jsFallbackSelect (String selector, Node ctx) {
+ if (impl == null) {
+ GWT.runAsync(callBack);
+ while (impl == null);
+ }
+ return impl.select(selector, ctx);
}
public NodeList<Element> select(String selector, Node ctx) {
if (!SelectorEngine.hasQuerySelector || selector.matches(NATIVE_EXCEPTIONS_REGEXP)) {
- return impl.select(selector, ctx);
+ return jsFallbackSelect(selector, ctx);
} else {
try {
return SelectorEngine.querySelectorAllImpl(selector, ctx);
} catch (Exception e) {
- return impl.select(selector, ctx);
+ return jsFallbackSelect(selector, ctx);
}
}
}
Element e = a.get(i);
int id = e.hashCode();
if (!cache.exists(id)) {
- cache.put(id, true);
+ cache.put(id, 1);
ret.push(e);
}
}
import java.util.List;
import com.google.gwt.dom.client.Element;
import com.google.gwt.query.client.GQuery;
+import com.google.gwt.query.client.plugins.widgets.ButtonWidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.LabelWidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.PasswordTextBoxWidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.TextAreaWidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.TextBoxWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.WidgetFactory;
import com.google.gwt.query.client.plugins.widgets.WidgetInitializer;
import com.google.gwt.query.client.plugins.widgets.WidgetsUtils;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.PasswordTextBox;
+import com.google.gwt.user.client.ui.TextArea;
+import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.query.client.LazyBase;
*/
<W extends Widget> LazyWidgets<T> widgets(WidgetFactory<W> factory, WidgetInitializer<W> initializers);
+ /**
+ * Create a {@link Button} widget for each selected element. The
+ * <code>initializers</code> will be called on each new {@link Button} created
+ * by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> button();
+
+ /**
+ * Create a {@link Button} widget for each selected element. The
+ * <code>initializers</code> will be called on each new {@link Button} created
+ * by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> button(WidgetInitializer<Button> initializers);
+
+ LazyWidgets<T> label();
+
+ LazyWidgets<T> label(WidgetInitializer<Label> initializers);
+
+ /**
+ * Create a {@link PasswordTextBox} widget for each selected element.
+ */
+ LazyWidgets<T> passwordBox();
+
+ /**
+ * Create a {@link PasswordTextBox} widget for each selected element. The
+ * <code>initializers</code> will be called on each new
+ * {@link PasswordTextBox} created by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> passwordBox(WidgetInitializer<PasswordTextBox> initializers);
+
+ /**
+ * Create a {@link TextBox} widget for each selected element. The
+ * <code>initializers</code> will be called on each new {@link TextBox}
+ * created by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> textBox();
+
+ /**
+ * Create a {@link TextBox} widget for each selected element. The
+ * <code>initializers</code> will be called on each new {@link TextBox}
+ * created by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> textBox(WidgetInitializer<TextBox> initializers);
+
+ /**
+ * Create a {@link TextArea} widget for each selected element. The
+ * <code>initializers</code> will be called on each new {@link TextBox}
+ * created by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> textArea();
+
+ /**
+ * Create a {@link TextArea} widget for each selected element. The
+ * <code>initializers</code> will be called on each new {@link TextBox}
+ * created by passing them in parameter.
+ *
+ */
+ LazyWidgets<T> textArea(WidgetInitializer<TextArea> initializers);
+
}
\r
import com.google.gwt.dom.client.Element;\r
import com.google.gwt.query.client.GQuery;\r
+import com.google.gwt.query.client.plugins.widgets.ButtonWidgetFactory;\r
+import com.google.gwt.query.client.plugins.widgets.LabelWidgetFactory;\r
+import com.google.gwt.query.client.plugins.widgets.PasswordTextBoxWidgetFactory;\r
+import com.google.gwt.query.client.plugins.widgets.TextAreaWidgetFactory;\r
+import com.google.gwt.query.client.plugins.widgets.TextBoxWidgetFactory;\r
import com.google.gwt.query.client.plugins.widgets.WidgetFactory;\r
import com.google.gwt.query.client.plugins.widgets.WidgetInitializer;\r
import com.google.gwt.query.client.plugins.widgets.WidgetsUtils;\r
+import com.google.gwt.user.client.ui.Button;\r
+import com.google.gwt.user.client.ui.Label;\r
+import com.google.gwt.user.client.ui.PasswordTextBox;\r
+import com.google.gwt.user.client.ui.TextArea;\r
+import com.google.gwt.user.client.ui.TextBox;\r
import com.google.gwt.user.client.ui.Widget;\r
\r
/**\r
WidgetInitializer<W> initializers) {\r
return widget(get(0), factory, initializers);\r
}\r
+ \r
+ /**\r
+ * Create a {@link Button} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new {@link Button} created\r
+ * by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets button() {\r
+ return widgets(new ButtonWidgetFactory(), null);\r
+ }\r
+\r
+ /**\r
+ * Create a {@link Button} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new {@link Button} created\r
+ * by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets button(WidgetInitializer<Button> initializers) {\r
+ return widgets(new ButtonWidgetFactory(), initializers);\r
+ }\r
+\r
+ public Widgets label() {\r
+ return widgets(new LabelWidgetFactory(), null);\r
+ }\r
+\r
+ public Widgets label(WidgetInitializer<Label> initializers) {\r
+ return widgets(new LabelWidgetFactory(), initializers);\r
+ }\r
+ \r
+ /**\r
+ * Create a {@link PasswordTextBox} widget for each selected element.\r
+ */\r
+ public Widgets passwordBox() {\r
+ return widgets(new PasswordTextBoxWidgetFactory(), null);\r
+ }\r
+ \r
+ /**\r
+ * Create a {@link PasswordTextBox} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new\r
+ * {@link PasswordTextBox} created by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets passwordBox(WidgetInitializer<PasswordTextBox> initializers) {\r
+ return widgets(new PasswordTextBoxWidgetFactory(), initializers);\r
+ }\r
+ \r
+ \r
+ /**\r
+ * Create a {@link TextBox} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new {@link TextBox}\r
+ * created by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets textBox() {\r
+ return widgets(new TextBoxWidgetFactory(), null);\r
+ }\r
+\r
+ /**\r
+ * Create a {@link TextBox} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new {@link TextBox}\r
+ * created by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets textBox(WidgetInitializer<TextBox> initializers) {\r
+ return widgets(new TextBoxWidgetFactory(), initializers);\r
+ }\r
+\r
+ /**\r
+ * Create a {@link TextArea} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new {@link TextBox}\r
+ * created by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets textArea() {\r
+ return widgets(new TextAreaWidgetFactory(), null);\r
+ }\r
+\r
+ /**\r
+ * Create a {@link TextArea} widget for each selected element. The\r
+ * <code>initializers</code> will be called on each new {@link TextBox}\r
+ * created by passing them in parameter.\r
+ * \r
+ */\r
+ public Widgets textArea(WidgetInitializer<TextArea> initializers) {\r
+ return widgets(new TextAreaWidgetFactory(), initializers);\r
+ }\r
\r
}\r
--- /dev/null
+/*
+ * Copyright 2011, The gwtquery team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.plugins.widgets;
+
+
+import com.google.gwt.dom.client.ButtonElement;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.query.client.plugins.widgets.WidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.WidgetsUtils;
+import com.google.gwt.user.client.ui.Button;
+
+/**
+ * Factory used to create a {@link Button} widget. A {@link Button} is created
+ * if the element is a <i>button</i>, <i>div></i>, <i>span</i> or <i>a</i>
+ * element (should be extends to other element).
+ */
+public class ButtonWidgetFactory implements WidgetFactory<Button> {
+
+ public Button create(Element e) {
+ Button button = new Button();
+ button.getElement().setInnerText(e.getInnerText());
+
+ if ("button".equalsIgnoreCase(e.getTagName())){
+ copyAttributes((ButtonElement)e.cast(), (ButtonElement)button.getElement().cast());
+ }
+
+ WidgetsUtils.replaceOrAppend(e, button);
+ return button;
+ }
+
+ protected void copyAttributes(ButtonElement source,ButtonElement destination) {
+ destination.setAccessKey(source.getAccessKey());
+ destination.setDisabled(source.isDisabled());
+ destination.setName(source.getName());
+ destination.setValue(source.getValue());
+ }
+}
\ No newline at end of file
--- /dev/null
+/*
+ * Copyright 2011, The gwtquery team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.plugins.widgets;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.user.client.ui.Label;
+
+public class LabelWidgetFactory implements WidgetFactory<Label> {
+
+ public Label create(Element e) {
+ Label label = new Label();
+ label.setText(e.getInnerText());
+ WidgetsUtils.replaceOrAppend(e, label);
+ return label;
+ }
+
+}
\ No newline at end of file
--- /dev/null
+/*
+ * Copyright 2011, The gwtquery team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.plugins.widgets;
+
+import com.google.gwt.user.client.ui.PasswordTextBox;
+
+/**
+ * Factory used to create a {@link PasswordTextBox} widget. A
+ * {@link PasswordTextBox} is created if the element is a <i>input</i> with type
+ * <i>password</i>, a <i>div</i> or a<i>span</i> element.
+ *
+ */
+public class PasswordTextBoxWidgetFactory extends
+ TextBoxBaseWidgetFactory<PasswordTextBox> {
+
+ protected PasswordTextBox createWidget() {
+ return new PasswordTextBox();
+ }
+}
--- /dev/null
+/*
+ * Copyright 2011, The gwtquery team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.plugins.widgets;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.TextAreaElement;
+import com.google.gwt.user.client.ui.TextArea;
+
+/**
+ * Factory used to create a {@link TextArea} widget.
+ *
+ */
+public class TextAreaWidgetFactory extends TextBoxBaseWidgetFactory<TextArea> {
+
+ @Override
+ protected void copyAttributes(Element src, Element dest) {
+ TextAreaElement source= src.cast();
+ TextAreaElement destination = dest.cast();
+
+ destination.setAccessKey(source.getAccessKey());
+ destination.setCols(source.getCols());
+ destination.setDefaultValue(source.getDefaultValue());
+ destination.setDisabled(source.isDisabled());
+ destination.setName(source.getName());
+ destination.setReadOnly(source.isReadOnly());
+ destination.setRows(source.getRows());
+ destination.setValue(source.getValue());
+ }
+
+ @Override
+ protected String getEquivalentTagName() {
+ return "textarea";
+ }
+
+
+ protected TextArea createWidget() {
+ return new TextArea();
+ }
+}
\ No newline at end of file
--- /dev/null
+/*
+ * Copyright 2011, The gwtquery team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.plugins.widgets;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.InputElement;
+import com.google.gwt.query.client.plugins.widgets.WidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.WidgetsUtils;
+import com.google.gwt.user.client.ui.TextBoxBase;
+
+/**
+ *
+ *
+ */
+public abstract class TextBoxBaseWidgetFactory<T extends TextBoxBase>
+ implements WidgetFactory<T> {
+
+ public T create(Element e) {
+ T textBox = createWidget();
+
+ if (getEquivalentTagName().equalsIgnoreCase(e.getTagName())) {
+ copyAttributes((InputElement) e.cast(),
+ (InputElement) textBox.getElement().cast());
+ } else {
+ textBox.setValue(e.getInnerText());
+ }
+ WidgetsUtils.replaceOrAppend(e, textBox);
+
+ return (T) textBox;
+ }
+
+ protected String getEquivalentTagName(){
+ return "input";
+ }
+
+ protected void copyAttributes(Element src, Element dest) {
+ InputElement source = src.cast();
+ InputElement destination = dest.cast();
+
+ destination.setAccessKey(source.getAccessKey());
+ destination.setDefaultValue(source.getDefaultValue());
+ destination.setDisabled(source.isDisabled());
+ destination.setMaxLength(source.getMaxLength());
+ destination.setReadOnly(source.isReadOnly());
+ destination.setSize(source.getSize());
+ destination.setName(source.getName());
+ destination.setValue(source.getValue());
+
+ }
+
+ protected abstract T createWidget();
+}
\ No newline at end of file
--- /dev/null
+/*
+ * Copyright 2011, The gwtquery team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.query.client.plugins.widgets;
+
+import com.google.gwt.user.client.ui.TextBox;
+
+/**
+ * Factory used to create a {@link TextBox} widget. A {@link TextBox} is created
+ * if the element is a <i>input</i> with type text, a <i>div</i> or a<i>span</i>
+ * element.
+ *
+ */
+public class TextBoxWidgetFactory extends TextBoxBaseWidgetFactory<TextBox> {
+
+ protected TextBox createWidget() {
+ return new TextBox();
+ }
+}
\ No newline at end of file
import static com.google.gwt.query.client.GQuery.$;\r
import static com.google.gwt.query.client.GQuery.document;\r
import static com.google.gwt.query.client.GQuery.lazy;\r
+import static com.google.gwt.query.client.plugins.Widgets.Widgets;\r
\r
import com.google.gwt.core.client.EntryPoint;\r
import com.google.gwt.core.client.GWT;\r
+import com.google.gwt.dom.client.Element;\r
import com.google.gwt.dom.client.Style.Cursor;\r
+import com.google.gwt.event.dom.client.ClickEvent;\r
+import com.google.gwt.event.dom.client.ClickHandler;\r
import com.google.gwt.query.client.GQuery;\r
import com.google.gwt.query.client.Selector;\r
import com.google.gwt.query.client.Selectors;\r
import com.google.gwt.query.client.css.CSS;\r
import com.google.gwt.query.client.css.RGBColor;\r
+import com.google.gwt.query.client.plugins.widgets.WidgetInitializer;\r
import com.google.gwt.user.client.Window;\r
+import com.google.gwt.user.client.ui.Button;\r
+import com.google.gwt.user.client.ui.Label;\r
\r
public class GwtQuerySampleModule implements EntryPoint {\r
\r
lazy().css(CSS.COLOR.with(RGBColor.RED)).done(),\r
lazy().css(CSS.COLOR.with(null)).done()\r
);\r
- \r
// Cascade effects\r
$("<div id='id' style='font-size: 150%;'>Cascade Efects</div>").appendTo(document).hide().fadeIn(5000).fadeOut(3000);\r
+ \r
+ // Widgets\r
+ $(".btn").as(Widgets).button(new WidgetInitializer<Button>() {\r
+ public void initialize(Button button, Element e) {\r
+ final String tag = e.getTagName();\r
+ button.addClickHandler(new ClickHandler() {\r
+ public void onClick(ClickEvent event) {\r
+ Window.alert("You click on a GWT Button created from a " + tag);\r
+ }\r
+ });\r
+ }\r
+ });\r
+ $(".inputText").as(Widgets).textBox();\r
+ $(".inputPsw").as(Widgets).passwordBox();\r
+ $(".textArea").as(Widgets).textArea();\r
+ $(".label").as(Widgets).label(new WidgetInitializer<Label>() {\r
+ public void initialize(Label label, Element e) {\r
+ label.setText("I'm a gwt label, created from a " + e.getTagName());\r
+ }\r
+ });\r
}\r
-}\r
+} \r
<script language="javascript" src="gwtquery.samples.GwtQuerySample.nocache.js"></script>\r
</head>\r
<body>\r
-<div class="outer" style='border: 4px solid red; padding: 25px; width: auto; height: 150px' >\r
- <div>Foo <span class="note">bar</span> baz</div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
- <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
-</div>\r
+ <div class="outer">\r
+ <div>Foo <span class="note">bar</span> baz</div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ <div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
+ </div>\r
+ <div class="outer">\r
+ <div class="btn">Make me a button 1!</div>\r
+ <a class="btn">Make me a button 2!</a> \r
+ <span class="btn">Make me a button 3!</span>\r
+ <button class="btn">Make me a button 4!</button>\r
+ <div class="btn">Make me a button 5!</div>\r
+ <div class="btn">Make me a button 6!</div>\r
+ </div>\r
+ <div class="outer">\r
+ <div class="inputText">I will be a text input</div>\r
+ <span class="inputText">I will be a text input</span> \r
+ <input class="inputText" type="text" value="I will be a text input"></input>\r
+ </div>\r
+ <div class="outer">\r
+ <div class="inputPsw">I will be an password input</div>\r
+ <span class="inputPsw">I will be an password input</span> \r
+ <input class="inputPsw" type="password" value="I will be an password input"></input>\r
+ </div>\r
+ <div class="outer">\r
+ <div class="textArea">I will be a text area</div>\r
+ <span class="textArea">I will be a text area</span> \r
+ <textarea class="textArea">I will be a text area</textarea>\r
+ </div> \r
+ <div class="outer">\r
+ <div class="label">I will be a label</div>\r
+ <span class="label">I will be a label</span> \r
+ <h1 class="label">I will be a label</h1> \r
+ </div> \r
</body>\r
<script>\r
</script>\r