branch_yzx
yzx 10 months ago
parent 91df47a3b2
commit 7403a91421

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -4,42 +4,69 @@
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>个人信息页面 - 医院药品库存管理系统</title>
<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" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
<![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 -->
<!--[if lte IE 8]>
<script src="../assets/js/html5shiv.min.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
</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的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]-->
<!-- 引入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]-->
<!-- 与本页相关的内联样式(此处未列出具体样式,但注释说明其可能存在) -->
<!-- 引入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>
<%-- <!-- 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">
<div class="navbar-container ace-save-state" id="navbar-container">
@ -460,13 +487,13 @@
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>';
//editables
'<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>';
//editables
//text editable
$('#username')
.editable({
type: 'text',
name: 'username'
name: 'username'
});
//select2 editable
var countries = [];
@ -502,14 +529,14 @@
source: countries,
select2: {
'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
@ -633,7 +660,7 @@
},
url: function(params) {
// ***UPDATE AVATAR HERE*** //
//for a working upload example you can replace the contents of this function with
//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();
@ -678,7 +705,7 @@
*/
//another option is using modals
$('#avatar2').on('click', function(){
var modal =
var modal =
'<div class="modal fade">\
<div class="modal-dialog">\
<div class="modal-content">\
@ -744,77 +771,91 @@
});
});
//////////////////////////////
// 初始化ace_scroll插件用于设置指定元素的滚动行为
$('#profile-feed-1').ace_scroll({
height: '250px',
mouseWheelLock: true,
alwaysVisible : true
height: '250px', // 设置滚动容器的高度
mouseWheelLock: true, // 锁定鼠标滚轮,使其只能在滚动容器内滚动
alwaysVisible : true // 滚动条始终可见
});
// 初始化tooltip插件为所有包含data-original-title属性的<a>标签添加提示框
$('a[ data-original-title]').tooltip();
// 遍历所有class为easy-pie-chart且包含data-color属性的元素初始化easyPieChart插件
$('.easy-pie-chart.percentage').each(function(){
var barColor = $(this).data('color') || '#555';
var trackColor = '#E2E2E2';
var size = parseInt($(this).data('size')) || 72;
$(this).easyPieChart({
barColor: barColor,
trackColor: trackColor,
scaleColor: false,
lineCap: 'butt',
lineWidth: parseInt(size/10),
animate:false,
size: size
}).css('color', barColor);
var barColor = $(this).data('color') || '#555'; // 获取自定义的条颜色,如果没有则使用#555
var trackColor = '#E2E2E2'; // 设置轨道颜色
var size = parseInt($(this).data('size')) || 72; // 获取自定义的大小如果没有则使用72
$(this).easyPieChart({
barColor: barColor, // 设置条颜色
trackColor: trackColor, // 设置轨道颜色
scaleColor: false, // 不显示比例尺颜色
lineCap: 'butt', // 设置线条末端样式
lineWidth: parseInt(size/10), // 设置线条宽度
animate:false, // 不使用动画效果
size: size // 设置图表大小
}).css('color', barColor); // 设置元素的颜色与条颜色一致
});
///////////////////////////////////////////
//right & left position
//show the user info on right or left depending on its position
///////////////////////////////////////////
// 当鼠标进入或触摸#user-profile-2下的.memberdiv元素时根据元素位置显示用户信息
$('#user-profile-2 .memberdiv').on('mouseenter touchstart', function(){
var $this = $(this);
var $parent = $this.closest('.tab-pane');
var off1 = $parent.offset();
var w1 = $parent.width();
var off2 = $this.offset();
var w2 = $this.width();
var place = 'left';
var $this = $(this); // 当前元素
var $parent = $this.closest('.tab-pane'); // 当前元素的最近父级.tab-pane元素
var off1 = $parent.offset(); // 获取父级元素的偏移量
var w1 = $parent.width(); // 获取父级元素的宽度
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);
$this.find('.popover').removeClass('right left').addClass(place); // 根据计算结果设置显示位置
}).on('click', function(e) {
e.preventDefault();
e.preventDefault(); // 阻止默认点击事件
});
///////////////////////////////////////////
///////////////////////////////////////////
// 初始化ace_file_input插件用于文件上传
$('#user-profile-3')
.find('input[type=file]').ace_file_input({
style:'well',
btn_choose:'Change avatar',
btn_change:null,
no_icon:'ace-icon fa fa-picture-o',
thumbnail:'large',
droppable:true,
allowExt: ['jpg', 'jpeg', 'png', 'gif'],
allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
.find('input[type=file]').ace_file_input({
style:'well', // 设置样式
btn_choose:'Change avatar', // 设置选择按钮的文本
btn_change:null, // 不显示更改按钮
no_icon:'ace-icon fa fa-picture-o', // 没有文件时显示的图标
thumbnail:'large', // 设置缩略图大小
droppable:true, // 允许拖放文件
allowExt: ['jpg', 'jpeg', 'png', 'gif'], // 允许的文件扩展名
allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'] // 允许的文件MIME类型
})
.end().find('button[type=reset]').on(ace.click_event, function(){
.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(){
.end().find('.date-picker').datepicker().next().on(ace.click_event, function(){
// 点击日期选择器的图标时,聚焦到输入框
$(this).prev().focus();
})
// 初始化input的mask插件用于格式化电话号码输入
$('.input-mask-phone').mask('(999) 999-9999');
// 显示初始文件列表(这里假设#avatar是图片元素的id
$('#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');
var target = $(this).find('input[type=radio]'); // 获取按钮内的单选按钮
var which = parseInt(target.val()); // 获取单选按钮的值
$('.user-profile').parent().addClass('hide'); // 隐藏所有用户信息页面
$('#user-profile-'+which).parent().removeClass('hide'); // 显示选中的用户信息页面
});
/////////////////////////////////////
/////////////////////////////////////
// 在页面即将通过Ajax加载新内容时销毁editable插件和移除select2元素
$(document).one('ajaxloadstart.page', function(e) {
//in ajax mode, remove remaining elements before leaving page
try {
$('.editable').editable('destroy');
$('.editable').editable('destroy'); // 销毁editable插件
} catch(e) {}
$('[class*=select2]').remove();
$('[class*=select2]').remove(); // 移除select2元素
});
});
</script>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -4,44 +4,64 @@
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>查看具体处方明细 - 医院药品库存管理系统</title>
<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/chosen.min.css" />
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="../assets/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" href="../assets/css/daterangepicker.min.css" />
<link rel="stylesheet" href="../assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="../assets/css/bootstrap-colorpicker.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" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
<![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 -->
<!--[if lte IE 8]>
<script src="../assets/js/html5shiv.min.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<head>
<!-- 设置IE浏览器以最新的渲染引擎模式运行如果安装了Google Chrome Frame则使用Chrome的渲染引擎 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 设置网页的字符编码为UTF-8 -->
<meta charset="utf-8" />
<!-- 设置网页的标题 -->
<title>查看具体处方明细 - 医院药品库存管理系统</title>
<!-- 设置网页的描述信息有助于SEO -->
<meta name="description" content="查看具体处方明细 - 医院药品库存管理系统" />
<!-- 设置视口确保页面在移动设备上正确显示宽度与设备宽度一致初始缩放比例为1最大缩放比例也为1 -->
<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" />
<!-- 引入当前页面特定的插件样式表 -->
<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" /> <!-- jQuery UI自定义样式 -->
<link rel="stylesheet" href="../assets/css/chosen.min.css" /> <!-- Chosen下拉框样式 -->
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" /> <!-- Bootstrap日期选择器样式 -->
<link rel="stylesheet" href="../assets/css/bootstrap-timepicker.min.css" /> <!-- Bootstrap时间选择器样式 -->
<link rel="stylesheet" href="../assets/css/daterangepicker.min.css" /> <!-- 日期范围选择器样式 -->
<link rel="stylesheet" href="../assets/css/bootstrap-datetimepicker.min.css" /> <!-- Bootstrap日期时间选择器样式 -->
<link rel="stylesheet" href="../assets/css/bootstrap-colorpicker.min.css" /> <!-- Bootstrap颜色选择器样式 -->
<!-- 引入文本字体样式表 -->
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
<!-- 引入Ace框架的主样式表 -->
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!-- 如果浏览器版本为IE9及以下则引入Ace框架的补充样式表 -->
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<!-- 引入Ace框架的皮肤样式表 -->
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
<!-- 引入Ace框架的RTL从右到左的语言如阿拉伯语支持样式表 -->
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
<!-- 如果浏览器版本为IE9及以下则引入Ace框架的IE专用样式表 -->
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
<![endif]-->
<!-- 与当前页面相关的内联样式(此处无具体内容) -->
<!-- 引入Ace框架的设置处理器脚本 -->
<script src="../assets/js/ace-extra.min.js"></script>
<!-- 引入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>
<![endif]-->
</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">
@ -713,7 +733,7 @@
</div>
</div>
<hr />
</form>
<div class="hr hr-18 dotted hr-double"></div>
<h4 class="pink">
@ -892,7 +912,7 @@
}
});
if(!ace.vars['touch']) {
$('.chosen-select').chosen({allow_single_deselect:true});
$('.chosen-select').chosen({allow_single_deselect:true});
//resize the chosen on window resize
$(window)
.off('resize.chosen')
@ -962,7 +982,7 @@
values: [ 17, 67 ],
slide: function( event, ui ) {
var val = ui.values[$(ui.handle).index()-1] + "";
if( !ui.handle.firstChild ) {
$("<div class='tooltip right in' style='display:none;left:16px;top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
.prependTo(ui.handle);
@ -985,7 +1005,7 @@
value: value,
range: "min",
animate: true
});
});
$("#slider-eq > span.ui-slider-purple").slider('disable');//disable third item
@ -1045,14 +1065,14 @@
if(this.checked) {
btn_choose = "Drop images here or click to choose";
no_icon = "ace-icon fa fa-picture-o";
whitelist_ext = ["jpeg", "jpg", "png", "gif" , "bmp"];
whitelist_mime = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"];
}
else {
btn_choose = "Drop files here or click to choose";
no_icon = "ace-icon fa fa-cloud-upload";
whitelist_ext = null;//all extensions are acceptable
whitelist_mime = null;//all mimes are acceptable
}
@ -1101,141 +1121,167 @@
});
*/
});
// 初始化第一个数值调节器,设置初始值、最小值、最大值、步长、上下按钮的样式
$('#spinner1').ace_spinner({value:0,min:0,max:200,step:10, btn_up_class:'btn-info' , btn_down_class:'btn-info'})
.closest('.ace-spinner')
.on('changed.fu.spinbox', function(){
//console.log($('#spinner1').val())
});
// 获取最近的父级元素.ace-spinner并为其绑定值改变事件
.closest('.ace-spinner')
.on('changed.fu.spinbox', function(){
//console.log($('#spinner1').val()) // 打印当前值(此行代码被注释)
});
// 初始化第二个数值调节器,设置初始值、最小值、最大值、步长、启用触摸滑动、上下按钮的图标
$('#spinner2').ace_spinner({value:0,min:0,max:10000,step:100, touch_spinner: true, icon_up:'ace-icon fa fa-caret-up bigger-110', icon_down:'ace-icon fa fa-caret-down bigger-110'});
// 初始化第三个数值调节器,设置初始值、最小值、最大值、步长、在输入框两侧显示按钮、上下按钮的图标和样式
$('#spinner3').ace_spinner({value:0,min:-100,max:100,step:10, on_sides: true, icon_up:'ace-icon fa fa-plus bigger-110', icon_down:'ace-icon fa fa-minus bigger-110', btn_up_class:'btn-success' , btn_down_class:'btn-danger'});
// 初始化第四个数值调节器,设置初始值、最小值、最大值、步长、在输入框两侧显示按钮、上下按钮的图标和统一按钮样式
$('#spinner4').ace_spinner({value:0,min:-100,max:100,step:10, on_sides: true, icon_up:'ace-icon fa fa-plus', icon_down:'ace-icon fa fa-minus', btn_up_class:'btn-purple' , btn_down_class:'btn-purple'});
//$('#spinner1').ace_spinner('disable').ace_spinner('value', 11);
//or
//$('#spinner1').closest('.ace-spinner').spinner('disable').spinner('enable').spinner('value', 11);//disable, enable or change value
//$('#spinner1').closest('.ace-spinner').spinner('value', 0);//reset to 0
//datepicker plugin
//link
// 以下几行为注释掉的代码,展示了如何禁用、启用或改变数值调节器的值
//$('#spinner1').ace_spinner('disable').ace_spinner('value', 11);
//or
//$('#spinner1').closest('.ace-spinner').spinner('disable').spinner('enable').spinner('value', 11);//disable, enable or change value
//$('#spinner1').closest('.ace-spinner').spinner('value', 0);//reset to 0
// 初始化日期选择器插件
$('.date-picker').datepicker({
autoclose: true,
todayHighlight: true
autoclose: true, // 选择日期后自动关闭
todayHighlight: true // 高亮显示今天
})
//show datepicker when clicking on the icon
.next().on(ace.click_event, function(){
// 点击图标时显示日期选择器
.next().on(ace.click_event, function(){
$(this).prev().focus();
});
//or change it into a date range picker
// 初始化日期范围选择器
$('.input-daterange').datepicker({autoclose:true});
//to translate the daterange picker, please copy the "examples/daterange-fr.js" contents here before initialization
// 初始化日期范围选择器,并设置本地化选项
$('input[name=date-range-picker]').daterangepicker({
'applyClass' : 'btn-sm btn-success',
'cancelClass' : 'btn-sm btn-default',
'applyClass' : 'btn-sm btn-success', // 应用按钮样式
'cancelClass' : 'btn-sm btn-default', // 取消按钮样式
locale: {
applyLabel: 'Apply',
cancelLabel: 'Cancel',
applyLabel: 'Apply', // 应用标签
cancelLabel: 'Cancel', // 取消标签
}
})
.prev().on(ace.click_event, function(){
.prev().on(ace.click_event, function(){
$(this).next().focus();
});
// 初始化时间选择器
$('#timepicker1').timepicker({
minuteStep: 1,
showSeconds: true,
showMeridian: false,
disableFocus: true,
minuteStep: 1, // 分钟步长
showSeconds: true, // 显示秒
showMeridian: false, // 不显示上午/下午
disableFocus: true, // 禁用聚焦时自动显示
icons: {
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down'
up: 'fa fa-chevron-up', // 向上图标
down: 'fa fa-chevron-down' // 向下图标
}
}).on('focus', function() {
$('#timepicker1').timepicker('showWidget');
$('#timepicker1').timepicker('showWidget'); // 聚焦时显示时间选择器
}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
// 初始化日期时间选择器在非旧版IE浏览器中
if(!ace.vars['old_ie']) $('#date-timepicker1').datetimepicker({
format: 'MM/DD/YYYY h:mm:ss A',//use this option to display seconds
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-arrows ',
clear: 'fa fa-trash',
close: 'fa fa-times'
}
format: 'MM/DD/YYYY h:mm:ss A', // 日期时间格式(包含秒)
icons: {
time: 'fa fa-clock-o', // 时间图标
date: 'fa fa-calendar', // 日期图标
up: 'fa fa-chevron-up', // 向上图标
down: 'fa fa-chevron-down', // 向下图标
previous: 'fa fa-chevron-left', // 上一个图标
next: 'fa fa-chevron-right', // 下一个图标
today: 'fa fa-arrows ', // 今天图标
clear: 'fa fa-trash', // 清除图标
close: 'fa fa-times' // 关闭图标
}
}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
// 初始化颜色选择器
$('#colorpicker1').colorpicker();
//$('.colorpicker').last().css('z-index', 2000);//if colorpicker is inside a modal, its z-index should be higher than modal'safe
// 如果颜色选择器在模态框内需要设置更高的z-index此行代码被注释
//$('.colorpicker').last().css('z-index', 2000);
// 初始化简单颜色选择器
$('#simple-colorpicker-1').ace_colorpicker();
//$('#simple-colorpicker-1').ace_colorpicker('pick', 2);//select 2nd color
//$('#simple-colorpicker-1').ace_colorpicker('pick', '#fbe983');//select #fbe983 color
//var picker = $('#simple-colorpicker-1').data('ace_colorpicker')
//picker.pick('red', true);//insert the color if it doesn't exist
$(".knob").knob();
var tag_input = $('#form-field-tags');
// 以下几行为注释掉的代码,展示了如何使用简单颜色选择器选择颜色
//$('#simple-colorpicker-1').ace_colorpicker('pick', 2); // 选择第二种颜色
//$('#simple-colorpicker-1').ace_colorpicker('pick', '#fbe983'); // 选择#fbe983颜色
//var picker = $('#simple-colorpicker-1').data('ace_colorpicker')
//picker.pick('red', true); // 如果颜色不存在则插入红色
$(".knob").knob(); // 初始化所有的.knob元素为knob插件的实例
var tag_input = $('#form-field-tags'); // 获取id为form-field-tags的元素
try{
tag_input.tag(
{
placeholder:tag_input.attr('placeholder'),
//enable typeahead by specifying the source array
source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead
/**
//or fetch data from database, fetch those that match "query"
source: function(query, process) {
$.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
.done(function(result_items){
process(result_items);
});
tag_input.tag( // 调用tag插件初始化
{
placeholder:tag_input.attr('placeholder'), // 设置placeholder属性为input元素的placeholder属性值
// 通过指定source数组启用typeahead
source: ace.vars['US_STATES'], // 使用ace.js中定义的US_STATES数组作为typeahead的数据源
/**
// 或者从数据库中获取匹配"query"的数据
source: function(query, process) {
$.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)}) // 发送ajax请求到remote_source.php携带查询参数q
.done(function(result_items){
process(result_items); // 处理返回的结果
});
}
*/
}
*/
}
)
//programmatically add/remove a tag
var $tag_obj = $('#form-field-tags').data('tag');
$tag_obj.add('Programmatically Added');
var index = $tag_obj.inValues('some tag');
$tag_obj.remove(index);
// 程序化地添加/移除一个tag
var $tag_obj = $('#form-field-tags').data('tag'); // 获取tag插件的实例
$tag_obj.add('Programmatically Added'); // 添加一个名为"Programmatically Added"的tag
var index = $tag_obj.inValues('some tag'); // 查找名为"some tag"的tag的索引
$tag_obj.remove(index); // 移除找到的tag
}
catch(e) {
//display a textarea for old IE, because it doesn't support this plugin or another one I tried!
tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
//autosize($('#form-field-tags'));
// 对于不支持此插件的旧版IE显示一个textarea
tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove(); // 在tag_input后插入一个textarea并移除tag_input
//autosize($('#form-field-tags')); // 注释掉的代码可能是用于自动调整textarea大小的代码
}
/////////
$('#modal-form input[type=file]').ace_file_input({
style:'well',
btn_choose:'Drop files here or click to choose',
btn_change:null,
no_icon:'ace-icon fa fa-cloud-upload',
droppable:true,
thumbnail:'large'
/////////
$('#modal-form input[type=file]').ace_file_input({ // 为模态表单中的文件输入元素初始化ace_file_input插件
style:'well', // 设置样式为well
btn_choose:'Drop files here or click to choose', // 设置选择文件的按钮文本
btn_change:null, // 不显示更改按钮
no_icon:'ace-icon fa fa-cloud-upload', // 不显示图标使用ace-icon fa fa-cloud-upload作为class
droppable:true, // 允许拖放文件
thumbnail:'large' // 设置缩略图大小为large
})
//chosen plugin inside a modal will have a zero width because the select element is originally hidden
//and its width cannot be determined.
//so we set the width after modal is show
// chosen插件在模态框内会有零宽度因为原始的select元素是隐藏的无法确定其宽度
// 所以我们在模态框显示后设置宽度
$('#modal-form').on('shown.bs.modal', function () {
if(!ace.vars['touch']) {
$(this).find('.chosen-container').each(function(){
$(this).find('a:first-child').css('width' , '210px');
$(this).find('.chosen-drop').css('width' , '210px');
$(this).find('.chosen-search input').css('width' , '200px');
if(!ace.vars['touch']) { // 如果不是触摸设备
$(this).find('.chosen-container').each(function(){ // 对每个chosen容器
$(this).find('a:first-child').css('width' , '210px'); // 设置第一个a标签的宽度为210px
$(this).find('.chosen-drop').css('width' , '210px'); // 设置下拉菜单的宽度为210px
$(this).find('.chosen-search input').css('width' , '200px'); // 设置搜索框的宽度为200px
});
}
})
/**
//or you can activate the chosen plugin after modal is shown
//this way select element becomes visible with dimensions and chosen works as expected
$('#modal-form').on('shown', function () {
$(this).find('.modal-chosen').chosen();
})
*/
$(document).one('ajaxloadstart.page', function(e) {
autosize.destroy('textarea[class*=autosize]')
$('.limiterBox,.autosizejs').remove();
$('.daterangepicker.dropdown-menu,.colorpicker.dropdown-menu,.bootstrap-datetimepicker-widget.dropdown-menu').remove();
// 或者你可以在模态框显示后激活chosen插件
// 这样select元素就会显示尺寸chosen插件也能正常工作
$('#modal-form').on('shown', function () {
$(this).find('.modal-chosen').chosen(); // 初始化chosen插件
})
*/
$(document).one('ajaxloadstart.page', function(e) { // 在页面开始加载ajax内容时执行一次
autosize.destroy('textarea[class*=autosize]') // 销毁所有class包含autosize的textarea的autosize实例
$('.limiterBox,.autosizejs').remove(); // 移除所有limiterBox和autosizejs的class的元素
$('.daterangepicker.dropdown-menu,.colorpicker.dropdown-menu,.bootstrap-datetimepicker-widget.dropdown-menu').remove(); // 移除日期范围选择器、颜色选择器和日期时间选择器的下拉菜单
});
});
</script>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save