profile,html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<%
String familyid = request.getParameter("familyid");
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><s:text name="Twitter_PC"></s:text></title>
<link href="app/pc/css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="app/pc/js/fancybox/fancy.css" type="text/css"
media="screen" />
<script type="text/javascript" src="app/pc/js/jquery.js"></script>
<script type="text/javascript" src="app/pc/js/common.js"></script>
<script type="text/javascript" src="app/pc/js/profile.js"></script>
<script type="text/javascript" src="app/pc/js/fancybox/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="app/pc/js/fancybox/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="app/pc/js/validation/lib/jquery.js"></script>
<script src="app/pc/js/validation/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var familyid = '<%=familyid%>';
initProfile(familyid);
});
function showPrfile(data){
var divStr='';
for ( var i = 0; i < data.length; i++) {
var nickname = data[i].nickname;
var userid = data[i].userid;
var str='<div class="data"><div class="icon_avatar">';
if(data[i].iconurl!=''){
str +='<img src="'+data[i].iconurl+'"/>';
}else{
str += '<img src="app/pc/images/icon_avatar.png"/>';
}
str += '<div class="avatar_title">'+'<span>'+nickname+'</span></div></div>';
if(data[i].account3rd==undefined){
str +='<div class="icon_linked"><img src="app/pc/images/icon_not_linked.png"/></div>';
}else{
str+='<div class="icon_linked"><img src="app/pc/images/icon_linked.png"/></div>';
}
str+='<div class="btn_linked"><div class="btn_link_img">';
if(data[i].account3rd==undefined){
str +='<a href="javascript:void(0)" οnclick="linkTwitter(\''+data[i].snsid+'\')" ><span>'+'<s:text name="Link_Twitter"></s:text>'+'</span></a>';
}else{
str+='<a href="#" ><span>'+'Link_Twitter'+'</span></a>';
}
str+='</div><div class="icon_edit">'+
'<a class="editProfile" href="javascript:void(0)" οnclick="toEnterPin(\''+userid+'\',\''+nickname+'\')" ></a>'+
'</div><div class="icon_delete">'+
'<a class="delProfile" href="javascript:void(0)" onClick="delProfile(\''+nickname+'\')" ></a></div>'+
'</div>';
divStr+=str;
}
divStr+='';
if(data.length == 0){
divStr = '<div class="profile_empty"><span>'+'profile is empty ! You can click on the button above to add profile. '+
'<a href="javascript:void(0)" οnclick="addProfile(\'<%=familyid%>\')">and you can also add a profile here</a></span></div>'
}
document.getElementById("profile_show").innerHTML=divStr;
}
function initProfile(familyid){
var url = "pcajax/rest.action";
var data = "type=get&resturl=/rest/sns/v2/user/family/1/" + familyid;
var callback = showPrfile;
var req = new Cmn.jqAjax();
req(url,callback,data);
}
</script>
</head>
<div id ="mask"></div>
<!-- 添加用户 -->
<div id="add_main" class="add_main">
<form id="" action="" method="post">
<div class="add_close"><a href="javascript:void(0)" οnclick="close_window()"></a></div>
<div class="add_avatar">
<img src="app/pc/images/icon_avatar.png"/>
</div>
<div class="add_edit">
<div class="add_edit_1"><input id="name" type="text" name="name" maxlength="15" value=""/></div>
<div class="add_edit_1"><input id="pin" type="password" name="pin" maxlength="4" value="" /></div>
<div class="add_edit_1"><input id="repin" type="password" name="repin" maxlength="4" value="" /></div>
<div class="add_err"><span id="add_edit_err"></span></div>
</div>
<div class="add_btn">
<div class="add_btn_1"><a class="addYes" href="javascript:void(0)" οnclick="addYes('<%=familyid%>')"><span>Done</span></a></div>
<div class="add_btn_1"><a class="addNo" href="javascript:void(0)" οnclick="close_window()"><span>Cancel</span></a></div>
</div>
</form>
</div>
<!-- 删除用户 -->
<div id="del_main" class="del_main">
<div class="del_close"><a href="javascript:void(0)" οnclick="close_window()"></a></div>
<div class="del_avatar">
<img src="app/pc/images/icon_avatar.png"/>
<div class="del_avatar_title">
<span id="nickname"></span>
</div>
</div>
<div class="del_care">
<span>Do you want to delete this profile?</span>
</div>
<div class="del_btn">
<div class="del_btn_1"><a href="javascript:void(0)" οnclick="delYes('<%=familyid%>')" ><span>Yes</span></a></div>
<div class="del_btn_1"><a href="javascript:void(0)" οnclick="close_window()"><span>NO</span></a></div>
</div>
</div>
<!-- 修改用户前输入pin -->
<div id="pin_main" class="pin_main">
<div class="del_close"><a href="javascript:void(0)" οnclick="close_window()"></a></div>
<form id="pinform" action="" method="post">
<input id="user_id" type="hidden" name="user_id"/>
<input id="ename" type="hidden" name="ename" />
<div class="pin_care">
<span>Please input pin for this profile.</span>
</div>
<div class="enter_pin"><input id="epin" type="password" name="epin" maxlength="4"/></div>
<div class="pin_btn">
<div class="pin_btn_1"><a class="addYes" href="javascript:void(0)" οnclick="to_edit()"><span>Done</span></a></div>
<div class="pin_btn_1"><a class="addNo" href="javascript:void(0)" οnclick="close_window()"><span>Cancel</span></a></div>
</div>
</form>
</div>
<!-- 修改用户页面 -->
<div id="edit_main" class="add_main">
<div class="add_close"><a href="javascript:void(0)" οnclick="close_window()"></a></div>
<form id="editform" action="" method="post">
<input id="edituser_id" type="hidden" name="edituser_id"/>
<input id="login_token" type="hidden" name="login_token"/>
<div class="add_avatar">
<img src="app/pc/images/icon_avatar.png"/>
</div>
<div class="add_edit">
<div class="add_edit_1"><input id="editname" type="text" name="editname" maxlength="15" value=" " /></div>
<div class="add_edit_1"><input id="editpin" type="password" name="editpin" maxlength="4" value="" /></div>
<div class="add_edit_1"><input id="reeditpin" type="password" name="reeditpin" maxlength="4" value="" /></div>
</div>
<div class="add_btn">
<div class="add_btn_1"><a class="addYes" href="javascript:void(0)" οnclick="edit('<%=familyid%>')"><span>Done</span></a></div>
<div class="add_btn_1"><a class="addNo" href="javascript:void(0)" οnclick="close_window()"><span>Cancel</span></a></div>
</div>
</form>
</div>
<body >
<div id="profile_main">
<div class="bg_top"><span>Twitter Account Management</span></div>
<div id="main">
<div class="icon_add" id="icon_add">
<a href="javascript:void(0)" οnclick="addProfile('<%=familyid%>')"><span><s:text name="Create_new_profile"></s:text></span></a>
</div>
<div id="profile_show" class="profile_show"></div>
</div>
</div>
</body>
</html>js
/**
* 获得鼠标在浏览器位置
* @param data
*/
function mouseMove(ev)
{
ev= ev || window.event;
var mousePos = mouseCoords(ev);
return mousePos;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
//check
$(document).ready(function() {
//添加check
$("#addform").validate({
rules: {
name: {
required: true,
checkname:true,
remote: "twitter/checkName.action"
},
pin: {
required: true,
digits:true,
rangelength:[4,4]
},
repin: {
required: true,
digits:true,
rangelength:[4,4],
equalTo: "#pin"
},
},
messages: {
name: {
required: "Please enter your name",
checkname:"English letter, contain only letters, numbers, and the underscore",
remote: jQuery.format("{0} is Exist!")
},
pin: {
required: "Please provide a password",
digits:"Please enter only digits",
rangelength: $.validator.format("Please enter a value {0} characters long.")
},
repin: {
required: "Please provide a password",
digits:"Please enter only digits",
rangelength: $.validator.format("Please enter a value {0} characters long."),
equalTo: "Please enter the same pin as above"
},
},
errorPlacement: function(error, element)
{
$('<br/>').appendTo(element.parent());
error.appendTo(element.parent());
}
});
//输入pin check
$("#pinform").validate({
rules: {
epin: {
required: true,
digits:true,
rangelength:[4,4],
},
},
messages: {
epin: {
required: "Please provide a password",
digits:"Please enter only digits",
rangelength: $.validator.format("Please enter a value {0} characters long."),
},
},
});
//修改check
$("#editform").validate({
rules: {
editname: {
required: true,
checkname:true,
},
editpin: {
required: true,
digits:true,
rangelength:[4,4]
},
reeditpin: {
required: true,
digits:true,
rangelength:[4,4],
equalTo: "#editpin"
},
},
messages: {
editname: {
required: "Please enter your name",
checkname:"English letter, contain only letters, numbers, and the underscore",
},
editpin: {
required: "Please provide a password",
digits:"Please enter only digits",
rangelength: $.validator.format("Please enter a value {0} characters long.")
},
reeditpin: {
required: "Please provide a password",
digits:"Please enter only digits",
rangelength: $.validator.format("Please enter a value {0} characters long."),
equalTo: "Please enter the same pin as above"
},
},
});
});
//关闭窗口和取消操作
function close_window(){
var add_main = document.getElementById('add_main');//添加
var mask = document.getElementById('mask');//半透明div
var del_main = document.getElementById('del_main');//删除
var pin_main = document.getElementById('pin_main');//修改前输入pin
var edit_main = document.getElementById('edit_main');//修改
mask.style.display="none";
add_main.style.display="none";
del_main.style.display="none";
pin_main.style.display="none";
edit_main.style.display="none";
}
function returnList(data){
parent.window.location.href = parent.window.location.href;
}
function addYes(familyid) {
var nickname = $("#name").val();
var iconurl = 'app/pc/images/icon_avatar.png';
var password = $("#pin").val();
var add_edit_err = $("#add_edit_err").val();
if(nickname==""||nickname==null||nickname==undefined){
$("#name").focus();
$("#add_edit_err").html("Please enter your name");
return false;
}
var patrn=/^[a-zA-Z][a-zA-Z0-9_]*$/;
if(!patrn.exec(nickname)){
alert("English letter,contain only letters, numbers,and the underscore");
$("#name").val("");
$("#name").focus();
return false;
}
if(password==""||password==null||password==undefined){
$("#pin").focus();
$("#add_edit_err").html("Please provide a password");
return false;
}
var pwd_patrn=/^[0-9]{4}$/;
if(!pwd_patrn.exec(password)){
$("#add_edit_err").html("The password must be 4 digits");
$("#pin").val("");
$("#pin").focus();
return false;
}
if($("#repin").val()==""||$("#repin").val()==null||$("#repin").val()==undefined||$("#repin").val()!=password){
$("#repin").focus();
$("#add_edit_err").html("Please provide a password");
return false;
}
if($("#repin").val()!=password){
$("#repin").focus();
$("#add_edit_err").html("Please enter the same pin as above");
return false;
}
var pwd_patrn=/^[0-9]{4}$/;
if(!pwd_patrn.exec($("#repin").val())){
$("#add_edit_err").html("The password must be 4 digits");
$("#repin").val("");
$("#repin").focus();
return false;
}
var familyid= familyid;
var url = 'pcajax/rest.action';
var data = "type=post&resturl=/rest/sns/v2/user/register/1&nickname="+nickname+
"&iconurl="+iconurl+"&password="+password+"&familyid="+familyid;
var callback = returnList;
var req = new Cmn.jqAjax();
req(url,callback,data);
}
function addProfile(familyid) {
var add_main = document.getElementById('add_main');//添加
var mask = document.getElementById('mask');//半透明div
document.all.mask.style.width=window.screen.availWidth+"px";
document.all.mask.style.height=window.screen.height+"px";
add_main.style.display="block";
mask.style.display="block";
}
//删除
function delProfile(nickname) {
var mouse = mouseMove();//鼠标在浏览器的坐标
var mask = document.getElementById('mask');//半透明div
var del_main = document.getElementById('del_main');//删除
document.getElementById('nickname').innerHTML=nickname;
document.all.mask.style.width=window.screen.availWidth+"px";
document.all.mask.style.height=window.screen.height+"px";
del_main.style.display="block";
mask.style.display="block";
}
function delYes(familyid) {
var nickname = $("#nickname").html();
var familyid= familyid;
var url = 'pcajax/rest.action';
var data = "type=post&resturl=/rest/sns/v2/user/delete/1/{token}&nickname="+nickname+
"&familyid="+familyid;
var callback = returnList;
var req = new Cmn.jqAjax();
req(url,callback,data);
}
//修改用户前进入输入pin页面
function toEnterPin(userid,nickname){
var mask = document.getElementById('mask');//半透明div
var pin_main = document.getElementById('pin_main');//修改前输入pin
var mouse = mouseMove();
var user_id = document.getElementById('user_id');
user_id.value=userid;
document.getElementById('ename').value=nickname;
document.all.mask.style.width=window.screen.availWidth+"px";
document.all.mask.style.height=window.screen.height+"px";
pin_main.style.display="block";
mask.style.display="block";
}
//跳转到修改用户页面
function to_edit(){
var userid = $("#user_id").val();
var password = $("#epin").val();
var url = 'pcajax/rest.action';
var data = "type=post&resturl=/rest/sns/v2/user/login/1&userid="+userid+
"&password="+password;
var callback = to_edit_1;
var failCallback = to_editerr;
var req = new Cmn.jqAjax();
req(url,callback,data,failCallback);
}
function to_editerr(data){
alert("密码输入错误");
document.getElementById('epin').value="";
document.getElementById('epin').focus();
return;
}
function to_edit_1(data){
var mask = document.getElementById('mask');//半透明div
var edit_main = document.getElementById('edit_main');//修改
document.getElementById('editname').value=data.nickname;
document.getElementById('edituser_id').value=data.userid;
document.getElementById('login_token').value=data.token;
document.all.mask.style.width=window.screen.availWidth+"px";
document.all.mask.style.height=window.screen.height+"px";
pin_main.style.display="none";
edit_main.style.display="block";
mask.style.display="block";
}
function edit(){
var userid = $("#edituser_id").val();
var nickname = $("#editname").val();
var password = $("#editpin").val();
var url = 'pcajax/rest.action';
var data = "type=post&resturl=/rest/sns/v2/user/update/"+userid+"/"+login_token+
"&password="+password+"&nickname="+nickname;
var callback = returnList;
var req = new Cmn.jqAjax();
req(url,callback,data);
}
function edit_err(data){
alert("修改失败");
return;
}
//账号绑定
function linkTwitter(snsid){
var url = "pcajax/rest.action";
var data = "type=get&resturl=/rest/twitter/accountbind/snsid/"+snsid+"/accounttype/2";
var callback = linkSuccess;
var failCallback = linkError;
var req = new Cmn.jqAjax();
req(url,callback,data,failCallback);
}
function linkSuccess(data){
alert(data);
}
function linkError(data){
alert(data);
}
......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
<title>文本框点击时文字消失，失去焦点时文字出现 练习 by 阿会楠</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="text" id="userName" name="userName" size="20" value="请输入用户名">
<input type="text" id="pwd_text" name="password" size="20" value="请输入密码">
<input type="password" id="password" name="password" size="20" value="">
<input type="submit" id="button" name="button" value="登录">
</body>
</html>
<style>
.focus {
left: 0px;
background-color: #FFF;
top: 0px;
}
</style>
<script language="JavaScript" type="text/javascript">
$(function(){
//对用户名框进行操作
$("#userName").focus(function(){ //用户名框获得鼠标焦点
var txt_value = $(this).val(); //得到当前文本框的值
if(txt_value==this.defaultValue) {
$(this).val(""); //如果符合条件，则清空文本框内容
}
$(this).addClass("focus");
});
$("#userName").blur(function(){ //用户名框失去鼠标焦点
var txt_value = $(this).val(); //得到当前文本框的值
if(txt_value=="") {
$(this).val(this.defaultValue); //如果符合条件，则设置内容
}
$(this).removeClass("focus");
})
//对密码框进行操作
var $pwd_text=$("#pwd_text");
var $password=$("#password");
$password.hide();
$pwd_text.focus(function(){
if($pwd_text.val()=="请输入密码")
$pwd_text.remove();
$password.show().focus();
// $pwd_text.hide();
$password.show();
}
$($password).addClass("focus");
});
$password.blur(function(){
if($password.val()==""){
$password.hide();
$pwd_text.show();
}
$(this).removeClass("focus");
});
});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
