diff --git a/WebContent/css/navigation/topbar.css b/WebContent/css/navigation/topbar.css index 5b02b35..117f127 100644 --- a/WebContent/css/navigation/topbar.css +++ b/WebContent/css/navigation/topbar.css @@ -16,7 +16,7 @@ } .access-today { - margin-left: 70px !important; + margin-left: 5% !important; } .online-current { @@ -28,7 +28,7 @@ padding: 2px 2px !important; font-size: 13px; border: 1px solid #f0ad4e; - margin-left: 50px; + margin-left: 2%; display: none; } @@ -36,7 +36,7 @@ padding: 2px 2px !important; font-size: 13px; border: 1px solid #5bc0de; - margin-left: 50px; + margin-left: 2%; display: none; } @@ -49,13 +49,23 @@ } .choose-theme { - margin: 10px 200px; + margin: 10px; } .web-pc-blank { + float: left; margin-left: 20px; } .header-nav { - margin: 0; + float: left; + margin-left: 6%; +} + +.choose-theme button { + float: left; +} + +.top-bar-div{ + margin: 18px 0px 5px 10px; } \ No newline at end of file diff --git a/WebContent/css/personal_center/mycenter.css b/WebContent/css/personal_center/mycenter.css index 614954f..51985b2 100644 --- a/WebContent/css/personal_center/mycenter.css +++ b/WebContent/css/personal_center/mycenter.css @@ -7,10 +7,7 @@ .version-input { /* resize: none; */ -} - -.return-index-blank { - margin-left: 20px; + } .form-show-userinfo { @@ -22,6 +19,16 @@ height: 80px; } -.form-show-p{ +.form-show-p { width: 30%; +} + +.return-index-blank { + float: left; + margin-left: 20px; +} + +.left-bar{ + clear:both; + margin-top: 40px; } \ No newline at end of file diff --git a/WebContent/css/personal_center/upload-file.css b/WebContent/css/personal_center/upload-file.css index 1000a58..abfb02c 100644 --- a/WebContent/css/personal_center/upload-file.css +++ b/WebContent/css/personal_center/upload-file.css @@ -2,4 +2,5 @@ .upload-file-form { margin-top: 50px; + margin-bottom: 50px; } \ No newline at end of file diff --git a/WebContent/index.jsp b/WebContent/index.jsp index fe91eda..4d07da4 100644 --- a/WebContent/index.jsp +++ b/WebContent/index.jsp @@ -52,7 +52,7 @@

最近更新的博客

-  阅读更多博客
@@ -60,7 +60,7 @@

最近更新的代码

-  阅读更多代码
diff --git a/WebContent/js/is-center-mobile.js b/WebContent/js/is-center-mobile.js new file mode 100644 index 0000000..2dbbca0 --- /dev/null +++ b/WebContent/js/is-center-mobile.js @@ -0,0 +1,30 @@ +/** + * @desc 判断后台是否是手机 + * + * @author 何明胜 + * + * @created 2018年1月15日 下午1:05:01 + */ + +$(function() { + var mobile_flag = $.isMobile(); // false为PC端，true为手机端 + + if (mobile_flag) { + // 顶部导航栏 + $('.header-nav').css({ + 'margin-left': '0 !important' + }) + $('#accessToday').css({ + 'margin-left' : '0' + }); + $('#onlineCurrent').css({ + 'margin-left' : '5px' + }); + + setTimeout(function() { + alert(1) + //导航栏加上边距 + $('#topBar').children('div').addClass('top-bar-div'); + }, 300); + } +}); \ No newline at end of file diff --git a/WebContent/js/is-pc-or-mobile.js b/WebContent/js/is-pc-or-mobile.js index 586aad6..4c3c4ed 100644 --- a/WebContent/js/is-pc-or-mobile.js +++ b/WebContent/js/is-pc-or-mobile.js @@ -5,35 +5,47 @@ * * 2017年9月27日 */ -$(function(){ +$(function() { var mobile_flag = $.isMobile(); // false为PC端，true为手机端 - - if(mobile_flag){ - //调整中间内容布局 - $('#fh5co-main').css({'width': '100%', 'float': 'right'}); - $('#trademark').css({'margin-left': '48px','margin-top': '16px'}); - - //左侧菜单栏 + + if (mobile_flag) { + // 调整中间内容布局 + $('#fh5co-main').css({ + 'width' : '100%', + 'float' : 'right' + }); + + // 左侧菜单栏 $('.fh5co-footer.footer-div').css('margin-top', 0); - - //顶部导航栏 - $('#accessToday').css({'margin-left': '0'}); - - //博客和代码左边距 - $('#fh5co-main').css({'margin-left': '0px'}); - $('#list_code').css({'margin-left': '0px'}); - - //留言是动态加载的，需等待一会儿 - setTimeout(function(){ - //右边导航栏隐藏 + + // 顶部导航栏 + $('#accessToday').css({ + 'margin-left' : '0' + }); + + // 博客和代码左边距 + $('#fh5co-main').css({ + 'margin-left' : '0' + }); + $('#list_code').css({ + 'margin-left' : '0' + }); + + // 留言是动态加载的，需等待一会儿 + setTimeout(function() { + // 右边导航栏隐藏 $('#rightBar').hide(); - - if($('#message_box').length>0){ - //留言框 - $('#message_box').find('textarea').css('width','42%'); - //回复留言 - $('#message_box').children().children().find('button').css({'cssText' : 'margin-left: 20% !important'}); + //导航栏加上边距 + $('#topBar').children('div').addClass('top-bar-div'); + + if ($('#message_box').length > 0) { + // 留言框 + $('#message_box').find('textarea').css('width', '42%'); + // 回复留言 + $('#message_box').children().children().find('button').css({ + 'cssText' : 'margin-left: 20% !important' + }); } - },300); + }, 300); } }); \ No newline at end of file diff --git a/WebContent/js/personal_center/personal-center.js b/WebContent/js/personal_center/personal-center.js index c2c4865..58e17cf 100644 --- a/WebContent/js/personal_center/personal-center.js +++ b/WebContent/js/personal_center/personal-center.js @@ -321,9 +321,9 @@ function uploadFile() { $('#mainWindow').html(''); $.ajax({ - url : '/personal_center/upload_file.html', // 这里是静态页的地址 + url : '/personal_center/upload_file.html', async : false, - type : 'GET', // 静态页用get方法，否则服务器会抛出405错误 + type : 'GET', success : function(data) { $('#mainWindow').html(data); } diff --git a/WebContent/js/personal_center/upload-file.js b/WebContent/js/personal_center/upload-file.js new file mode 100644 index 0000000..85f7695 --- /dev/null +++ b/WebContent/js/personal_center/upload-file.js @@ -0,0 +1,133 @@ +/** + * @author 何明胜 + * + * 2017年12月1日 + */ + +var $fileList; +var $btnUpload; +var state = 'pending'; +var web_uploader; + +$(function() { + $fileList = $('#file_list'); + $btnUpload = $('#btn_uploadStart'); + + initWebLoader(); + showFileList(); + uploadProgress(); + callbackFun(); + uploadClick(); +}); + +/** + * 初始化Web Uploader + * + * @returns + */ +function initWebLoader() { + web_uploader = WebUploader.create({ + // swf文件路径 + swf : '/plugins/webuploader/Uploader.swf', + + // 文件接收服务端。 + server : '/fileUpload.hms', + + // 选择文件的按钮。可选。 + // 内部根据当前运行时创建，可能是input元素，也可能是flash. + pick : '#file_choose', + + // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ + resize : false + }); +} + +/** + * 显示用户选择 + * + * @returns + */ +function showFileList() { + // 当有文件被添加进队列的时候 + web_uploader.on('fileQueued', function(file) { + $fileList.append('
' + + '

' + file.name + '

' + + '

等待上传...

' + '
'); + }); +} + +/** + * 文件上传进度显示 + * @returns + */ +function uploadProgress(){ + // 文件上传过程中创建进度条实时显示。 + web_uploader.on( 'uploadProgress', function( file, percentage ) { + var $li = $( '#'+file.id ); + var $percent = $li.find('.progress .progress-bar'); + + // 避免重复创建 + if ( !$percent.length ) { + $percent = $('
' + + '
' + + '
' + + '
').appendTo( $li ).find('.progress-bar'); + } + + $li.find('p.state').text('上传中'); + + $percent.css( 'width', percentage * 100 + '%' ); + }); +} + +/** + * 回调函数 + * @returns + */ +function callbackFun(){ + /** 文件上传成功 **/ + web_uploader.on('uploadSuccess', function( file ) { + $('#'+file.id).find('p.state').text('已上传'); + }); + + /** 文件上传失败 **/ + web_uploader.on('uploadError', function( file ) { + $('#'+file.id).find('p.state').text('上传出错'); + }); + + /** 不管成功或者失败，在文件上传完后都会触发uploadComplete事件 **/ + web_uploader.on('uploadComplete', function( file ) { + $('#'+file.id).find('.progress').fadeOut(); + }); + + /** 所有的事件触发都会响应到，改变当前状态 **/ + web_uploader.on( 'all', function( type ) { + if ( type === 'startUpload' ) { + state = 'uploading'; + } else if ( type === 'stopUpload' ) { + state = 'paused'; + } else if ( type === 'uploadFinished' ) { + state = 'done'; + } + + if ( state === 'uploading' ) { + $btnUpload.text('暂停上传'); + } else { + $btnUpload.text('开始上传'); + } + }); +} + +/** + * 开始上传点击事件 + * @returns + */ +function uploadClick(){ + $btnUpload.click(function() { + if (state === 'uploading') { + web_uploader.stop(); + } else { + web_uploader.upload(); + } + }); +} \ No newline at end of file diff --git a/WebContent/personal_center/upload_file.html b/WebContent/personal_center/upload_file.html index 99f28ed..48229d4 100644 --- a/WebContent/personal_center/upload_file.html +++ b/WebContent/personal_center/upload_file.html @@ -1,22 +1,23 @@ + + + + + -
+
- -
- + + +
+
+ +
添加文件
- -
- +
+
-
-
- -
-
- \ No newline at end of file +
\ No newline at end of file diff --git a/WebContent/personal_center/usercenter.html b/WebContent/personal_center/usercenter.html index ce32c0e..ef97114 100644 --- a/WebContent/personal_center/usercenter.html +++ b/WebContent/personal_center/usercenter.html @@ -34,6 +34,8 @@ + + @@ -44,7 +46,7 @@ -
+