Fancy Quotes Dengan jQuery, AJAX & CSS

Fancy Quotes Dengan jQuery, AJAX & CSS

Hari ini kita membuat sistem rating kutipan mewah yang akan menampilkan sejumlah kutipan terkenal dan akan memungkinkan pengunjung situs kami untuk menilai favorit mereka.

Kami menggunakan PHP dan MySQL di back-end dan UI jQuery dan jQuery di bagian depan.

Sebagai tambahan, kami menggunakan plugin jQuery dua - QTip untuk tips mewah dan Rating plugin Bintang untuk besar mencari bintang-berbasis peringkat untuk setiap tawaran.

Dalam proses ini kita juga menerapkan pengganti font yang dinamis dengan Cufon .

Jadi silakan, ambil arsip download dan lanjutkan dengan satu langkah.

Langkah 1 - XHTML

Seperti biasa, kita mulai dengan bagian dari XHTML tut tersebut. Sistem kutipan dibagi dalam dua - bagian kiri, yang merupakan semacam mode "penuh view" untuk kutipan, menampilkan pengganti font yang indah dengan Cufon, dan bagian kanan, yang menunjukkan tanda kutip dalam Kuliah atau "thumbnail "Modus.

Anda dapat melihat kode di bawah ini.

demo.php

<div id="main"> <div id="main"><div id="box">  <div id="box"> <-! Memegang tampilan penuh kutipan ->

<div id="topPart">  <div id="topPart"> <- Bagian atas pandangan -!>

<div id="quote-content">  <div id="quote-content"> <- Teks kutipan dan penulis -!><h1 class="quote"></h1> <h1 class="quote"> </ h1> 

</div> </ Div>

</div> </ Div>

<div id="botPart"></div> <div id="botPart"> </ div><div class="clear"></div> <div class="clear"> </ div></div> </ Div>

<div id="quotes-list">  <div id="quotes-list"> <-! Daftar kutipan di sebelah kanan, digulir bergerak mouse -><div id="quotes-hide"> <div id="quotes-hide"><div id="quotes-slide"> <div id="quotes-slide">

<?php <? Php// Outputting the list / / Keluaran daftarecho $str; echo $ str;?> ?>

</div> </ Div></div> </ Div></div> </ Div>

<div class="clear"></div> <div class="clear"> </ div></div> </ Div>

Markup ini cukup sederhana. Kami mendefinisikan struktur utama dari sistem rating.

Pada baris 21-24 kita menggemakan tanda kutip, yang terkandung dalam variabel PHP $ str. Kami akan kembali ke ini dalam beberapa saat.

Sekarang mari kita lihat lebih dekat pada styling.

Sebuah Sistem Fancy Penawaran

Langkah 2 - CSS

Karena kode ini terlalu lama untuk mengambil satu, saya sudah dibagi menjadi dua bagian. Saya juga dihapus beberapa gaya yang tidak langsung digunakan oleh sistem kutipan. Anda dapat melihat orang-orang dalam file demo.

demo.css - Bagian 1

#box{ # Box {

/* This holds the full view of the quote */ / * Ini memegang pandangan penuh dari kutipan * /

background:url(img/mid_part.png) repeat-y; background: url (img / mid_part.png) repeat-y;

width:574px; width: 574px;

margin:10px auto; margin: 10px auto;

float:left; float: left;} }

#topPart{ # TopPart {

/* Positioned inside the #box div, holds the top part of the view */ / * Diposisikan di dalam kotak div #, memegang bagian atas tampilan * /

background:url(img/top_part.png) no-repeat; background: url (img / top_part.png) no-repeat;

min-height:195px; min-height: 195px;

/* Providing height for browsers that do not support min-height (eg IE6) */ / * Menyediakan tinggi untuk browser yang tidak mendukung min-height (misalnya IE6) * /

height:195px; height: 195px;

float:left; float: left;

margin-top:-10px; margin-top: 10px-;

width:100%; width: 100%;

padding-top:20px; padding-top: 20px;} }

div > #topPart{ div> # topPart {

/* Setting the height to auto for non-IE6 browsers */ / * Mengatur ketinggian ke auto untuk non-browser IE6 * /

height:auto; height: auto;} }

#botPart{ # BotPart {

/* Bottom part of the full view */ / * Bawah bagian dari tampilan penuh * /

background:url(img/bot_part.png) no-repeat; background: url (img / bot_part.png) no-repeat;



width:100%; width: 100%;

margin-bottom:-10px; margin-bottom: 10px-;} }

h1.quote{ h1.quote {

/* This is the text of the quote in the full view. / * Ini adalah teks kutipan dalam tampilan penuh. Replaced by Cufon */ Digantikan oleh Cufon * /

font-size:45px; font-size: 45px;

color:#616161; color: # 616.161;

text-align:right; text-align: right;

padding:15px 40px 0 40px; padding: 15px 40px 40px 0;

line-height:60px; line-height: 60px;

} }

#author{ # Author {

/* The span that holds the name of the author */ / * Rentang yang memegang nama penulis * /

color:#9C9C9C; color: # 9C9C9C;

float:right; float: right;


font-style:italic; font-style: italic;

font-weight:bold; font-weight: bold;

letter-spacing:1px; letter-spacing: 1px;

margin-right:40px; margin-right: 40px;

text-transform:uppercase; text-transform: uppercase;} }

Meskipun saya baru-baru ini berhenti mendukung IE6 dalam karya saya, saya memutuskan untuk membuat pengecualian kali ini, terutama karena satu-satunya hal yang diperlukan untuk itu untuk bekerja dalam versi yang dua baris kode.

Seperti Anda mungkin telah mendengar, IE6 tidak mendukung properti min-height. Ini juga salah menafsirkan tinggi sebagai menentukan ketinggian minimum.

Ini adalah mengapa saya memberikan baik dalam aturan # topPart dan kemudian mengatur tinggi untuk auto untuk browser yang mendukung> CSS pemilih. Seperti IE6 tidak mengerti operator ini, dibiarkan dengan ketinggian berperilaku seperti min-tinggi dan mengabaikan yang asli.

demo.css - Part 2

#quotes-list{ # Kutipan-list {

/* The list on the right */ / * Daftar di kanan * /

background:#444444 none repeat scroll 0 0; background: # 444444 ulangi tidak ada gulir 0 0;

border:1px solid #333333; border: 1px solid # 333333;


margin-left:50px; margin-left: 50px;

padding-top:10px; padding-top: 10px;



overflow:hidden; overflow: hidden;} }

#quotes-hide{ # Kutipan-hide {

/* Positioned inside #quotes-list, but a 15px smaller */ / * Diposisikan dalam daftar # kutipan-, tetapi lebih kecil 15px * /


overflow:hidden; overflow: hidden;} }

.star-rating{ . Bintang-rating {

margin-top:2px; margin-top: 2px;


.thumb{ . Jempol {

/* Each quote that is positioned in the list on the right of the page */ / * Setiap kutipan yang diposisikan dalam daftar di sebelah kanan halaman * /

background:url(img/top_part.png) no-repeat 50% 70%; background: url (img / top_part.png) no-ulangi 50% 70%;

color:#777777; color: # 777777;


font-weight:bold; font-weight: bold;


margin:0 10px 15px; margin: 0 10px 15px;

overflow:hidden; overflow: hidden;

padding:15px; padding: 15px;


cursor:pointer; kursor: pointer;

text-align:left; text-align: kiri;} }

.thumb:hover{ Thumb:. Hover {

background:white; background: white;} }

#quotes-list,.thumb,p.tut{ # Kutipan-daftar,. Jempol, p.tut {

/* Using CSS3 rounded corners */ / * Menggunakan CSS3 sudut bulat * /

-moz-border-radius:6px; -Moz-border-radius: 6px;

-webkit-border-radius:6px; -Webkit-border-radius: 6px;

border-radius:6px; border-radius: 6px;} }

.points{ . Poin {

/* The points next to the quote title */ / * Poin samping judul kutipan * /

color:#999999; color: # 999999;


font-weight:normal; font-weight: normal;} }

Bagian kedua dari gaya kode daftar geser di sisi kanan. Semua tanda kutip diposisikan satu demi satu dan mereka meluap wadah induk mereka. Kemudian, pengaturan meluap ke menyembunyikan tersembunyi mereka yang tidak cocok dan kami siap untuk menggunakan jQuery untuk kode yang mewah interaktivitas mousemove. Kami akan datang kembali ke ini di bagian jQuery.

Sekarang kita dapat melanjutkan dengan langkah berikutnya.

Kutipan penilai menjelaskan

Langkah 3 - PHP

PHP menghasilkan daftar kutipan dengan menjalankan query SQL terhadap database, dan memilih semua tanda kutip. Data ini juga diteruskan ke ujung depan JavaScript dengan bantuan fillData () fungsi JS.

demo.php

// Error reporting / / Kesalahan pelaporanerror_reporting(E_ALL^E_NOTICE); error_reporting (E_ALL ^ E_NOTICE);

// Including file for the DB connection: / / Termasuk file untuk koneksi DB:

define("INCLUDE_CHECK",1); define ("INCLUDE_CHECK", 1);require 'connect.php'; require 'connect.php';require 'functions.php'; membutuhkan 'functions.php';

// Converting the visitor's IP to a long int: / / Konversi IP pengunjung ke int panjang:$ip = ip2long($_SERVER['REMOTE_ADDR']); $ Ip = ip2long ($ _SERVER ['REMOTE_ADDR']);

$today = date("Ymd"); $ Hari = date ("Ymd");

// Selecting the quotes and LEFT JOIN-ing them to the votes: / / Memilih tanda kutip dan KIRI BERGABUNG-ing mereka ke menilainya:

$result = mysql_query(" $ Hasil = mysql_query ("SELECT q.*, IF(v.id,1,0) AS voted SELECT q. *, IF (v.id, 1,0) AS sebagaiFROM quotes AS q DARI kutipan SEBAGAI qLEFT JOIN quotes_votes AS v KIRI BERGABUNG quotes_votes AS v

ON q.id = v.qid ON q.id = v.qid

AND v.ip =".$ip." DAN v.ip = "$ ip.."

AND v.date_submit = '".$today."' DAN v.date_submit = '"$ hari ini.."'"); ");

$i=1; $ I = 1;

$str=''; $ Str ='';$script=''; $ Script ='';

while($row=mysql_fetch_assoc($result)) while ($ row = mysql_fetch_assoc ($ hasil)){ {

// Looping through all the quotes and generating the list on the right of the page: / / Looping melalui semua tanda kutip dan menghasilkan daftar di sebelah kanan halaman:

$str.= '<div class="thumb" id="q-'.$i.'">'.substr($row['txt'],0,20). $ Str = '<div class="thumb" id="q-'.$i.'">'.. Substr ($ row ['txt'], 0,20).

'...<div class="star-rating" id="rating-'.$i.'">'; ' ... <div class="star-rating" id="rating-'.$i.'">';

$row['rating'] = round($row['rating']); $ Row ['rating'] = round ($ row ['rating']);

for($z=0;$z<5;$z++) for ($ z = 0; $ z <5; $ z + +)

{ {

$str.='<input type="radio" name="rate-'.$i.'" value="'.($z+1).'" '.($z+1==$row['rating']?'checked="checked"':'').' $ Str = '<input type = "radio" name = "Tingkat-' i $.. '" Value =. "'. ($ Z +1). '"'. ($ Z +1 == $ row [ ? 'rating'] 'diperiksa = "diperiksa"':.'') ' disabled="disabled" />'; dinonaktifkan = "cacat" /> ';


$str.='</div></div>'; $ Str = '</ div> </ div>'.;

// Each quote

calls the fillData JS function / / Quote Setiap memanggil fungsi JS fillData

$script.="fillData(".formatJSON($row).");".PHP_EOL; $ Script = "fillData (" formatJSON ($ row).. ");.". PHP_EOL;

$i++; $ I + +;} }

Variabel $ str kemudian outputted ke halaman, seperti yang Anda lihat di langkah pertama.

PHP juga menangani pemungutan suara untuk tanda kutip. Anda dapat melihat kode dari vote.php bawah.

// Error reporting / / Kesalahan pelaporanerror_reporting(E_ALL^E_NOTICE); error_reporting (E_ALL ^ E_NOTICE);

define("INCLUDE_CHECK",1); define ("INCLUDE_CHECK", 1);require "connect.php"; membutuhkan "connect.php";

if(!$_POST['qid'] || !$_POST['vote']) die('0'); if ($ _POST ['qid'] | | $ _POST ['suara']!!) mati ('0 ');

/* Converting the visitor's IP into a long int: */ / * Konversi IP pengunjung ke int panjang: * /$ip = ip2long($_SERVER['REMOTE_ADDR']); $ Ip = ip2long ($ _SERVER ['REMOTE_ADDR']);

/* Converting the parameters to int will prevent any malpractices */ / * Mengubah parameter ke int akan mencegah malpraktek * /$qid = (int)$_POST['qid']; $ Qid = (int) $ _POST ['qid'];

$v = (int)$_POST['vote']; $ V = (int) $ _POST ['suara'];

/* Inserting the vote in the votes DB */ / * Memasukkan suara dalam menilainya DB * /mysql_query(' INSERT INTO quotes_votes (qid,ip,vote,date_submit) mysql_query ('INSERT INTO quotes_votes (qid, ip, suara, date_submit)

VALUES ('.$qid.','.$ip.','.$v.',CURDATE())'); VALUES ('$ qid.. ",,, CURDATE ()' $ ip.. '' $ Ay. ')');

/* There is an unique index set up that prevents duplicate votes */ / * Ada indeks yang unik set up yang mencegah orang menilainya duplikat * /if(mysql_affected_rows($link)==1) if (mysql_affected_rows ($ link) == 1){ {

mysql_query("UPDATE quotes SET votes=votes+1, vsum=vsum+".$v.", rating=vsum/votes WHERE id=".$qid); mysql_query ("UPDATE SET kutipan menilainya = menilainya +1, vsum = vsum +" $ v ", Peringkat = vsum / menilainya WHERE id =" $ qid..);

echo'1'; echo'1 ';} }else echo '0'; lain echo '0 ';

Script output 1 pada keberhasilan dan 0 pada kegagalan. Hal ini kemudian digunakan oleh jQuery untuk memutuskan apakah suara berhasil. Hal ini membawa kita ke langkah berikutnya.

Mengganti font dengan Cufon

Langkah 4 - jQuery

jQuery menangani semua interaksi pengguna dengan sistem rating kutipan. Ini menunjukkan kutipan dalam tampilan penuh, isu penggantian font dengan Cufon dan menangani proses voting.

Sebelum dapat menggunakan perpustakaan jQuery, kita harus menyertakan beberapa file di halaman.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> </ script><script type="text/javascript" src="star-rating/ui.stars.min.js"></script> <script type="text/javascript" src="star-rating/ui.stars.min.js"> </ script><script type="text/javascript" src="q-tip/jquery.qtip-1.0.0-rc3.min.js"></script> <script type="text/javascript" src="q-tip/jquery.qtip-1.0.0-rc3.min.js"> </ script><script src="cufon/cufon-

yui.js" type="text/javascript"></script> <script src="cufon/cufon-yui.js" type="text/javascript"> </ script><script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script> <script src="cufon/ChunkFive_400.font.js" type="text/javascript"> </ script>

<script type="text/javascript"> <script type="text/javascript">Cufon.replace('h1.quote'); Cufon.replace ('h1.quote');</script> </ Script>

<script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="script.js"> </ script>

<script type="text/javascript"> <script type="text/javascript"> <- Keluaran JS dihasilkan pada sisi PHP--!><?php echo $script ?> <? Php echo $ script?></script> </ Script>

Dua baris pertama termasuk perpustakaan jQuery dan jQuery UI (penambahan jQuery untuk komponen antarmuka) di halaman. Setelah ini kita termasuk plugin Star Rating, QTip, dan teks pengganti Cufon bersama dengan ChunkFive font yang dikonversi .

Sekarang mari kita lihat script.js, yang memegang semua JavaScript kami.

Karena panjang kode, saya membaginya menjadi tiga bagian.

script.js - Bagian 1

$(document).ready(function(){ $ (Dokumen) siap (function (). {/* Executed on DOM load */ / * Dilaksanakan pada beban DOM * /

http://translate.googleusercontent.com/translate_c?depth=1&hl=id&langpair=en%7Cid&rurl=translate.google.co.id&u=http://cufon.shoqolate.com/generate/&usg=ALkJrhiNAuus_GGFhjhqWyd2-WI1cVW3nQ

http://translate.googleusercontent.com/translate_c?depth=1&hl=id&langpair=en%7Cid&rurl=translate.google.co.id&u=http://www.theleagueofmoveabletype.com/fonts/4-chunk&usg=ALkJrhgZlPHaHIc9XadJ1IytBfMCJjWxxw

$(".star-rating").stars(); $ ("Bintang-rating.") Bintang ().;/* Converts all the radio groups into star ratings */ / * Mengkonversi semua kelompok radio ke peringkat bintang * /

$("#quotes-hide").mousemove(function(e){ $ ("# Kutipan-hide"). Mousemove (function (e) {

/* The scrollable quote container */ / * Wadah kutipan digulir * /

if(!this.hideDiv) if (! this.hideDiv)


/* These variables are initialized only the first time the function is run: */ / * Variabel ini diinisialisasi hanya pertama kali fungsi dijalankan: * /

this.hideDiv = $(this); this.hideDiv = $ (ini);

this.scrollDiv = $('#quotes-slide'); this.scrollDiv = $ ('# kutipan-slide');

this.pos = this.hideDiv.offset(); this.pos = this.hideDiv.offset ();

this.pos.top+=20; this.pos.top + = 20;

/* Adding a 20px offset, so that the scrolling begins 20px from the top */ / * Menambahkan 20px offset, sehingga bergulir dimulai 20px dari atas * /

this.slideHeight = this.scrollDiv.height(); this.slideHeight = this.scrollDiv.height ();

this.height = this.hideDiv.height(); this.height = this.hideDiv.height ();

this.height-=20; this.height-= 20;

/* Adding a bottom offset */ / * Menambahkan bawah diimbangi * /

this.totScroll = this.slideHeight-this.height; this.totScroll = this.slideHeight-this.height;


this.scrollDiv.css({ this.scrollDiv.css ({

/* Remember that this.scrollDiv is a jQuery object, as initilised above */ / * Ingat bahwa this.scrollDiv adalah objek jQuery, seperti yang initilised atas * /

marginTop:'-'+this.totScroll*(Math.max(e.pageY-this.pos.top,0)/this.height)+'px' marginTop: '-' + this.totScroll * (Math.max (e.pageY-this.pos.top, 0) / this.height) + 'px'

/* Assigning a negative top margin according to the position of the mouse cursor, passed / * Menentukan margin atas negatif sesuai dengan posisi kursor mouse, lulus

with e.pageY; It is relative to the page, so we substract the position of the scroll container */ dengan e.pageY, Hal ini relatif terhadap halaman, jadi kita kurangi posisi wadah gulir * /

}); });}); });

$('.thumb').click(function(e){ $ ('Jempol.'). Klik (function (e) {

/* Executed once a quote from the list on the right is clicked */ / * Executed sekali kutipan dari daftar di sebelah kanan diklik * /

var obj = quotes[parseInt(e.target.id.replace('q-',''))-1]; var obj = quotes [parseInt (e.target.id.replace ('q-','')) -1];

/* The e.target.id of the quote corresponds to its position in the quotes array */ / * The e.target.id dari kutipan sesuai dengan posisinya dalam array quotes * /

$('#quote-content').fadeOut('fast',function(){ $ ('# Kutipan-konten'). FadeOut ('cepat', function () {

/* This is a callback function, run once the quote container on the left has faded out */ / * Ini adalah fungsi callback, dijalankan sekali wadah kutipan di sebelah kiri telah memudar keluar * /

if(!obj) return false; if (obj!) return false;

/* Replacing the contents of the quote text and author */ / * Mengganti isi teks kutipan dan penulis * /

$(this).find('h1').html(obj.txt); .. $ (Ini) menemukan ('h1') html (obj.txt);

$(this).find('span').html(obj.author); .. $ (Ini) menemukan ('rentang') html (obj.author);

/* Changing the background color: */ / * Mengubah warna latar belakang: * /

if(obj.bgc) $('body').stop().animate({backgroundColor:obj.bgc},'slow'); if (obj.bgc) $ ('body') stop () bernyawa ({backgroundColor: obj.bgc}, 'lambat');..

/* Generating the radio boxes for the tool-tip star rating */ / * Menghasilkan kotak radio untuk rating bintang tool-tip * /

var tmpstr=''; var tmpstr ='';

for(var z=0;z<5;z++) for (var z = 0; z <5; z + +)


tmpstr+='<input type="radio" name="voteQ" value="'+(z+1)+'"

'; tmpstr + = '<input type = "radio" name = "voteQ" value = "' + (z +1) + '"';

if(z+1==obj.rating) tmpstr+='checked=checked '; if (z +1 == obj.rating) tmpstr + = '= diperiksa diperiksa';

if(parseInt(obj.voted)) tmpstr+='disabled="disabled" '; if (parseInt (obj.voted)) tmpstr + = 'dinonaktifkan = "cacat"';

tmpstr+='/>'; tmpstr + = '/>';


tmpstr='<div id="voteRating">'+tmpstr+'</div>'; tmpstr = '<div id="voteRating">' + tmpstr + '</ div>';

/* Updating the content of the tool-tip and converting it to a star rating */ / * Memperbarui isi tool tip-dan mengubahnya menjadi rating bintang * /

$('#box').qtip("api").updateContent(tmpstr); . $ ('# Box') QTip ("api") updateContent (tmpstr).;

$('#voteRating').stars({ $ ('# VoteRating'). Stars ({

cancelShow: false, cancelShow: false,

oneVoteOnly: true, oneVoteOnly: benar,

callback:function(ui, type, value){vote(obj,value);} callback: function (ui, tipe, nilai) {suara (obj, nilai);}

}); });

/* Regenerating the cufon text replacement for the new quote text on the left */ / * Regenerasi teks Cufon pengganti untuk teks kutipan baru di kiri * /

Cufon.refresh(); Cufon.refresh ();

/* Show the new quote with a fade-in effect */ / * Tampilkan kutipan baru dengan efek fade-in * /

$(this).fadeIn('fast'); $ (Ini) fadeIn ('cepat').;

}); });}); });

Pertama kita mengikat acara mousemove dengan DIV dengan id kutipan-hide. Di dalam fungsi callback, wadah menggulir dengan bantuan dari margin atas negatif. Dengan cara ini kita menghemat banyak real estate pada halaman dan memberikan beberapa interaktivitas yang bagus.

Selanjutnya kita membuat event handler klik pada jempol, yang menunjukkan kutipan yang sesuai dalam pandangan.

script.js - Part 2

 /* Creating and configuring the tool-tip with the help / * Membuat dan mengkonfigurasi alat-ujung dengan bantuan of the qtip plugin: */ dari plugin QTip: * /

$('#box').qtip({ $ ('# Box') QTip (. {

content: { isi: {

text:'This is an active list element', teks: "Ini adalah elemen daftar aktif ',

title: { text: 'Vote for this quote'}, Judul: {text: 'Voting untuk kutipan ini'},

prerender:true prerender: true

}, },

show: 'mouseover', Acara: 'Gunaka mouse',

hide: { sembunyikan: {

delay:1000, delay: 1000,

fixed:true, fixed: true,

when:'mouseout' ketika: 'mouseout'


position: { Posisi: {

corner: { corner: {

target: 'bottomMiddle', Target: "bottomMiddle ',

tooltip: 'topMiddle' tooltip: 'topMiddle'


adjust:{ menyesuaikan: {

y:20 y: 20



style: { gaya: {

border: { border: {

width: 2, Lebar: 2,

radius: 6 radius: 6


name:'light', Nama: 'cahaya',

tip: 'topMiddle' tip: 'topMiddle'


}); });

/* After the page has loaded, click the first quote on the right */ / * Setelah halaman telah dimuat, klik quote pertama pada kanan * /

setTimeout(function(){$('#q-1').click();},250); setTimeout (function () {$ ('# q-1') klik ();.}, 250);}); });

Pada bagian kedua dari kode, kita mengkonfigurasi plugin QTip. Ini menyediakan pilihan yang tak terhitung jumlahnya dan penyesuaian, sehingga akan menjadi ide yang baik untuk memiliki dokumentasi siap jika Anda berencana untuk memodifikasi kode. Anda dapat berkonsultasi dengan plugin homepage untuk info lebih lanjut.

Juga kami mengeluarkan klik pada kutipan pertama, sehingga tampilan tidak kosong pada beban halaman.

script.js - Part 3

/* The global array holding all the data about the quotes. / * Array global yang memegang semua data tentang tanda kutip.Filled in on page load. Diisi pada beban halaman. */ * /var quotes = new Array(); kutipan var = new Array ();

http://translate.googleusercontent.com/translate_c?depth=1&hl=id&langpair=en%7Cid&rurl=translate.google.co.id&u=http://craigsworks.com/projects/qtip/&usg=ALkJrhhuXMEkbFU4pIXm1yVwUJOw0vJiIA

function fillData(obj) Fungsi fillData (obj){ {

quotes.push(obj); quotes.push (obj);} }

function vote(ob,value) Fungsi suara (ob, value){ {

/* Sending the votes to vote.php */ / * Mengirim suara untuk vote.php * /

$.post('vote.php',{qid:ob.id,vote:value},function(data){ . $ Post ('vote.php', {qid: ob.id, suara: value}, function (data) {

if(data=="1") if (Data == "1")


/* If the vote was saved successfully, update the quote data.. / * Jika suara itu berhasil disimpan, update data kutipan .. */ * /

ob.voted=1; ob.voted = 1;

ob.votes=ob.votes+1; ob.votes = ob.votes +1;

ob.vsum=ob.vsum+parseInt(value); ob.vsum = ob.vsum + parseInt (nilai);

ob.rating = Math.round(ob.vsum/ob.votes); ob.rating Math.round = (ob.vsum / ob.votes);

/* ..and update the star rating */ / * .. Dan memperbarui rating bintang * /

$('#rating-'+ob.id).stars("select", ob.rating); . $ ('# Peringkat-' + ob.id) bintang ("pilih", ob.rating);

quotes[ob.id-1]=ob; kutipan [ob.id-1] = ob;


}); });} }

Fungsi pertama - fillData () mengambil objek JavaScript sebagai parameter, dan menambahkan ke array tanda kutip untuk digunakan nanti.

Seperti yang Anda ingat, pada langkah PHP kami mengubah array $ row, dikembalikan oleh mysql_fetch_array, ke objek JSON dengan formatJSON kebiasaan kami () fungsi dan tertutup dalam panggilan fungsi fillData.

Hal ini kemudian outputted sebagai kode JS yang dijalankan sebelum document.ready (), dan sebagai hasilnya kita memiliki semua data tentang kutipan yang tersedia untuk jQuery dalam array tanda kutip.

Fungsi kedua menangani permintaan AJAX untuk vote.php dan update antarmuka jika perlu.

Slider tikus

Langkah 5 - MySQL

Jika Anda berencana untuk menjalankan demo ini sendiri, Anda akan perlu untuk membuat tabel dengan menjalankan kode SQL di tables.sql pada server Anda (Anda dapat melakukannya melalui antarmuka phpMyAdmin).

Juga Anda akan perlu mengisi kredensial Anda MySQL di connect.php.

Dengan ini manajer mewah kami kutipan selesai!

Kesimpulan

Hari ini kami menciptakan sebuah sistem kutipan mewah mengelola dan belajar satu atau dua hal tentang tooltips, penggantian font, AJAX, PHP, dan banyak lagi.

Anda bebas untuk men-download dan menggunakan demo di situs Anda sendiri, memodifikasi cara apapun yang Anda lihat cocok.

Juga jika Anda menyukai tutorial ini pastikan untuk berlangganan kami RSS feed atau mengikuti kami di twitter .

Fancy Quotes Dengan jQuery, AJAX & CSS

Documents