-
Carsten Rose authoredCarsten Rose authored
second.html 49.20 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<title>Nice title</title>
<style>
/*inline elements in horizontal mode are too much left*/
.form-horizontal .form-inline .form-group {
margin: 0;
}
.form-inline .control-label {
font-weight: normal;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#form-normal" data-toggle="tab">Form: normal</a>
</li>
<li role="presentation"><a href="#form-horizontal" data-toggle="tab">Form: horizontal</a>
</li>
<li role="presentation"><a href="#checkboxes" data-toggle="tab">Checkbox</a>
</li>
<li role="presentation"><a href="#radios" data-toggle="tab">Radios</a>
</li>
<li role="presentation"><a href="#inputfields" data-toggle="tab">Input</a>
</li>
<li role="presentation"><a href="#accordion" data-toggle="tab">Accordion</a>
</li>
<li role="presentation"><a href="#inline-container" data-toggle="tab">Horizontal Container</a>
</li>
<li role="presentation"><a href="#jqw-grid" data-toggle="tab">JQWdidget Grid</a></li>
</ul>
<!-- Tab panes -->
<!-- form normal -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="form-normal">
<form>
<div class="form-group">
<label for="personName">Name</label>
<input type="text" class="form-control" id="personName" placeholder="Name"
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
data-toggle="tooltip" data-placement="bottom">
<p class="help-block">Name of the person.</p>
</div>
<div class="form-group">
<label for="personFirstname">First name</label>
<input type="text" class="form-control" id="personFirstname" placeholder="First name"
title="Tooltip" data-toggle="tooltip" data-placement="left">
<p class="help-block">First name of the person.</p>
</div>
<div class="form-group">
<label for="personEmail">Email</label>
<input type="email" class="form-control" id="personEmail" name="personEmail" placeholder="Email"
title="Tooltip"
data-toggle="tooltip" data-placement="right" data-compare-element="personEmailRETYPE">
<p class="help-block">Email of the person.</p>
</div>
<div class="form-group">
<label for="personEmailRETYPE">please retype</label>
<input type="email" class="form-control" id="personEmailRETYPE" name="personEmailRETYPE"
placeholder="Email" title="Tooltip"
data-toggle="tooltip" data-placement="right">
<p class="help-block"></p>
</div>
<div class="form-group">
<label for="personPassword">Password</label>
<input type="password" class="form-control" name="personPassword"
placeholder="Password"
title="Tooltip"
data-toggle="tooltip" data-placement="right">
<p class="help-block">Personal Password</p>
</div>
<div class="form-group">
<label for="personPasswordRETYPE">please retype</label>
<input type="password" class="form-control" name="personPasswordRETYPE"
placeholder="Password" title="Tooltip" data-match="[name=personPassword]"
data-toggle="tooltip" data-placement="right">
<p class="help-block"></p>
</div>
<!-- checkbox -->
<div class="form-group">
<fieldset>
<legend>Title Checkbox</legend>
<div class="checkbox">
<label>
<input type="checkbox">label 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">label 2
</label>
</div>
</fieldset>
</div>
<!--radio -->
<div class="form-group">
<fieldset>
<legend>Title Radio</legend>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option2">
Option two can be something else and selecting it will deselect option one
</label> </div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
</div>
<!-- check for width adjustement: http://getbootstrap.com/css/#forms-->
<div class="form-group">
<label for="select1">Selectbox</label>
<select class="form-control" id="select1" title="Tooltip" data-toggle="tooltip"
data-placement="bottom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<!--textarea-->
<div class="form-group">
<label for="textarea">Textarea</label>
<textarea class="form-control" rows="3" title="Tooltip" data-toggle="tooltip"
data-placement="bottom" id="textarea1"></textarea>
</div>
<!--
<!--upload-->
<div class="form-group">
<label for="exampleInputFile1">File input</label>
<input type="file" id="exampleInputFile1">
<p class="help-block">Example block-level help text here.</p>
</div>
</form>
</div>
<!-- form: horizontal -->
<div role="tabpanel" class="tab-pane" id="form-horizontal">
<form class="form-horizontal">
<div class="form-group">
<label for="street" class="col-md-1 col-xs-1 control-label">Street</label>
<div class="col-md-9">
<input type="text" class="form-control" id="street" placeholder="Streetname" title="Tooltip"
data-toggle="tooltip" data-placement="bottom">
</div>
<div class="col-md-2">
<p class="help-block">Street name</p>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" title="Tooltip"
data-toggle="tooltip" data-placement="top">
</div>
</div>
<div class="form-group">
<b class="col-md-2 control-label">
Checkbox group label
</b>
<div class="checkbox col-md-10">
<label>
<input type="checkbox">Option 1 (label optional)
</label>
<p class="help-block">Help for option 1</p>
</div>
</div>
<div class="form-group">
<b class="col-md-2 control-label">
Radio group label
</b>
<div class="col-md-10">
<div class="radio">
<label>
<input type="radio">Option 1 (label optional)
</label>
</div>
<div class="radio">
<label>
<input type="radio">Option 2
</label>
</div>
<p class="help-block">Help for option 1</p>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<fieldset>
<legend>Title Checkboxes</legend>
<div class="checkbox">
<label>
<input type="checkbox">label 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">label 2
</label>
</div>
</fieldset>
</div>
</div>
<!--radio -->
<div class="form-group">
<div class="col-md-10">
<fieldset>
<legend>Title Radio</legend>
<!--<div class="col-md-offset-2 col-md-2">-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<!--</div>-->
<!--<div class="col-md-offset-2 col-md-2">-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one </label>
</div>
<!--</div>-->
<!--<div class="col-md-offset-2 col-md-2">-->
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
disabled>
Option three is disabled
</label>
</div>
<!--</div>-->
</fieldset>
</div>
</div>
<!-- check for width adjustement: http://getbootstrap.com/css/#forms-->
<div class="form-group">
<div class="col-md-10">
<label for="select">Selectbox</label>
<select class="form-control" id="select" title="Tooltip" data-toggle="tooltip"
data-placement="bottom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<!--textarea-->
<div class="form-group">
<div class="col-md-10">
<label for="textarea">Textarea</label>
<textarea class="form-control" rows="3" title="Tooltip" data-toggle="tooltip"
data-placement="bottom" id="textarea"></textarea>
</div>
</div>
<!--
<!--upload-->
<div class="form-group">
<div class="col-md-10">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="checkboxes">
<h1>Regular Form</h1>
<form>
<div class="form-group">
<label for="input1">Input </label>
<input id="input1" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Checkboxes with group label, vertically stacked, one checkbox.
</p>
<div class="form-group bg-info">
<b class="control-label"> Checkbox group label
</b>
<div class="checkbox">
<label>
<input type="checkbox">Option 1 (label optional)
</label>
<p class="help-block">Help for option 1</p>
</div>
</div>
<div class="form-group">
<label for="input2">Input </label>
<input id="input2" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Checkboxes with group label, vertically stacked, multiple checkboxes.
</p>
<div class="form-group bg-info">
<b class="control-label">
Checkbox group label
</b>
<div class="checkbox">
<label>
<input type="checkbox">Option 1
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Option 2
</label>
<p class="help-block">Help for option 2</p>
</div>
<p class="help-block">Help for Checkbox group label</p>
</div>
<div class="form-group">
<label for="input2_3">Input </label>
<input id="input2_3" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Checkboxes without common label, horizontally stacked.
</p>
<div class="form-group bg-info">
<label class="checkbox-inline">
<input type="checkbox"> Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox"> Option 2
</label>
<p class="help-block">Help text (help text to individual checkboxes breaks horizontal layout)</p>
</div>
<div class="form-group">
<label for="input2_1">Input </label> <input id="input2_1" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Checkboxes without common label, horizontally stacked, 2 rows.
</p>
<div class="form-group bg-info">
<label class="checkbox-inline">
<input type="checkbox"> Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox"> Option 2
</label>
<label class="checkbox-inline">
<input type="checkbox"> Option 3
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox"> Option 4
</label>
<label class="checkbox-inline">
<input type="checkbox"> Option 5
</label>
<p class="help-block">Help text (help text to individual checkboxes breaks horizontal layout)</p>
</div>
<div class="form-group">
<label for="input2_1">Input </label>
<input id="input2_1" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Checkboxes with a common label, vertically stacked. Checkbox label in front of checkbox
</p>
<div class="form-group bg-info">
<b class="control-label">
Checkbox group label: label on left side
</b>
<div class="checkbox">
<label for="cb1">Option 1</label>
<label>
<input type="checkbox" id="cb1">
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="checkbox">
<label for="cb2">Option 2</label>
<label>
<input type="checkbox" id="cb2">
</label>
<p class="help-block">Help for option 2</p>
</div>
<p class="help-block">Help for Checkbox group label</p>
</div>
<div class="form-group">
<label for="input2_2">Input </label>
<input id="input2_2" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
</form>
<h1>Horizontal Form</h1>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="input3" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input3" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<p>
Checkboxes with a common label, vertically stacked.
</p>
<div class="form-group bg-info">
<div class="col-md-2">
<b class="control-label">
Checkbox group label, one checkbox
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">Option 1 (label optional)
</label>
<p class="help-block">Help for option 1</p>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Help for Checkbox group label</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input4_3" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input4_3" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<p>
Checkboxes with a common label, vertically stacked.
</p>
<div class="form-group bg-info">
<div class="col-md-2">
<b class="control-label">
Checkbox group label
</b> </div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">Option 1
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Option 2
</label>
<p class="help-block">Help for option 2</p>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Help for Checkbox group label</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input4" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input4" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<p>
Checkboxes without common label, horizontally stacked.
</p>
<div class="form-group bg-info">
<div class="col-md-6 col-md-offset-2">
<label class="checkbox-inline">
<input type="checkbox"> Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox"> Option 2
</label>
</div>
<div class="col-md-4">
<p class="help-block">Help text (help text to individual checkboxes breaks horizontal
layout)</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input4_1" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input4_1" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<p>
Checkboxes with a common label, vertically stacked. Checkbox label in front of checkbox
</p>
<div class="form-group bg-info">
<div class="col-md-2">
<b class="control-label">
Checkbox group label: label on left side
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label for="cb11">Option 1</label>
<label>
<input type="checkbox" id="cb11">
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="checkbox">
<label for="cb21">Option 2</label>
<label>
<input type="checkbox" id="cb21">
</label>
<p class="help-block">Help for option 2</p>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Help for Checkbox group label</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input4_2" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input4_2" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="radios">
<h1>Regular Form</h1>
<form>
<div class="form-group">
<label for="input5">Input </label>
<input id="input5" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Radio buttons with a common label, vertically stacked.
</p>
<div class="form-group bg-info">
<b class="control-label"> Radio buttons group label
</b>
<div class="radio">
<label>
<input type="radio">Option 1
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="radio">
<label>
<input type="radio">Option 2
</label>
<p class="help-block">Help for option 2</p>
</div>
<p class="help-block">Help for Radio group label</p>
</div>
<div class="form-group">
<label for="input6">Input </label>
<input id="input6" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Radio buttons without common label, horizontally stacked.
</p>
<div class="form-group bg-info">
<label class="radio-inline">
<input type="radio"> Option 1
</label>
<label class="radio-inline">
<input type="radio"> Option 2
</label>
<p class="help-block">Help text (help text to individual radio buttons breaks horizontal layout)</p>
</div>
<p>
Radio buttons without common label, 3 horizontally stacked, 2 rows.
</p>
<div class="form-group bg-info">
<label class="radio-inline">
<input type="radio"> Option 1.1
</label>
<label class="radio-inline">
<input type="radio"> Option 1.2
</label>
<label class="radio-inline">
<input type="radio"> Option 1.3
</label>
<br>
<label class="radio-inline">
<input type="radio"> Option 2.1
</label>
<label class="radio-inline">
<input type="radio"> Option 2.2
</label>
<label class="radio-inline">
<input type="radio"> Option 2.3
</label>
<p class="help-block">Help text (help text to individual radio buttons breaks horizontal layout)</p> </div>
<div class="form-group">
<label for="input6_1">Input </label>
<input id="input6_1" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<p>
Radio button group with a common label, vertically stacked. Radio button label in front of radio
button
</p>
<div class="form-group bg-info">
<b class="control-label">
Radio button group label: label on left side
</b>
<div class="radio">
<label for="radio1">Option 1</label>
<label>
<input type="radio" id="radio1">
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="radio">
<label for="radio2">Option 2</label>
<label>
<input type="radio" id="radio2">
</label>
<p class="help-block">Help for option 2</p>
</div>
<p class="help-block">Help for Radio button group label</p>
</div>
<div class="form-group">
<label for="input6_2">Input </label>
<input id="input6_2" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
</form>
<h1>Horizontal Form</h1>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="input7" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input7" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<p>
Radio button group with a common label, vertically stacked.
</p>
<div class="form-group bg-info">
<div class="col-md-2">
<b class="control-label"> Radio group label
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio">Option 1
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="radio">
<label>
<input type="radio">Option 2
</label>
<p class="help-block">Help for option 2</p>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Help for radio group label</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input8" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input8" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<p>
Radio buttons without Radio button group label, horizontally stacked.
</p>
<div class="form-group bg-info">
<div class="col-md-6 col-md-offset-2">
<label class="radio-inline">
<input type="radio"> Option 1
</label>
<label class="radio-inline">
<input type="radio"> Option 2
</label>
</div>
<div class="col-md-4">
<p class="help-block">Help text (help text to individual radios breaks horizontal
layout)</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input8_1" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input8_1" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div> </div>
<p>
Radio buttons with a common label, vertically stacked. radio label in front of radio
</p>
<div class="form-group bg-info">
<div class="col-md-2">
<b class="control-label">
radio button group label: label on left side
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label for="radio3">Option 1</label>
<label>
<input type="radio" id="radio3">
</label>
<p class="help-block">Help for option 1</p>
</div>
<div class="radio">
<label for="radio4">Option 2</label>
<label>
<input type="radio" id="radio4">
</label>
<p class="help-block">Help for option 2</p>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Help for radio group label</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input8_2" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input8_2" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="inputfields">
<h1>Regular Form</h1>
<form>
<div class="form-group">
<label for="input9">Input </label>
<input id="input9" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<div class="form-group">
<label for="input10">Input </label>
<input id="input10" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
</form>
<h1>Horizontal Form</h1>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="input11" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input11" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input12" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input12" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="accordion">
<h1>Regular Form</h1>
<form>
<div class="form-group">
<label for="input13">Input </label>
<input id="input13" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<div class="form-group">
<label for="input14">Input </label>
<input id="input14" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
</form>
<h1>Horizontal Form</h1>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="input15" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input15" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input16" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input16" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="inline-container">
<h1>Regular Form</h1>
<form>
<div class="form-group">
<label for="input17">Input </label>
<input id="input17" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
<div class="form-group bg-info">
<b class="control-label">Inline Container</b>
<div class="form-inline">
<div class="form-group">
<label for="subinput1">Subinput 1</label>
<input id="subinput1" class="form-control" type="text">
</div>
<div class="form-group">
<label for="subinput2">Subinput 2</label>
<input id="subinput2" class="form-control" type="text">
</div>
<div class="form-group">
<b class="control-label">
Checkbox group label
</b>
<div class="checkbox">
<label>
<input type="checkbox">Option 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Option 2
</label>
</div>
</div>
</div>
<p class="help-block">Help text goes here</p>
</div>
<div class="form-group">
<label for="input18">Input </label>
<input id="input18" class="form-control" type="text">
<p class="help-block">Help text goes here</p>
</div>
</form>
<h1>Horizontal Form</h1>
<form class="form-horizontal"> <div class="form-group">
<div class="col-md-2">
<label for="input19" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input19" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<div class="form-group bg-info">
<div class="col-md-2">
<b class="control-label">Inline Container</b>
</div>
<div class="col-md-6">
<div class="form-inline">
<div class="form-group">
<label for="subinput3" class="control-label">Subinput 1</label>
<input id="subinput3" class="form-control" type="text">
</div>
<div class="form-group">
<label for="subinput4" class="control-label">Subinput 2</label>
<input id="subinput4" class="form-control" type="text">
</div>
<div class="form-group">
<b class="control-label">
Checkbox group label
</b>
<div class="checkbox">
<label>
<input type="checkbox">Option 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Option 2
</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="input20" class="control-label">Input </label>
</div>
<div class="col-md-6">
<input id="input20" class="form-control" type="text">
</div>
<div class="col-md-4">
<p class="help-block">Help text goes here</p>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="jqw-grid">
<div class="col-md-9">
<div id="grid">
</div> </div>
</div>
</div>
<button id="save-button" type="button" class="btn btn-default">Submit</button>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip();
// prepare the data
var data = [];
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea <img src='bla'>", "Caffe Espresso <a href='www.google.ch'>bla</a>", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 100; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
},
loadError: function (xhr, status, error) {
}
});
$("#grid").jqxDataTable(
{
source: dataAdapter,
columns: [
{
text: 'First Name <img src="../packages/jqwidgets/css/images/star.png">',
datafield: 'firstname',
width: 100
},
{text: 'Last Name', datafield: 'lastname', width: 100},
{text: 'Product', datafield: 'productname', width: 180}, {text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right'},
{text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2'},
{text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2'}
],
sortable: true,
height: "300",
columnsResize: true,
filterable: true
});
})
</script>
</body>
</html>