JavaScript кітапханалар: Jquery & Ext JS

Хэй! XD

Өткен постта, кітапханалар тізімі жазылған болатын. Солардың арасынан, 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
19 пікір
nurzhol
Мәселен, мына сайт HTML, CSS, сайттағы эффектпен қимылдайтын элементтері JavaScript (jquery) және аздаған пошта жіберуі php кодтан құралған: led1.danigroup.kz
pedagog
Рахмет, жол көрсеткендей болдың, енді осы скрипттердің атауы ағылшынша білмейтін адамға қиынға соғады екен, білетін адам атына қарап ақ қандай функция атқаратындығын біле алады.
nurzhol
Ақпараттық жүйелер болғандықтан, ағылшын тілінен қашып құтыла алмаймыз. Неғұрлым ертерек меңгерсек, соғұрлым жылдамырақ даму болайын деп тұр ғой.
Орыс тіліне қарағанда, ағылшын тілі жеңіл сияқты.
Мен ағылшынша білмеймін. Бірақ, өстіп тырмысып гугл транслейтпен болсын көз майын тауысып оқып жүрген жай бар. XD
pedagog
Йә солай екен, менде сол гугыл аудармашыға жармасамын күнде, мысалы мына мысалда
$(document).ready(function() {
$('#demo5').click(function() {
$.blockUI({
message: $('#displayBox'),
css: {
top: ($(window).height() — 400) /2 + 'px',
left: ($(window).width() — 400) /2 + 'px',
width: '400px'
}
});
setTimeout($.unblockUI, 2000);
});

});

суреттің сілтемесі қайда тұр? соны түсінбедім?
pedagog
мысалдың аты Image Box
nurzhol
Суреттің сілтемесі, посттағы 3-ші пункттегі скрипттің ішінде.
pedagog
Мысалдың нәтижесінде мына сурет шығады, сонда осы суретті қалай шақырып тұр дегенім ғой.
nurzhol
Тордан (#) кейінгі div ішіндегі суретті шақырып тұр.
nurzhol
Run degen knopkanin div'i #demo5 dep ataladi. Al suret, #displaybox div'tin ishinde tur. Yagni, #demo5 shertkende, #displaybox JQUERY effect arkili ashiladi.
nurzhol
HML code bilai:

Run



head tegter ortasina jogaridagi 2 script, bodyge 3-punkttegi 1 script ornalastirasiz.
nurzhol
ХТМЛ коды көрінбей қалыпты. Мына сілтемедегі суретте тұр:

fotohost.kz/images/2013/12/27/l6pDT.jpg
nurzhol
surette тегі артық. қалып кетіпті. Ал бір көріп жіберіңіз.

Мына кодтарды жоғарыдағы посттағы ХТМЛ-ге орналастырып көрсеңіз де болады.
onlasyn
Айдилерді, айнымалыларды қазақша, орысша атаулармен атайсың ба ылғи?
nurzhol
Ылғи емес. Қазіргі мысал типі түсінікті болуы үшін. Қалыпты жағдайда қысқартылған ағылшын сөздер ыңғайлы.
pedagog
Осы күйінде html ге қоссақ, сурет дәл солай ашыла бере ме?
nurzhol 
<div id="knopka"><button id="demo5">Run</button><div></div>

<div id="suret">
<img id="displayBox" src="gecko.jpg" width="400" height="400" style="display: none;">
</div>
nurzhol
Өте жақсы. Бағанадан бері code тегінің ортасына жазуым керек ед. XD
nurzhol
pedagog , мына код жұмыс істеп тұр. Жоғарыдағы посттағы кодттарға қоса салдым. :D

<!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;
   }
}

<!-- Image jq bastaladi -->
$(document).ready(function() { 
    $('#demo5').click(function() { 
        $.blockUI({ 
            message: $('#displayBox'), 
            css: { 
                top:  ($(window).height() - 400) /2 + 'px', 
                left: ($(window).width() - 400) /2 + 'px', 
                width: '400px' 
            } 
        }); 
 
        setTimeout($.unblockUI, 2000); 
    }); 
}); 

</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>

<div id="knopka"><button id="demo5">Run</button><div></div>

<div id="suret">
<img id="displayBox" src="http://jquery.malsup.com/block/gecko.jpg" width="400" height="400" style="display: none;">
</div>

<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script> <!-- Jogarida usingan 3 punktte sipattalgan script -->
  </BODY>
</HTML>
Тек тіркелген қолданушылар ғана пікір қалдыра алады.