jClever

by denisz

HTML

<script src="http://tools.alterego-russia.ru/jclever/build/jquery.jscrollpane.min.js"></script>
<script src="http://tools.alterego-russia.ru/jclever/build/jquery.mousewheel.js"></script>
<script src="http://tools.alterego-russia.ru/jclever/build/jClever.min.js"></script>
<link rel="stylesheet" href="http://tools.alterego-russia.ru/jclever/build//jCleverTemplate/alice/css/jClever.css">
<link rel="stylesheet" href="http://tools.alterego-russia.ru/jclever/build//jCleverTemplate/alice/css/jquery.jscrollpane.css">
<form class="someClass">
    <div class="row">
      <label for="text">Input</label>
      <input type="text" data-placeholder="placeholder text" id="text" />
    </div>
    <div class="row">
      <label for="pass">Password</label>
      <input type="password" data-placeholder-pass="password placeholder text" id="pass" />
    </div>
    <div class="row">
      <label for="ch1">Checkbox 1</label>
      <input type="checkbox" id="ch1" />
    </div>
    <div class="row">
        <label for="r1">Radio 1</label>
        <input type="radio" name="r1" id="r1" />
    </div>
    <div class="row">
        <label for="r2">Radio 2</label>
        <input type="radio" name="r1" id="r2" />
    </div>
    <div class="row">
        <label for="select1">Select</label>
        <select id="select1">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5" disabled="disabled">Item 5</option>
            <option value="6">Item 6</option>
            <option value="7">Item 7</option>
            <option value="8">Item 8</option>
            <option value="9">Item 9</option>
            <option value="10">Item 10</option>
        </select>    
    </div>
    <div class="row">
      <label for="file">File</label>
      <input type="file" id="file" />
    </div>
    <div class="row">
      <label for="textarea">Textarea</label>
...

CSS

.buttons {
    margin: 20px 0;
}

JavaScript

$(document).ready(function(){
    $('.someClass').jClever();
});