1. Mendefenisikan Menu dengan secara langsung
• Buat sebuah objek menu yang akan menampung menu yang kita buat.
Var menu = new Ext.menu.Menu({
)}
• Setelah itu kita dapat mengisikan properties dari objek menu yang kita buat.
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
)}
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
Items : [ // isi dari menu yang di buat
{
text : ‘New’
},
{
text : ‘Open’
},
{
text : ‘Sub Menu’, // mengisikan sub menu secara langsung
menu : {
items :[
{
text: ‘Menu2’
},
{
text: ‘Menu3’
}
]}
}
]
});
2. Mengisikan menu dari variable yang sudah kita defenisikan terlebih dahulu
Sama seperti contoh di atas tapi kita harus mendefenisikan dulu variabelnya.
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg(’Date Selected’, ‘You chose {0}.’, date.format(’M j, Y’));
}
});
Lalu kita tambahkan ke var menu
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
Items : [ // isi dari menu yang di buat
{
text : ‘New’
},
{
text : ‘Open’
},
{
text : ‘Sub Menu’, // mengisikan sub menu secara langsung
menu : {
items :[
{
text: ‘Menu2’
},
{
text: ‘Menu3’
}
]}
},
{
text: ‘Kalender’,
menu : dateMenu
}
]
});
3. sampai pada langkah ke dua kita sudah mendefenisikan sebuah menu untuk selanjutnya kita harus meletakkan menu di dalam toolbar dengan merender nya ke salah satu div yang sudah kita sediakan di halaman html
var tb = new Ext.Toolbar(); // membuat toolbar
tb.render(’toolbar’); // me render toolbar ke div yang namanya toolbar
tb.add({
text:’Button w/ Menu’,
iconCls: ‘bmenu’, // <– icon
menu: menu // memanggil var menu
}
Read More
Posting data dengan mootools
April 8th, 2008by admin
1. Pengenalan mootools
Mootools merupakan sebuah frameworks javascript yang di gunakan untuk mempermudah seorang web developer untuk mengembangkan berbagai macam aplikasi web yang membutuhkan interaksi dengan user. Antara lain mootools sering di gunakan untuk mengirimkan data lewat ajax. Dalam pembahasan kali ini kita akan membahas tentang ajax nya saja :D
2. Struktur file yang di gunakan
Pada tutorial kali ini kita akan membutuhkan file file sebagai berikut :
· Form.html -> di gunakan sebagai tampilan dari form yang akan dip roses dengan ajax.
· Form.js -> menjadi controller / yang memproses perintah untuk mengirim data lewat ajax.
· Form.css -> mengatur tampilan dari halaman form yang di buat penting banget coz element yang di akses dengan ajax menggunakan id dari css yang di buat.
· Mootools.js -> frameworks mootools yang dapat di download di sini http://mootools.net/download
3. File Form.html
File ini berisi tampilan ke user yang merupakan tampilan web, berisi sebuah form dengan dua buah field yang nantinya akan di isi dengan data masukan dari user, dalam hal ini data yang di masukkan adalah data email dan password.
Beri nama file ini dengan nama index.html
Sign in
Do you have an account? Sign in!
4. File form.css
File css ini di gunakan untuk mengatur tampilan dari halaman html.
#form_box {
float: left;
width: 290px;
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
font-size: 11px;
font-weight: bold;
padding: 0.5em;
margin-top: 10px;
margin-bottom: 2px;
}
#form_box div {
height: 25px;
padding: 0.2em 0.5em;
}
#form_box div.hr {
border-bottom: 2px solid #e2e2e1;
height: 0px;
margin-top: 0pt;
margin-bottom: 7px;
}
#form_box p {
float: left;
margin: 4px 0pt;
width: 120px;
}
#log {
float: left;
padding: 0.5em;
margin-left: 10px;
width: 290px;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
margin-top: 10px;
}
.log_res {
overflow: auto;
}
.log_res.ajax-loading {
padding: 20px 0;
background: url(img/spinner.gif) no-repeat center;
}
5. File form.js
File ini di gunakan untuk mengatur event yang terjadi di halaman index.html
window.addEvent(’domready’, function() {
$(’myForm’).addEvent(’submit’, function(e) { //mengambil elemen dom ber id myform dan memberikan event ke element tersebut
new Event(e).stop();
var log = $(’log_res’).empty().addClass(’ajax-loading’); //jika di submit tambahkan class css ajax-loading ke log_res
this.send({
update: log,//jika sudah selesai hilangkan class ajax-loading dari log_res
onComplete: function() {
log.removeClass(’ajax-loading’);
}
});
});
});
6 File ceklogin.php
File ini yang nantinya di gunakan untuk mengecek masukan yang di berikan dan pada file yang di berikan di bawah ini Cuma mencetak data yang di post dari index.html.
print “
”.print_r($_POST, true).””;
?>
link download script na :D
Script Login
Script + dokumentasi na
Read More
slide effect’s with mootools
February 12th, 2008by admin
“MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”
actually i fallin love with mootools in first sight :)
fist time i visit the official web http://mootools.net/ .. i think this is great i love it ..
so this is my firs application … its rather simple and easy …
before we start the appllication we need to download the frameworks from http://mootools.net/download
we can write a simpe slide menu with three files
* html files
* javascript files
* css files
this is the html files
/xhtml1-transitional.dtd">
this is the javascript files
window.addEvent('domready',function(){
var mySlide = new Fx.Slide(’slidemenu’,{transition:Fx.Transitions.Sine.easeIn, duration:100});
mySlide.hide();
$ES(’.menu’).addEvent(’click’, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
this is the css file
/* CSS Document by ubie v1.0 */
.menu{
width:200px;
height:20px;
background:#336699;
font-family:tahoma;
font-size:12;
}
.container{
width:200px;
}
.slidemenu{
background:#3366CC;
font-family:tahoma;
font-size:10px;}
Tidak ada komentar:
Posting Komentar