Expander 顯示隱藏文字內容

Expander 以動畫效果顯示或隱藏更多的網頁內容，並且增加了一個"更多"的連結，可以讓使用者查看更多的文字內容。默認的情況下，點擊後會出現"更少"的連結可再次的隱藏文章的內容，本套件使用的是 jQuery 框架方便網頁設計擴充使用。

使用方法：
第一步 載入 Expander 需要使用到的  JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Expander 的主程式碼 -->
<script src="jquery.expander.js"></script>
<script src="/scripts/custom.js"></script>


第二步 建立部分的 HTML 文字片段
<div class="expandable">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
    </p>
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt inre culpa qui
    officia deserunt mollit anim id est laborum.
    </p>
  </div>

第三步 使用 JavaScript 讓 Expander 套件初始化
// 可使用全域變數改變默認選項
$.expander.defaults.slicePoint = 120;

$(document).ready(function() {
  // 覆蓋所有的元件
  $('div.expandable p').expander();

  // 或者可使用

  //單獨設定
  $('div.expandable p').expander({
    slicePoint:       80,
    expandPrefix:     ' ',
    expandText:       '[...]',
    collapseTimer:    5000,
    userCollapseText: '[^]'
  });
});

附上程式可修改參數表

$.expander.defaults = {
  // 文字分段的字數
  slicePoint: 100,

  // 是否保留最後一個單字的完整性
  preserveWords: true,
  widow: 4,

  // 隱藏部分連結的顯示文字
  expandText: 'read more',
  expandPrefix: '… ',

  // Class 名稱
  summaryClass: 'summary',
  detailClass: 'details',

  // 連結的樣式名稱
  moreClass: 'read-more',
  lessClass: 'read-less',

  // 開啟關閉的時間
  collapseTimer: 0,

  // 展開折疊的設定
  expandEffect: 'fadeIn',
  expandSpeed: 250,
  collapseEffect: 'fadeOut',
  collapseSpeed: 200,

  // 允許使用者摺疊展開本文
  userCollapse: true,

  // 摺疊的顯示文字
  userCollapseText: 'read less',
  userCollapsePrefix: ' ',


  // 回調函示

  onSlice: null, // function() {}
  beforeExpand: null, // function() {},
  afterExpand: null, // function() {},
  onCollapse: null // function(byUser) {}
};

作者網站：http://plugins.learningjquery.com
檔案大小：27 KB (包含範例)
檔案下載：https://github.com/kswedberg/jquery-expander
備份下載：下載