中华网通用登录组件 china_api_login

功能解说:

  1. 无刷新登录/退出
  2. 自定义登录前、成功后的HTML代码
  3. 登录成功后跳转至指定页面
  4. 退出成功后跳转至指定页面
  5. 登录过程中的各个阶段都有相应的方法进行操作[详情见参数解说]
  6. 一个页面可出现多个登陆模块,支持单点登录多点触发
  7. 支持自定义提交地址
  8. 支持自定义隐藏表单参数设置
我们的改进:

2014.7.14号:升级 3.x【BUG修补】 修正IE9及以下版本默认初始化时用户名className的dead未能初始化BUG 2013.8.8号:升级 3.0版本【针对CSS3及手机端优化】 参数说明中增加passwordInitValue【用于密码提示,仅支持IE10及其他浏览器】
调整userNameInitValue的实现方式【IE10及其他浏览器采用表单的placeholder属性实现,IE9及以下浏览器采用原来的方法】
增加submitAfterFn方法,用于点击登录按钮后执行方法
增加submitBackFn方法,用于提交的数据返回时执行方法,无论返回对错
2011.12.26号:升级 2.0版本【重构内核】 修复同页面出现多个登录模块的BUG
添加单点登录退出,多点触发功能
用户名和密码不同状态样式命名统一
修复浏览器自行记录帐号密码功能
记录最后一次成功登录帐号,刷新时自动完成用户名表单的填写功能
修复隐藏表单提交未能记录BUG
添加提交地址自定义功能
2011.6.29号:升级 1.2版本 china_api_login参数中的id参数添加HTMLElement类型,现在同时支持传递 ID名称 || HTML节点
china_api_login_work.postOut(); 对外API接口添加了callback方法,当有callback时执行callback,使用此功能时与succeed中的outOk冲突【2.0后有冲突】 2011.4.7号:升级 1.1版本 新功能预览 添加 succeed.firstLogin() 方法 仅为手动登陆添加回调函数 和succeed.loginOk()对比, loginOk则为每次登陆成功都执行的,不管是手动登陆还是记录cookie的自动登录都会触发该方法[参数解说]
添加用户名框的默认文字参数[userNameInitValue]
添加用户名框变化状态 未激活[死亡状态] / .dead   当前激活状态 / .current   无状态 / 不加任何class
添加密码框变化状态 无状态 / 不加任何class   当前激活状态 / .current
添加外部引用方法 china_api_login_nickname(); 检测用户是否登录,未登录返回false 已登录返回该用户的nickname
修正 退出时回调函数在初始化回调函数之后执行的BUG
2010.12.15号 我上线了【庆贺】,并且去掉了demo版本中的编码限制问题;
文件进行了高强度压缩,由于组建内有大量的默认HTML结构以及必须有的汉字【已编译】,所以目前只能保持在 6K 大小。

使用说明:

使用三部曲 :无需下载JS,直接引用网络地址
    1、在页面的head标签中插入一下代码:

<script type="text/javascript" src="http://dvsend.china.com/china_login/js/china_api_login.js"></script>


    2、在页面的body标签中插入一个DIV标签并给一个ID属性,例如:

<div id="login"></div>


    3、在页面的body结束前对效果进行引用,例如:【完整引用】

<script type="text/javascript">
china_api_login({id:"login"});
</script>

使用技巧:

记住登录状态:
在我们的组件中 initHTML 参数中支持自定义标签,而自定义标签中有这样一种标签{F7:select_cookietime /} / {F7:checkbox_cookietime /} 这是两个标签,每次使用只能出现一次,他俩的表现形式不同而已;
另外我们的组件还提供了loginOkUrl这个参数,使用方法:loginOkUrl:"http://www.china.com";
上面这两份额参数同时出现就自动实现了记住登录状态,并且直接跳转至您指定的页面。


关于文本框的初始值及状态变化:
用户名框的默认文字参数设置[userNameInitValue]
密码框的默认文字参数设置[passwordInitValue] 3.0开始支持,IE9及以下无效
用户名及密码框的CSS状态:
    普通状态【无任何css】
    未激活状态/提示状态【.dead】可设背景提示
    当前激活状态【.current】
注意:背景提示和默认文字提示[userNameInitValue]只能出现一次

参数说明:

china_api_login({
  id:"login", //容器的ID名称或者容器节点接受[String || HTMLElement]
  initHTML:"", //登录前的HTML【可选】接受字符串[String] 支持自定义标签
  logonHTML:"", //登录后的HTML【可选】接受字符串[String] 支持自定义标签
  userNameInitValue:"", //用户名框的默认文字【可选】接受string 默认[通行证/帐号] 想留空请传递空格
  passwordInitValue:"", //密码框的默认文字【可选】接受string IE10及其他浏览器支持
  hiddenForm:"", //特殊时候所需要的隐藏表单【可选】接受字符串[String] 一般用于填写正常的隐藏表单
  loginUrl:"", //自定义向服务器提交的登录地址 【可选】接受字符串[String]
  outUrl:"" //自定义向服务器提交的退出地址 【可选】接受字符串[String]
  initFn:"", //加载完未登录状态所执行的方法【可选】接受[Function]
  submitAfterFn:"", //点击登录按钮后执行的方法【可选】接受[Function]
  submitBackFn:"", //登录请求返回时执行的方法,无论失败还是成功都执行【可选】接受[Function]
  succeed:{
    firstLogin:"",//仅为手动登陆添加回调函数【可选】接受[Function] 和succeed.loginOk()对比, loginOk则为每次登陆成功都执行的,不管是手动登录还是记录cookie的自动登录都会触发该方法;
    loginOk:"",//登录成功后执行的方法【可选】接受[Function]
    outOk:"",//退出成功后执行的方法【可选】接受[Function]
    loginOkUrl:"",//登录成功后跳转的地址【可选】接受[Function]
    outOkUrl:""//退出成功后跳转的地址【可选】接受[Function]
  },
  error:{
    notUserName:"",//没有填写用户名就提交的提示【可选】接受[Function]
    notPassword:"",//没有填写密码提交的提示【可选】接受[Function]
    notCheckCode:"",//没有验证码的提示 仅作预留【可选】接受[Function]
    errorUserName:"",//用户名或密码错误提示【可选】接受[Function]
    errorPassword:"",//此参数目前系统不提供,仅作预留【可选】接受[Function]
    errorCheckCode:"",//验证码错误提示 仅作预留【可选】接受[Function]
    loginFull:"",//登录次数过多提示接受[Function]
    loginIpLock:"",//IP被封提示【可选】接受[Function]
    errorServer:"",//服务器错误提示接受[Function]
    errorOut:""//退出失败提示【可选】接受[Function]
  }
 
});

自定义标签:

传递的HTML中接受如下标签:

  • 登录前接受的标签【initHTML】:
  • {F7:form}
  • {F7:username /}
  • {F7:password /}
  • {F7:select_cookietime /} / {F7:checkbox_cookietime /} 这两个标签只能出现一个,他们两个的表现形式不同, select_cookietime是下拉框 、 checkbox_cookietime是多选,默认记住1个月
  • {/F7:form}
  • 登录后接受的标签【logonHTML】:
  • [F7:nickname /]
  • [F7:out /]这里的退出可以使用这个标签,该标签默认返回时<a href="#">退出</a>形式,自己就带有退出功能,如果想使用其他标签进行退出则需要增加这样的操作 onclick="china_api_login_work.postOut(); return false;"

对外接口:

效果引用: china_api_login(); 【详细参数】

退出函数: china_api_login_work.postOut(callback); 当有callback时执行callback,使用此功能时与succeed中的outOk冲突
案例:<input type="button" value="退出" onclick="china_api_login_work.postOut();">
外部退出函数特注:启用外部退出函数实现退出功能时succeed中的outOk回调将失效,但该函数支持callback参数,可以用这个来弥补

检测用户是否登录: china_api_login_nickname(); 未登录返回false 已登录返回该用户的nickname

组件实现思路:

主功能由Login对象实现;
使用china_api_login初始化时将参数传递给分解器,分解器将实现不同的实例化对象,并记录所创建的实例对象;
在登录和退出成功时将按照记录的实例对象执行所有的HTML重置功能;
参数配置中的各个参数及回调方法会记录到各个实例对象中;

登录以及退出的过程均采用创建script标签方式向服务器提交申请,服务器返回相应的JS执行方法,整个过程不刷新页面。

组件内部结构:

为保护方法及变量,所有代码包含在匿名空间中;
stack_login为实例分解器;
Login对象为主题功能实现;
login_instantiation记录所有实例对象名称;
login_batch为多点的批处理器;
下面两处是针对老系统对外功能处理的:
login_outer.postOut为china_api_login_work.postOut提供外部退出功能;
login_outer.getNickname为china_api_login_nickname提供外部检测登录和获取nickname功能。

问题反馈:

联系方式:付琦   Mail:fuqi@bj.china.com   QQ:106324307   MSN:fuqiyangru@hotmail.com   电话:5793

便捷菜单 功能解说 使用说明 演示DEMO 使用技巧 参数说明 自定义标签 组件对外接口 组件实现思路 组件内部结构 问题反馈