|
[JQuery] Mengenal inochi-ribbon (bagian 2)
Oleh: Agung Novian
| 12 October 2011
-
Sub Parameter
Adalah parameter-parameter yang merupakan sub parameter dari parameter-parameter utama. Berikut ini akan dijelaskan parameter-parameter apa saja yang merupakan sub parameter.
-
ribbonGroups
Sebuah tab ribbon akan memiliki beberapa elemen group ribbon. Jika Anda perhatikan pada tab ribbon “Home” pada aplikasi Ms. Office Word 2007 ke atas macam-macam group ribbon diantaranya: “Clipboard”, “Font”, “Paragraph”, “Style”, dan “Editing”. Pada sebuah elemen group ribbon akan memiliki elemen-elemen lain seperti : button, textbox, combobox, label, dan sebagainya. Untuk keperluan tersebut, “inochi-ribbon” telah menyediakannya melalui parameter “ribbonGroups”.
ribbonGroups adalah parameter yang digunakan untuk membuat elemen group ribbon. ribbonGroups memiliki parameter-parameter yang harus Anda tentukan, diantaranya:
-
id
Adalah identitas dari group ribbon yang dibuat, berupa suatu nilai angka seperti: “101”, “1001”, “102”, “1003”. Untuk tiap-tiap ribbonGroups harus memiliki parameter “id” yang berbeda, baik dengan ribbonGroups itu sendiri maupun dengan elemen lain.
-
caption
Adalah judul untuk group ribbon yang dibuat, berupa suatu nilai teks seperti: “Home”, “Insert”, “Page Layout” dan sebagainya.
ribbonGroup merupakan sub parameter dari parameter “ribbonTabs”, sebagai contoh penggunaan ribbonGroup adalah sebagai berikut:
$(function(){
$("#page").inochiRibbon({
//Menentukan theme
theme: "black",
ribbonTabs: [
//Menambahkan tab ribbon
{id:'10001', caption: 'Home',
//Menambahkan grup ribbon
ribbonGroups: [
{id:'100011001', caption:'Clipboard'},
{id:'100011002', caption:'Font'},
{id:'100011003', caption:'Paragraph'},
{id:'100011004', caption:'Style'},
{id:'100011005', caption:'Editing'}
]
},
//Menambahkan tab ribbon
{id:'10002', caption: 'Insert',
//Menambahkan grup ribbon
ribbonGroups: [
{id:'100021001', caption:'Pages'},
{id:'100021002', caption:'Tables'},
{id:'100021003', caption:'Illustrations'},
{id:'100021004', caption:'Links'},
{id:'100021005', caption:'Header & Footer'}
]
}
]
});
});
-
panels
Adalah sub parameter khusus kepunyaan “statusBar”, digunakan untuk membuat panel-panel pada status bar. panels memiliki parameter-parameter yang harus Anda tentukan, diantaranya:
-
id
Adalah identitas dari panels yang dibuat, berupa suatu nilai angka seperti: “101”, “1001”, “102”, “1003”. Untuk tiap-tiap panels harus memiliki parameter “id” yang berbeda, baik dengan panels itu sendiri maupun dengan elemen lain.
-
name
Adalah identitas nama dari panels yang dibuat, berupa nilai teks seperti: “panels0”, “panelproccess”, dan sebagainya.
-
align
Adalah properti untuk menentukan perataan dari panels, disediakan dua pilihan perataan, yaitu: “left” agar panels ditampikan rata kiri dan “right” agar panels ditampilkan rata kanan.
Sebagai contoh penggunaan panels adalah sebagai berikut:
$(function(){
$("#page").inochiRibbon({
//Menentukan theme
theme: "black",
//Menambahkan batang status
statusBar: {
//Menambahkan panels
panels: [
{id: '555000', name: 'panel0', align:'left'},
{id: '555001', name: 'panel1', align:'left'},
{id: '555002', name: 'panel2', align:'left'},
{id: '555003', name: 'panel2', align:'right'}
]
}
});
});
-
items
-
id
Adalah identitas dari items yang dibuat, berupa suatu nilai angka seperti: “101”, “1001”, “102”, “1003”. Untuk tiap-tiap items harus memiliki parameter “id” yang berbeda, baik dengan items itu sendiri maupun dengan elemen lain.
-
name
Adalah identitas nama dari item yang dibuat, berupa nilai teks seperti: “btnBuku”, “btnAnggota”, dan sebagainya.
-
caption
Adalah teks yang akan ditampilkan pada items yang dibuat, berupa nilai teks seperti: “Buku”, “Anggota”, “Penerbit”, dan sebagainya.
-
type
-
button
Jenis items berupa tombol standard.
-
buttonpopup
Jenis items berupa tombol yang memiliki menu popup.
-
buttonsplitpopup
Jenis items berupa tombol yang memiliki menu popup dimana tombol utamapun dapat diakses dan mempunyai proses sendiri.
-
label
Jenis items berupa label atau teks saja.
-
text
Jenis items berupa kotak teks (textbox).
-
combo
Jenis item berupa kotak kombo (combobox).
-
spin
Jenis items berupa kotak teks (textbox) yang dilengkapi tombol untuk menambah dan mengurangi nilai dari teks pada kotak teks.
-
check
Jenis items berupa kotak cek (checkbox).
-
size
Adalah ukuran untuk items, disediakan dua opsi yaitu “large” untuk tampilan items besar dan “small” untuk tampilan items kecil. Parameter ini berlaku untuk items dengan type “button”, “buttonpopup”, dan “buttonsplitpopup”.
-
image
Adalah parameter untuk menentukan nama file image yang digunakan untuk menampilkan gambar pada items. Parameter ini berlaku untuk items dengan type “button”, “buttonpopup”, dan “buttonsplitpopup”. File image disimpan pada sub folder “images”.
-
form
Adalah parameter untuk menentukan nama form yang akan dipanggil ketika items menemui even onClick. File form disimpan pada sub folder “forms”.
-
checked
Adalah parameter untuk menentukan centang dari suatu items. Parameter ini berlaku untuk items dengan jenis “check” dan “button”.
-
optionButton
Adalah sub parameter khusus kepunyaan ribbonGroups yang digunakan untuk menambahkan tombol opsi di sudut kanan bawah dari grup ribbon.
optionButton memiliki parameter-parameter yang harus Anda tentukan, diantaranya:
-
id
Adalah identitas dari optionButton yang dibuat, berupa suatu nilai angka seperti: “101”, “1001”, “102”, “1003”. Untuk tiap-tiap ribbonGroups harus memiliki parameter “id” yang berbeda, baik dengan optionButton itu sendiri maupun dengan elemen lain.
-
nama
Adalah identitas nama dari optionButton yang dibuat, berupa nilai teks seperti: “optClipboard”, “optOther”, dan sebagainya.
-
popups
Adalah sub parameter untuk menentukan item-item menu popup dari suatu items dengan jenis “buttonpopup” atau “buttonsplitpopup”. popups memiliki parameter-parameter lain yang sama persis dengan parameter yang dimiliki oleh items, seperti: id, name, image, type, dan sebagainya.
Sebagai contoh penggunaan sub parameter adalah sebagai berikut:
<!-- Inisialisasi HTML versi 5 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Menentukan judul aplikasi web -->
<title>Aplikasi Perpustakaan</title>
<!-- Menambahkan JavaScript ke halaman -->
<script type="text/javascript" src="scripts/jquery-1.6.2.min.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/script.js"></script>
<!-- Menambahkan CSS ke halaman -->
<link rel="stylesheet" type="text/css" href="styles/flexigrid.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript">
$(function(){
$("#page").inochiRibbon({
//Menentukan theme
theme: "black",
//Menambahkan tab ribbon
ribbonTabs: [
{id:'10001',
caption: 'Home',
//Menambahkan grup ribbon Home
ribbonGroups: [
{id:'100011001',
caption:'Clipboard',
//Menambahkan items pada group Clipboard
items: [
{id:'2000001',
type:'buttonsplitpopup',
size:'large',
name:'Paste',
image:'paste.png',
caption:'Paste',
//Menambahkan popup pada items Paste
popups:[
{id:'3000001',
type:'button',
size:'small',
name:'paste',
image:'',
caption:'Paste'},
{id:'3000002',
type:'button',
size:'small',
name:'pastespc',
image:'pasteall.png',
caption:'Paste Special'}
]},
{id:'2000002',
type:'button',
size:'small',
name:'cut',
image:'cut.png',
caption:'Cut'},
{id:'2000003',
type:'button',
size:'small',
name:'copy',
image:'copy.png',
caption:'Copy'},
{id:'2000004',
type:'button',
size:'small',
name:'paste',
image:'format.png',
caption:'Format Painter'}
],
//Menambahkan option button pada grup Clipboard
optionButton: [
{id:'2200001',
name:'clipboardOption'}
]},
{id:'100011002',
caption:'Form',
items: [
{id:'2002001',
type:'buttonpopup',
size:'large',
name:'buku',
image:'buku.png',
caption:'Buku',
form: 'Buku',
popups:[
{id:'3002001',
type:'button',
size:'small',
name:'penerbit',
image:'penerbit.png',
caption:'Penerbit'},
{id:'3002002',
type:'button',
size:'small',
name:'rak',
image:'rak.png',
caption:'Rak'}
]},
{id:'2002002',
type:'check',
size:'small',
name:'check1',
checked: 1,
caption:'Check'},
{id:'2002003',
type:'text',
size:'small',
name:'copy',
caption:'Text'},
{id:'2002004',
type:'combo', size:'small',
name:'paste',
caption:'Combo'},
{id:'2002005',
type:'buttonpopup',
size:'small',
name:'anggota',
image:'anggota.png',
caption:'Anggota',
popups:[
{id:'3003001',
type:'button',
size:'small',
name:'penerbit',
image:'penerbit.png',
caption:'Penerbit'},
{id:'3003002',
type:'button',
size:'small',
name:'rak',
image:'rak.png',
caption:'Rak'}
]},
{id:'2002006',
type:'buttonsplitpopup',
size:'small',
name:'info',
image:'info.png',
caption:'Info',
popups:[
{id:'3004001',
type:'button',
size:'small',
name:'penerbit',
image:'penerbit.png',
caption:'Penerbit'},
{id:'3004002',
type:'button',
size:'small',
name:'rak',
image:'rak.png',
caption:'Rak'}
]},
{id:'2002007',
type:'spin',
size:'small',
name:'size',
image:'',
caption:'Size'}
]},
{id:'100011003',
caption:'Paragraph'},
{id:'100011004',
caption:'Style'},
{id:'100011005',
caption:'Editing'}
]
},
//Menambahkan tab ribbon Insert
{id:'10002',
caption: 'Insert',
//Menambahkan grup ribbon
ribbonGroups: [
{id:'100021001',
caption:'Pages'},
{id:'100021002',
caption:'Tables'},
{id:'100021003',
caption:'Illustrations'},
{id:'100021004',
caption:'Links'},
{id:'100021005',
caption:'Header & Footer'}
]
}
]
});
});
</script>
</head>
<body>
<div id="page">
<!-- silent is gold -->
</div>
</body>
</html>
Ditulis di:
Framework, HTML, JavaScript, JQuery, Pemograman, Web
Penanda: css, HTML, inochi-ribbon, JQuery
« [JQuery] Mengenal inochi-ribbon (bagian 1)
| [VB Classic] Kalender Indonesia »
|
|
|
