I'm just looking around. Will you tell me something about yourself?
8:20 a.m.
I'm just looking around. Will you tell me something about yourself?
8:20 a.m.
/* Use For Basic Switch */ <div class="row advance-elements"> <div class="col-md-4"> <h6 class="sub-title">Basic</h6> </div> </div>
/* Use For Diffrent Sizes */ <div class="row advance-elements"> <div class="col-md-4"> <h6 class="sub-title">Diffrent Sizes</h6> </div> </div>
/* For Border Checkboxes */ /* Use For Primary Border checkbox */ <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-primary"> <input type="checkbox" id="checkbox" checked> <span class="checkbox"></span> </label> <div class="captions">Primary</div> </div> /* Use For warning Border checkbox */ <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-warning"> <input type="checkbox" id="checkbox-1" checked> <span class="checkbox"></span> </label> <div class="captions">Warning</div> </div> /* Use For success Border checkbox */ <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-success"> <input type="checkbox" id="checkbox-2" checked> <span class="checkbox"></span> </label> <div class="captions">Success</div> </div> /* Use For info Border checkbox */ <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-info"> <input type="checkbox" id="checkbox-3" checked> <span class="checkbox"></span> </label> *lt;div class="captions">Info</div> </div> /* Use For danger Border checkbox */ <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-danger"> <input type="checkbox" id="checkbox-4" checked> <span class="checkbox"></span> </label> <div class="captions">Danger</div> </div> /* Use For disable Border checkbox */ <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-primary"> <input type="checkbox" id="checkbox-5" disabled=""> <span class="checkbox"></span> </label> <div class="captions">Disabled</div> </div>
/* For Fade In Checkboxes */ /* Use For Primary Fade in checkbox */ <div class="checkbox-fade fade-in-primary"> </div> /* Use For warning Fade in checkbox */ <div class="checkbox-fade fade-in-warning"> </div> /* Use For Success Fade in checkbox */ <div class="checkbox-fade fade-in-success"> </div> /* Use For Info Fade in checkbox */ <div class="checkbox-fade fade-in-info"> </div> /* Use For Danger Fade in checkbox */ <div class="checkbox-fade fade-in-danger"> </div> /* Use For Disabled Fade in checkbox */ <div class="checkbox-fade fade-in-default"> </div>
/* For Color Checkboxes */ /* Use For Primary color checkbox */ <div class="checkbox-color checkbox-primary"> <input id="checkbox2" type="checkbox" checked=""> <label for="checkbox2"> Primary </label> </div> /* Use For success color checkbox */ <div class="checkbox-color checkbox-success"> <input id="checkbox3" type="checkbox" checked=""> <label for="checkbox3"> Success </label> </div> /* Use For info color checkbox */ <div class="checkbox-color checkbox-info"> <input id="checkbox4" type="checkbox" checked=""> <label for="checkbox4"> Info </label> </div> /* Use For Warning color checkbox */ <div class="checkbox-color checkbox-warning"> <input id="checkbox5" type="checkbox" checked=""> <label for="checkbox5"> Warning </label> </div> /* Use For Danger color checkbox */ <div class="checkbox-color checkbox-danger"> <input id="checkbox6" type="checkbox" checked=""> <label for="checkbox6"> Check me out </label> </div> /* Use For Disabled color checkbox */ <div class="checkbox-color checkbox-default"> <input id="checkbox7" type="checkbox" disabled=""> <label for="checkbox7"> Disabled </label> </div>
/* For Default Radio Button */ <div class="form-radio"> <form> /* use for Radio Button */ <div class="radio radiofill"> </div> /* use for Selected Radio Button */ <div class="radio radiofill"> </div> /* use for Disable Radio Button */ <div class="radio radiofill radio-disable"> </div> </form> </div>
/* For Radio Filled Button */ <div class="form-radio"> <form> /* use for Selected Fill Radio Button */ <div class="radio"> </div> /* use for Fill Radio Button */ <div class="radio"> </div> /* use for Disable Fill Radio Button */ <div class="radio radio-disable"> </div> </form> </div>
/* For Radio Inline Button */ <div class="form-radio"> <form> /* use for Radio Inline Button */ <div class="radio radiofill radio-inline"> </div> /* use for Selected Inline Radio Button */ <div class="radio radiofill radio-inline"> </div> /* use for Disable Inline Radio Button */ <div class="radio radiofill radio-inline radio-disable"> </div> </form> </div>
/* For Radio Filled Inline Button */ <div class="form-radio"> <form> <div class="form-radio"> /* use for selected filled inline button */ <div class="radio radio-inline"> </div> /* use for filled inline button */ <div class="radio radio-inline"> </div> /* use for disable filled inline button */ <div class="radio radio-inline radio-disable"> </div> </div> </form> </div>
/* For Loading Remote Data ( Ajax ) */
/* For Default Max-length*/
The badge will show up by default when the remaining chars are 10 or less
/* For thresold Max-length*/
Do you want the badge to show up when there are 20 chars or less? Use the threshold option
/* For Color-Labels max-length*/
Do you want the badge with colors? Use the warningClass and limitReachedClass option
/* For Single select value */ <select class="form-control" id="example-single"> <option value="cheese">Cheese</option> <option value="h">Hanry Die</option> <option value="j">John Doe</option> <option value="c">Come Leo</option> <option value="h">Hampri Catlin</option> </select>
The following example shows the default behavior when the multiple attribute is omitted
/* For Multiple select value */ <select class="form-control" id="example-multiple-selected" multiple="multiple"> <option value="cheese">Cheese</option> <option value="h">Hanry Die</option> <option value="j">John Doe</option> <option value="c">Come Leo</option> <option value="h">Hampri Catlin</option> </select>
If multiple options are selected in advance and the select lacks the multiple attribute, the last option marked as selected will initially be selected by the plugin
/* For All Group Option Select value */ <select id="example-enableClickableOptGroups" multiple="multiple"> <optgroup label="Group 1"> <option value="1-1">Option 1.1</option> <option value="1-2" selected="selected">Option 1.2/option> <option value="1-3" selected="selected">Option 1.3/option> </optgroup> <optgroup label="Group 2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select>
The following example shows the default behavior when the multiple attribute is omitted
/* For Collapse Group value */ <select id="example-enableCollapsibleOptGroups" multiple="multiple"> <optgroup label="Group 1"> <option value="1-1" disabled>Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select>
The following example shows disable option,add disabled keyword to that option
/* For Disable Option value */ <select id="example-enableClickableOptGroups-init" multiple="multiple"> <optgroup label="Group 1"> <option value="1-1" disabled>Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select>
The following example shows disable option,add disabled keyword to that option
/* For Multiple Group Select value */ <select id="example-multiple-optgroups" multiple="multiple"> <optgroup label="Group 1"> <option value="1-1">Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup> </select>
The plugin naturally supports optgroups, however the group headers are not clickable by default. See the enableClickableOptGroups option for details.
/* For Pre-selected options */ <select multiple="multiple" id="my-select" name="my-select[]"> <option value='elem_1' selected="">elem 1</option> <option value='elem_2'>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4'>elem 4</option> <option value='elem_5'>elem 5</option> </select>
/* For Custom headers and footers */ <select id='custom-headers1' multiple='multiple'> <option value='elem_1'>elem 1</option> <option value='elem_2'>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4'>elem 4</option> <option value='elem_5'>elem 5</option> <option value='elem_6'>elem 6</option> <option value='elem_7'>elem 7</option> <option value='elem_8'>elem 8</option> <option value='elem_9'>elem 9</option> <option value='elem_10'>elem 10</option> </select>
/* For Optgroup */ <select id='optgroup' multiple='multiple'> <optgroup label='Friends'> <option value='1'>Yoda</option> <option value='2' selected>Obiwan</option> </optgroup> <optgroup label='Enemies'> <option value='3'>Palpatine</option> <option value='4' disabled>Darth Vader</option> </optgroup> </select>
/* For Searchable */ <select id='custom-headers' class="searchable" multiple='multiple'> <option value='elem_1' selected>elem 1</option> <option value='elem_2'>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4' selected>elem 4</option> <option value='elem_5'>elem 5</option> <option value='elem_6'>elem 6</option> <option value='elem_7'>elem 7</option> <option value='elem_8'>elem 8</option> <option value='elem_9'>elem 9</option> <option value='elem_10'>elem 10</option> <option value='elem_11'>elem 11</option> <option value='elem_12'>elem 12</option> <option value='elem_13'>elem 13</option> <option value='elem_14'>elem 14</option> <option value='elem_15'>elem 15</option> <option value='elem_16'>elem 16</option> </select>
/* For Public methods */ <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='select-all'>select all</button> <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='deselect-all'>deselect all</button> <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='select-5'>select 5 elems</button> <button type="button" class="btn btn-primary waves-effect waves-light m-b-5" id='deselect-5'>deselect 5 elems</button> <select id='public-methods' multiple='multiple'> <option value='elem_1'>elem 1</option> <option value='elem_2' disabled>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4'>elem 4</option> <option value='elem_5'>elem 5</option> <option value='elem_6'>elem 6</option> <option value='elem_7'>elem 7</option> <option value='elem_8'>elem 8</option> <option value='elem_9'>elem 9</option> <option value='elem_10'>elem 10</option> </select>
/* For tag Markup */ <div class="tags_add"> </div>
Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
/* For tag Colors */ <div class="color-tags"> </div>
Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
/* For Max-Characters tags */ <div class="tags_max_char"> </div>
Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
/* For Multiple-Characters tags */ <div class="tags_add_multiple"> </div>
Use a <select multiple /> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array.
/* For Date Picker */ <div class="form-control-wrapper"> <input type="text" id="date" class="form-control floating-label" placeholder="Date"> </div>
/* For Time Picker */ <div class="form-control-wrapper"> <input type="text" id="time" class="form-control floating-label" placeholder="Time"> </div>
/* For Min Date Set */ <div class="form-control-wrapper"> <input type="text" id="min-date" class="form-control floating-label" placeholder="Start Date"> </div>
/* For Min Date Set */ <div class="form-control-wrapper"> <input type="text" id="date-fr" class="form-control" value="18/03/2015 08:00" data-dtp="dtp_5xXoR"> </div>
/* For Date Time Range Picker */ <div class="col-md-6"> <div class="form-control-wrapper"> <input type="text" id="date-start" class="form-control floating-label" placeholder="Start Date"> </div> </div> <div class="col-md-6"> <div class="form-control-wrapper"> <input type="text" id="date-end" class="form-control floating-label" placeholder="End Date"> </div> </div>
/* For Date Time Range Picker */
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
</div>
</div>
/* For Bootstrap Locales */
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control"/>
</div>
</div>
/* For Bootstrap time picker */
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control"/>
</div>
</div>
/* For Bootstrap Enabled/Disabled Dates */
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control"/>
</div>
</div>
/* For Bootstrap Custom Icons */
<div class='input-group date' id='datetimepicker8'>
<input type='text' class="form-control"/>
</div>
/* For Bootstrap Linked Pickers Dates */ <div class="col-md-6"> <div class="form-group"> <div class='input-group date' id='datetimepicker6'> <input type='text' class="form-control" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <div class='input-group date' id='datetimepicker7'> <input type='text' class="form-control" /> </div> </div> </div>
/* For Bootstrap Min View Mode */
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control"/>
</div>
/* For Bootstrap Disabled Days of the Week */
<div class='input-group date' id='datetimepicker11'>
<input type='text' class="form-control" />
</div>
/* For Bootstrap View Mode */
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control"/>
</div>
/* For Bootstrap Date Range Picker */ <input type="text" name="daterange" class="form-control" value="01/01/2015 - 01/31/2015"/>
/* For Bootstrap Date Range Picker Blank input */ <input type="text" name="datefilter" class="form-control" value=""/>
/* For Bootstrap Multiple Option */ <div id="reportrange" class="f-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%"> </div>
/* For Date Time Picker */
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
to
<input type="text" class="input-sm form-control" name="end" />
</div>
/* For Date Picker with Today */
<div class="input-group date input-group-date-custom">
<input type="text" class="form-control">
</div>
/* For Basic color Modal */ <div class="input-group"> <input type='text' id="custom" class="m-b-15" /><hr> <input class="jscolor m-b-15" value="ab2567"><hr> <p> <input id="foo" class="jscolor" value="cc4499"> </p> </div>
/* For Using Locales */ <div class="form-group"> <input type="text" id="flat"/> </div>
/* For Time Picker */ <div class="form-group"> <input type='text' id="flatClearable"/> </div>
/* For No Icon (input field only) */
<div class="form-group">
<input type='color' name='color' />
<input type='color' name='color2' value='#3355cc' />
<hr> Large dark picker:
<input value="ffcc00" class="jscolor {width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}">
</div>