Yvision.kzYvision.kz
kk
Разное
Разное
399 773 постов41 подписчиков
Всяко-разно
0
04:45, 11 ноября 2010

прелести jQuery

Blog post imageДавненько я ничего не писал. А все потому что времени совершенно ни на что не хватает, сейчас делаю новый проект. И так уж получилось что проект я решил писать с обширным использованием AJAX, и ничего удобнее чем фреймворк jquery я не нашел. На то есть 2 причины, 1 - широчайшее распространение, 2 - обилие плагинов и библиотек.

 

 

В проекте были нужны Drag&Drop окошки, писать самому было лень, да и время всегда против меня, поэтому решил сначала поискать готовые библиотеки. И, таки, нашел http://interface.eyecon.ro/ Офигительный набор интерфейсов. Весь кайф в том что можно качать только то, что тебе нужно. Поэтому я с удовольствием скачал iutils и idrag.

Для того что бы элемент можно было таскать достаточно в стилях прописать

,подключить оба скрипта + jquery... правда потом ещё стало понятно, что нужны так же jquery.dimensions и jquery.tooltip.min

<script type="text/javascript" src="scripts/jquery-1.4.3.js"></script>
<script type="text/javascript" src="scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="scripts/jquery.tooltip.min.js"></script>

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

А дальше - просто по селектору находим объект и применяем к нему Draggable

$("#window").Draggable(
{
zIndex:     10000, //положение слоя
ghosting:    false, //делать ли на время перетаскивания полупрозрачную копию
handle:        ".winheader", //селектор элемента, за который будет таскаться #window
containment:"parent", // границы перетаскивания; по умолчанию их нет.
opacity:     0.5 // прозрачность на момент перетаскивания
}
);

Красота -, я вам скажу.

Вообще в jQuery меня особенно прет с селекторов, Ave тем кто допер до такой реализации обращения к DOM.

Как же было приятно обнаружить, что для того что бы, к примеру, сделать границы у всех картинок в div'e с id=mydiv достаточно написать

$("#mydiv > img").css("border","1px solid black");

Отправка же данных POST'ом осуществляется простейшей функцией

$.post('target.php',"var=value"
,callback);

Если кто-не понит, то напомню, что для того, чтобы отправлять данные в "голом" JS нужно было накатать что-то вроде вот этого:

 

var req = new ActiveXObject("Microsoft.XMLHTTP"); (для IE)
var req = new XMLHttpRequest(); (Для всего остального)

 

 

 

var req;

function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}

 

function checkName(input, response)
{
if (response != ''){
// Response mode
message = document.getElementById('nameCheckFailed');
if (response == '1'){
message.className = 'error';
}else{
message.className = 'hidden';
}
}else{
// Input mode
url = 'http://localhost/xml/checkUserName.php?q=' \\
+ input;
loadXMLDoc(url);
}
}

 

В общем вы понимаете о чем я...

А в остальном, jQuery дает огромные возможности для тех кто хотел писать интересные интерфейсы и интерактивные ajax-приложения для веб. Он очень полезен для тех, кто не хотел заморачиваться в JS  с получением объектов из DOM.

0
241
8