JavaScript кітапханалар: Jquery & Ext JS
- nurzhol
- JavaScript / 27 желтоқсан 2013, 00:37
- 2954
Хэй! XD
Өткен постта, кітапханалар тізімі жазылған болатын. Солардың арасынан, Jquery және Ext JS кітапханаларына өте кішкентай шолу жасаймыз.
Ескерту: пост 13 жастан асқан балаларға арналған. (Қалжың!)
Егер жава скриптпен алғаш жұмыс жасап отырған адам болса, бұнымен жұмыс жасамас бұрын, HTML қарапайым құрылысын түсініп алуды ұсынамын. Ол үшін, codeacademy.com сайтындағы HTML курсына бірнеше сағат уақыт бөліп, курстарды орындап шығасыз. Өте жеңіл, жылдам орындалатын пайдалы сайт.
1. Алдымен, JQUERY кітапханасын қолданып көрейік. Ол үшін, ресми сайтынан джикуериді жүктеп алыңыз. Кейін,
тегтерінің ортасына скриптке сілтеме тағайындайсыз. Әдетте, мына сияқты шамамен:
2. Кейін,
Ол, jquery.malsup.com/block/#demos сайты. Ішінен Auto-Unblock деп аталатын мысалды қолданғым келеді.
Оның коды былай ұсынылып тұр:
3. Осы код іске асуы үшін, өзінің мотор скриптін және іске қосасыз: jquery.malsup.com/block/#download
blockUI is available for download right here: jquery.blockUI.js деп тұрған жолы.
Оны қалай HTML-ге қою жолын көрсетемін. Кодты қарағанда, мұқият болыңыз. Себебі, коды біржола ұсына саламын. :)
Жоғарыдағы HTML кодты түгел көшіріп алып, блокнотқа салып, ашып, формаларды толтырмай құр кнопканы баса салсаңыз, JQUERY скрипт орындалып, қате хабарламасы шығады. Джикуериді қолданудың осы жолын түсініп алсаңыз, қалғандарын қолдануды оп оңай қолданып кетесіз.
Айтпақшы, Ext JS кітапханасы туралы сөз қозғалған еді ғой. Сілтемеде ақылы түрде ұсынған. Ол туралы толығырақ мысалды мына сілтемеден қараңыз: сілтеме
Өткен постта, кітапханалар тізімі жазылған болатын. Солардың арасынан, Jquery және Ext JS кітапханаларына өте кішкентай шолу жасаймыз.
Ескерту: пост 13 жастан асқан балаларға арналған. (Қалжың!)
Егер жава скриптпен алғаш жұмыс жасап отырған адам болса, бұнымен жұмыс жасамас бұрын, HTML қарапайым құрылысын түсініп алуды ұсынамын. Ол үшін, codeacademy.com сайтындағы HTML курсына бірнеше сағат уақыт бөліп, курстарды орындап шығасыз. Өте жеңіл, жылдам орындалатын пайдалы сайт.
1. Алдымен, JQUERY кітапханасын қолданып көрейік. Ол үшін, ресми сайтынан джикуериді жүктеп алыңыз. Кейін,
<head>...<head>
тегтерінің ортасына скриптке сілтеме тағайындайсыз. Әдетте, мына сияқты шамамен:
<script language="Javascript" type="text/javascript" src="js/jquery-x.x.x.min.js"></script>
2. Кейін,
jquery examplesсияқты сөз жаза салсаңыз, гугл сізге өте көп вариант ұсынады. Солардың арасынан, болашақта таңдап қана отыра берерсіз. Қазір солардың бірінен мысал алайық.
Ол, jquery.malsup.com/block/#demos сайты. Ішінен Auto-Unblock деп аталатын мысалды қолданғым келеді.
Оның коды былай ұсынылып тұр:
$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});
3. Осы код іске асуы үшін, өзінің мотор скриптін және іске қосасыз: jquery.malsup.com/block/#download
blockUI is available for download right here: jquery.blockUI.js деп тұрған жолы.
Оны қалай HTML-ге қою жолын көрсетемін. Кодты қарағанда, мұқият болыңыз. Себебі, коды біржола ұсына саламын. :)
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//KK" <!-- HTML KAZAK TILINDE -->
<HTML>
<HEAD>
<TITLE>JQUERY misal paraq</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=utf-8"> <!-- Paraq utf-8 kodirovka qoldaidy-->
<script language="Javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <!-- Mina jerde men JQUERY kitapkhanasin serverge koshirmei, birden code.jquery.com saitynan shakira saldim. -->
<script type="text/javascript">
function Validatecontact(theForm)
{
if (theForm.Editbox1.value == "")
{
$.blockUI({
message: '
Atindi jaz!!!
',
speed: '2500',
timeout: 2000
});
theForm.Editbox1.focus();
return false;
}
if (theForm.Editbox2.value == "")
{
$.blockUI({
message: '
Telefon jaz!!!
',
speed: '2500',
timeout: 2000
});
theForm.Editbox1.focus();
return false;
}
}
</script>
</HEAD>
<BODY>
<form name="contact" method="post" action="<?php echo basename(__FILE__); ?>" enctype="multipart/form-data" accept-charset="UTF-8" target="_parent" id="Form1" onsubmit="return Validatecontact(this)">
<input type="text" id="Editbox1" style="position:absolute;left:38px;top:18px;width:243px;height:36px;line-height:36px;z-index:0;" name="name" value="" title="Atindi jaz!">
<input type="image" src="https://www.band-tees.com/images/click-here-button.png" id="Button1" name="" value="Send" style="position:absolute;left:40px;top:181px;width:249px;height:45px;z-index:1;">
<input type="text" id="Editbox2" style="position:absolute;left:38px;top:119px;width:243px;height:36px;line-height:36px;z-index:2;" name="email" value="" title="Telefon jaz!">
</form>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script> <!-- Jogarida usingan 3 punktte sipattalgan script -->
</BODY>
</HTML>
Жоғарыдағы HTML кодты түгел көшіріп алып, блокнотқа салып, ашып, формаларды толтырмай құр кнопканы баса салсаңыз, JQUERY скрипт орындалып, қате хабарламасы шығады. Джикуериді қолданудың осы жолын түсініп алсаңыз, қалғандарын қолдануды оп оңай қолданып кетесіз.
Айтпақшы, Ext JS кітапханасы туралы сөз қозғалған еді ғой. Сілтемеде ақылы түрде ұсынған. Ол туралы толығырақ мысалды мына сілтемеден қараңыз: сілтеме
-
+1
Орыс тіліне қарағанда, ағылшын тілі жеңіл сияқты.
Мен ағылшынша білмеймін. Бірақ, өстіп тырмысып гугл транслейтпен болсын көз майын тауысып оқып жүрген жай бар. XD
});
суреттің сілтемесі қайда тұр? соны түсінбедім?
Run
head tegter ortasina jogaridagi 2 script, bodyge 3-punkttegi 1 script ornalastirasiz.
fotohost.kz/images/2013/12/27/l6pDT.jpg
Мына кодтарды жоғарыдағы посттағы ХТМЛ-ге орналастырып көрсеңіз де болады.