angularjs-ej1-demos/button/checkbox.html

85 строки
4.0 KiB
HTML

<div ng-controller="CheckBoxCtrl">
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div class="control">
<br />
Hobbies
<br />
<br />
<table>
<tr>
<td class="chkrad">
<input type="checkbox" ej-checkbox class="nodetext" id="check1" />
<label for="check1" class="clslab">Music</label>
</td>
<td class="chkrad">
<input type="checkbox" ej-checkbox class="nodetext" id="Checkbox3" />
<label for="Checkbox3" class="clslab">Sports</label>
</td>
<td class="chkrad">
<input type="checkbox" ej-checkbox class="nodetext" id="Checkbox4" />
<label for="Checkbox4" class="clslab">Reading</label>
</td>
</tr>
</table>
<br />
<br />
Favorite Search Engines<br />
<br />
<table>
<tr>
<td class="chkrad">
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" id="Checkbox1" /><label for="Checkbox1" class="clslab">Google</label>
</td>
<td class="chkrad">
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" id="Checkbox5" /><label for="Checkbox5" class="clslab">Yahoo</label>
</td>
<td class="chkrad">
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-id="Checkbox6" /><label for="Checkbox6" class="clslab">Bing</label>
</td>
</tr>
</table>
<br />
<br />
Favorite Social networks<br />
<br />
<table>
<tr>
<td class="chkrad">
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-enabletristate="true" id="Checkbox2" /><label for="Checkbox2" class="clslab">Facebook</label>
</td>
<td class="chkrad">
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-enabletristate="true" id="Checkbox7" /><label for="Checkbox7" class="clslab">GPlus</label>
</td>
<td class="chkrad">
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-enabletristate="true" id="Checkbox8" /><label for="Checkbox8" class="clslab">Twitter</label>
</td>
</tr>
</table>
<br />
</div>
</div>
</div>
</div>
</div>
<style type="text/css" class="cssStyles">
.chkrad {
width: 150px;
}
.control {
padding: 0 25%;
}
.clslab {
margin-left: 10px;
}
@media only screen and (max-width: 580px) {
.control {
padding: 0;
}
}
</style>