socialforge/app/views/files/index.html.erb

<!-- <h3> --><!-- %=l(:label_attachment_plural)%></h3 -->
<% attachmenttypes = @project.attachmenttypes %>
<% sufixtypes = @project.contenttypes %>
<style>
    #ver-zebra, .file_table_des
    {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 12px;
        margin: 5px 10px;
        width: 98%;
        text-align: left;
        border-collapse: collapse;
        line-height: 20px;
        font-size: 14px;
    }
    #ver-zebra th
    {
        font-size: 14px;
        font-weight: normal;
        padding: 12px 15px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        color: #039;
        text-align: left;
    }
    #ver-zebra td
    {
        padding: 8px 15px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        color: #669;
    }
    #ver-zebra td.description {
        background-color: white;
        padding: 0px;
        margin: 0px auto;
    }
    #ver-zebra1, .file_table_des
    {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 12px;
        margin: 5px 10px;
        width: 98%;
        text-align: left;
        border-collapse: collapse;
        line-height: 20px;
        font-size: 14px;
    }
    #ver-zebra1 th
    {
        font-size: 14px;
        font-weight: normal;
        padding: 12px 15px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        color: #039;
        text-align: left;
    }
    #ver-zebra1 td
    {
        padding: 8px 15px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        color: #669;
    }
    #ver-zebra1 td.description {
        background-color: white;
        padding: 0px;
        margin: 0px auto;
    }
    div.tags_area {
        padding: 2px 10px 10px 10px;
        margin: 0px;
        margin-bottom: 10px;
        /*border-bottom: 1px dashed #CCCCCC;*/
        overflow: hidden;
        position: relative;
    }
    .tags_gradint {
    }
    .read-more{
        padding: 5px;
        border-top: 4px double #ddd;
        background: #fff;
        color: #333;
    }
    .read-more a{
        padding-right: 22px;
        background:  no-repeat 100% 50%;
        font-weight: bold;
        text-decoration: none;
    }
    .read-more a:hover{
        color: #000;
    }
    .vzebra-odd
    {
        background: #eff2ff;
    }
    .vzebra-even
    {
        background: #e8edff;
    }
    #ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
    {
        background: #ffffff;
        border-bottom: 1px solid #c8d4fd;
    }
    #ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
    {
        background: #ffffff;
        border-bottom: 1px solid #d6dfff;
    }
    #ver-zebra1 #vzebra-adventure, #ver-zebra #vzebra-children
    {
        background: #ffffff;
        border-bottom: 1px solid #c8d4fd;
    }
    #ver-zebra1 #vzebra-comedy, #ver-zebra #vzebra-action
    {
        background: #ffffff;
        border-bottom: 1px solid #d6dfff;
    }
    .filename{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    div.pagination{
        margin: 10px 0px;
        height: 1.5em;
        text-align: left;
        font-size: 13px;
    }
    .m5p5{
        display: inline-block;
        height: auto;
        color: white !important;
        margin: 8px;
        padding: 3px 7px;
    }
    .m5p5:hover {
        text-decoration: none;
        /*padding-bottom: 3px;*/
        /*border-bottom: 1px solid #666666;*/
        border-radius: 4px;
        border: 1px solid #15bccf;
        box-shadow: 3px 3px 3px #666666;
    }
    .relation_file_div{
        margin: 0px 25px;
    }
    .relation_file_div fieldset{
        margin: 0px 0px;
        padding: 10px;
        border-radius: 5px;
        transition: all 2s linear 1s;
    }
    .relation_file_div input#attach_search:focus{
        border: 1px solid #1B95C6;
        box-shadow: 0px 0px 4px #1B95C6;
        width: 200px;
    }
    .relation_file_div input#attach_search{
        width: 150px;
        outline: none;
        border-radius: 5px;
        -webkit-transition: 1s width;
        -moz-transition   : 1s width;
        -o-transition     : 1s width;
        transition        : 1s width;
    }
</style>


<span class="borad-title"><%=(@project.project_type == 1) ? t(:label_user_course) : t(:label_project) %>资源共享区</span>

<div class="content-title-top">
  <%#= link_to(l(:label_attachment_new), 'javascript:void(0);', :onclick=>"$('#file_buttons').slideToggle();", :class => 'icon icon-add') if User.current.allowed_to?(:manage_files, @project) %>
  <div class="clearfix"></div>
  <div id="file_buttons" class="nhidden">
    <%#= link_to('上传文件', new_project_file_path(@project), :class => 'icon m5p5 button_submit') if User.current.allowed_to?(:manage_files, @project) %>
    <%= link_to( l(:label_upload_files), 'javascript:void(0);', :class => 'icon m5p5 button_submit', :onclick => "$('#relation_file_div').slideUp();$('#upload_file_div').slideToggle('slow');") if User.current.allowed_to?(:manage_files, @project) %>
    <%= link_to(l(:label_relation_files), 'javascript:void(0);', :onclick => "$('#upload_file_div').slideUp();$('#relation_file_div').slideToggle();", :class => 'icon m5p5 button_submit') if User.current.allowed_to?(:manage_files, @project) %>

    <% if attachmenttypes.any? %>
          <label for="attachment_browse"><%=l(:attachment_browse)%></label>
          <%= select_tag "attachment_browse", content_tag('option', '') +options_from_collection_for_select(attachmenttypes, "id", "typeName"),
                         :onchange=>"attachmenttypes_searchex(this.value)"%>
     <% end %>
     <% if sufixtypes.any? %>
        <label for=""><%=l(:attachment_sufix_browse)%></label>
        <%= select_tag "attach_sufix_browse", content_tag('option', '') +options_for_select(sufixtypes),
                       :onchange=>"attachment_contenttypes_searchex(this.value)"%>
    <% end %>

    <div id="upload_file_div" class="relation_file_div hidden" >
      <%= render :partial => 'new', locals: {project: @project}%>
    </div>
    <div id="relation_file_div" class="relation_file_div hidden" >
      <fieldset>
        <legend>搜索</legend>
        <%= form_tag(
                    attachments_autocomplete_path(:format => 'js'),
                    :remote => true,
                    :method => :post) do %>
            <%= label_tag(:attach_search, "按关键字搜索:") %>
            <%= text_field_tag(:attach_search) %>
            <%#= submit_tag("Search") %>
        <% end -%>
        <%= form_tag attach_relation_path(:format => 'js'),
                     method: :post,
                     remote: true,
                     id:"relation_file_form",
                     :class => 'hidden' do %>
            <%= hidden_field_tag(:class_name, 'Project') %>
            <%= hidden_field_tag(:class_id, params[:project_id]) %>
            <div id="relation_file" >
            </div>
            <div class="kclearfix" style='margin-top: 10px;' >
              <%= submit_tag(l(:button_add)) -%>
            </div>
        <% end -%>
      </fieldset>
      <div class="line_under" style="margin:20px 0px;"></div>
    </div>
  </div>

</div>
<%= javascript_tag "observeSearchfield('attach_search', null, '#{ escape_javascript attachments_autocomplete_path(:project_id => @project.id, :format => 'js') }')" %>


<% delete_allowed = User.current.allowed_to?(:manage_files, @project) %>

<div id="all_browse_div" class="all_browse_div" >
  <%= render :partial => 'show_all_attachment'%>
</div>

<% html_title(l(:label_attachment_plural)) -%>

<script type='text/javascript'>
    var slideHeight = 29;
    function readmore (aNode) {
        // console.log(aNode)
        // var $td_tags_area = $(aNode).parent().parent();
        var $td_tags_area = $(aNode).parent().parent().parent().parent();
        var $tags_area = $td_tags_area.find('.tags_area')
        var $tags_gradint = $td_tags_area.find('.tags_gradint')
        var $read_more = $td_tags_area.find('.read-more')
        var $read_more_a = $td_tags_area.find('.read-more a')
        var $tags = $td_tags_area.find('#tags')
        var $icona = $td_tags_area.find('.tags_icona')

        var slideHeight = 20; //px
        var defHeight = $tags.height();

        var curHeight = $tags_area.height();
        if (curHeight == slideHeight) {
            $tags_area.animate({
                height: defHeight
            }, 'normal');
            $read_more_a.html('隐藏');
            $icona.html('<%=image_tag "/images/sidebar/minus.png"%>')
            $tags_gradint.fadeOut();
        }else{
            $tags_area.animate({
                height: slideHeight
            }, 'normal');
            $read_more_a.html('更多');
            $icona.html('<%=image_tag "/images/sidebar/add.png"%>')
            $tags_gradint.fadeIn();
        };

    }
    $(function () {
        var slideHeight = 20; //px
        var defHeight = $('.tags_area').height();
        if (defHeight >= slideHeight) {
            $('.tags_area').css('height', slideHeight +'px');
        };
    });

 </script>


<script type="text/javascript">
    function attachmenttypes_searchex(value) {
        $.ajax({
            url: '<%=getattachtype_project_files_path(project_id: @project)%>' + '?type=' + encodeURIComponent(value),
            type: "POST"

        }).complete(function (xhr, textStatus) {
                    if (textStatus == 'success') {
                        eval(xhr.responseText);
                    } else if (textStatus == 'error') {
                        alert('error');
                    }
                    ;
                });
    }

    function attachment_contenttypes_searchex(value) {
        $.ajax({
            url: '<%=getattachtype_project_files_path(project_id: @project)%>' + '?type=' + encodeURIComponent(value),
            type: "POST"

        }).complete(function (xhr, textStatus) {
                    if (textStatus == 'success') {
                        eval(xhr.responseText);
                    } else if (textStatus == 'error') {
                        alert('error');
                    }
                    ;
                });
    }
</script>