CARA MEMBUAT MENU RIBBON DENGAN EASY UI

Hallo pembaca,
Udah dua hari ini saya gak nulis, ternyata memang berat jika harus satu hari nulis satu judul, apalagi jika kerjaan kantor lagi banyak, haduwhhh capek juga...
Oke deh, kali ini saya menulis tentang bagaimana cara membuat menu ribbon dengan easy iu, menu ribbon ini cukup simpel dan dilihatnya juga cukup menarik, anda tidak perlu banyak memikir dalam membuat layoutnya, karena sudah ada dalam plugin jquery ui dan css easy ui, langsung saja hasil yang kita buat nanti ada bisa lihat gambar dibawah ini :



File yang anda butuhkan hanyalah plugin javascript dan css dari easy ui, anda bisa mengambil js easy ui dan css nya anda tidak perlu khawatir, karena di sesi akhir akan saya beri skrip lengkapnya. Setelah itu silahkan buat file "index.php" dan tulis seperti scriptnya dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sistem Informasi</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/ribbon.css">
    <link rel="stylesheet" type="text/css" href="css/ribbon-icon.css">
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.ribbon.js"></script>
    <script>
        function addTab(title, url){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }
    </script>
</head>
<body>
<div id="ribbon">
<div class="easyui-ribbon">
        <div title="Menu">
            <div class="ribbon-group">
                <div class="ribbon-toolbar">
                    <a href="#" class="easyui-menubutton" data-options="name:'karyawan',iconCls:'icon-karyawan-large',iconAlign:'top',size:'large'" onClick="addTab('Karyawan','frmKaryawan.php')">Karyawan</a>
                </div>
                <div class="ribbon-toolbar">
                    <a href="#" class="easyui-menubutton" data-options="name:'penilaian',iconCls:'icon-penilaian-large',iconAlign:'top',size:'large'" onClick="addTab('Penilaian','frmPenilaian.php')">Penilaian</a>
                </div>               
                <div class="ribbon-group-title">Data</div>
            </div>
            <div class="ribbon-group-sep"></div>
            <div class="ribbon-group">
                <div class="ribbon-toolbar">
                    <a href="#" class="easyui-menubutton" data-options="name:'masuk',iconCls:'icon-masuk-large',iconAlign:'top',size:'large'">Masuk</a>
                </div>
                <div class="ribbon-toolbar">
                    <a href="#" class="easyui-menubutton" data-options="name:'pulang',iconCls:'icon-pulang-large',iconAlign:'top',size:'large'">Pulang</a>
                </div>   
                <div class="ribbon-group-title">Absensi</div>
            </div>
            <div class="ribbon-group-sep"></div>
        </div>
    </div>
</div>
<div id="tt" class="easyui-tabs" style="height:530px;" >
<div title="Home" style="padding-top:10px; text-align:center; background-repeat:no-repeat; background-color:#FFF;">
</div>
</div>
</body>

 

---------------------------------------------------------------------------------------------------------------------------------

Jika anda ingin menambahkan menu group pada ribbon, anda bisa menambahkan pada kalangan div class="ribbon-group", seperti contoh dibawah ini :

--------------------------------------------------------------------------------------------------------------------------------- 
<div class="ribbon-group">
        <div class="ribbon-group-title">Data</div>

 </div>
--------------------------------------------------------------------------------------------------------------------------------- 

Dan apabila anda ingin menambahkan tombol/icon di toolbar ribbon, anda bisa menambahkan pada kalangan div class="ribbon-toolbar", seperti contoh dibawah ini :

---------------------------------------------------------------------------------------------------------------------------------
<div class="ribbon-toolbar">
                    <a href="#" class="easyui-menubutton" data-options="name:'karyawan',iconCls:'icon-karyawan-large',iconAlign:'top',size:'large'" onClick="addTab('Karyawan','frmKaryawan.php')">Karyawan</a>
                </div>
                <div class="ribbon-toolbar">
                    <a href="#" class="easyui-menubutton" data-options="name:'penilaian',iconCls:'icon-penilaian-large',iconAlign:'top',size:'large'" onClick="addTab('Penilaian','frmPenilaian.php')">Penilaian</a>
                </div>        

</div>
---------------------------------------------------------------------------------------------------------------------------------
Untuk memanggil form anda bisa perhatikan script diatas pada event onClick, seperti contoh dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
<a href="#" class="easyui-menubutton" data-options="name:'karyawan',iconCls:'icon-karyawan-large',iconAlign:'top',size:'large'" onClick="addTab('Karyawan','frmKaryawan.php')">Karyawan</a>
---------------------------------------------------------------------------------------------------------------------------------  

Untuk mengganti icon pada ribbon anda bisa buka file ribbon-icon.css yang berada didalam folder css dan contoh skriptnya seperti dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------  
.icon-karyawan-large{
    background:url('../img/32/karyawan.png') no-repeat center center;
}
.icon-penilaian-large{
    background:url('../img/32/penilaian.png') no-repeat center center;
}
.icon-masuk-large{
    background:url('../img/32/masuk.png') no-repeat center center;
}
.icon-pulang-large{
    background:url('../img/32/pulang.png') no-repeat center center;
}

---------------------------------------------------------------------------------------------------------------------------------  
 Kemudian pada bagian class toolbar, sesuai properti dari icon classnya, contohnya seperti dibawah ini :
 ---------------------------------------------------------------------------------------------------------------------------------  
iconCls:'icon-karyawan-large
---------------------------------------------------------------------------------------------------------------------------------   
 Sekarang anda buat dua file sebagai contoh dalam pemanggilan formnya, yang pertama anda buat file dan berinama "frmKaryawan.php" dan yang ke dua silahkan anda berinama "frmPenilaian", setelah itu silahkan anda buka file "index.php", dan perhatikan skrip dibawah ini :

---------------------------------------------------------------------------------------------------------------------------------   
<a href="#" class="easyui-menubutton" data-options="name:'karyawan',iconCls:'icon-karyawan-large',iconAlign:'top',size:'large'" onClick="addTab('Karyawan','frmKaryawan.php')">Karyawan</a>
---------------------------------------------------------------------------------------------------------------------------------     

Pada contoh skrip diatas terdapat event onClick="addTab('Karyawan','frmKaryawan.php')", silahkan ganti namanya sesuai dengan file php atau form yang anda buat.

Selesai sudah, anda bisa menjalankan file "index.php" dengan browser kesayangan anda,dan lihat hasilnya. Anda bisa mencobanya menggunakan skrip yang lengkap yang bisa diambil disini, semoga skrip yang anda ambil bisa bermanfaat untuk pembelajaran anda.

Terimakasih
Selamat Belajar











0 Response to "CARA MEMBUAT MENU RIBBON DENGAN EASY UI"

Post a Comment