可拖动的资源弹出框

This commit is contained in:
lizanle 2015-08-28 09:34:02 +08:00
parent 149ac07cf9
commit d3f441d4da
7 changed files with 82 additions and 63 deletions

View File

@ -1,6 +1,6 @@
<div class="resourceSharePopup"> <div class="uploadBoxContainer">
<div> <div>
<div class="sendText fl">将资源发送至</div> <div class="sendText fl">将资源发送至</div>
<div class="resourcesSendTo"> <div class="resourcesSendTo">
@ -9,8 +9,9 @@
<option value="2" selected>项目</option> <option value="2" selected>项目</option>
</select> </select>
</div> </div>
<div class="cl"></div>
</div> </div>
<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose" onclick="closeModal();"></a></div> <!--<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose" onclick="closeModal();"></a></div>-->
<div class="fl"> <div class="fl">
<%= form_tag search_user_project_user_path(user),:method => 'get', <%= form_tag search_user_project_user_path(user),:method => 'get',
:remote=>true,:id=>'search_user_project_form',:class=>'resourcesSearchBox' do %> :remote=>true,:id=>'search_user_project_form',:class=>'resourcesSearchBox' do %>

View File

@ -1,6 +1,6 @@
<div class="resourceSharePopup"> <div class="uploadBoxContainer">
<div> <div>
<div class="sendText fl">将资源发送至</div> <div class="sendText fl">将资源发送至</div>
<div class="resourcesSendTo"> <div class="resourcesSendTo">
@ -9,8 +9,9 @@
<option value="2">项目</option> <option value="2">项目</option>
</select> </select>
</div> </div>
<div class="cl"></div>
</div> </div>
<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose" onclick="closeModal();"></a></div> <!--<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose" onclick="closeModal();"></a></div>-->
<div class="fl"> <div class="fl">
<%= form_tag search_user_course_user_path(user),:method => 'get', <%= form_tag search_user_course_user_path(user),:method => 'get',
:remote=>true,:id=>'search_user_course_form',:class=>'resourcesSearchBox' do %> :remote=>true,:id=>'search_user_course_form',:class=>'resourcesSearchBox' do %>
@ -22,30 +23,30 @@
<% end %> <% end %>
</div> </div>
<%= form_tag add_exist_file_to_course_user_path(user),:remote=>true,:id=>'course_list_form' %> <%= form_tag add_exist_file_to_course_user_path(user),:remote=>true,:id=>'course_list_form' %>
<div> <div>
<%= hidden_field_tag(:send_id, send_id) %> <%= hidden_field_tag(:send_id, send_id) %>
<%= hidden_field_tag(:send_ids, send_ids) %> <%= hidden_field_tag(:send_ids, send_ids) %>
<div class="courseReferContainer"> <div class="courseReferContainer">
<% if !courses.empty? %> <% if !courses.empty? %>
<% courses.each do |course| %> <% courses.each do |course| %>
<ul class="courseSend fl"> <ul class="courseSend fl">
<li class="fl"> <li class="fl">
<input name="course_ids[]" type="checkbox" value="<%= course.id %>" class="courseSendCheckbox"/> <input name="course_ids[]" type="checkbox" value="<%= course.id %>" class="courseSendCheckbox"/>
</li> </li>
<li class="sendCourseName fl"><%= truncate(course.name,:length=>18)%></li> <li class="sendCourseName fl"><%= truncate(course.name,:length=>18)%></li>
</ul> </ul>
<% end %> <% end %>
</div>
</div> </div>
</div> <div>
<div> <div class="courseSendSubmit">
<div class="courseSendSubmit"> <!--<a href="javascript:void(0);" class="sendSourceText">确定</a>-->
<!--<a href="javascript:void(0);" class="sendSourceText">确定</a>--> <%= submit_tag '确定',:class=>'sendSourceText',:onfocus=>'this.blur();' %>
<%= submit_tag '确定',:class=>'sendSourceText',:onfocus=>'this.blur();' %> </div>
</div> <div class="courseSendCancel"><a href="javascript:void(0);" class="sendSourceText mt10" onclick="closeModal();">取消</a></div>
<div class="courseSendCancel"><a href="javascript:void(0);" class="sendSourceText mt10" onclick="closeModal();">取消</a></div> </div>
</div> <div class="cl"></div>
<div class="cl"></div> <% end %>
<% end %>
</div> </div>

View File

@ -1,5 +1,6 @@
<div class="resourceUploadPopup"><span class="uploadDialogText">上传资源 </span> <!--<div class="resourceUploadPopup">-->
<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose" onclick="closeModal();"></a></div> <span class="uploadDialogText">上传资源 </span>
<!--<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose" onclick="closeModal();"></a></div>-->
<div class="uploadBoxContainer"> <div class="uploadBoxContainer">
<%= form_tag(user_resource_create_user_path, :multipart => true,:remote => !ie8?,:name=>"upload_form",:id=>'upload_form') do %> <%= form_tag(user_resource_create_user_path, :multipart => true,:remote => !ie8?,:name=>"upload_form",:id=>'upload_form') do %>
<div> <div>
@ -50,4 +51,4 @@
</div> </div>
<% end %> <% end %>
<div class="cl"></div> <div class="cl"></div>
</div> <!--</div>-->

View File

@ -3,9 +3,16 @@
//var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度 //var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
//var objLeft = (screenWidth - 2)/2.5 ; //2 可以根据需要修改 //var objLeft = (screenWidth - 2)/2.5 ; //2 可以根据需要修改
//var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改 //var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改
var popupHeight = $(".resourceSharePopup").outerHeight(true); //var popupHeight = $(".resourceSharePopup").outerHeight(true);
$(".resourceSharePopup").css("marginTop",-popupHeight/2); //$(".resourceSharePopup").css("marginTop",-popupHeight/2);
//
$("#upload_box").css('left','').css('top',''); //$("#upload_box").css('left','').css('top','');
$("#upload_box").html('<%= escape_javascript( render :partial => "resource_share_popup" ,:locals => {:courses=>@course,:user=>@user,:send_id=>@send_id,:send_ids=>@send_ids})%>'); //$("#upload_box").html('<%#= escape_javascript( render :partial => "resource_share_popup" ,:locals => {:courses=>@course,:user=>@user,:send_id=>@send_id,:send_ids=>@send_ids})%>');
$("#upload_box").css('display','block'); //$("#upload_box").css('display','block');
$("#ajax-modal").html('<%= escape_javascript( render :partial => 'resource_share_popup' ,:locals => {:courses=>@course,:user=>@user,:send_id=>@send_id,:send_ids=>@send_ids})%>');
showModal('ajax-modal', '452px');
$('#ajax-modal').siblings().remove();
$('#ajax-modal').before("<a href='javascript:void(0)' onclick='closeModal();' style='margin-left: 435px;' class='resourceClose'></a>");
$('#ajax-modal').parent().css("top","40%").css("left","46%");
$('#ajax-modal').parent().addClass("resourceUploadPopup");
$('#ajax-modal').css("padding-left","16px").css("padding-bottom","16px");

View File

@ -3,9 +3,16 @@
//var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度 //var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
//var objLeft = (screenWidth - 2)/2.5 ; //2 可以根据需要修改 //var objLeft = (screenWidth - 2)/2.5 ; //2 可以根据需要修改
//var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改 //var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改
var popupHeight = $(".resourceSharePopup").outerHeight(true); //var popupHeight = $(".resourceSharePopup").outerHeight(true);
$(".resourceSharePopup").css("marginTop",-popupHeight/2); //$(".resourceSharePopup").css("marginTop",-popupHeight/2);
//
$("#upload_box").css('left','').css('top',''); //$("#upload_box").css('left','').css('top','');
$("#upload_box").html('<%= escape_javascript( render :partial => "resource_share_for_project_popup" ,:locals => {:projects=>@projects,:user=>@user,:send_id=>@send_id,:send_ids=>@send_ids})%>'); //$("#upload_box").html('<%#= escape_javascript( render :partial => "resource_share_for_project_popup" ,:locals => {:projects=>@projects,:user=>@user,:send_id=>@send_id,:send_ids=>@send_ids})%>');
$("#upload_box").css('display','block'); //$("#upload_box").css('display','block');
$("#ajax-modal").html('<%= escape_javascript( render :partial => 'resource_share_for_project_popup' ,:locals => {:projects=>@projects,:user=>@user,:send_id=>@send_id,:send_ids=>@send_ids})%>');
showModal('ajax-modal', '452px');
$('#ajax-modal').siblings().remove();
$('#ajax-modal').before("<a href='javascript:void(0)' onclick='closeModal();' style='margin-left: 435px;' class='resourceClose'></a>");
$('#ajax-modal').parent().css("top","40%").css("left","46%");
$('#ajax-modal').parent().addClass("resourceUploadPopup");
$('#ajax-modal').css("padding-left","16px").css("padding-bottom","16px");

View File

@ -17,27 +17,29 @@
} }
function show_upload(){ function show_upload(){
var screenWidth = $(window).width(); $("#ajax-modal").html('<%= escape_javascript( render :partial => 'upload_resource' ,:locals => {:user=>@user})%>');
var screenHeight = $(window).height(); //当前浏览器窗口的 宽高 showModal('ajax-modal', '452px');
var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度 $('#ajax-modal').siblings().remove();
var objLeft = (screenWidth - 2)/2.5 ; //2 可以根据需要修改 $('#ajax-modal').before("<a href='javascript:void(0)' onclick='closeModal();' style='margin-left: 435px;' class='resourceClose'></a>");
var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改 $('#ajax-modal').parent().css("top","40%").css("left","46%");
var popupHeight = $(".resourceUploadPopup").outerHeight(true); $('#ajax-modal').parent().addClass("resourceUploadPopup");
$(".resourceUploadPopup").css("marginTop",-popupHeight/2); $('#ajax-modal').css("padding-left","16px").css("padding-bottom","16px");
$("#upload_box").css('left',objLeft).css('top',objTop);
$("#upload_box").html('<%= escape_javascript( render :partial => 'upload_resource' ,:locals => {:user=>@user})%>');
$("#upload_box").css('display','block');
} }
function closeModal() function closeModal()
{ {
$("#upload_box").css("display","none"); hideModal($(".uploadBoxContainer"));
} }
function check_files(){ // function closeModalShareResouceToCourse(){
return $("#attachments_fields").children().length == 0; // hideModal($(".uploadBoxContainer"));
} // }
// function closeModalShareResouceToProject(){
// hideModal($(".uploadBoxContainer"));
// }
// function check_files(){
// return $("#attachments_fields").children().length == 0;
// }
function submit_files(){ function submit_files(){
$("#upload_form").submit(); $("#upload_form").submit();
@ -109,9 +111,9 @@
</ul> </ul>
</div> </div>
<div class="cl"></div> <div class="cl"></div>
<div id="upload_box" style="display: none"> <!--<div id="upload_box" style="display: none">-->
<%= render :partial => 'upload_resource' ,:locals => {:user=>@user}%> <!--<%#= render :partial => 'upload_resource' ,:locals => {:user=>@user}%>-->
</div> <!--</div>-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="contextMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="contextMenu">
<li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)preview();" onfocus="this.blur()">预览</a></li> <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)preview();" onfocus="this.blur()">预览</a></li>
<li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)rename();" onfocus="this.blur()">重命名</a></li> <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)rename();" onfocus="this.blur()">重命名</a></li>

View File

@ -395,8 +395,8 @@ a.replyGrey {color:#888888; display:inline-block;}
a.replyGrey:hover {color:#4b4b4b;} a.replyGrey:hover {color:#4b4b4b;}
/*上传资源弹窗*/ /*上传资源弹窗*/
.resourceUploadPopup {width:400px; height:auto; border:3px solid #15bccf; padding-left:16px; padding-bottom:16px; background-color:#ffffff; position:absolute; top:50%; left:50%; margin-left:-200px; z-index:1000;} .resourceUploadPopup {width:400px; height:auto; border:3px solid #15bccf !important; padding-left:16px; padding-bottom:16px; background-color:#ffffff; position:absolute; top:50%; left:50%; margin-left:-200px; z-index:1000;}
.uploadDialogText {font-size:16px; color:#15bccf; line-height:16px; padding-top:20px; width:140px; display:inline-block;} .uploadDialogText {font-size:16px; color:#15bccf; line-height:16px; width:140px; display:inline-block;}/*padding-top:20px;*/
.uploadBoxContainer {height:33px; line-height:33px; margin-top:10px; position:relative} .uploadBoxContainer {height:33px; line-height:33px; margin-top:10px; position:relative}
.uploadBox {width:100px; height:33px; line-height:33px; text-align:center; vertical-align:middle; background-color:#64bdd9; border-radius:3px; float:left; margin-right:12px;} .uploadBox {width:100px; height:33px; line-height:33px; text-align:center; vertical-align:middle; background-color:#64bdd9; border-radius:3px; float:left; margin-right:12px;}
a.uploadBoxIcon {background:url(images/resource_icon_list.png) -35px 10px no-repeat; float:left; display:block; width:81px; height:30px; padding-left:22px; font-size:14px; color:#ffffff;} a.uploadBoxIcon {background:url(images/resource_icon_list.png) -35px 10px no-repeat; float:left; display:block; width:81px; height:30px; padding-left:22px; font-size:14px; color:#ffffff;}
@ -427,7 +427,7 @@ a.uploadIcon {background:url(images/resource_icon_list.png) 8px -60px no-repeat;
/*.courseSendSubmit:hover {background-color:#0182bb;}*/ /*.courseSendSubmit:hover {background-color:#0182bb;}*/
.courseSendCancel {width:50px; height:25px; line-height:25px; text-align:center; vertical-align:middle; background-color:#c1c1c1; float:left} .courseSendCancel {width:50px; height:25px; line-height:25px; text-align:center; vertical-align:middle; background-color:#c1c1c1; float:left}
a.sendSourceText {font-size:14px; color:#ffffff;} a.sendSourceText {font-size:14px; color:#ffffff;}
input.sendSourceText {font-size:14px;color:#ffffff;background-color:#64bdd9;cursor: pointer;} input.sendSourceText {font-size:14px;color:#ffffff;background-color:#64bdd9;cursor: pointer; outline: none;}
/*input.sendSourceText:hover {font-size:14px; color:#ffffff;}*/ /*input.sendSourceText:hover {font-size:14px; color:#ffffff;}*/
.resourcesSendTo {float:left; height:20px; margin-top:15px;} .resourcesSendTo {float:left; height:20px; margin-top:15px;}
.resourcesSendType {border:1px solid #e6e6e6; width:60px; height:24px; outline:none; font-size:14px; color:#888888;} .resourcesSendType {border:1px solid #e6e6e6; width:60px; height:24px; outline:none; font-size:14px; color:#888888;}