為 了 切 合 不 同 客 戶 的 不 同 設 計 風 格 ，我 們 一 般 都 比 較 少 使 用 預 設 值 。jqGrid 的 外 觀 ，都 是 根 據 jquery ui 的 theme 的 ，所 以 風 格 很 容 易 和 網 頁 統 一 。但 是 還 有 部 分 外 觀 上 的 設 定 是 不 夠 完 善 的 ，這 時 候 我 們 就 要 自 己 去 修 改 jqGrid 的 css 了 。
要 修 改 css，就 有 必 要 理 解 一 下 jqGrid 的 結 構 。在 我 們 的 html 檔 裡 面 ，原 來 jqGrid 就 是 一 個 <table id=list3></table>，那 個 id list3 就 是 我 們 jqGrid 的 id。
在 jqGrid 運 行 的 時 候 ，就 會 將 那 個 table 轉 化 為 下 面 的 樣 子 。
jqGrid 的 結 構
在 最 外 面 ，就 是 整 個 jqGrid，就 是 一 個 <div id=gbox_list3 … >。然 後 我 們 看 得 見 的 部 分 ，就 包 括 在 一 個 <div id=gview_list3 … > 裡 面 。
gview_list3 裡 面 就 有 三 大 部 分 ，分 別 是 title bar，header，和 data 。Title bar 就 是 一 個 <div class=ui-jqgrid-titlbar … >。Header 就 是 一 個 <div class=ui-jqgrid-hidv … >。Data 就 是 一 個 <div class=ui-jqgrid-bdiv … >。
在 data div 裡 面 ，包 含 了 本 來 的 <table id=list3 …. >，裡 面 就 是 jgGrid 裡 面 的 資 料 行 。
如 果 我 們 單 純 的 用 #list3 作 為 css 又 或 者 jquery 的 selector ，那 麼 我 們 肯 定 選 取 不 到 title bar 或 者 header。所 以 這 個 結 構 要 好 好 留 心 一 下 。
舉 個 最 簡 單 的 例 子 ，例 如 你 不 想 顯 示 header。jqGrid 裡 面 沒 有 這 個 選 項 ，我 們 就 要 自 己 動 手 了 。
$('#list3 .ui-jqgrid-hdiv').hide();
|
如 果 你 想 當 然 的 用 #list3 作 為 selector ，那 當 然 會 沒 反 應 ，因 為 header 在 list3 的 外 頭 啊 。
$('#gbox_list3 .ui-jqgrid-hdiv').hide();
or
$('#gview_list3 .ui-jqgrid-hdiv').hide();
|
我 們 要 用 回 最 外 面 #gbox_list3 又 或 者 #gview_list3 做 為 selector 才 可 。( 因 為 header 本 身 沒 有 id，所 以 要 用 它 的 class 來 選 取 )
現 在 大 家 也 有 了 一 點 基 本 認 識 ，就 可 以 回 到 本 文 的 主 題 Custom Scrollbar 了 。
其 實 Scrollbar 這 個 東 西 ，都 是 瀏 覽 器 內 建 的 ，並 不 是 一 個 獨 立 的 tag，不 可 以 自 己 改 css。那 別 人 的 custom scrollbar 是 如 何 做 的 呢 ？其 實 就 是 把 一 個 container 縮 小 ，再 把 overflow 設 定 為 hidden ( 這 樣 就 不 會 顯 示 內 建 的 scroll bar 了 )，然 後 就 自 己 畫 兩 條 scrollbar，再 用 script 為 scroll bar 的 不 同 event ( mousedown, mousemove, mouseup 之 類 ) 加 上 相 應 的 捲 動 功 能 。
在 現 今 的 速 食 社 會 ，要 你 只 為 了 改 一 改 jqGrid scrollbar 的 外 觀 而 自 己 寫 個 jquery plugin 很 不 人 道 。所 以 筆 者 建 議 大 家 出 去 找 一 些 能 用 的 scrollbar plugin 就 可 以 了 。
筆 者 今 次 示 範 用 的 ，是 HyeonJe Jun 所 寫 的 perfect-scrollbar plugin。這 個 plugin 非 常 精 簡 ，非 常 易 用 。
首 先 ，還 是 要 引 用 所 需 要 引 用 的 檔 案 。
<link rel="stylesheet" type="text/css" href="perfect-scrollbar.min.css" />
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="perfect-scrollbar.js"></script>
|
然 後 ，找 一 個 想 要 自 定 scrollbar 的 物 件 ，例 如 一 個 div 吧 。 (container 必 須 要 是 一 個 tag)。
<div id="Demo"></div>
|
再 執 行 下 列 程 式 碼 。
$('#Demo').perfectScrollbar();
|
跟 你 用 開 的 jquery plugin 沒 什 麼 分 別 吧 ？十 足 的 簡 單 便 捷 。執 行 好 之 後 會 如 何 呢 ？
perfect scrollbar 結 構
它 會 把 本 來 的 <div id=Demo> 變 為 container ( 加 了 一 個 .ps-container 的 class )，然 後 在 裡 面 會 另 外 有 三 個 div。分 別 是 .content，會 裝 有 你 原 來 的 div 裡 面 的 東 西 。還 有 .ps-scrollbar-x 和 .ps-scrollbar-y，就 是 新 畫 出 來 的 兩 條 scrollbar 了 。要 記 得 這 三 個 div 都 是 沒 有 id 的 ，選 取 的 時 候 要 用 class 來 選 取 ，又 或 者 nth-child 之 類 的 方 式 。
回 到 我 們 的 jqGrid，究 竟 要 用 那 一 個 div 作 為 container 呢 ？用 回 一 開 頭 的 那 個 例 子 ，我 們 知 道 資 料 行 是 在 <table id=list3 …. > 裡 面 ，所 以 我 們 可 以 用 外 面 的 div .ui-jqgrid-bdiv 作 為 contianer。
$('#gview_list3 div.ui-jqgrid-bdiv').perfectScrollbar();
|
selector ?的 意 思 就 是 在 id=gview_list3 裡 面 找 一 個 class=ui-jqgrid-bdiv 的 div。當 然 這 是 不 夠 的 ，我 們 還 要 相 應 的 做 一 點 微 調 。jqGrid 的 height 要 改 為 auto，而 原 來 的 height ，要 設 定 為 ui-jqgrid-bdiv 的 height。為 免 瀏 覽 器 built-in 的 scrollbar，我 們 也 要 把 ui-jqgrid-bdiv 的 overflow 設 定 為 hidden。最 後 ，執 行 perfectScrollbar 方 法 的 時 間 也 有 講 究 ，最 好 在 jqGrid 的 loadComplete 事 件 裡 面 。
[Example 2]
jQuery("#list3").jqGrid({
...
height: 'auto',
width: 700,
...
...
resizeStop: function(width, index) {
$('#gview_list3 .ui-jqgrid-bdiv div:first-child').css('width',$('#list5').css('width'));
$('#gview_list3 .ui-jqgrid-bdiv').perfectScrollbar('update');
},
loadComplete: function(data) {
$('#gview_list3 div.ui-jqgrid-bdiv').css( {
"height":"100px",
"overflow":"hidden"
});
$('#gview_list3 div.ui-jqgrid-bdiv').perfectScrollbar();
}
});
|
另 外 ，在 你 resize 完 column width 之 後 ，資 料 行 的 整 體 寬 度 改 變 了 ，這 時 候 就 有 可 能 要 顯 示 或 者 取 消 horizontal scrollbar 了 （在 我 範 例 中 一 開 始 是 沒 有 horizontal scrollbar 的 ）。所 以 ，每 次 resize 完 之 後 都 要 重 新 指 定 content DIV 的 寬 度 ，在 上 例 中 我 用 了 first-child 來 尋 找 content DIV。最 後 還 要 update 一 次 perfect scrollbar。〔Example 2〕
Example 2
perfect scrollbar 預 設 的 樣 式 ，和 那 個 要 mouse hover 才 顯 示 出 來 的 方 式 也 不 是 人 人 喜 歡 。但 因 為 perfect scrollbar 就 是 自 己 畫 出 來 的 div，所 以 我 們 就 可 以 用 修 改 css 的 方 法 來 改 變 它 的 外 觀 了 。
在 〔Example 3〕裡 面 ，筆 者 為 jqGrid 加 入 了 shrinkToFit 和 ForceFit 參 數 ，確 保 jqGrid ?的 寬 度 是 固 定 的 ，於 是 ，使 用 者 resize column 的 時 候 ，也 不 會 出 現 horizontal scrollbar 了 。然 後 筆 者 又 修 改 了 perfect scrollbar 的 css ，最 後 在 contianer DIV 加 了 一 個 scrollbar ?的 底 圖 ，於 是 perfect scrollbar 就 變 成 了 一 條 固 定 的 scrollbar 的 樣 子 。
jQuery("#list3").jqGrid({
....
height: 'auto',
width: 685,
....
forceFit: true,
shrinkToFit: true,
....
loadComplete: function(data) {
$('#gview_list3 div.ui-jqgrid-bdiv').css( {
"height":"100px",
"width":"700px",
"overflow":"hidden",
"background-image":"url('scrollbar-bg2.gif')",
"background-repeat":"repeat-y",
"background-position":"right top"
});
$('#gview_list3 div.ui-jqgrid-bdiv').perfectScrollbar();
$('#gview_list3 div.ps-scrollbar-y').css({
"position":"absolute",
"right":"3px",
"width":"6px",
"background-color":"#666",
"border-radius":"0px",
"-webkit-border-radius":"0px",
"-moz-border-radius":"0px",
"opacity":"0.9",
"filter":"alpha(opacity = 90)"
});
}
});
|
在 上 例 中 ，因 為 筆 者 想 把 scrollbar 固 定 在 資 料 行 的 外 面 ，所 以 把 jqGrid 的 width 減 少 了 15px ( width: 685 )，再 在 container DIV 設 定 寬 度 為 700px。
Example 3
這 次 因 為 可 能 有 點 複 雜 ，所 以 筆 者 把 上 面 的 例 子 實 作 了 出 來 ，給 諸 君 參 考 。
留言列表
工具 (3)
