I-BEGO

Indonesian Best Generation

Skip to content

[share] INOCHI Ribbon

Forum diskusi mengenai client-side scripting Javascript dan framework-framework yang mendukungnya

Moderator: irzan2010

Post a reply

[share] INOCHI Ribbon

Postby pujanggabageur » 14 Aug 2011, 23:59

New "INOCHI Ribbon"
Akhirnya, INOCHI mempersembahkan inochiRibbon <:D>
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.
Attachments
inochiribbon.zip
inochiRibbon
(392.35 KiB) Downloaded 141 times
Wajib hukumnya mematuhi Peraturan Memposting!
Diajar babarengan
Post pujanggabageur telah mendapat 4 kopi dari:
ariartama, cyberzilla, irzan2010, syaeful
User avatar
pujanggabageur
Global Moderator
Global Moderator
 
Posts: 2814
Joined: 13 Mar 2010, 14:15
Location: di depan LCD ViewSonic
Memberi kopi: 159 cangkir
Mendapat kopi: 293 cangkir
Top

Re: [share] INOCHI Ribbon

Postby pujanggabageur » 15 Aug 2011, 00:02

Bagaimana cara menggunakannya pada halaman web Anda?

  • Pastikan Anda sudah menyiapkan folder-folder yang diperlukan, diantaranya:
    • forms
      Sebagai folder untuk menyimpan form-form yang akan dipanggil oleh item-item pada ribbon
    • images
      Sebagai folder untuk menyimpan gambar-gambar (image) dengan ekstensi *.png dengan dimensi: 32x32, 24x24, 16x16 sebagai ikon penghias item-item pada ribbon
    • scripts
      Sebagai folder untuk menyimpan file-file javascript yang diperlukan, diantaranya:
      • jquery (saya menggunakan jquery-1.6.2.min.js) sebagai library JQuery
      • jquery.alerts.js sebagai komponen untuk menampilkan alert/message box
      • inochi.ribbon.js sebagai komponen untama untuk membangun ribbon
      • inochi.js sebagai script opsional saja untuk menampung fungsi-fungsi lain yang dibutuhkan
    • themes
      Sebagai folder penampung theme-theme yang akan dipakai ribbon, pada folder ini kemudian berisi folder-folder sesuai nama theme yang dipakai, misalnya:
      • black
      • blue
      • silver
      • dan sebagainya
      dalam folder theme tertentu harus mempunyai komponen-komponen lain yang diperlukan, yaitu:
      • core.html sebagai file html untuk membentuk kerangka ribbon
      • style.css sebagai file style (css) untuk mengatur atribut-atribut komponen html
      • images, folder berisi file-file gambar (image) untuk membentuk desain ribbon
  • Menyiapkan file index.php (file utama). Isi file index.php dapat sebagai berikut:
    Code: Select all
    <!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: '&nbsp;', 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 &copy; 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>
Attachments
inochi-ribbon-implement.PNG
Implementasi pada aplikasi web
inochi-ribbon-file.PNG
File Page
inochi-ribbon-black.png
Black Theme
inochiribbon.PNG
Blue Theme
Wajib hukumnya mematuhi Peraturan Memposting!
Diajar babarengan
Post pujanggabageur telah mendapat kopi dari:
cyberzilla
User avatar
pujanggabageur
Global Moderator
Global Moderator
 
Posts: 2814
Joined: 13 Mar 2010, 14:15
Location: di depan LCD ViewSonic
Memberi kopi: 159 cangkir
Mendapat kopi: 293 cangkir
Top

Re: [share] INOCHI Riboon

Postby mbahlawoe » 15 Aug 2011, 00:21

pujanggabageur wrote:Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan...


[OOT]
Kenapa Om? :-? :-? Ada yang mau mencurikah? ko di amankan......
User avatar
mbahlawoe
C# Moderator
C# Moderator
 
Posts: 1377
Joined: 14 Mar 2010, 00:18
Location: Solo - Jawa Tengah
Memberi kopi: 61 cangkir
Mendapat kopi: 163 cangkir
Top

Re: [share] INOCHI Riboon

Postby mahmud83 » 15 Aug 2011, 01:19

pujanggabageur wrote:New "INOCHI Ribbon"

Upload dulu, nanti bahasnya besok ;;) ;;) <:D> <:D>


tak coba ya om.... :-bd :-bd :-bd
before you make it better, you have to make it worse
I don't know the key to success, but the key to failure is trying to please everybody.
mahmud83
Prajurit Satu
Prajurit Satu
 
Posts: 242
Joined: 14 May 2010, 10:48
Location: Indonesia, Sumatera Utara
Memberi kopi: 46 cangkir
Mendapat kopi: 7 cangkir
Top

Re: [share] INOCHI Riboon

Postby vberror13 » 15 Aug 2011, 01:39

mbahlawoe wrote:
pujanggabageur wrote:Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan... Diamankan...


[OOT]
Kenapa Om? :-? :-? Ada yang mau mencurikah? ko di amankan......


takut dijual oleh si sugestiku at gmail dot com, kali. :D
:ymbilly: :ymbilly: :ymbilly: =:) :ymbilly:
Just Because You Are Unique, Doesn't Mean You Are Useful
User avatar
vberror13
Global Moderator
Global Moderator
 
Posts: 1846
Joined: 13 Mar 2010, 20:34
Location: Medan Indonesia
Memberi kopi: 296 cangkir
Mendapat kopi: 321 cangkir
Top

Re: [share] INOCHI Riboon

Postby pujanggabageur » 15 Aug 2011, 11:43

vberror13 wrote:takut dijual oleh si sugestiku at gmail dot com, kali. :D


Wkwkwkwkwk, ngga om... :p

Itu 'diamankan', itu untuk menyediakan space buat persiapan dokumentasi :D
Wajib hukumnya mematuhi Peraturan Memposting!
Diajar babarengan
User avatar
pujanggabageur
Global Moderator
Global Moderator
 
Posts: 2814
Joined: 13 Mar 2010, 14:15
Location: di depan LCD ViewSonic
Memberi kopi: 159 cangkir
Mendapat kopi: 293 cangkir
Top

Re: [share] INOCHI Riboon

Postby cyberzilla » 15 Aug 2011, 13:12

Wah.....Gagal Pertamaxnya nih....Hehhehe :) Thank you very much To Kanda Agung....
Dedy
Image
====================================================================================
YM : cyberzilla@ymail.com
Google+ : cyb3rzilla@gmail.com
FB : http://www.facebook.com/albugisy
Twitter : @cyberzilla42
Plurk : http://www.plurk.com/albugisy/invite
User avatar
cyberzilla
Prajurit Dua
Prajurit Dua
 
Posts: 13
Joined: 09 Aug 2011, 14:45
Memberi kopi: 7 cangkir
Mendapat kopi: 0 cangkir
Top

Re: [share] INOCHI Riboon

Postby pujanggabageur » 15 Aug 2011, 19:15

FAQ
Diamankan.... diamankan... diamankan...
Wajib hukumnya mematuhi Peraturan Memposting!
Diajar babarengan
User avatar
pujanggabageur
Global Moderator
Global Moderator
 
Posts: 2814
Joined: 13 Mar 2010, 14:15
Location: di depan LCD ViewSonic
Memberi kopi: 159 cangkir
Mendapat kopi: 293 cangkir
Top

Re: [share] INOCHI Riboon

Postby AgoesTri » 15 Aug 2011, 20:58

Oh God... apa2an ini... :-O Incredible
Silahkan berkunjung ke Blog Saya...

Peraturan forum :
1. Utamakan keakraban antar member.
2. Jaga postingan dari hal2 SARA, pornografi, pertengkaran dll yang terkesan arogan dan kasar.
3. Utamakan postingan. Kualitas lebih baik daripada kuantitas.
4. Dilarang ngJunk berlebihan.
5. Dilarang memasang Signature yang bersifat komersil, tanpa seijin Admin.

:)
User avatar
AgoesTri
Administrator
Administrator
 
Posts: 763
Joined: 17 Mar 2010, 10:38
Location: Jogja
Memberi kopi: 8 cangkir
Mendapat kopi: 40 cangkir
Top

Re: [share] INOCHI Riboon

Postby pujanggabageur » 15 Aug 2011, 21:08

AgoesTri wrote:Oh God... apa2an ini... :-O Incredible


Kenapa oom? Ada yang salah? :D
Maklum masih belajar... :D
Wajib hukumnya mematuhi Peraturan Memposting!
Diajar babarengan
User avatar
pujanggabageur
Global Moderator
Global Moderator
 
Posts: 2814
Joined: 13 Mar 2010, 14:15
Location: di depan LCD ViewSonic
Memberi kopi: 159 cangkir
Mendapat kopi: 293 cangkir
Top
Next
Post a reply

Return to Javascript and Framework

Who is online

Users browsing this forum: No registered users and 1 guest

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

-- SEO --