學(xué)習(xí)要點(diǎn)

• HTML部分
• CSS部分
• jQuery部分

(一) HTML部分

<!--表單區(qū)-->
<div id="dialog" title="會(huì)員注冊(cè)">
    <p>
        <label for="user">賬號(hào):</label>
        <input type="text" name="user" class="text" id="user" title="請(qǐng)輸入賬號(hào),不小于2位!">
        <span class="star"> * </span>
    </p>
    <p>
        <label for="password">密碼:</label>
        <input type="password" name="password" class="text" id="password" title="請(qǐng)輸入密碼，位數(shù)不能小于6位!">
        <span class="star"> * </span>
    </p>
     <p>
         <label for="email">郵箱:</label>
         <input type="text"name="email" class="text" id="email" title="請(qǐng)輸入電子郵件！">
         <span class="star"> * </span>
     </p>
     <p>
         <label for="">性別</label>
         <input type="radio" name="sex" id="male" checked="checked"><label for="male">男</label>
         <input type="radio" name="sex" id="female"><label for="female">女</label>
     </p>
    <p>
        <label for="date">生日:</label>
        <input type="text" name="date" readonly="readonly" class="text" id="date">
    </p>
       <p>
        <select name="city" id="city2">
            <option value="天津">天津</option>
            <option value="北京">北京</option>
            <option value="石家莊">石家莊</option>
        </select>
    </p>
</div>
<!--表單區(qū)結(jié)束-->

(二) css部分

#dialog{padding:15px;}
#dialog p{margin:10px 0;padding:0;}
#dialog p label{font-size:14px;color:#666;}
#dialog p .star{color:red;}
#dialog.text{border-radius:4px;border:1px solid #ccc;background:#fff;height:25px;width:200px;text-indent:5px;color:#666;}

(三) jquery部分

       //dialog樣式
         $("#dialog").dialog({
               title:"這個(gè)就是注冊(cè)的對(duì)話框",
               width:600,
               height:600,
               minWidth:400,
               minHeight:400,
               autoOpen:false,
               draggable:false,
               //position:"center center",
               show:true,
               hide:true,
               resizable:false,
               modal:true,
               closeText:"關(guān)閉",
               buttons:{
                   "提交":function(){window.alert("提交")},
                   "保存":function(){window.alert("關(guān)閉")}
               }
         })
        //點(diǎn)擊后彈出來(lái)對(duì)話框
        $("#dialog").buttonset();
        $("#date").datepicker();
        $("#dialog input[title]").tooltip();
       //下拉框
    $("#city2").on('selectmenuchange', function (e,ui){
              console.log(ui.item.value);
          })