|
|
|
|
@ -4,44 +4,56 @@
|
|
|
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<head>
|
|
|
|
|
<!-- 设置IE浏览器使用最新的渲染引擎，如果已安装Google Chrome Frame，则使用它 -->
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
|
<!-- 设置文档的字符编码为UTF-8 -->
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<!-- 页面标题，显示在浏览器标签上 -->
|
|
|
|
|
<title>个人信息页面 - 医院药品库存管理系统</title>
|
|
|
|
|
<!-- 页面描述，有助于SEO -->
|
|
|
|
|
<meta name="description" content="个人信息页面 - 医院药品库存管理系统" />
|
|
|
|
|
<!-- 视口设置，确保页面在不同设备上正确缩放和显示 -->
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
|
|
|
<!-- bootstrap & fontawesome -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
|
|
|
|
|
<!-- page specific plugin styles -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/jquery.gritter.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/select2.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap-editable.min.css" />
|
|
|
|
|
<!-- text fonts -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
|
|
|
|
|
<!-- ace styles -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
|
|
|
|
|
<!-- 引入Bootstrap和FontAwesome的CSS样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" /> <!-- Bootstrap框架样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" /> <!-- FontAwesome图标库样式 -->
|
|
|
|
|
<!-- 引入页面特定插件的CSS样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" /> <!-- jQuery UI自定义样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/jquery.gritter.min.css" /> <!-- Gritter通知插件样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/select2.min.css" /> <!-- Select2选择框插件样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" /> <!-- Bootstrap日期选择器插件样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap-editable.min.css" /> <!-- Bootstrap可编辑插件样式 -->
|
|
|
|
|
<!-- 引入文本字体样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" /> <!-- Google字体样式 -->
|
|
|
|
|
<!-- 引入Ace框架的CSS样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> <!-- Ace框架的主要样式 -->
|
|
|
|
|
<!-- 针对IE9及以下版本的Ace框架样式 -->
|
|
|
|
|
<!--[if lte IE 9]>
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
|
|
|
|
|
<%-- <!-- Ace框架针对IE9及以下版本的额外样式 -->--%>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
|
|
|
|
|
<!-- 引入Ace框架的皮肤样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" /> <!-- Ace框架皮肤样式 -->
|
|
|
|
|
<!-- 引入Ace框架的RTL（从右到左）支持样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" /> <!-- Ace框架RTL支持样式 -->
|
|
|
|
|
<!-- 针对IE9及以下版本的Ace框架样式 -->
|
|
|
|
|
<!--[if lte IE 9]>
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
|
|
|
|
|
<%-- <!-- Ace框架针对IE9及以下版本的样式 -->--%>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<!-- inline styles related to this page -->
|
|
|
|
|
<!-- ace settings handler -->
|
|
|
|
|
<script src="../assets/js/ace-extra.min.js"></script>
|
|
|
|
|
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
|
|
|
|
|
<!-- 与本页相关的内联样式（此处未列出） -->
|
|
|
|
|
<!-- 引入Ace框架的设置处理器脚本 -->
|
|
|
|
|
<script src="../assets/js/ace-extra.min.js"></script> <!-- Ace框架的额外功能脚本 -->
|
|
|
|
|
<!-- 引入HTML5shiv和Respond.js库，用于IE8支持HTML5元素和媒体查询 -->
|
|
|
|
|
<!--[if lte IE 8]>
|
|
|
|
|
<script src="../assets/js/html5shiv.min.js"></script>
|
|
|
|
|
<script src="../assets/js/respond.min.js"></script>
|
|
|
|
|
<%-- <!-- HTML5shiv库，使IE8支持HTML5元素 -->--%>
|
|
|
|
|
<script src="../assets/js/respond.min.js"></script> <!-- Respond.js库，使IE8支持媒体查询 -->
|
|
|
|
|
<![endif]-->
|
|
|
|
|
</head>
|
|
|
|
|
<body class="no-skin">
|
|
|
|
|
<div id="navbar" class="navbar navbar-default ace-save-state">
|
|
|
|
|
</head>
|
|
|
|
|
<body class="no-skin">
|
|
|
|
|
<div id="navbar" class="navbar navbar-default ace-save-state">
|
|
|
|
|
<div class="navbar-container ace-save-state" id="navbar-container">
|
|
|
|
|
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
|
|
|
|
|
<span class="sr-only">Toggle sidebar</span>
|
|
|
|
|
@ -145,8 +157,8 @@
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div><!-- /.navbar-container -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-container ace-save-state" id="main-container">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-container ace-save-state" id="main-container">
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
try{ace.settings.loadState('main-container')}catch(e){}
|
|
|
|
|
</script>
|
|
|
|
|
@ -421,40 +433,40 @@
|
|
|
|
|
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
|
|
|
|
|
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div><!-- /.main-container -->
|
|
|
|
|
<!-- basic scripts -->
|
|
|
|
|
<!--[if !IE]> -->
|
|
|
|
|
<script src="../assets/js/jquery-2.1.4.min.js"></script>
|
|
|
|
|
<!-- <![endif]-->
|
|
|
|
|
<!--[if IE]>
|
|
|
|
|
<script src="../assets/js/jquery-1.11.3.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
</div><!-- /.main-container -->
|
|
|
|
|
<!-- basic scripts -->
|
|
|
|
|
<!--[if !IE]> -->
|
|
|
|
|
<script src="../assets/js/jquery-2.1.4.min.js"></script>
|
|
|
|
|
<!-- <![endif]-->
|
|
|
|
|
<!--[if IE]>
|
|
|
|
|
<script src="../assets/js/jquery-1.11.3.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
|
|
|
|
|
</script>
|
|
|
|
|
<script src="../assets/js/bootstrap.min.js"></script>
|
|
|
|
|
<!-- page specific plugin scripts -->
|
|
|
|
|
<!--[if lte IE 8]>
|
|
|
|
|
<script src="../assets/js/excanvas.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<script src="../assets/js/jquery-ui.custom.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.gritter.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootbox.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.easypiechart.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootstrap-datepicker.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.hotkeys.index.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootstrap-wysiwyg.min.js"></script>
|
|
|
|
|
<script src="../assets/js/select2.min.js"></script>
|
|
|
|
|
<script src="../assets/js/spinbox.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootstrap-editable.min.js"></script>
|
|
|
|
|
<script src="../assets/js/ace-editable.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.maskedinput.min.js"></script>
|
|
|
|
|
<!-- ace scripts -->
|
|
|
|
|
<script src="../assets/js/ace-elements.min.js"></script>
|
|
|
|
|
<script src="../assets/js/ace.min.js"></script>
|
|
|
|
|
<!-- inline scripts related to this page -->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
</script>
|
|
|
|
|
<script src="../assets/js/bootstrap.min.js"></script>
|
|
|
|
|
<!-- page specific plugin scripts -->
|
|
|
|
|
<!--[if lte IE 8]>
|
|
|
|
|
<script src="../assets/js/excanvas.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<script src="../assets/js/jquery-ui.custom.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.gritter.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootbox.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.easypiechart.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootstrap-datepicker.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.hotkeys.index.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootstrap-wysiwyg.min.js"></script>
|
|
|
|
|
<script src="../assets/js/select2.min.js"></script>
|
|
|
|
|
<script src="../assets/js/spinbox.min.js"></script>
|
|
|
|
|
<script src="../assets/js/bootstrap-editable.min.js"></script>
|
|
|
|
|
<script src="../assets/js/ace-editable.min.js"></script>
|
|
|
|
|
<script src="../assets/js/jquery.maskedinput.min.js"></script>
|
|
|
|
|
<!-- ace scripts -->
|
|
|
|
|
<script src="../assets/js/ace-elements.min.js"></script>
|
|
|
|
|
<script src="../assets/js/ace.min.js"></script>
|
|
|
|
|
<!-- inline scripts related to this page -->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
jQuery(function($) {
|
|
|
|
|
//editables on first profile page
|
|
|
|
|
$.fn.editable.defaults.mode = 'inline';
|
|
|
|
|
@ -504,150 +516,170 @@
|
|
|
|
|
'width': 140
|
|
|
|
|
},
|
|
|
|
|
success: function(response, newValue) {
|
|
|
|
|
// 如果当前值与新值相同，则直接返回，不做任何操作
|
|
|
|
|
if(currentValue == newValue) return;
|
|
|
|
|
// 更新当前值为新值
|
|
|
|
|
currentValue = newValue;
|
|
|
|
|
// 根据新值获取对应的城市列表，如果新值为空或未定义，则默认为空数组
|
|
|
|
|
var new_source = (!newValue || newValue == "") ? [] : cities[newValue];
|
|
|
|
|
//the destroy method is causing errors in x-editable v1.4.6+
|
|
|
|
|
//it worked fine in v1.4.5
|
|
|
|
|
/**
|
|
|
|
|
$('#city').editable('destroy').editable({
|
|
|
|
|
type: 'select2',
|
|
|
|
|
source: new_source
|
|
|
|
|
}).editable('setValue', null);
|
|
|
|
|
*/
|
|
|
|
|
//so we remove it altogether and create a new element
|
|
|
|
|
var city = $('#city').removeAttr('id').get(0);
|
|
|
|
|
|
|
|
|
|
// 注释掉的代码：在x-editable v1.4.6+版本中，destroy方法会引发错误，而在v1.4.5中工作正常
|
|
|
|
|
// 尝试销毁并重新初始化#city的editable组件，但由于错误，这部分代码被注释掉
|
|
|
|
|
|
|
|
|
|
// 我们改为移除#city元素并创建一个新的元素
|
|
|
|
|
var city = $('#city').removeAttr('id').get(0); // 移除#city的id属性，并获取DOM元素
|
|
|
|
|
// 克隆这个元素，设置新的id为'city'，设置初始文本为'Select City'，并重新初始化为editable组件
|
|
|
|
|
$(city).clone().attr('id', 'city').text('Select City').editable({
|
|
|
|
|
type: 'select2',
|
|
|
|
|
value : null,
|
|
|
|
|
//onblur:'ignore',
|
|
|
|
|
source: new_source,
|
|
|
|
|
type: 'select2', // 使用select2作为下拉选择框
|
|
|
|
|
value : null, // 初始值设为null
|
|
|
|
|
//onblur:'ignore', // 忽略失去焦点事件（被注释掉）
|
|
|
|
|
source: new_source, // 数据源为新获取的城市列表
|
|
|
|
|
select2: {
|
|
|
|
|
'width': 140
|
|
|
|
|
'width': 140 // 设置select2的宽度
|
|
|
|
|
}
|
|
|
|
|
}).insertAfter(city);//insert it after previous instance
|
|
|
|
|
$(city).remove();//remove previous instance
|
|
|
|
|
}).insertAfter(city); // 将新创建的元素插入到原来的元素之后
|
|
|
|
|
$(city).remove(); // 移除原来的元素
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 初始化#city为editable组件，使用select2作为下拉选择框，初始值为'Amsterdam'
|
|
|
|
|
$('#city').editable({
|
|
|
|
|
type: 'select2',
|
|
|
|
|
value : 'Amsterdam',
|
|
|
|
|
//onblur:'ignore',
|
|
|
|
|
source: cities[currentValue],
|
|
|
|
|
//onblur:'ignore', // 忽略失去焦点事件（被注释掉）
|
|
|
|
|
source: cities[currentValue], // 数据源为当前值对应的城市列表
|
|
|
|
|
select2: {
|
|
|
|
|
'width': 140
|
|
|
|
|
'width': 140 // 设置select2的宽度
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
//custom date editable
|
|
|
|
|
// 自定义日期editable组件
|
|
|
|
|
$('#signup').editable({
|
|
|
|
|
type: 'adate',
|
|
|
|
|
type: 'adate', // 使用日期选择器
|
|
|
|
|
date: {
|
|
|
|
|
//datepicker plugin options
|
|
|
|
|
format: 'yyyy/mm/dd',
|
|
|
|
|
viewformat: 'yyyy/mm/dd',
|
|
|
|
|
weekStart: 1
|
|
|
|
|
//,nativeUI: true//if true and browser support input[type=date], native browser control will be used
|
|
|
|
|
// datepicker插件的配置项
|
|
|
|
|
format: 'yyyy/mm/dd', // 日期格式
|
|
|
|
|
viewformat: 'yyyy/mm/dd', // 显示格式
|
|
|
|
|
weekStart: 1 // 一周的第一天为周一
|
|
|
|
|
//,nativeUI: true // 如果为true且浏览器支持input[type=date]，则使用原生的日期选择器（被注释掉）
|
|
|
|
|
//,format: 'yyyy-mm-dd',
|
|
|
|
|
//viewformat: 'yyyy-mm-dd'
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
// 年龄editable组件，使用微调器（spinner）
|
|
|
|
|
$('#age').editable({
|
|
|
|
|
type: 'spinner',
|
|
|
|
|
name : 'age',
|
|
|
|
|
spinner : {
|
|
|
|
|
min : 16,
|
|
|
|
|
max : 99,
|
|
|
|
|
step: 1,
|
|
|
|
|
on_sides: true
|
|
|
|
|
//,nativeUI: true//if true and browser support input[type=number], native browser control will be used
|
|
|
|
|
min : 16, // 最小值
|
|
|
|
|
max : 99, // 最大值
|
|
|
|
|
step: 1, // 步长
|
|
|
|
|
on_sides: true // 在两侧显示按钮（被注释掉的nativeUI配置表示如果为true且浏览器支持input[type=number]，则使用原生的微调器）
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 登录editable组件，使用滑块（slider）
|
|
|
|
|
$('#login').editable({
|
|
|
|
|
type: 'slider',
|
|
|
|
|
name : 'login',
|
|
|
|
|
slider : {
|
|
|
|
|
min : 1,
|
|
|
|
|
max: 50,
|
|
|
|
|
width: 100
|
|
|
|
|
//,nativeUI: true//if true and browser support input[type=range], native browser control will be used
|
|
|
|
|
min : 1, // 最小值
|
|
|
|
|
max: 50, // 最大值
|
|
|
|
|
width: 100 // 宽度
|
|
|
|
|
//,nativeUI: true // 如果为true且浏览器支持input[type=range]，则使用原生的滑块（被注释掉）
|
|
|
|
|
},
|
|
|
|
|
success: function(response, newValue) {
|
|
|
|
|
// 根据新值更新显示的文本，如果新值为1，则显示“1 hour ago”，否则显示“X hours ago”
|
|
|
|
|
if(parseInt(newValue) == 1)
|
|
|
|
|
$(this).html(newValue + " hour ago");
|
|
|
|
|
else $(this).html(newValue + " hours ago");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 关于editable组件，使用富文本编辑器（wysiwyg）
|
|
|
|
|
$('#about').editable({
|
|
|
|
|
mode: 'inline',
|
|
|
|
|
type: 'wysiwyg',
|
|
|
|
|
mode: 'inline', // 内联模式
|
|
|
|
|
type: 'wysiwyg', // 富文本编辑器
|
|
|
|
|
name : 'about',
|
|
|
|
|
wysiwyg : {
|
|
|
|
|
//css : {'max-width':'300px'}
|
|
|
|
|
//css : {'max-width':'300px'} // 可选的CSS样式（被注释掉）
|
|
|
|
|
},
|
|
|
|
|
success: function(response, newValue) {
|
|
|
|
|
// 成功回调函数（当前为空）
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// *** editable avatar *** //
|
|
|
|
|
try {//ie8 throws some harmless exceptions, so let's catch'em
|
|
|
|
|
//first let's add a fake appendChild method for Image element for browsers that have a problem with this
|
|
|
|
|
//because editable plugin calls appendChild, and it causes errors on IE at unpredicted points
|
|
|
|
|
try { // 尝试捕获IE8可能抛出的无害异常
|
|
|
|
|
// 尝试为Image元素添加一个假的appendChild方法，以解决某些浏览器中的错误
|
|
|
|
|
// 因为editable插件会调用appendChild，而在某些情况下（如IE）会引发错误
|
|
|
|
|
try {
|
|
|
|
|
document.createElement('IMG').appendChild(document.createElement('B'));
|
|
|
|
|
document.createElement('IMG').appendChild(document.createElement('B')); // 尝试执行可能会抛出错误的操作
|
|
|
|
|
} catch(e) {
|
|
|
|
|
Image.prototype.appendChild = function(el){}
|
|
|
|
|
Image.prototype.appendChild = function(el){} // 如果抛出错误，则为Image原型添加一个空的appendChild方法
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
var last_gritter
|
|
|
|
|
var last_gritter; // 声明一个全局变量，用于存储最近的gritter通知ID
|
|
|
|
|
// 初始化#avatar元素为可编辑状态，类型为图片
|
|
|
|
|
$('#avatar').editable({
|
|
|
|
|
type: 'image',
|
|
|
|
|
name: 'avatar',
|
|
|
|
|
value: null,
|
|
|
|
|
//onblur: 'ignore', //don't reset or hide editable onblur?!
|
|
|
|
|
type: 'image', // 设置可编辑类型为图片
|
|
|
|
|
name: 'avatar', // 设置字段名称
|
|
|
|
|
value: null, // 初始值设为null
|
|
|
|
|
|
|
|
|
|
// image选项用于配置图片相关的参数
|
|
|
|
|
image: {
|
|
|
|
|
//specify ace file input plugin's options here
|
|
|
|
|
btn_choose: 'Change Avatar',
|
|
|
|
|
droppable: true,
|
|
|
|
|
maxSize: 110000,//~100Kb
|
|
|
|
|
//and a few extra ones here
|
|
|
|
|
name: 'avatar',//put the field name here as well, will be used inside the custom plugin
|
|
|
|
|
on_error : function(error_type) {//on_error function will be called when the selected file has a problem
|
|
|
|
|
// 配置ace文件输入插件的选项
|
|
|
|
|
btn_choose: 'Change Avatar', // 选择文件的按钮文本
|
|
|
|
|
droppable: true, // 允许拖放文件
|
|
|
|
|
maxSize: 110000, // 最大文件大小，约为100Kb
|
|
|
|
|
name: 'avatar', // 字段名称，与上面的name相同，用于自定义插件内部
|
|
|
|
|
|
|
|
|
|
// 当选择的文件有问题时调用on_error函数
|
|
|
|
|
on_error : function(error_type) {
|
|
|
|
|
// 如果存在上一个gritter通知，则移除它
|
|
|
|
|
if(last_gritter) $.gritter.remove(last_gritter);
|
|
|
|
|
if(error_type == 1) {//file format error
|
|
|
|
|
|
|
|
|
|
// 根据错误类型显示不同的gritter通知
|
|
|
|
|
if(error_type == 1) { // 文件格式错误
|
|
|
|
|
last_gritter = $.gritter.add({
|
|
|
|
|
title: 'File is not an image!',
|
|
|
|
|
text: 'Please choose a jpg|gif|png image!',
|
|
|
|
|
class_name: 'gritter-error gritter-center'
|
|
|
|
|
});
|
|
|
|
|
} else if(error_type == 2) {//file size rror
|
|
|
|
|
} else if(error_type == 2) { // 文件大小错误
|
|
|
|
|
last_gritter = $.gritter.add({
|
|
|
|
|
title: 'File too big!',
|
|
|
|
|
text: 'Image size should not exceed 100Kb!',
|
|
|
|
|
class_name: 'gritter-error gritter-center'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
else {//other error
|
|
|
|
|
}
|
|
|
|
|
// 其他错误类型不处理
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 当文件上传成功时调用on_success函数
|
|
|
|
|
on_success : function() {
|
|
|
|
|
// 移除所有gritter通知
|
|
|
|
|
$.gritter.removeAll();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 配置上传的URL（此处为示例，实际使用时需要替换为真实的上传处理逻辑）
|
|
|
|
|
url: function(params) {
|
|
|
|
|
// ***UPDATE AVATAR HERE*** //
|
|
|
|
|
//for a working upload example you can replace the contents of this function with
|
|
|
|
|
//examples/profile-avatar-update.js
|
|
|
|
|
var deferred = new $.Deferred
|
|
|
|
|
var value = $('#avatar').next().find('input[type=hidden]:eq(0)').val();
|
|
|
|
|
// *** 更新头像的逻辑开始 *** //
|
|
|
|
|
|
|
|
|
|
var deferred = new $.Deferred(); // 创建一个延迟对象
|
|
|
|
|
var value = $('#avatar').next().find('input[type=hidden]:eq(0)').val(); // 获取隐藏输入框的值
|
|
|
|
|
|
|
|
|
|
// 如果没有选择文件，则直接解析延迟对象并返回其promise
|
|
|
|
|
if(!value || value.length == 0) {
|
|
|
|
|
deferred.resolve();
|
|
|
|
|
return deferred.promise();
|
|
|
|
|
}
|
|
|
|
|
//dummy upload
|
|
|
|
|
|
|
|
|
|
// 模拟上传过程（实际应用中需要替换为真实的上传逻辑）
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
// 如果浏览器支持FileReader，则尝试获取并显示缩略图
|
|
|
|
|
if("FileReader" in window) {
|
|
|
|
|
//for browsers that have a thumbnail of selected image
|
|
|
|
|
var thumb = $('#avatar').next().find('img').data('thumb');
|
|
|
|
|
if(thumb) $('#avatar').get(0).src = thumb;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 解析延迟对象，表示上传成功，并显示成功通知
|
|
|
|
|
deferred.resolve({'status':'OK'});
|
|
|
|
|
if(last_gritter) $.gritter.remove(last_gritter);
|
|
|
|
|
last_gritter = $.gritter.add({
|
|
|
|
|
@ -655,13 +687,20 @@
|
|
|
|
|
text: 'Uploading to server can be easily implemented. A working example is included with the template.',
|
|
|
|
|
class_name: 'gritter-info gritter-center'
|
|
|
|
|
});
|
|
|
|
|
} , parseInt(Math.random() * 800 + 800))
|
|
|
|
|
}, parseInt(Math.random() * 800 + 800)); // 随机延迟一段时间（模拟上传过程）
|
|
|
|
|
|
|
|
|
|
// 返回延迟对象的promise，供外部使用
|
|
|
|
|
return deferred.promise();
|
|
|
|
|
// ***END OF UPDATE AVATAR HERE*** //
|
|
|
|
|
|
|
|
|
|
// *** 更新头像的逻辑结束 *** //
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 成功回调（此处未实现具体逻辑）
|
|
|
|
|
success: function(response, newValue) {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 捕获并忽略可能出现的异常（虽然此处在代码中没有直接作用，但可能是为了安全起见而添加的）
|
|
|
|
|
}catch(e) {}
|
|
|
|
|
/**
|
|
|
|
|
//let's display edit mode by default?
|
|
|
|
|
@ -766,7 +805,7 @@
|
|
|
|
|
});
|
|
|
|
|
///////////////////////////////////////////
|
|
|
|
|
//right & left position
|
|
|
|
|
//show the user info on right or left depending on its position
|
|
|
|
|
//当鼠标进入或触摸开始时，显示用户信息在右侧或左侧，取决于其位置
|
|
|
|
|
$('#user-profile-2 .memberdiv').on('mouseenter touchstart', function(){
|
|
|
|
|
var $this = $(this);
|
|
|
|
|
var $parent = $this.closest('.tab-pane');
|
|
|
|
|
@ -775,12 +814,15 @@
|
|
|
|
|
var off2 = $this.offset();
|
|
|
|
|
var w2 = $this.width();
|
|
|
|
|
var place = 'left';
|
|
|
|
|
//判断用户信息框应该显示在左侧还是右侧
|
|
|
|
|
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) place = 'right';
|
|
|
|
|
$this.find('.popover').removeClass('right left').addClass(place);
|
|
|
|
|
}).on('click', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
//阻止默认点击事件
|
|
|
|
|
});
|
|
|
|
|
///////////////////////////////////////////
|
|
|
|
|
|
|
|
|
|
//初始化用户头像上传组件
|
|
|
|
|
$('#user-profile-3')
|
|
|
|
|
.find('input[type=file]').ace_file_input({
|
|
|
|
|
style:'well',
|
|
|
|
|
@ -793,30 +835,37 @@
|
|
|
|
|
allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
|
|
|
|
|
})
|
|
|
|
|
.end().find('button[type=reset]').on(ace.click_event, function(){
|
|
|
|
|
//重置文件输入框
|
|
|
|
|
$('#user-profile-3 input[type=file]').ace_file_input('reset_input');
|
|
|
|
|
})
|
|
|
|
|
.end().find('.date-picker').datepicker().next().on(ace.click_event, function(){
|
|
|
|
|
//触发日期选择框的焦点
|
|
|
|
|
$(this).prev().focus();
|
|
|
|
|
})
|
|
|
|
|
//为电话号码输入框应用掩码格式
|
|
|
|
|
$('.input-mask-phone').mask('(999) 999-9999');
|
|
|
|
|
//显示当前头像在文件列表中
|
|
|
|
|
$('#user-profile-3').find('input[type=file]').ace_file_input('show_file_list', [{type: 'image', name: $('#avatar').attr('src')}]);
|
|
|
|
|
////////////////////
|
|
|
|
|
//change profile
|
|
|
|
|
|
|
|
|
|
//切换用户信息页面
|
|
|
|
|
$('[data-toggle="buttons"] .btn').on('click', function(e){
|
|
|
|
|
var target = $(this).find('input[type=radio]');
|
|
|
|
|
var which = parseInt(target.val());
|
|
|
|
|
//隐藏所有用户信息页面，显示被选中的页面
|
|
|
|
|
$('.user-profile').parent().addClass('hide');
|
|
|
|
|
$('#user-profile-'+which).parent().removeClass('hide');
|
|
|
|
|
});
|
|
|
|
|
/////////////////////////////////////
|
|
|
|
|
|
|
|
|
|
//在AJAX加载开始前，清理页面元素
|
|
|
|
|
$(document).one('ajaxloadstart.page', function(e) {
|
|
|
|
|
//in ajax mode, remove remaining elements before leaving page
|
|
|
|
|
try {
|
|
|
|
|
//销毁可编辑元素
|
|
|
|
|
$('.editable').editable('destroy');
|
|
|
|
|
} catch(e) {}
|
|
|
|
|
//移除所有select2元素
|
|
|
|
|
$('[class*=select2]').remove();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
