"Још" дугме стил Твиттер

У овом чланку ћу објаснити како да поново ефекат "Још" дугме на Твиттер користе јКуери библиотеку.

Дугме које желимо да поново, за неупућене, омогућава вам да прошири листу порука приказана по подразумеваној вредности, без икакве потребе да освежите страну (што је могуће захваљујући технологији Ајакс све више користе у срединама Веб 2.0).

Почињемо стварањем тестирање базе података се састоји од једне табеле:

 



 Креирање порука Табле (







 мсг_ид ИНТ АУТО_ИНЦРЕМЕНТ ПРИМАРИ КЕИ,

 





 Текст поруке







 );

 

Као што можете видети табелу коју сте управо гради се састоји од само два поља:

• мсг_ид која ће идентификовати поруку;
• и поруку која садржи текст;

Намерно сам смањени "кост" у базу података на пример, али је очигледно да можете обогатити га на основу стварних потреба развоја.

За мој погодности сам створио пхп фајл (који ћу користити у укључивање) у којој сам се само веза са базом података и ја сам то назвао "дбцонфиг.пхп"

 



 <ПХП?







 $ Кон = мискл_цоннецт ("сервер", "усернаме" "пассворд") ор дие (мискл_еррор ());







 мискл_селецт_дб ("НАМЕ_ДБ", $ цонн) ор дие (мискл_еррор ());







 >?

 

Као што је поменуто фајл "дбцонфиг.пхп" ће бити укључени у датотекама које стварамо, тако да не препише исту шифру више пута.

Да бисте извршили ефекат морате да креирате две датотеке:

• Први се користи за приказ првог "Н" поруке;
• и други који ће се Ајакс захтева (спроводи се уз јКуери) за приказ "следећу поруку".

Овде је код првог пхп фајл (који може сачувати као "есемпио.пхп"):

 



 <хтмл>







 <хеад>







 Више <титле> дугме Твиттер стилу </ титле>







 <линк рел="стилесхеет" типе="тект/цсс" хреф="стиле.цсс" />







 <сцрипт типе="тект/јавасцрипт" срц="јкуери.јс"> </ сцрипт>







 <сцрипт типе="тект/јавасцрипт">







 $ (Фунцтион () {



  



 $ ('Више.'). Кликните на (фунцтион () {



    



 вар елемента = $ (тхис);



    



 вар МСГ = елемент.аттр ('ид');



    



 $ ('# Моребуттон') ХТМЛ ('<имг срц="лоадинг.гиф" />').;



    



 $. Ајакс ({



      



 тип: 'пост',



      



 УРЛ: 'море_ајак.пхп',



      



 Датум: 'ластмсг = "+ мсг,



      



 кеш: лажне,



      



 успех: функција (ХТМЛ) {



        



 $ ('# Моребуттон') Уклони ().;



        



 $ ('# Море_упдатес') Додај (ХТМЛ).;



      



 }



    



 });



    



 ретурн фалсе;



  



 });







 });







 </ Сцрипт>







 </ Хеад>







 <боди>







 <див алигн="центер" стиле="видтх:500пк;">







 <ПХП?







 укључују ('дбцонфиг.пхп');







 $ Скл_цхецк = мискл_куери ("СЕЛЕЦТ * ФРОМ би више мсг_ид ДЕСЦ ЛИМИТ 2");







 вхиле ($ ров = мискл_фетцх_арраи ($ скл_цхецк)) {



  



 $ Мсг_ид = $ ров ['мсг_ид'];



  



 $ Мсг = $ ред ['порука'];







 >?







 <Див ид = "<пхп ецхо $ мсг_ид;?>" Цласс = "бокМсг">







 <спан стиле="паддинг:5пк;"> <пхп $ мсг;?> </ див>







 </ Див>







 <ПХП?







 }







 >?







 <див ид="море_упдатес"> </ див>







 <див ид="моребуттон"> <ид = "<пхп мсг_ид;?>" цласс = "више" хреф = "#"> Више </ а> </ див>







 </ Див>







 </ Боди>







 </ ХТМЛ>

 

Као што можете видети након прегледа прва 2 порука (поређано по "мсг_ид" у опадајућем редоследу), постоји празан див са ИД "море_упдате" (неће бити "пакују" следећу поруку), и див који представља следећи Линк "Још" на које се повезују - метода јКуери - акција захтев поруке.

Заглавље (<хеад> ...</ див>) документа, након позива јКуери библиотеку, описали смо ЈаваСцрипт функција у вези са линка "Још" (ова функција се зове са " клик догађај ).
Са овом функцијом узет из "ИД" из линка идентификатор ("мсг_ид") приказује последње поруке, ово идентификатор се шаље на други пхп фајл као параметар после Ајак захтева , у међувремену, замените садржај див контејнер Линк "Још" са прелепом анимирани гиф са ефектом "Лоадинг" , само да убије време.

Ако Ајак захтев је био успешан (успех примене имовине) смо уклонили све див "моребуттон" и убаците ХТМЛ одговор (са друге поруке) на контејнер див "море_упдате" користећи додајте .

• <<
• 1
• 2
• >>