socialforge/app/views/users/_user_resource_info.html.erb

<div>
  <div id="upload_private_resource">
    <%= render :partial => "show_new_upload", :locals => {:type => @type, :status => @status} %>
  </div>
  <div id="search_div">
    <%= render :partial =>  'users/resource_search_form',:locals => {:user => @user, :type => @type, :order => @order, :sort => @score, :status => @status} %>
  </div>
</div>
<div class="cl"></div>
<%= render :partial => 'users/user_resource_tip_list', :locals => { :type => @type, :status => @status} %>
<div class="cl"></div>
<form id="resources_list_form">
  <div id="resources_list">
    <%= render :partial => 'users/resources_list' , :locals => { :attachments => @attachments, :type => @type} %>
  </div>
  <div class="cl"></div>

  <div class="resource-list-option fl">
    <div class="resource-check-all">
      <input id="checkboxAll" type="checkbox" value="" onclick="all_select();" class="resourcesCheckbox" />
    </div>
    <a href="javascript:void(0);" class="replyGrey mr15" onclick="all_select();">全选</a>
    <a href="javascript:void(0);" class="replyGrey" onclick="batch_delete();">删除</a> </div>
  <div class="cl"></div>
  <div class="resourcesSelectSend mt10 fl">
    <% if hidden_unproject_infos %>
        <div class="resourcesSelectSendButton fl mr15 inactive-border"  onclick="batch_send();">
          <a href="javascript:void(0);" class="sendButtonBlue db inactive-text"  data-remote="true">发送至</a>
        </div>
    <% else %>
        <div class="resourcesSelectSendButton fl mr15 inactive-border"  onclick="batch_send_hidden();">
          <a href="javascript:void(0);" class="sendButtonBlue db inactive-text"  data-remote="true">发送至</a>
        </div>
    <% end %>
    <div class="fl">选择&nbsp;<span class="c_red" id="res_count">0</span>&nbsp;个资源</div>
  </div>

</form>
<div>
  <ul class="wlist" id="pages" style="margin-top: 15px;">
    <%= pagination_links_full @atta_pages, @atta_count, :per_page_links => false, :remote => @is_remote, :flag => true %>
  </ul>
</div>

<div class="cl"></div>
<!--<div id="upload_box" style="display: none">-->
<!--<%#= render :partial => 'upload_resource' ,:locals => {:user=>@user}%>-->
<!--</div>-->
<ul>
  <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?%>)rename();" onfocus="this.blur()">重命名</a></li>
    <!--  data-remote="true" 这个属性会让ajax请求状态标志就在当前按钮的上方显示，就不会滚动浏览器，因而弹出框也会在当前窗口中央展示-->
    <% if hidden_unproject_infos %>
        <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)show_send();" onfocus="this.blur()" >发送</a></li>
    <% else %>
        <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)show_send_hidden();" onfocus="this.blur()" >发送</a></li>
    <% end %>
    <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)delete_file();" onfocus="this.blur()">删除</a></li>
  </ul>
</ul>

<script>
    var pageX = 0;
    var pageY = 0;
    //当前选中的行
    var line;
    //已经选中的行，和当前选中的行的区别是：右键选中为line，换一行右键后，line变为last_line,line变为换行后的line
    var last_line;
    //资源名称
    var res_name;
    //资源名称的链接
    var res_link;
    var id; //资源id
    var sendType = '1';  //发送到课程 1  发送到项目 2
    var lastSendType;  //保存上次发送的发送类型
    $("#resources_list").mousedown(function(e) {
        //如果是右键的话
        if (3 == e.which) {
            if(  $("#res_name").length != 0 || $("#ajax-indicator").is(":hidden") == false){ //其他ajax在执行的时候阻止操作
                e.preventDefault();
                return ;
            }
            document.oncontextmenu = function() {return false;}
            pageX = e.clientX;
            pageY = e.clientY;
            $("#contextMenu").hide();
            $("#contextMenu").attr("style","display: block; position: fixed; top:"
                    + pageY
                    + "px; left:"
                    + pageX
                    + "px; width: 80px;");
            $("#contextMenu").show();
            //当前光标所在的对象

            var ele = document.elementFromPoint(pageX,pageY);
            //转换为jquery对象
            line = $(ele).parent();
            //如果上一条存在被选中，那么将上一条的背景色改为白色
            if(last_line != null){
                last_line.children().css("background-color", 'white');
                restore();
                last_line == null;
            }
            //如果当前的tag是li，那么还要li的父级元素
            if(line.get(0).tagName === 'LI'){
                line = line.parent();
            }
            //将当前的元素的所有子元素的背景色改为蓝色
            line.children().css("background-color", '#e1e1e1');
            //将当前元素赋给 上一个对象 保存起来。
            last_line = line;
        }
    });
    //元素包含关系计算
    var contains  = function(root, el) {
        if (root.compareDocumentPosition)
            return root === el || !!(root.compareDocumentPosition(el) & 16);
        if (root.contains && el.nodeType === 1){
            return root.contains(el) && root !== el;
        }
        while ((el = el.parentNode))
            if (el === root) return true;
        return false;
    }
    $(document.body).click(function(e) {
        //在列表上的任何单击事件都要恢复原来的样子
        //隐藏右键菜单
        //e.preventDefault();
        $("#contextMenu").hide();
        if( $("#ajax-indicator").is(":hidden") == false && $("#res_name").length != 0 ){ //其他ajax在执行的时候或者res_name仍然存在阻止操作
            return ;
        }
        document.oncontextmenu = function() {return true;}
        //如果当前行为空，那么要将当前行的拿到
        var ele;
        if(line == null){
            ele = document.elementFromPoint(e.clientX, e.clientY);
            line = $(ele).parent();
            //如果是在li上点击事件，那么要获得父组件
            if(line.get(0).tagName === 'LI'){
                line = line.parent();
            }

        }
        //如果当前对象在表格里，将当前行改变为白色,这里主要是防止点击页面的其他链接的时候，那个链接背景色变白了
        if( contains($("#resources_list").get(0),line.get(0))){
            line.children().css("background-color", 'white');
        }

        //当前行恢复编辑状态到链接状态
        if(ele && ele.nodeName != 'INPUT') {
            restore();
        }
        line = null;
    });
    //只要有一个选中了就是true
    function checkboxSelected(){
        selected = false;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == true){
                selected = true;
            }
        });
        return selected;
    }
    //只有全选才是true
    function checkboxAllSelected(){
        allSelected = true;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == undefined){
                allSelected = false;
            }
        });
        return allSelected;
    }
    //只有全部不选才是true
    function checkboxAllDeselected(){
        allDeselected = true;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == 'checked'){
                allDeselected = false;
            }
        });
        return allDeselected;
    }
    //查看所有的checkbox状态，并且按情况更改$("#checkboxAll")的状态
    function checkAllBox(checkbox){
        //只有选中当前checkbox且这个时候所有的checkbox都被选中了，$("#checkboxAll")才是被选中状态，其余都是非选中状态
        if(checkbox.attr('checked') == 'checked' && checkboxAllSelected()){
            $("#checkboxAll").attr('checked',true);
        }else{
            $("#checkboxAll").attr('checked',false);
        }
        $("#res_count").html(getCheckBoxSeletedCount());

    }
    //获取当前checkbox选中的数目
    function getCheckBoxSeletedCount(){
        var i = 0;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == 'checked'){
                i ++;
            }
        });
        return i;
    }
    //全选反选
    function all_select(){

        if($("#checkboxAll").attr('checked')){
            $("#resources_list").find("input[name='checkbox1[]']").each(function(){
                $(this).attr('checked',true);
            });
            $("#res_count").html(getCheckBoxSeletedCount());
        }else{
            $("#resources_list").find("input[name='checkbox1[]']").each(function(){
                $(this).attr('checked',false);
            });
            $("#res_count").html(0);
        }
    }
    function rename(){
        $("#contextMenu").hide();
        document.oncontextmenu = function() {return true;}
        line.children().css("background-color",'white');
        id = line.children().last().html();
        user_id = line.children().eq(4).html();
        if(user_id === '<%= User.current.id %>') {
            res_name = line.children().eq(1).children().attr('title');
            res_link = line.children().eq(1).html();
            line.children().eq(1).html(
                            '<input name="res_name" id="res_name" ' +
                            'style="height: 2em;line-height: 2em;overflow: hidden;" onblur="restore();" ' +
                            ' onkeypress="if(event.keyCode==13){event.preventDefault();this.blur();}" ' +
                            'value="'+res_name+
                            '"/>  <input type="hidden" id ="res_id" name="res_id" value="'+id+'"/>');
            $("#res_name").focus();
            $("html,body").animate({scrollTop:$("#res_name").offset().top},1000)
        }else{
            alert('您无法修改此资源！')
        }
    }

    //发送至按钮控制
    $("input[name='checkbox1[]']").click(function(){
        if($("input[name='checkbox1[]']:checked").length >= 1){
            $(".resourcesSelectSendButton").removeClass("inactive-border");
            $(".resourcesSelectSendButton").mouseover(function(){
                $(this).css("backgroundColor","#297fb8");
            });
            $(".resourcesSelectSendButton").mouseout(function(){
                $(this).css("backgroundColor","#fff");
            });
            $(".sendButtonBlue").removeClass("inactive-text");
        }else{
            $(".resourcesSelectSendButton").addClass("inactive-border");
            $(".sendButtonBlue").addClass("inactive-text");
            $(".resourcesSelectSendButton").unbind("mouseover").unbind("mouseout");
        }
    });
</script>