js特效

代碼結構

1. 引入CSS

<link href="css/normalize.css" rel="stylesheet"/>
<link href="css/jquery-ui.css" rel="stylesheet"/>
<link href="css/jquery.idealforms.min.css" rel="stylesheet" media="screen"/>

2. 引入JS

<script src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.idealforms.js"></script>

3. HTML代碼

<div class="row">
  <div class="eightcol last">
    <!-- Begin Form -->
    <form id="my-form">
        <section name="第一步">
          <div><label>用戶名:</label><input id="username" name="username" type="text"/></div>
          <div><label>密碼:</label><input id="pass" name="password" type="password"/></div>
          <div><label>郵箱:</label><input id="email" name="email" data-ideal="required email" type="email"/></div>
          <div><label>出生日期:</label><input name="date" class="datepicker" data-ideal="date" type="text" placeholder="月/日/年"/></div>
          <div><label>上傳頭像:</label><input id="file" name="file" multiple type="file"/></div>
          <div><label>個人主頁:</label><input name="website" data-ideal="url" type="text"/></div>
        </section>
        <section name="第二步">
          <div id="languages">
            <label>語言:</label>
            <label><input type="checkbox" name="langs[]" value="English"/>英文</label>
            <label><input type="checkbox" name="langs[]" value="Chinese"/>中文</label>
            <label><input type="checkbox" name="langs[]" value="Spanish"/>西班牙文</label>
            <label><input type="checkbox" name="langs[]" value="French"/>法文</label>
          </div>
          <div><label>精通幾門:</label>
            <label><input type="radio" name="radio" checked/>1</label>
            <label><input type="radio" name="radio"/>2</label>
            <label><input type="radio" name="radio"/>3</label>
            <label><input type="radio" name="radio"/>4</label>
          </div>
        </section>
        <section name="第三步">
          <div><label>電話:</label><input type="tel" name="phone" data-ideal="phone"/></div>
          <div><label>國籍:</label>
          <select id="states" name="states">
            <option value="default">&ndash; 選擇國籍 &ndash;</option>
            <option value="AL">阿拉伯</option>
            <option value="AK">中國</option>
            <option value="AZ">美國</option>
            <option value="AR">法國</option>
            <option value="CA">英國</option>
            <option value="CO">德國</option>
            <option value="CT">西班牙</option>
            <option value="DE">俄羅斯</option>
          </select>
        </div>
        <div><label>郵編:</label><input type="text" name="zip" data-ideal="zip"/></div>
        <div><label>備注:</label><textarea id="comments" name="comments"></textarea></div>
      </section>
      <div><hr/></div>
      <div>
        <button type="submit">提交</button>
        <button id="reset" type="button">重置</button>
      </div>
    </form>
    <!-- End Form -->
  </div>
</div>
<script type="text/javascript">
var options = {
	onFail: function(){
		alert( $myform.getInvalid().length +' invalid fields.' )
	},
	inputs: {
		'password': {
			filters: 'required pass',
		},
		'username': {
			filters: 'required username',
			data: {
			//ajax: { url:'validate.php' }
			}
		},
		'file': {
			filters: 'extension',
			data: { extension: ['jpg'] }
		},
		'comments': {
			filters: 'min max',
			data: { min: 50, max: 200 }
		},
		'states': {
			filters: 'exclude',
			data: { exclude: ['default'] },
			errors : {
				exclude: '選擇國籍.'
			}
		},
		'langs[]': {
			filters: 'min max',
			data: { min: 2, max: 3 },
			errors: {
				min: 'Check at least <strong>2</strong> options.',
				max: 'No more than <strong>3</strong> options allowed.'
			}
		}
	}
};
var $myform = $('#my-form').idealforms(options).data('idealforms');
$('#reset').click(function(){
	$myform.reset().fresh().focusFirst()
});
$myform.focusFirst();
</script>