//-----------------------------------------------------------------------------------------------//-----------------------------------------------------------------------------------------------//静态页面 微博系统--登录
------------------------------------------------------------------------------------------------
//css页面@CHARSET "UTF-8";/*自定义 jQuery UI 皮肤*/.ui-dialog { padding:0 !important; border-radius:0 !important; border:1px solid #666 !important;}.ui-dialog-titlebar { height:37px !important; border-bottom:none !important; border-radius:0 !important; padding:0 !important; background:url(../img/ui_header_bg.png) !important; border:1px solid #fff !important;}.ui-dialog-title { height:37px !important; line-height:35px !important; font-size:14px !important; text-indent:10px !important; color:#333 !important;}.ui-dialog-content {width:100% !important;}.ui-dialog-buttonset button { height:35px !important; background:url(../img/button.png) !important; border:none !important; color:#fff !important;}.ui-dialog-buttonset button:hover { background:url(../img/button_hover.png) !important;}.ui-dialog-titlebar-close { background:url(../img/ui_header_bg.png) !important;}.ui-corner-all { overflow:visible;}body { margin:0; padding:0; font-family:'微软雅黑';}#header { background:url(../img/logo.png) no-repeat; width:198px; height:60px; margin:0 auto; position:relative; top:150px;}#main { text-align:center; position:relative; top:210px;}#login input[type="text"],#login input[type="password"] { width:250px; height:25px; background:#000; border:1px solid #fff; color:#fff; border-radius:5px; font-size:18px; padding:10px; line-height:25px; margin-right:15px;}#login input[type="submit"] { width:150px; height:50px; border:none; font-size:24px; font-weight:bold; background:url(../img/login_button.png) repeat-x; position:relative; top:-2px;}#login input[type="submit"]:hover { background:url(../img/login_button_hover.png) repeat-x;}#main .bottom { margin:0 auto; text-align:right; width:380px;}#main .bottom a { color:#eee; font-size:14px; text-decoration:none; text-shadow:3px 3px 3px #333; padding:10px;}#main .bottom a:hover { text-decoration:underline; color:#ccc;}#footer { width:100%; height:40px; background:#000; position:absolute; bottom:0px; opacity:0.4; filter:alpha(opacity=40); -moz-opacity:0.4;}p.footer { color:#eee; font-size:13px; width:100%; text-align:center; position:absolute; bottom:0px;}#reg_dialog input.text { width:270px; height:25px; border-radius:5px; border:1px solid #ccc; background:#fff;}#reg_dialog span.red { color:red;}#reg_dialog span.succ { width:38px; display:inline-block; background:url(../img/success.gif) no-repeat center;}#reg_dialog span.loading { width:38px; display:inline-block; background:url(../img/loading_form.gif) no-repeat center;}#reg_dialog ol.reg_error { color:red; font-size:12px;}#reg_dialog ol.reg_error li { height:20px;}#loading { background:url(../img/loading.gif) no-repeat 20px center; text-indent:50px; line-height:25px; font-size:14px; letter-spacing:2px;}.ui-menu-item { padding:0 !important; width:100% !important;}.ui-menu-item a { width:100% !important; height:30px !important; text-indent:5px !important; line-height:30px !important; display:inline-block !important; font-size:12px; color:#666 !important;}.ui-menu-item a.ui-state-focus { color:#036 !important; background:url(../img/menu_bg.png) !important;} //js页面$(function () { var rand = Math.round(1 + Math.random() * (5-1)); $('body').css('background','url('+ThinkPHP['IMG']+'/login_bg'+rand+'.jpg) no-repeat').css('background-size','100%'); //login button $('input[type="submit"]').button(); //reg dialog，弹出对话框 $('#reg_dialog').dialog({ title : '请填写注册信息', width : 430, height : 300, autoOpen : false, //是否开启幕布 modal : true, resizable : false, closeText : '关闭', buttons : [{ text : '提交', click : function(e) { $(this).submit(); }, }], //validate是对数据进行验证，主要分为，rules，messages，error，submit这几部分 }).validate({ submitHandler : function(form) { $(form).ajaxSubmit({ type : 'post', dataType: 'text', url : ThinkPHP['REG'] + 'User/register', beforeSubmit : function() { //打开loading，锁定提交按钮 $('#loading').dialog('open'); $('#reg_dialog').dialog('widget').find('button').eq(1).button('disable'); }, success : function(res) { if(res) { //成功 $('#loading').css('background','url('+ThinkPHP['IMG']+'success.gif) no-repeat 20px center').html('恭喜您，注册成功！'); }else { //失败 $('#loading').css('background','url('+ThinkPHP['IMG']+'error.png) no-repeat 20px center').html('很抱歉，注册失败！请重试！'); } setTimeout(function() { $('#loading').dialog('close'); $('#reg_dialog').dialog('close'); //注意，还原的内容也要写在setTimeout里面才可以 //还原 $('#loading').css('background','url('+ThinkPHP['IMG']+'loading.gif) no-repeat 20px center').html('提交数据中，请您稍后...'); $('#reg_dialog').dialog('widget').find('button').eq(1).button('enable'); $('#reg_dialog').resetForm(); $('#reg_dialog span.red').removeClass('succ').html('*'); },1000); }, }); }, rules : { username : { required : true, minlength : 2, maxlength : 20, remote : { url : ThinkPHP['REG'] + 'User/checkUserUnique', type : 'post', beforeSend : function() { $('#username').next().removeClass('succ').html(' ').addClass('loading'); }, //注意此处只能用complete，使用success是无效的 complete : function(jqXHR) { //注意此处只能用true，跟false的返回值 if(jqXHR.responseText == 'true') { $('#username').next().removeClass('loading').html(' ').addClass('succ'); $('#username').css('border','1px solid green'); }else{ $('#username').next().removeClass('succ').removeClass('loading').html('*').addClass('red'); $('#username').css('border','1px solid red'); } }, }, }, password : { required : true, minlength : 6, maxlength : 50, }, email : { required : true, email : true, remote : { url : ThinkPHP['REG'] + 'User/checkEmailUnique', type : 'post', beforeSend : function() { $('#email').next().removeClass('succ').html(' ').addClass('loading'); }, complete : function(jqXHR) { if(jqXHR.responseText) { $('#email').next().removeClass('loading').html(' ').addClass('succ'); $('#email').css('border','1px solid green'); }else{ $('#email').next().removeClass('succ').removeClass('loading').html('*').addClass('red'); $('#email').css('border','1px solid red'); } }, }, }, }, messages : { username : { required : '用户名不能为空', minlength : $.format('用户名不能少于{0}位'), maxlength : $.format('用户名不能大于{0}位'), remote : '很抱歉，该用户名已经被注册', }, password : { required : '密码不能为空', minlength : $.format('密码不能小于{0}位'), maxlength : $.format('密码不能大于{0}位'), }, email : { required : '邮箱不能为空', email : '电子邮件格式不正确', remote : '很抱歉，该邮箱已经被注册', }, }, /*设置错误显示*/ highlight : function(element , errorclass) { $(element).css('border','1px solid red'); $(element).next().html('*').removeClass('succ'); }, unhighlight : function(element , errorclass) { $(element).css('border','1px solid green'); $(element).next().html(' ').addClass('succ'); }, errorLabelContainer : 'ol.reg_error', wrapper : 'li', showErrors : function(errorMap ,errorList) { //获取错误个数，依靠个数来改变dialog的高度 var error_num = this.numberOfInvalids(); if(error_num > 0) $('#reg_dialog').dialog('option','height',error_num * 20 + 300); else $('#reg_dialog').dialog('option','height',300); //必要的，是声明仍旧采用默认的错误显示模式，这样lo.reg_error才有用 this.defaultShowErrors(); }, /*设置错误显示*/ }); //click open reg $('#reg').click(function() { $('#reg_dialog').dialog('open'); }); //loading dialog $('#loading').dialog({ width : 340, //会自动增加40的内边距，所以用40即可 height : 40, autoOpen : false, resizable : false, modal : true, //是否可以通过esc关闭 closeOnEscape : false, //是否可以移动 draggable : false, //隐藏头部 }).parent().find('.ui-widget-header').hide(); //email autocomplete $('#email').autocomplete({ delay : 0, autoFocus : true, source : function(request,response) { var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'], term = request.term, //获取用户输入的内容 name = term, //邮箱的用户名 host = '', //邮箱的域名 ix = term.indexOf('@'),//获取@符号出现的位置 result = [];//最终呈现的列表 //当有@符号的时候，重新分配用户名和域名 if(ix > -1) { name = term.slice(0,ix); host = term.slice(ix+1); } //如果用户名存在，那么开始检测是否有输入@，如果有，那么显示相关的，如果没有，显示全部 if(name) { var findedHosts = (host ? $.grep(hosts,function(value,index) { return value.indexOf(host) > -1 }) : hosts), findedResult = $.map(findedHosts,function(value,index) { return name + '@' + value; }); result = result.concat(findedResult); } response(result); }, });});