学习要点
(一) 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);
})
