Hari ini kita memiliki tutorial yang lumayan bagus tentang cara membuat drop shadow changer CSS3 menggunakan Ajax dan sedikit PHP / MySQL. Anda mungkin bertanya pada diri sendiri mengapa saya menggunakan PHP / MySQL dalam tutorial CSS3? dan jawabannya adalah sederhana, untuk menyimpan pengaturan dan mengambil lagi.
Demo
Animasi ini hanya dapat dilihat pada Google Chrome dan Safari 4+ (berdasarkan WebKit-nya).
Apa itu "WebKit"?
WebKit merupakan open source mengesankan mesin web browser. WebKit juga merupakan nama dari sistem versi Mac OS X kerangka mesin yang digunakan oleh Safari, Dashboard, Mail, dan banyak lainnya aplikasi OS X. WebKit HTML dan kode JavaScript dimulai sebagai cabang dari KHML dan KJS libraries dari KDE. Dan saat ini didukung oleh Google Chrome dan Safari4 +.
Berikut ini adalah gambaran tentang apa yang kita akan memiliki di akhir tutorial:
Mari kita mulai dari tampilan awal.
Style untuk Pesan Sukses!
#success{
background: #c8ffb4;
width:500px;
height:50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-weight:bold;
padding-left:50px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding-top:25px;
text-align:left;
}Tombol Save
Apa yang kami lakukan di sana adalah pertama, mengubah latar belakang lampu hijau kemudian, lebar dan tinggi berikutnya, jari-jari perbatasan dan ini hanya tersedia dalam CSS3, dan pada dasarnya apa yang dilakukannya, bahwa hal itu membuat sudut dibulatkan, jadi jika Anda akan menambah nilai jari-jari, Anda akan mendapatkan sudut lebih bulat. setelah itu, tidak ada yang terlalu mewah hanya hal-hal dasar seperti font dan padding.
#save{
background: url(../images/save.png) no-repeat;
height:60px;
width: 171px;
border:none;
cursor:pointer;
cursor:hand;
outline:none;
}Pertama, kita mengatur latar belakang, tinggi, lebar dan perbatasan itu, kita menetapkan kursor ke penunjuk untuk membiarkan perubahan mouse ketika mouse atas tombol, selanjutnya atur kursor kembali ke tangan untuk mengubah mouse ke ikon tangan. Setelah itu, ubah garis luar menjadi none, karena banyak browser menunjukkan garis besar pada tombol.
HTML5 Work
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drop Shadow Changer</title> <link rel="stylesheet" href="css/main.css"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> </head> <body> <br><br><br> <center> <div id="success"></div><br><br> <div id="image"></div><br><br> <table> <tr> <td>Posission: </td> <td><input type="Range" name="slider" id="slide" /></td> <td><div id="nums"> </div></td> </tr> <tr> <td>Blur: </td> <td><input type="Range" name="blure" id="blure" /></td> <td><div id="blures"> </div></td> </tr> </table> <br> <div id="load"> <table> <tr> <td><img src="images/load.gif"></td> <td>Saving...</td> </tr> </table> </div> <br><input type="button" id="save" name="save"> </center> </body> </html>
Inilah bagian yang lucu, Pertama saya memulai halaman HTML sebagai HTML5 halaman dengan menambahkan tag DOCTYPE! Html, kemudian di dalam bagian <head>, anda akan melihat dua tag script, salah satunya adalah untuk memanggil jQuery dan yang lainnya adalah memanggil file JavaScirpt utama yang akan kita buat. Dan Bedadunia (Pemilik blog, Red) memasukkan file <style> yang kami buat sebelumnya.
Sekarang perhatikan di dalam tag <body>, hal pertama yang akan anda lihat adalah pesan div sukses dan kita akan menyembunyikan ini menggunakan jQuery, Kemudian, ambil breakline dan anda akan melihat div gambar yang kita akan melakukan semua pekerjaan hanya pada memberikan gambaran sebagai id untuk menerapkan <style> dan juga kita memerlukan id pekerjaan jQuery. setelah itu, ambil breakline dan Anda akan melihat tabel normal, tetapi terlihat lebih dekat dan Anda akan menemukan keajaiban.
Pertama, kita akan tambahkan td kecil dengan satu kata dalam POSISI di bawahnya Anda akan menemukan input html biasa tetapi tipe yang berbeda kali ini dan itu disebut RANGE dan yang memberikan Anda controller slider dengan nilai numerik dari -0 sampai 100 sebagai default . Jadi kita akan memberikan berbagai masukan ini sebuah id sebagai SLIDE karena kita akan memerlukannya id dalam pekerjaan JavaScript. Sekarang buat td lain dan taruh div kecil di dalamnya dan berikan "nums" sebagai id sebenarnya saya tidak tahu mengapa saya menyebutnya seperti itu, tapi tidak apa-apa, dan di dalam div ini akan tetapi nilai numerik dari rentang posisi input , kemudian tutup TR pertama.
Selanjutnya, mulai TR lain dan membuat beberapa TDS dan di dalam pertama Anda akan melihat Blur karena drop shadow CSS3 sangat disesuaikan sehingga Anda dapat mengatur posisi, blur dan bahkan warna. Setelah itu, mbuat td lain dan di dalamnya kita akan membuat lagi "Range / Slider" masukkan dan berikan blure sebagai id dan Bedadunia (pemilik blog, red) tahu itu blur, bukan "blure". Kemudian, lakukan hal yang sama seperti terakhir kali dengan membuat div kecil dan berikan sebuah id dari blure. Tutup TR dan Tabel utuh dan mari kita lakukan sesuatu yang baru.
Sekarang buat div kecil dan berikan 'load' sebagai id di dalam div ini. Kita akan menambahkan loading gambar yang telah dibuat di http://www.ajaxload.info, dan kata "saving". dan kami akan menyembunyikan div menggunakan jQuery dan akan tampilkan ketika kita tekan save.
Sekarang tambahkan saja tombol input normal, tetapi berikan 'save' sebagai id untuk menerapkan <style> dan kita akan membutuhkan ini dalam JavaScript juga.
Sekarang setelah melakukan semua ini, anda selesai dengan layout utama. Sekarang Mari kita melakukan pekerjaan JavaScript.
Sekarang setelah melakukan semua ini, anda selesai dengan layout utama. Sekarang Mari kita melakukan pekerjaan JavaScript.
JavaScript Work
//----------------------------------------+
//Code by Ahmed Hussein For CssReflex.com |
//Follow on Tiwtter @Valodes |
//Check Blog @ http://www.zingyso.com/b |
//----------------------------------------+
$(document).ready(function(){
var pos = $("#slide").val();
var blu = $("#blure").val();
$('#load').hide();
$("div#nums").html(pos);
$("div#blures").html(blu);
$("#success").hide();
$("#image").css({'-webkit-box-shadow': pos+"px "+pos+"px "+blu+"px "+"#666"});
$("#slide").change(function(){
var num = $("#slide").val();
var blu = $("#blure").val();
$("div#nums").html(num);
$("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"});
});
$("#blure").change(function(){
var num = $("#slide").val();
var blu = $("#blure").val();
$("div#blures").html(blu);
$("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"});
});
$('#save').click(function(){
var num = $("#slide").val();
var blu = $("#blure").val();
$.ajax({
url: "action.php",
type: "POST",
data: {pos: $("#slide").val(), blu: blu = $("#blure").val()},
success: function(data){
$("#success").html(data);
$("#success").slideDown(400).delay(2000).slideUp(400);
}
});
});
$("#load").ajaxStart(function(){
$(this).show();
});
$("#load").ajaxSuccess(function(){
$(this).hide();
});
});Mari saya jelaskan apa yang kita lakukan di sini, pertama dari semua ini adalah tidak murni JavaScirpt jQuery. Sekarang untuk memulai kode jQuery Anda dapat melakukan hal ini di dalam "script" atau di dalam halaman Js normal. Dan ini yang saya lakukan di sini.
Pada awal kode jQuery Anda harus menempatkan kode berikut:
Pada awal kode jQuery Anda harus menempatkan kode berikut:
$(document).ready(function(){//Your code here });Ganti “//your code here” dengan code anda sekarang:
var pos = $("#slide").val();
var blu = $("#blure").val();
Di sini kita membuat dua variabel yang pertama "pos" = dengan nilai slide, "# slide" seperti document.getElementById tetapi kita ganti semua ini dengan hanya sedikit tag hash "#". Variabel kedua blu = ke val blure. hanya untuk tahu ". val ()" adalah mengembalikan nilai suatu elemen.
$("div#nums").html(pos);
$("div#blures").html(blu);
Sekarang baris pertama di sini kami mengubah apa yang ada di dalam isi nums div menjadi html menggunakan fungsi .html () yang menunjukkan elemen html normal tanpa mengubahnya ke teks. Tapi Anda bisa menampilkan isi sebagai teks dengan menggunakan fungsi .teks ()
$("#success").hide();
Sekarang kita hanya menyembunyikan pesan sukses menggunakan fungsi .hide()
$("#image").css({'-webkit-box-shadow': pos+"px "+pos+"px "+blu+"px "+"#666"});
Sekarang Bedadunia menerapkan styling CSS3 menggunakan fungsi css, Dan berikut adalah cara kerjanya:
.css ({"atributes": "value", "attributes2":"value", ...}); jadi hanya css yang biasa saja tapi dalam jQuery. Tapi apa yang sebenarnya Bedadunia lakukan adalah menerapkan drop shadow CSS3 ke gambar menggunakan pos standar dan nilai-nilai blu dan mereka 50, sehingga untuk melakukan itu saya menggunakan variabel di dalam fungsi dan saya dapat melakukan itu hanya seperti itu:
css normal akan menjadi '-WebKit-box-shadow':'50px', tapi kami ingin menggunakan nilai-nilai variabel' sehingga kita akan melakukannya dengan menambahkan tanda tambah antara kata-kata untuk memisahkan mereka, maksudnya untuk membuat pekerjaan ini, Anda harus menulis seperti itu:
css({'-webkit-box-shadow': variable+"normal text"+variable+"normal text"+variable+"normal text"})
Jadi, kita tempatkan teks biasa di dalam quote dan pisahkan antara kata-kata yang berbeda dan variabel dengan tanda plus.
Kode berikut akan dijalankan setelah Anda memindahkan posisi slider:
$("#slide").change(function(){
var num = $("#slide").val();
var blu = $("#blure").val();
$("div#nums").html(num);
$("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"});
});
Sekarang dengan menggunakan .change() kita katakan jika nilai elemen ini berubah, jadi jika nilai slide mengubah kode di dalam .change() akan dieksekusi. Di dalam .change() kita mendefinisikan ulang variabel lagi, lalu, mengganti isi div nums untuk membuatnya berubah ketika Anda pindahkan slider. Setelah itu kami menerapkan CSS3 drop shadow untuk gambar dengan posisi baru.
num+"px "+num+"px "+blu+"px "+"#666"
Num pertama+"px" dan yang kedua hanya reposisi bayangan dan blu+"px" masih sama dan menunjuk pada nilai blur dan akhirnya # 666 adalah warna bayangan.
Kode berikut akan dijalankan setelah Anda memindahkan blur slider:
$("#blure").change(function(){
var num = $("#slide").val();
var blu = $("#blure").val();
$("div#blures").html(blu);
$("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"});
});
Seperti yang anda lihat Bedadunia melakukan hal yang sama tetapi kali ini dengan slider blure dan div blures.
Kode berikut akan dijalankan setelah Anda menekan tombol simpan:
$('#save').click(function(){
var num = $("#slide").val();
var blu = $("#blure").val();
$.ajax({
url: "action.php",
type: "POST",
data: {pos: $("#slide").val(), blu: blu = $("#blure").val()},
success: function(data){
$("#success").html(data);
$("#success").slideDown(400).delay(2000).slideUp(400);
}
});
});
Pertama, fungsi .click() sangat sederhana, jika Anda klik pada elemen kode berikut ini akan dieksekusi. Di dalam .click() Kita mendefinisikan ulang variabel lagi, lalu, permintaan mulai ajax menggunakan $.Ajax({}) jadi izinkan saya menjelaskan hal ini:
menggunakan $.ajax() Anda akan dapat mengirim permintaan HTTP tanpa reload halaman, Anda dapat mengirim kedua POST atau GET permintaan untuk file jenis apa pun seperti PHP, ASP, dll.
Dan bekerja seperti ini:
url: "file action Anda",
ketik: "post atau get",
data: {name: variable or "text value", name2: variable or "text value", name3: variable or "text value"},
success: bisa fungsi atau peringatan atau apa pun yang Anda inginkan, ini akan ditampilkan dalam kasus permintaan tersebut 'succeeded'.
function(data){
$("#success").html(data);
$("#success").slideDown(400).delay(2000).slideUp(400);}
Fungsi ini menampilkan pesan sukses oleh slideDown kemudian delay 2 detik setelah slideUp itu.
$("#load").ajaxStart(function(){
$(this).show();
});
$("#load").ajaxSuccess(function(){
$(this).hide();
});
Sekarang kita akan menampilkan div load setelah kita mengirimkan permintaan lalu menyembunyikan lagi setelah permintaan dilakukan, menggunakan .$ajaxStart() Kita akan mengatakan ketika permintaan dikirim menunjukkan $(ini) sementara $(ini) berdiri untuk $("load"). Dan menggunakan .$ajaxSuccess(), kita akan mengatakan ketika permintaan adalah mengirim pesan sukses menyembunyikan $(ini) sementara $(ini) berdiri untuk $ ("load").
Dan itu dia ini adalah semua JavaScript-nya.
The PHP Work
<? //---------------------------------------- //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //---------------------------------------- //Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database //Set Variables $pos = $_POST['pos']; //Position Value $blu = $_POST['blu']; //Blur Value //Insert data into database $Query = "INSERT INTO shad_set (`position`,`blur`) VALUES('".$pos."', '".$blu."')"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database echo "The new settings are saved!"; ?>
Penjelasan
Pertama, semua yang dimulai dengan "//" adalah komentar, dan yang dimulai dengan "$" adalah variabel.
//Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database
mysql_connect adalah fungsi koneksi database dan itu terpisah menjadi 3 bagian dan kadang-kadang 4, ("Host Anda -" Biasanya localhost, "Database UserName", "Database Password", "Database Port")
mysql_select_db adalah fungsi database pemilih dan itu dipisahkan menjadi 2 bagian, ("Database" Nama, "Database Connection Link dan ini adalah variabel penghubung")
Sekarang sebelum melanjutkan menjelaskan seluruh kode biarkan saya menunjukkan Anda bagaimana cara untuk membuat Database MySQL.
MYSQL DATABASE
Buka halaman phpmyadmin anda, dan lakukan langkah - langkah berikut:
Klik save dan selesai, tapi mari saya jelaskan, untuk id AUTO_INCREMENT adalah untuk membiarakan meningkatkan dengan sendirinya tanpa harus memasukkan nilai untuk itu setiap waktu.
$pos = $_POST['pos']; //Position Value $blu = $_POST['blu']; //Blur Value inside
Di sini Anda dapat melihat dua variabel pertama $pos = untuk post pos dari permintaan ajax dan yang lainnya adalah $blu = untuk post blu dari permintaan ajax.
$Query = "INSERT INTO shad_set (`position`,`blur`) VALUES('".$pos."', '".$blu."')";
//The SQL Query
$Insert= mysql_query($Query) or die(mysql_error());
//Insert to database
echo "The new settings are saved!";
Di sini Anda dapat melihat dua variabel juga. yang pertama $Query = untuk query SQL dan di dalamnya kita berkata "Masukkan data di dalam tabel shade_set ke posisi `position` dan `blur` dan nilai-nilai aktual variabel $pos untuk posisi dan $blu untuk blur"
Kemudian gunakan funngsi mysql_query() kita jalankan $Query ... Next setelah semua pesan print atau echo dan ini adalah pesan sukses "The new settings are saved!" ...
tetapi untuk mengambil pengaturan disimpan dari database, Anda dapat melakukannya dengan cara ini:
<? //---------------------------------------- //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //---------------------------------------- //Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database //Insert data into database $Query = "SELECT * FROM shad_set WHERE id = '1'"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database $res = mysql_fetch_array($insert); $Pos = $res['pos']; $Blu = $res['blu']; mysql_close($connect); ?>
Ini hal yang sama tentang koneksi database, tetapi permintaan yang berubah sekarang dan kita mengatakan pilih semua data dari shad_set mana id-nya = 1 atau apa pun yang id yang Anda inginkan untuk mengambil.
Lalu $res = mysql_fetch_array($insert) yang mengubah data dari database ke array.
$res['pos'] = pos dari database dan sama untuk $res['blu'];
Sekarang kita sudah melakukan semua ... Jadi, sekarang Anda memiliki drop-down shadow changer dengan php / mysql saving option. Harap Anda menikmati tutorial.
Lalu $res = mysql_fetch_array($insert) yang mengubah data dari database ke array.
$res['pos'] = pos dari database dan sama untuk $res['blu'];
Sekarang kita sudah melakukan semua ... Jadi, sekarang Anda memiliki drop-down shadow changer dengan php / mysql saving option. Harap Anda menikmati tutorial.
Tutorial ini diambil dari 'CSSREVLEX' oleh Ahmad Hussein
4 komentar:
Wow, manteb banget dah, pasti dicoba (kalo bisa) salah
kenal
sob
Subhaanallas, ahli CSS nih
Wah keren banget nih... Tx ya sob!
saya yakin banyak yg berminat untuk mempelajari mengenai css, tp untuk saya ini seperti nya agak berat ( maklum waktu nya sudah berkurang untuk belajar)
Poskan Komentar