jquery提示信息 tips
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en"> <head>
<title>${pd.SYSNAME}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="static/login/bootstrap.min.css" />
<link rel="stylesheet" href="static/login/css/camera.css" />
<link rel="stylesheet" href="static/login/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="static/login/matrix-login.css" />
<link href="static/login/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="static/js/jquery-1.5.1.min.js"></script> </head>
<body> <div style="width:100%;text-align: center;margin: 0 auto;position: absolute;">
<div id="loginbox">
<form action="" method="post" name="loginForm" id="loginForm">
<div class="control-group normal_text">
<h3>
<img src="static/login/logo.png" alt="Logo" />
</h3>
</div>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_lg">
<i><img height="37" src="static/login/user.png" /></i>
</span><input type="text" name="loginname" id="loginname" value="" placeholder="请输入用户名" />
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_ly">
<i><img height="37" src="static/login/suo.png" /></i>
</span><input type="password" name="password" id="password" placeholder="请输入密码" value="" />
</div>
</div>
</div>
<div style="float:right;padding-right:10%;">
<div style="float: left;margin-top:3px;margin-right:2px;">
<font color="white">记住密码</font>
</div>
<div style="float: left;">
<input name="form-field-checkbox" id="saveid" type="checkbox"
onclick="savePaw();" style="padding-top:0px;" />
</div>
</div>
<div class="form-actions">
<div style="width:86%;padding-left:8%;">
<div style="float: left;">
<i><img src="static/login/yan.png" /></i>
</div>
<div style="float: left;" class="codediv">
<input type="text" name="code" id="code" class="login_code" style="height:16px; padding-top:0px;" />
</div>
<div style="float: left;">
<i><img style="height:22px;" id="codeImg" alt="点击更换" title="点击更换" src="" /></i>
</div>
<span class="pull-right" style="padding-right:3%;">
<a href="javascript:quxiao();" class="btn btn-success">取消</a>
</span>
<span class="pull-right">
<a onclick="severCheck();" class="flip-link btn btn-info" id="to-recover">登录</a>
</span> </div>
</div> </form> <div class="controls">
<div class="main_input_box">
<font color="white"><span id="nameerr">Copyright © FH
2100</span></font>
</div>
</div>
</div>
</div>
<div id="templatemo_banner_slide" class="container_wapper">
<div class="camera_wrap camera_emboss" id="camera_slide">
<div data-src="static/login/images/banner_slide_01.jpg"></div>
<div data-src="static/login/images/banner_slide_02.jpg"></div>
<div data-src="static/login/images/banner_slide_03.jpg"></div>
</div>
<!-- #camera_wrap_3 -->
</div> <script type="text/javascript">
/**
使用方法
* $(selector).tips({ //selector 为jquery选择器
* msg:'your messages!', //你的提示消息 必填
* side:1, //提示窗显示位置 1，2，3，4 分别代表 上右下左 默认为1（上） 可选
* color:'#FFF', //提示文字色 默认为白色 可选
* bg:'#F00',//提示窗背景色 默认为红色 可选
* time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
* x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选
* y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选
* })
*/
//服务器校验
function severCheck(){
if(check()){ var loginname = $("#loginname").val();
var password = $("#password").val();
var code = "qq313596790fh"+loginname+",fh,"+password+"QQ978336446fh"+",fh,"+$("#code").val();
$.ajax({
type: "POST",
url: 'login_login',
data: {KEYDATA:code,tm:new Date().getTime()},
dataType:'json',
cache: false,
success: function(data){
if("success" == data.result){
saveCookie();
window.location.href="main/index";
}else if("usererror" == data.result){
$("#loginname").tips({
side : 1,
msg : "用户名或密码有误",
bg : '#FF5080',
time : 15
});
$("#loginname").focus();
}else if("codeerror" == data.result){
$("#code").tips({
side : 1,
msg : "验证码输入有误",
bg : '#FF5080',
time : 15
});
$("#code").focus();
}else{
$("#loginname").tips({
side : 1,
msg : "缺少参数",
bg : '#FF5080',
time : 15
});
$("#loginname").focus();
}
}
});
}
} $(document).ready(function() {
changeCode();
$("#codeImg").bind("click", changeCode);
}); $(document).keyup(function(event) {
if (event.keyCode == 13) {
$("#to-recover").trigger("click");
}
}); function genTimestamp() {
var time = new Date();
return time.getTime();
} function changeCode() {
$("#codeImg").attr("src", "code.do?t=" + genTimestamp());
} //客户端校验
function check() { if ($("#loginname").val() == "") { $("#loginname").tips({
side : 2,
msg : '用户名不得为空',
bg : '#AE81FF',
time : 3
}); $("#loginname").focus();
return false;
} else {
$("#loginname").val(jQuery.trim($('#loginname').val()));
} if ($("#password").val() == "") { $("#password").tips({
side : 2,
msg : '密码不得为空',
bg : '#AE81FF',
time : 3
}); $("#password").focus();
return false;
}
if ($("#code").val() == "") { $("#code").tips({
side : 1,
msg : '验证码不得为空',
bg : '#AE81FF',
time : 3
}); $("#code").focus();
return false;
} $("#loginbox").tips({
side : 1,
msg : '正在登录 , 请稍后 ...',
bg : '#68B500',
time : 10
}); return true;
} function savePaw() {
if (!$("#saveid").attr("checked")) {
$.cookie('loginname', '', {
expires : -1
});
$.cookie('password', '', {
expires : -1
});
$("#loginname").val('');
$("#password").val('');
}
} function saveCookie() {
if ($("#saveid").attr("checked")) {
$.cookie('loginname', $("#loginname").val(), {
expires : 7
});
$.cookie('password', $("#password").val(), {
expires : 7
});
}
}
function quxiao() {
$("#loginname").val('');
$("#password").val('');
} jQuery(function() {
var loginname = $.cookie('loginname');
var password = $.cookie('password');
if (typeof(loginname) != "undefined"
&& typeof(password) != "undefined") {
$("#loginname").val(loginname);
$("#password").val(password);
$("#saveid").attr("checked", true);
$("#code").focus();
}
});
</script>
<script>
//TOCMAT重启之后 点击左侧列表跳转登录首页
if (window != top) {
top.location.href = location.href;
}
</script> <script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-1.7.2.js"></script>
<script src="static/login/js/jquery.easing.1.3.js"></script>
<script src="static/login/js/jquery.mobile.customized.min.js"></script>
<script src="static/login/js/camera.min.js"></script>
<script src="static/login/js/templatemo_script.js"></script>
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<script type="text/javascript" src="static/js/jquery.cookie.js"></script>
</body> </html>
/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({ //selector 为jquery选择器
* msg:'your messages!', //你的提示消息 必填
* side:1, //提示窗显示位置 1，2，3，4 分别代表 上右下左 默认为1（上） 可选
* color:'#FFF', //提示文字色 默认为白色 可选
* bg:'#F00',//提示窗背景色 默认为红色 可选
* time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
* x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选
* y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选
* })
*
*
*/
(function ($) {
$.fn.tips = function(options){
var defaults = {
side:1,
msg:'',
color:'#FFF',
bg:'#F00',
time:2,
x:0,
y:0
}
var options = $.extend(defaults, options);
if (!options.msg||isNaN(options.side)) {
throw new Error('params error');
}
if(!$('#jquery_tips_style').length){
var style='<style id="jquery_tips_style" type="text/css">';
style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
style+='</style>';
$(document.body).append(style);
}
this.each(function(){
var element=$(this);
var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
tips.find('.jq_tips_info').css({
color:options.color,
backgroundColor:options.bg
});
switch(options.side){
case 1:
tips.css({
top:element_top-tips.outerHeight()+options.x,
left:element_left-10+options.y
});
break;
case 2:
tips.css({
top:element_top-20+options.x,
left:element_left+element_width+options.y
});
break;
case 3:
tips.css({
top:element_top+element_height+options.x,
left:element_left-10+options.y
});
break;
case 4:
tips.css({
top:element_top-20+options.x,
left:element_left-tips.outerWidth()+options.y
});
break;
default:
}
var closeTime;
tips.fadeIn('fast').click(function(){
clearTimeout(closeTime);
tips.fadeOut('fast',function(){
tips.remove();
})
})
if(options.time){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
tips.hover(function(){
clearTimeout(closeTime);
},function(){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
})
}
});
return this;
};
})(jQuery);
jquery提示信息 tips的更多相关文章
- qTip2 精致的jQuery提示信息插件
qTip2 精致的jQuery提示信息插件 出处:http://www.cnblogs.com/lwme/archive/2012/02/16/qtip2-jquery-plugin.html ...
- 29个非常流行的jQuery提示信息插件
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- 基于jquery的tips悬浮消息提示插件tipso
<a href="javascript:;" class="disabled" data-tipso="Tips" id=" ...
- 原创！！jquery简单tips和dialog
<!------------------html代码-----------------------> <!DOCTYPE html><html><head&g ...
- js（jQuery）tips
一:页面加上$(function(){***内容***})与不加的区别 1.这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在 ...
- jquery tips简易使用方法 新手必看
使用jquery1.12.4以上版本 使用jquery插件 tips .beg-pull-right 点击时的选择器 在这里写的是一个类选择器 记得引入jquery $(".beg-pu ...
- Javascript随笔2（JQuery）
1.jQuery 语法 Tips: 通过 CDN(内容分发网络)引用JQuery:(link的引用最好放在script的引用之前) <script src="http://apps.b ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- EasyUI Datagrid 鼠标悬停显示单元格内容
第一种方式: .js 定义函数 <script type="text/javascript"> //格式化单元格提示信息 function formatCellTool ...
随机推荐
- delphi 注册表操作(读取、添加、删除、修改)完全手册
DELPHI VS PASCAL(87) 32位Delphi程序中可利用TRegistry对象来存取注册表文件中的信息. 一.创建和释放TRegistry对象 1.创建TRegistry对象.为了操 ...
- Cocos2d-android (04) 执行多个动作
先后.同时执行多个动作及动作序列执行结束后的事件 import org.cocos2d.actions.instant.CCCallFunc; import org.cocos2d.actions.i ...
- C++中 类的构造函数理解（一）
C++中 类的构造函数理解(一) 写在前面 这段时间完成三个方面的事情: 1.继续巩固基础知识(主要是C++ 方面的知识) 2.尝试实现一个iOS的app,通过完成app,学习iOS开发中要用到的知识 ...
- Beginner’s Guide（开始者向导）
This guide gives a basic introduction to nginx and describes some simple tasks that can be done with ...
- Request、Request.Form、Request.QueryString 用法的区别
Request.Form:获取以POST方式提交的数据. Request.QueryString:获取地址栏参数(以GET方式提交的数据). Request:包含以上两种方式(优先获取GET方式提交的 ...
- 配置spring管理的bean的作用域
.singleton 在每一个spring Ioc容器中一个bean定义只有一个对象实例.默认情况下会在容器启动时初始化bean,但我们可以指定bean节点的lazy-init = "tru ...
- ps做gif love教程（转）
先看看效果吧: 这是在写部教程的时候,看到一个由方格组成的心.于是试着用PS做成了动画,然后加入了LOVE四个字母,看起来还可以.但是,有些复杂.复杂倒不是技术上的复杂,是做起来复杂. 来试试吧. 1 ...
- MVC弹出子页面向父页面传值
实现思路是使用js在父子页面间传值 视图一代码,父页面 @{ ViewBag.Title = "Index"; } <script type="text/javas ...
- Jersey Rest服务类型
在Rest服务中,资源类是接收Rest请求并完成响应的核心类,而资源类由Rest服务的“提供者”来调度的,这一定义类似于自定义Servlet类,该类会奖请求分派给指定的Controller/Actio ...
- NServiceBus-性能测试
NServiceBus: 有效地处理一个消息 处理大量并发 尺度大小不同的服务器 尺度低规格的设备 的最终平衡速度和安全. 基准 许多参数会影响测量性能.最明显的是硬件服务器和CPU核的数量,大小的内 ...