1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.master" AutoEventWireup="true"
	CodeFile="Overview.aspx.cs" Inherits="FormDecorator_Overview" %>

<%@ Register Assembly="C1.Web.Wijmo.Extenders.3" Namespace="C1.Web.Wijmo.Extenders.C1FormDecorator"
	TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server">
	<style type="text/css">
		 <style type="text/css">

		.formdecorator label
		{
			display: block;
		}       

		.formdecorator
		{
			list-style: none;
			margin: 0;
			padding: 0;
		}       

		.formdecorator li
		{
			clear: both;
			margin-bottom: 1em;
		}
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
	<ul class="formdecorator">
		<li>
			<h3>Input</h3>
			<asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
		</li>
		<li>
			<h3>TextArea</h3>
			<asp:TextBox runat="server" ID="TextBox3" TextMode="MultiLine"></asp:TextBox>
		</li>
		<li>
			<h3>Dropdown with Optgroups</h3>
			<select id="select1">
				<optgroup label="A-G">
					<option>A</option>
					<option selected="selected">B</option>
					<option>C</option>
					<option>D</option>
					<option>E</option>
					<option>F</option>
					<option>G</option>
				</optgroup>
				<optgroup label="H-M">
					<option>H</option>
					<option>I</option>
					<option>J</option>
					<option>K</option>
					<option>L</option>
					<option>M</option>
				</optgroup>
			</select>
		</li>
		<li>
			<h3>CheckBox</h3>
			<input id="checkbox1" type="checkbox" /><label for="checkbox1">checkbox1</label>
			<input id="checkbox2" type="checkbox" /><label for="checkbox2">checkbox2</label>
			<input id="checkbox3" type="checkbox" /><label for="checkbox3">checkbox3</label>
			<input id="checkbox4" type="checkbox" /><label for="checkbox4">checkbox4</label>
		</li>
		<li>
			<h3>Radio</h3>
			<input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">radio1</label>
			<input type="radio" name="radiobutton1" id="radio2" /><label for="radio2">radio2</label>
			<input type="radio" name="radiobutton1" id="radio3" /><label for="radio3">radio3</label>
			<input type="radio" name="radiobutton1" id="radio4" /><label for="radio4">radio4</label>
		</li>
		<li>
			<h3>Button</h3>
			<input type="button" name="button1" value="Submit" />
		</li>
	</ul>
    <!-- This TargetSelector matches all textboxes (single and multiline)-->
	<wijmo:C1TextboxExtender ID="TooltipExtender1" runat="server" TargetSelector=":input[type='text'],textarea">
	</wijmo:C1TextboxExtender>
    
    <!-- This TargetSelector matches all textboxes (dropdownlists)-->
	<wijmo:C1DropdownExtender ID="DropdownExtender1" runat="server" TargetSelector="select" />
    
    <!-- This TargetSelector matches all textboxes (checkboxes)-->
	<wijmo:C1CheckboxExtender ID="CheckboxExtender1" runat="server" TargetSelector=":input[type='checkbox']" />

    <!-- This TargetSelector matches all textboxes (radiobuttons)-->
	<wijmo:C1RadioExtender ID="RadioExtender1" runat="server" TargetSelector=":input[type='radio']" />
    
    <!-- This TargetSelector matches all textboxes (buttons)-->
	<wijmo:C1ButtonExtender ID="ButtonExtender1" runat="server" TargetSelector=":button">
	</wijmo:C1ButtonExtender>
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="Description" ID="Content3">
	<p>
		The Wijmo Form Decorator widgets (wijradio, wijcheckbox, wijdropdown, wijtextbox)
		are used to decorate a standard HTML form elements. The Form Decorator widgets allow
		any form element to be styled uniformly in any browser. Form Decorators use a property called TargetSelector to turn all matched elements into decorated widgets. The TargetSelector property accepts a jQuery selector string which is similar to CSS.</p>
</asp:Content>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class FormDecorator_Overview : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}