Wikiカスタマイズ
Wikiに施したカスタマイズ
ここのWikiでいじった部分のメモ
Ajax的なもの
getobject.js
- ブラウザごとにobjectの取得方法を変えて非互換を吸収
- イベント追加用関数も
- わりあい昔に作ったこともあって十分よろしくないかも
var browser = 0;
if(navigator.userAgent.indexOf("Opera",0) != -1){
browser = 1;
}
else if(document.all){
browser = 2;
}
else if(document.getElementById){
browser = 3;
}
function GetObject(id){
if(browser == 1 || browser == 3){
return document.getElementById(id);
}
else if(browser == 2){
return document.all.item(id);
}
}
function addEventSeter(target, type, func) {
if(target.attachEvent) {
target.attachEvent("on" + type, func);
} else if(target.addEventListener) {
target.addEventListener(type, func, true);
} else {
target["on" + type] = func;
}
}
Sortable Table（ソート可能テーブル）
Closeable Table（閉まっちゃえるテーブル）
- 列の項目を閉じることで無駄な幅を削減する。
- 行は閉じる必要性をあまり感じない。やるならフィルタリングか？でもオプションでできてもよいかも
// テーブル初期化
function CloseableTable(id,selecter){
GetObject(id).switch_view_disable = new Array();
var ths = GetObject(id).getElementsByTagName('THEAD')[0].getElementsByTagName('TH');
var select = document.createElement('select');
select.id = id + '_th';
var l = ths.length;
for(var i = 0; i < l; i++){
var opt = document.createElement("option");
opt.value = i;
var str = document.createTextNode(ths[i].firstChild.nodeValue);
opt.appendChild(str);
select.appendChild(opt);
}
addEventSeter(select, 'change', SwitchSelecterChange);
select.table = GetObject(id);
GetObject(id).selecter = select;
var input = document.createElement("input");
input.name = id;
input.id = id + '_switch';
input.type = 'button';
input.value = 'close';
addEventSeter(input, 'click', SwitchView);
input.table = GetObject(id);
GetObject(id).button = input;
GetObject(selecter).appendChild(select);
GetObject(selecter).appendChild(input);
}
function SwitchSelecterChange(e){
var el = e.target || e.srcElement;
if(el.table.switch_view_disable[el.selectedIndex]){
el.table.button.value = 'open';
}
else{
el.table.button.value = 'close';
}
}
function SwitchView(e){
var el = e.target || e.srcElement;
// IE,Firefoxで方法切り替え
if(browser == 2){
SwitchViewTable2(el.name);
}
else{
SwitchViewTable3(el.name);
}
}
// IE用 列開閉切り替え
function SwitchViewTable2(id){
var tbl = GetObject(id);
var index = tbl.selecter.value;
var col = tbl.getElementsByTagName('COL')[index];
var tbody = tbl.getElementsByTagName('TBODY')[0];
var thead = tbl.getElementsByTagName('THEAD')[0];
var tfoot = tbl.getElementsByTagName('TFOOT')[0];
var blank = document.createElement('tbody');
var blank2 = document.createElement('thead');
var blank3 = document.createElement('tfoot');
// テーブルの中身を空にして一時退避させる
tbl.replaceChild(blank3, tfoot);
tbl.replaceChild(blank2, thead);
tbl.replaceChild(blank, tbody);
if(!tbl.switch_view_disable[index]){
col.style.display = 'none'; // colの表示スタイルをnoneに
tbl.switch_view_disable[index] = 1;
tbl.selecter.options[index].style.background = '#EAEAEA';
tbl.button.value = 'open';
}
else{
col.style.display = 'block'; // 本当はtable-columnだけど対応していない
tbl.switch_view_disable[index] = 0;
tbl.selecter.options[index].style.background = '#FFFFFF';
tbl.button.value = 'close';
}
// テーブル内容を元に戻す
tbl.replaceChild(tbody,blank);
tbl.replaceChild(thead,blank2);
tbl.replaceChild(tfoot,blank3);
}
// Firefox用テーブル列開閉
function SwitchViewTable3(id){
var tbl = GetObject(id);
var index = tbl.selecter.value;
var th = tbl.getElementsByTagName('THEAD')[0].getElementsByTagName('TH')[index];
var tbody = tbl.getElementsByTagName('TBODY')[0];
var rows = tbody.rows;
var l = rows.length;
var change;
// colをdisplay:noneにしても消えないので個々のtd,thのdisplayを変える
if(!tbl.switch_view_disable[index]){
tbl.switch_view_disable[index] = 1;
tbl.button.value = 'open';
change = 'none';
}
else{
tbl.switch_view_disable[index] = 0;
tbl.button.value = 'close';
change = 'table-cell';
}
for (var i = 0; i < l; i++) {
rows[i].cells[index].style.display = change;
}
th.style.display = change;
}
- IEはcolのdisplayを切り替える（バグでcolのスタイルが列要素に適用される）
- Firefoxは列の要素すべてのdisplayを切り替える
で実装しています。
- IEで下の要素一つ一つ切り替えをやろうとすると、切り替えごとにレンタリングしてくれちゃうので重い
- かといってFirefoxだと上の方法がうまくいかない（CSS的には正しいのだけれど）
Closeable Menu（閉まっちゃえるメニュー）
- Menuのdisplayをnoneとblockで切り替えて、本文の幅を広くする。
- いまのところ汎用性に欠ける感じ。
- addEventSeter,GetObjectは上のgetobject.jsから
addEventSeter(window,'load',CloseableMenu);
function CloseableMenu(){
var close_button = document.createElement("input");
close_button.id = 'close_button';
close_button.type = 'button';
close_button.value = '×';
addEventSeter(close_button,'click',CloseMenu);
var open_button = document.createElement("input");
open_button.id = 'open_button';
open_button.type = 'button';
open_button.value = 'menu';
open_button.style.display = 'none';
addEventSeter(open_button,'click',OpenMenu);
GetObject('menu').getElementsByTagName('h2')[0].appendChild(close_button);
GetObject('topicpath').appendChild(open_button);
}
function CloseMenu()
{
GetObject('menu').style.display='none';
GetObject('body').style.width='768px';
GetObject('open_button').style.display='inline';
}
function OpenMenu()
{
GetObject('menu').style.display='block';
GetObject('body').style.width='550px';
GetObject('open_button').style.display='none';
}
PHP
見出し
デフォルトだとなぜか見出しは3段階h2～h4までしかできないので、lib/html.phpとlib/convert_html.phpを少しいじってh5～h6まで使えるようにした。
表
書式指定行で表のcaption,summary,classを指定できるように。
index.php/hoge
PHPがCGIモードだとPATH_INFOが使えなかったりするので、
さくらインターネットでPATH_INFOをとる方法 ⇒
の方法を取るとよい。
スキンとかプラグインとかdefault.jsとかで動作しないところがあったら相対パスを絶対パスに書き換えればよろしい。
DataBase Table
データベースと表を連動させて同じ内容を別の表に利用したり検索しやすくしたり。
カスタマイズのアイディア
こんなのあるといい気がするもの
Ajax的なもの
Editable Menu（編集可能メニュー）
ユーザーごとに自由にメニュー項目を編集できる。Cookieで状態を保存。
誤り通知ボタン
Wikiの内容が間違っていることがわかってもそれを直してくれる人は少ない。なぜなら直す手間が面倒だから。
1クリックで間違っている箇所だけでも他の誰かに伝えられるようにすると、誤り検知が早くできてその部分を手直ししてくれる人が出てくるかも。
|
