deeplus+

ページ内の指定箇所のリンク先のファイルサイズを取得して、テキストで容量を追記するajaxを利用したjQueryプラグインです。

参照元：

• Auto Filesize T72 (jQuery Plugin)

設置方法

いつも通りjQuery本体を読み込みます。

<!--[if lt IE 9]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<![endif]-->

<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!--<![endif]-->

本体の読み込みと実行

デフォルトの設定ではpdfのみ容量を表示するようになっています。取得するファイルの拡張子をextensionで追加すると他の形式にも対応するようです。下記では5つの拡張子ファイルに対応しています。

<script src="auto_filesize-1.0.7.min.js"></script>
<script>
  $(document).ready(function() {
    $(".auto_filesize").auto_filesize({
      //ファイルを取得する拡張子を指定
      'extension' : 'jpg,png,pdf,docx,xlsx',
      //サイズを記述する要素のクラス指定
      'size_part' : 'size_part',
      //単位の設定。1,000KBを超えた時にMBを使用
      'unit' : 'MB'
    });
  });
</script>

html部分の記述例

ローカルでは動作しません。またaタグに.auto_filesizeのclass、さらに設置方法通りに指定した場合、aタグ内にspanタグで.size_partのclassを指定しないと動きません。

<ul>
  <li>
    <a href="sample.jpg" class="auto_filesize">
      Sample JPG<span class="size_part"></span>
    </a>
  </li>
  <li>
    <a href="sample.png" class="auto_filesize">
      Sample PNG<span class="size_part"></span>
    </a>
  </li>
  <li>
    <a href="sample.pdf" class="auto_filesize">
      Sample PDF<span class="size_part"></span>
    </a>
  </li>
  <li>
    <a href="sample.docx" class="auto_filesize">
      Sample Word<span class="size_part"></span>
    </a>
  </li>
  <li>
    <a href="sample.xlsx" class="auto_filesize">
      Sample Excel<span class="size_part"></span>
    </a>
  </li>
</ul>

オプションの補足

旧バージョンではbracketsやwrapといった囲みや追加でclass付きspanを書き出すオプションがあったようですが、現在は廃止されています。括弧で囲みたい場合はspan.size_partの外側にテキストで入れるか、spanに:beforeや:afterで括弧を書き出してあげれば良さそうです。

/* 容量の前後に余白を空けて[]で囲むCSS例 */
.size_part{padding: 0 5px;}
.size_part:before{content:"[";}
.size_part:after{content:"]";}