New "INOCHI Ribbon"
Akhirnya, INOCHI mempersembahkan inochiRibbon
Fitur:
ribbonTabs
Menentukan tab-tab apa saja pada ribbon
ribbonGroups
Menentukan grup-grup pada ribbon
ribbonButtons
Menentukan item-item pada ribbon, item ini berupa: button (big/small) dengan tipe single/popup/split-popup, label, textbox, checkbox, dan custom item.
statusBar
Menentukan item-item pada statusbas, item ini berupa: button single small dan label
quickBar
Menentukan item-item pada quickbar, item ini berupa: button single small
upButtons
Menentukan item-item pada tab ribbon, item ini berupa: button single small yang terletak pada sisi kanan tab ribbon
buttonFileStandard
Menentukan button standard pada page ribbon file
buttonFileFull
Menentukan button long pada page ribbon file, digunakan untuk menampilkan sub halaman dari page ribbon file
logo
Menentukan logo pada tengah-tengah halaman
theme
Menentukan theme ribbon, disediakan dua jenis theme, yaitu: black dan blue
onClick
Menentukan event klik dari masing-masing item
selectedTab
Menentukan tab ribbon yang pertama kali dipilih
quickBarPos
Menentukan posisi quickbar, dengan pilihan: 0 - posisi di atas ribbon dan 1 - posisi di bawah ribbon
toolBar
Menentukan tombol-tombol pada toolbar
tooltip
Menentukan tool-tip untuk tiap-tiap item
cornerButton
Menentukan tombol di sudut kanan bawah ribbon group
Sudah diuji pada browser Firefox, Internet Explorer 7, dengan hasil memuaskan. Jika ada yang telah menguji pada Google Chrome dan Opera, mohon informasinya.
code untuk index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INOCHI Ribbon</title>
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="scripts/tinybox.js"></script>
<script type="text/javascript" src="scripts/jquery.alerts.js"></script>
<script type="text/javascript" src="scripts/inochi.ribbon.js"></script>
<script type="text/javascript" src="scripts/inochi.js"></script>
<script type="text/javascript">
$(function(){
$("#page").inochiRibbon({
theme: "blue",
logo: "forms/frmLogo.php",
selectedTab: 1,
quickBarPos: 1,
quickBar: [
//Add quickbar button
{name:'save'},
{name:'folder'},
{name:'info', form: 'frmAbout'},
{name:'exit'}
],
upButtons: [
//Add button on ribbon-tab (right side)
{name:'help', caption: ''},
{name:'about', caption: 'About', form: 'frmAbout'}
],
ribbonTabs: [
//Add ribbon tab
{caption: 'Home'},
{caption: 'Profile'}
],
ribbonGroups: [
//Add group ribbon
{tabno:1, name:'clipboard', caption: 'Clipboard', cornerButton: true,
tooltip: [
{title: "Clipboard", content: "<table><tr>" +
"<td><img src=images/clipboard.png /></td>" +
"<td style=width:200px>Show the clipboard task</td>"+
"</tr></table>"}
]},
{tabno:1, name:'database', caption: 'Database'},
{tabno:1, name:'show', caption: 'Show'},
{tabno:1, name:'text', caption: 'Text'},
{tabno:2, name:'other', caption: 'Other'}
],
ribbonButtons: [
//Add button on ribbon
{group:'clipboard', name:'paste', caption: 'Paste', size:'big', type:'split',
popups:[
{name:'pasteall', caption: 'Paste All'}
],
tooltip:[{title:"Paste", content: "Paste the contents of the clipboard"}]
},
{group:'clipboard', name:'cut', caption: 'Cut', size:'small',
tooltip:[{title:"Cut", content: "Cut the selection and put it on the clipboard"}]},
{group:'clipboard', name:'copy', caption: 'Copy', size:'small',
tooltip:[{title:"Cut", content: "Copy the selection and put it on the clipboard"}]},
{group:'clipboard', name:'copyformat', caption: 'Format Painter', size:'small',
tooltip:[{title:"Format Painter", content: "Copy formating from one place and apply it to another"}]},
{group:"show", name:"ruler", caption: 'Ruler', size:'small', type:'checkbox'},
{group:"show", name:"gridlines", caption: 'Gridlines', size:'small', type:'checkbox'},
{group:"show", name:"navigation", caption: 'Navigation Pane', size:'small', type:'checkbox'},
{group:"text", name:"info", caption: 'Info', size:'small', type:'label'},
{group:"text", name:"yourname", caption: 'Name', size:'small', type:'textbox'},
{group:"text", name:"address", caption: 'Address', size:'small', type:'textbox'},
{group:"database", name:"database", caption: 'Database', size:'big',
popups:[
{name:'backup', caption: 'Backup'},
{name:'restore', caption: 'Restore'}
],
tooltip:[{title:"Database", content: "Backup or restore database"}]},
{group:'database', name:'other', caption: 'Other', size:'small', type: 'split',
popups:[
{name:'folder', caption: 'Folder'},
{name:'user', caption: 'User'},
{name:'book', caption: 'Book', form: 'frmBook'}
],
tooltip:[{title:"Database", content: "database"}]},
{group:"other", name:"folder", caption: 'Folder', size:'big'},
{group:"other", name:"user", caption: 'User', size:'big'},
{group:"other", name:"book", caption: 'Book', size:'big', form: 'frmBook'},
],
toolBar: [
//Add button on tool bar
{name:'find', caption: 'Find'},
{name:'save', caption: 'Save'},
{name:'delete', caption: 'Delete'},
{name:'reset', caption: 'Reset'},
{style: '|'},
{name:'add', caption: 'Add'},
{style: '|'},
{name:'view', caption: 'View'},
{style: '|'},
{name:'print', caption: 'Print'},
{style: '|'},
{name:'close', caption: 'Close', act: 'close'}
],
buttonFileStandard: [
//Add button standard on File page
{name:'save', caption: 'Save'},
{name:'folder', caption: 'Open'}
],
buttonFileFull: [
//Add button full/long on File page
{name:'option', caption: 'Option'},
{name:'recent', caption: 'Recent'}
],
statusBar: [
//Add button on status bar
{name:'save', caption: ''},
{name:'folder', caption: ''},
{name:'panelStatus', caption: ' ', type:'label', width: 200},
],
onClick: function(obj){
var btnID = $(obj).attr('id');
switch(btnID){
case "big-button-paste":
msgBar('Info', 'Your click Paste Button');
break;
case "file-button-full-option":
var strContent = "<h2>INOCHI Ribbon</h2><br/>";
strContent += "Copyright © 2011 <a href='http://www.agungnovian.com' target='_blank'>AgungNovian.com</a><br/>";
strContent += "<br/>Contact: <a href='mailto:pujanggabageur@yahoo.com'>pujanggabageur@yahoo.com</a>";
$('.file-panel-right').html(strContent);
break;
default:
$('.file-panel-right').html("");
var selectedForm = $("#txtFrmSelected").val();
$("#panelStatus").html('You are clicking ' + btnID + ' button on ' + selectedForm);
break;
}
}
});
});
</script>
</head>
<body>
<div id="page">
<!-- silent is gold -->
</div>
</body>
</html>
download: http://www.i-bego.com/download/file.php?id=152
by:i-bego
