しかし、ずっと表示させておくのはうっとうしいし、うっかり本番で表示されちゃったら大変です！！！
ということで、
http://d.hatena.ne.jp/localdisk/20110521/1305964812
「さよなら! var_dump! ようこそ CodeIgniter Profiler!」を参考に私も実装してみました。
(1) javascript部分の表示用にviewファイルを作成
- /application/views/profiler.php
- 参考サイトとの変更点
- #profilerの背景画像の廃止
- #profilerのcss設定をjsで指定
- ボタン画像の作成(ロールオーバー用と通常用の2個）
- ボタンのロールオーバー
- プロファイラを開いているときにボタン位置まで移動するのは面倒なので#codeigniter_profilerのどこかをクリックしたら閉じるように改変。
<script type="text/javascript">
//<!--
$(function(){
if ($('#codeigniter_profiler').length > 0) {
var prof = $('<div>', {
id: 'profiler',
html: $('<img>', {
id : 'profiler_button',
height: 35,
width: 178,
alt: 'Toggle Profiler',
title: 'Toggle Profiler',
src: '<?php echo base_url(); ?>common/images/profiler/nav_toggle_darker.png'
})
});
$('body').prepend(prof);
$('body').prepend($('#codeigniter_profiler'));
$('#profiler').css('text-align', 'right');
$('#profiler').css('border-top', '10px #000 solid');
$('#codeigniter_profiler').css('display', 'none');
$('#codeigniter_profiler').css('background', '#FFF');
$('#codeigniter_profiler').click(function () {
$('#codeigniter_profiler').slideToggle();
});
$('#profiler_button').hover(function(){
this.orgImage = $(this).attr('src');
this.rolloverImage = this.orgImage.replace(/(\.gif|\.jpg|\.png)/, "_on$1");
$(this).attr('src',this.rolloverImage);
},function(){
$(this).attr('src',this.orgImage);
});
}
});
// -->
</script>
//<!--
$(function(){
if ($('#codeigniter_profiler').length > 0) {
var prof = $('<div>', {
id: 'profiler',
html: $('<img>', {
id : 'profiler_button',
height: 35,
width: 178,
alt: 'Toggle Profiler',
title: 'Toggle Profiler',
src: '<?php echo base_url(); ?>common/images/profiler/nav_toggle_darker.png'
})
});
$('body').prepend(prof);
$('body').prepend($('#codeigniter_profiler'));
$('#profiler').css('text-align', 'right');
$('#profiler').css('border-top', '10px #000 solid');
$('#codeigniter_profiler').css('display', 'none');
$('#codeigniter_profiler').css('background', '#FFF');
$('#codeigniter_profiler').click(function () {
$('#codeigniter_profiler').slideToggle();
});
$('#profiler_button').hover(function(){
this.orgImage = $(this).attr('src');
this.rolloverImage = this.orgImage.replace(/(\.gif|\.jpg|\.png)/, "_on$1");
$(this).attr('src',this.rolloverImage);
},function(){
$(this).attr('src',this.orgImage);
});
}
});
// -->
</script>
