jQuery创建注册对话框

学习要点

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

(一) HTML部分

<!--表单区-->
<div id="dialog" title="会员注册">
    <p>
        <label for="user">账号:</label>
        <input type="text" name="user" class="text" id="user" title="请输入账号,不小于2位!">
        <span class="star"> * </span>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" name="password" class="text" id="password" title="请输入密码，位数不能小于6位!">
        <span class="star"> * </span>
    </p>
     <p>
         <label for="email">邮箱:</label>
         <input type="text"name="email" class="text" id="email" title="请输入电子邮件！">
         <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>
<!--表单区结束-->

(二) 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:"这个就是注册的对话框",
               width:600,
               height:600,
               minWidth:400,
               minHeight:400,
               autoOpen:false,
               draggable:false,
               //position:"center center",
               show:true,
               hide:true,
               resizable:false,
               modal:true,
               closeText:"关闭",
               buttons:{
                   "提交":function(){window.alert("提交")},
                   "保存":function(){window.alert("关闭")}
               }
         })
        //点击后弹出来对话框
        $("#dialog").buttonset();
        $("#date").datepicker();
        $("#dialog input[title]").tooltip();
       //下拉框
    $("#city2").on('selectmenuchange', function (e,ui){
              console.log(ui.item.value);
          })