Slyweb

jQuery примеры

Для тех, кто интересуется jQuery будет интересно читать эту статью. Потому что jquery наиболее удобен при написании веб приложений, быстро изучаем, не говоря о количистве плагинов и виджитов содержащихся на официальном сайте, которые может приспособить к своему сайту даже неопытный пользователь интерента и не говоря об эффектах jquery. В этой статье мы остановимся не на простых функциях jquery, а на наиболее труднопонимаемых функциях jquery, которые будут разъясняться на примерах взаимодействия со структурой DOM.

Вышла новая статья - jQuery - самое нужное! C неё начнётся новый цикл статей о самом нужном в jQuery. Советую почитать - jQuery - самое нужное!. jQuery меню, данные с twitter.com и многое другое Вы найдёте в новой статье!

Начнём с самого простого. В некоторых случаях разработчику необходимо использовать элементы форм наиболее продвинутыми способами, например, когда необходимо создать возможность пользователю отмечать не один элемент checkbox, а несколько или сразу все. Для этого замечательно подходит jquery, в качестве примера можно взять следующий вариант jquery кода.

jQuery
CSS
HTML
Весь код

"jQuery"

//отмечаем все chekbox одним кликом
$("#all").click(function(){
$("input:checkbox").click();
});

"HTML"

<button id="all">Нажмите</button><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>

"CSS"

  
p { margin: 8px; font-size:12px; }

Как видно из этого несложного примера, с помощью одного события click() мы отмечаем сразу все элементы chekbox.

Однако данный вариант лишь упрощенная копия того что мы хотели добится, ведь возможен вариант когда пользователь понажимает по элементам, и тогда наша фунция для тех элементов checkbox, которые были отмечены становится бессмыслена, потому что для них так же будет запущено событие click() и следовательно они не будут отмечены, а наоборот будут выключены. Как же избежать этого? С помощью простого кода, опять же на jquery.

jQuery
CSS
HTML
Весь код

"jQuery"

$("#all").click(function(){
var len = $("input:checked").length; // Подсчитываем количество отмеченных элементов
if(len >= 0 && len !== 5 )           // Если количество больше либо равно 0 но меньше 
{                                    // то очищаем отмеченные элементы и 
$("input:checked").click();          // отмечаем заново все элементы  
$("input:checkbox").click();
}
if(len == 5) // Если отмеченных элемнтов 5, то удаляем отмеченные
$("input:checkbox").click();
});

"HTML"

<button id="all">Нажмите</button><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>
<input type="checkbox" id="calend"><br/>

"CSS"

  
p { margin: 8px; font-size:12px; }

На этом пример jquery с checkboxami, я думаю, можно завершить и перейти к следующему не менее интересному примеру проверки русских букв в поле формы предназначенном для ввода пароля.

В общем, сделаем так же как у Yandex, когда при вводе в поле запрещенных символов выводится сообщение об ошибке, только лишь с меньшими издержками за счёт jquery.

jQuery
CSS
HTML
Весь код

"jQuery"

$("#all").keypress(function(){
var isempty =  $("#all").val();
var myregsxp = /[^а-я$]/g; // В общем это регулярное выражение
var answear = isempty.match(myregsxp); // Ищем совпадения
if(isempty.length > 0 && answear==null){ // Проверям совпадения и количество знаков в password
$("#all").next().hide("fast").empty(); // Эфaект jquery
$("#all").after("<p style='color:red;'>Недопустимые смволы, переключите раскладку на английский!</p>");
$("#all").next().fadeOut(); // Эфaект jquery
}
else if(isempty.length > 0 && answear !== null)
{
$("#all").next().hide("fast").empty(); // Эфaект jquery
$("#all").after("<p>Правильно!</p>"); 
$("#all").next().fadeOut();// Эфaект jquery
}
});

"HTML"

<input type="password" id="all">

"CSS"

  
p { margin: 8px; font-size:12px; }

Я думаю ни чего сложного, но полезно для поля формы password.

Теперь после небольших примеров jquery для начинающих, перейдём к более сложным вещам. Как и для большинства веб программистов ajax для меня одно из замечательных средств для построения эффективной структуры сайта и обеспечения пользовательского взаимодействия.

И как всегда jquery помогает мне в этом. Функции jquery связанные с ajax, на мой взгляд наиболее хорошо продуманы со стороны разработчиков. К примеру есть простейшие примеры ajax функций, осущетсвляющих запрсы к серверу, например load(), есть и сложные функции, например $.ajax(). Простые пригодятся для повседневной работы и небольших эффектов на сайте, сложные подойдут для осущетсвления нескольких запросов, с различным количестовм настроек. Для того чтобы быть более понятным посмотрите простейший пример с импользованием фунции load().

jQuery
CSS
HTML
Весь код

"jQuery"

$("#load1").click(function(){
$("#response").load("primer/2.php", { 'choices[]': ["Jon", "Susan"] },function(text){alert(text);});
});
$("#load2").click(function(){
$("#response").load("primer/2.php #hello2");
});

"HTML"

<button id="load1">Нажмите</button>
<button id="load2">Нажмите</button>
<div id="response">Jquery примеры<div>

"CSS"

  
p {font-color: #000;}

"PHP"

<?php 
header('Content-Type: text/html; charset=utf-8;');
$fp = fopen("text.txt","w");
$fw = fwrite($fp,$_POST['choices']['1']);
fclose($fp);
$arr = array ('name'=>name);
echo json_encode($arr);
echo '<p id="hello2">hello2</p>';
?>

Здесь первая функция load() отправляет запрос к странице 2.php c массивом. И получает обратно ответ от сервера (function(text){alert(text);}).

Вторая функция делает то же самое но с разницей лишь в том, что фильтрует ответ по id элемента, в результате чего в качетстве ответа мы получим содержание элемента id которого hello2. Сохранить ответ от сервера в переменной можно следующим способом, например, var post = $.post("load.php").responseText;

Но как уже говорилось выше данной функции достаточно лишь для простых случаев, в тех случаях когда Вам требуется выполнять функции, в зависимости от того на каком этапе находистя запрос, необходимо использвать функцию $.ajax() вместе с функцией $.ajaxSetup(). Первая выполняет запрос, вторая устанавливает настройки, параметры запроса(ов) глобально.

Пример выполнения функции $ajax на основе двух запросов и использовании глобальных настроек jQuery.ajaxSetup().

jQuery
CSS
HTML
Весь код

"jQuery"

   jQuery.ajaxSetup({
   url: "2.php", // адрес страинце на сервере
   global: false // 
   }); // тип запроса

$("#load1").click(function(){
 $.ajax({ // первый запрос
   type: "POST",
   dataType: "json", // тип данных	
   
   data: "name=John&location=Boston",
   success: function(msg){
   $("#load").replaceWith('<div id="load">' + msg.name + 'Первый запрос jquery</div>');
   $("#load").fadeOut("slow");
   }
});
$.ajax({ // второй запрос
  async: false,
  success: function(){
  $("#load2").replaceWith('<div id="load2">Второй запрос jquery</div>');
  $("#load2").fadeOut("slow");
}
});
});

"HTML"

<body>
<button id="load1">Нажмите</button>
<div id="load">Jquery примеры</div>
<div id="load2">Jquery примеры</div>
</body>

"CSS"

  
p { margin: 8px; font-size:12px; }

Отойдём от ajax и перейдём к менее сложным задачам. Зачем нужна функция clone() и как её использовать? Не всегда понятно зачем нужна фунцкия clone(), но в результате её выполянения Вы можете получить коипю элемента или объекта. Примеры: в первом пример с помощью фунции clone() мы сохраняем элемент в перменную clone, а во втором примере мы сохраняем и копируем элемент без использования переменной.

jQuery
CSS
HTML
Весь код

"jQuery"

$("#load1").click(function(){
var clone = $("#load2").clone().add();
$("body").append(clone);
});

"HTML"

<button id="load1">Нажмите</button>
<div id="load2">Применяем функцию clone()</div>

"CSS"

  
p {font-color: #000;}

jQuery
CSS
HTML
Весь код

"jQuery"

$("#load1").click(function(){
$("#load2").clone().appendTo("body");
});

"HTML"

<button id="load1">Функция clone()</button>
<div id="load2">Применяем функцию clone()</div>

"CSS"

  
p {font-color: #000;}

Надеюся теперь ни у кого вопросов не возникнет при использовании функции clone().

После того как Ваш мозг отдохнул от этого легкого примера перейдём к сложному. А именно к постраничному выводу на jquery и php и mysql. Сразу оговорюсь, что этот пример не полностью аналог обчного потсраничного вывода. Он лишь основа для разработки более серьзных вещей. Но в качестве основы и примера вполне пригодится.

В этом примере находит место применение всего того о чём мы говорили ранее о фунцкии ajax(), здесь их с избытком.

jQuery
CSS
HTML
Весь код

"jQuery"

$.ajax({ // первый ajax запрос, определяющий количество данных
      url: "primer/colvo.php",
      global: false,
      beforeSend: function(){
      $("#load").fadeIn();
      },
      complete: function(){
      $("#load").fadeOut();
      },
      dataType: "json",
      success: function (data){
$("#col").attr("title",""+data.name+""); // Сохраняем общее количество страинц для будущих запросов
max = Math.ceil(data.name/2); // определяем количество выводимых данных. Будьте осторожны.
// Используем элементы как объект для хранения данных
// Скрываем кнопку назад поскольку мы на 1 странице

var page = backpage = $("#buttonnext").attr("title");$("#buttonback").css({"display":"none"}); 
$("#buttonback").attr({title:backpage}); // Вот мы сохранили в атрибут элемента нужные нам данные
$("#buttonnext").attr({title:page});
for( i=1; i <= max; i++ )
{
$("#buttonnext")
.before("<span style='float:left;cursor:pointer;' id=" + i + " class='numeric'>" + i + "</span>");
}
$("#1").css("color","red"); // Подсвечиваем первую страницу

$.ajax({ // второй ajax запрос, возвращающий новости
      url: "primer/novosti.php",
      global: false,
      type: "POST",
      beforeSend: function(){ // Эффекты для имитации загрузки
      $("#novosti").fadeOut();
      },
      complete: function(){ // Эффекты для имитации загрузки
      $("#novosti").fadeIn();
      },
      data: ({col: page}), // Отправляем номер страинцы, с которого будут запрошены данные из mysql
      dataType: "html",
      success: function (data){ // Ответ от сервера с данными
$("#novosti").html('');
$("#novosti").html(data).fadeIn("slow"); // Помощаем в страинцу данные из mysql
      }
      });
   }
});
$('.numeric').live("click",function(){ // Используем это для перехода по номерам страинц
var numeric = $(this).attr("id");
$(".numeric").css("color","#000"); // Подсветка страницы
$("#"+numeric).css("color","red"); // Подсветка страницы
var data = $("#col").attr("title");
max = Math.ceil(data/2);
if(data <= 2){return false}
var page = numeric;
var backpage = numeric-1; // 
$("#buttonback").css({"display":"block"}); 
$("#buttonback").attr({title:backpage}); 
if(page == max) 
// Если последняя страница, то скрываем кнопку
{$("#buttonnext").css({"display":"none"});} else {$("#buttonnext").css({"display":"block"});} 
// Если последняя страница,// то скрываем кнопку
if(page == 1) {$("#buttonback").css({"display":"none"});
$("#buttonnext").css({"display":"block"});} // Если первая страница, то убираем кнопку "назад"
$("#buttonnext").attr({title:page}); // Сохраняем значение в элементе для последующих запросов
$.ajax({
      url: "primer/novosti.php",
      global: false,
      type: "POST",
      beforeSend: function(){
      $("#novosti").fadeOut(); // Эффекты jquery
      },
      complete: function(){
      $("#novosti").fadeIn(); // Эффекты jquery
      },
      data: ({col: numeric}), // Передаём страницу для запроса к mysql
      dataType: "html", 
      success: function (data){
$("#novosti").html('');
$("#novosti").html(data).fadeIn("slow"); // В случае успеха выводим новую новость
      }
   });
});
$('#buttonnext').click(function(){ // Используем это для перехода к новым новостям
var data = $("#col").attr("title");
max = Math.ceil(data/2);
if(data <= 2){return false}
var page = $("#buttonnext").attr("title");
if(page < max) {++page;} // Увеличиваем количество на 1 чтобы следующие данные были новыми
$(".numeric").css("color","#000");  // Подсветка страницы
$("#"+page).css("color","red"); // Подсветка страницы
var backpage = $("#buttonnext").attr("title"); // 
$("#buttonback").css({"display":"block"}); 
$("#buttonback").attr({title:backpage}); 
if(page == max) {$("#buttonnext").css({"display":"none"});}
 // Если последняя страница, то скрываем кнопку
$("#buttonnext").attr({title:page}); // Сохраняем значение в элементе для последующих запросов
$.ajax({
      url: "primer/novosti.php",
      global: false,
      type: "POST",
      beforeSend: function(){
      $("#novosti").fadeOut(); // Эффекты jquery
      },
      complete: function(){
      $("#novosti").fadeIn(); // Эффекты jquery
      },
      data: ({col: page}), // Передаём страницу для запроса к mysql
      dataType: "html", 
      success: function (data){
$("#novosti").html('');
$("#novosti").html(data).fadeIn("slow"); // В случае успеха выводим новую новость
       }
   });
});
$('#buttonback').click(function(){ // Используем это для перехода к предыдущим новостям
var data = $("#col").attr("title");
max = Math.ceil(data/2);
if(data <= 2){return false} // Если данных меньше чем нам нужно, то прекращаем вывод
// Так как мы возвращаемся назад, то нужно
// для перехода вперед уменьшить значение на один
var page = $("#buttonnext").attr("title")-1; 
$(".numeric").css("color","#000");  // Используем это для перехода по номерам страинц
$("#"+page).css("color","red"); // Используем это для перехода по номерам страинц
if(page == 1) {$("#buttonback").css({"display":"none"}); // Если первая страница, то 
$("#buttonnext").css({"display":"block"});} // убираем кнопку "назад"
if(page > 1) {$("#buttonback").css({"display":"block"}); //Если страница больше чем 
$("#buttonnext").css({"display":"block"});} // первая то выводим кнопку назад

$("#buttonnext").attr({title:page});
$.ajax({ // Последний запрос за новостями
      url: "primer/novosti.php",
      global: false,
      type: "POST",
      beforeSend: function(){ // Эффекты jquery
      $("#novosti").fadeOut();
      },
      complete: function(){
      $("#novosti").fadeIn(); // Эффекты jquery
      },
      data: ({col: page}),
      dataType: "html",
      success: function (data){
$("#novosti").html('');
$("#novosti").html(data).fadeIn("slow"); // Выводим новости
      }
      });
  });

"HTML"

<span id="col" title="1" />
<table><tr>
<td><div title="1" class = "back" id = "buttonback" ><img class="png" src="../../img/6.png"></div>
<td><div title="1" class = "next" id = "buttonnext" style="float:left;"><img class="png" src="../../img/5.png"></div>
<td><div id = "info"></div>
<td><div id="load"><img src="../../img/load.gif"></div>
</table>
<div id="cont">
<div title="2" id="novosti"></div>
</div>

"CSS"

  
p {font-color: #000;}

Хотелось бы сказать что это всё но нет, мы забыли про php и mysql. Это вторая составляющая нашего потсраничного вывода на jquery и она не менее интересна.

Первый скрипт, определяющий количество новостей выглядит следующим образом.

"PHP"

<?php
$offset = 15 * 21600;
header('Expires:'.gmdate('D,d M Y H:i:s', time() + $offset).'GMT');
header('Cache-control:public, max-age=3600');
header('Contetnt-type: text/xml; charset=UTF-8;');
$connection = mysql_connect ("localhost", "USER", "PASS") 
 or die ("Ошибка соединения с сервером"); 
$db = mysql_select_db ("BD", $connection) 
 or die ("Ошибка при выборе базы данных"); 
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");
// соединение с базой было установлено

$sql = "SELECT * FROM `novosti1`";
// выполняем sql запрос и проверяем на корректность, если все правильно

// выполняем программу дальше

$result = mysql_query ($sql); 
$query=mysql_num_rows($result);
if($query!==0){
echo json_encode(array("name"=>"$query"));
}
else
{
echo '0';
}
mysql_close($connection);
?>

Второй скрипт, ответственный за вывод новостей следующий.

"PHP"

<?php
$offset = 15 * 21600;
$page = $_POST['col'];
$perpage = 2; // Количество отображаемых данных из БД

$start_pos = ($page - 1) * $perpage; // Начальная позиция, для запроса к БД

$time=date( 'My', time() );
$connection = mysql_connect ("localhost", "USER", "PASS") 
 or die ("Ошибка соединения с сервером"); 
$db = mysql_select_db ("BD", $connection) 
 or die ("Ошибка при выборе базы данных"); 
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");
// соединение с базой было установлено

$sql = "SELECT * FROM `novosti1` LIMIT $start_pos ,$perpage";
// выполняем sql запрос и проверяем на корректность, если все правильно

// выполняем программу дальше

$result = mysql_query ($sql); 
$query=mysql_num_rows($result);
header('Expires:'.gmdate('D,d M Y H:i:s', time() + $offset).'GMT');
header('Cache-control:public, max-age=3600');
header('Contetnt-type: text/xml; charset=UTF-8;');
echo "<table class=cont align=center width=100%><tr>";
while ($res=mysql_fetch_array($result))
{
echo "<td width=70px class=cont valign=top ><img border=0 align=left src="primer/$res[si]">";
echo "<td width=40% class=cont align=justify border=0>".$res['name'].'<br>';
echo $res['opisanie'];
echo "<td>";
}
echo "</table>";
mysql_close($connection);
?>

Теперь можно сказать что это всё. Правда я забыл вам передать таблицу mysql. Вот она.

"SQL"

CREATE TABLE IF NOT EXISTS `novosti` (
  `id` mediumint(9) NOT NULL AUTO_INCREMENT,
  `name` text,
  `opisanie` text,
  `avtor` text,
  `novost` text NOT NULL,
  `count` int(255) NOT NULL,
  `time` varchar(255) NOT NULL,
  `arhiv` varchar(255) NOT NULL,
  `si` varchar(255) NOT NULL,
  `bi` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  FULLTEXT KEY `statia` (`novost`,`name`,`avtor`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=0;

Вообще Вы можете её скачать уже заполненной (zip Архив).

Теперь можно сказать всё с постраничным выводом на jquery и php + mysql.

На некоторых сайтах авторы рекомендуют использовать целые плагины для получения данных полей формы, хотя в этом нет надобности, так jquery обладает собственными функциями позволяющими получить данные полей формы. Например функция serialize() вполне сгодится для этих целей. В следующем примере мы спомощью функции serialize() получим данные элементов формы и сохраним их в качестве строки.

jQuery
CSS
HTML
Весь код

"jQuery"

function showValues() 
{
  var str = $("form").serialize();
  return str; 	
}
$("form:eq(0)").submit(function(){
  var val = showValues();
  $(".serialize").text(val);
  $.post("post.php",{name:""+val+""},function(data){
  $(".result").empty();
  $(".result").append(data);});
  return false
  });

"HTML"

<form method="post" action="#">
<input type="text" name="text"><br/>
<input type="checkbox" name="check"><br/>
<textarea name="area">textarea</textarea><br/>
<input type="submit" value="отправляем на сервер"><br/>
<form>
<span class="serialize"></span>
<span class="result"></span>

"CSS"

  
p { margin: 8px; font-size:12px; }
  .selected { color:blue; }
  .highlight { background:yellow; }

Такой несложынй отрезок jquery кода позволит нам сэкономить время и силы для собирания данных из полей формы, самым простым способом. Однако следует учитывать, что таким образом вы не закачаете файла на сервер. Для этого же опять не следует использовать целые плагины, так или иначе загрузка файлов происходит через создания скрытого окна iframe, использовать которое можно без труда и самому, к тому же всегда следует писать код самостоятельно, а не использовать чужой.

Не маловажным сегодня становиться бесконфликтное использование нескольких js библиотек, например mootools и jquery, поэтому напоследок рассмотрим ошибкоустойчивый код на jquery с библиотекой mootools.

jQuery
CSS
HTML
Весь код

"jQuery"

// jquery
;(function( $ ){
$.fn.myfunction = function(){
if($(".result").css("display")=="block")
{
$(".result").hide("slow");
}
if($(".result").css("display")=="none")
{
$(".result").html("");
$(".result").append("Моя функция на jquery").show("slow");
}
};
$(function() {
$("button[name=button]").click(function(){
$(".result").myfunction();
$('#myElement').width('300px');
});
});
})( jQuery );

"HTML"

<button name="button">Нет, jQuery! </button>
<button id="moot">Нет, mootools! </button>
<span class="result" style="display:none;"></span>
<div id="myElement" style="width:100px;height:100px; border:5px solid red;"></div>

"CSS"

  
p {font-color: #000;}

Следующий отрезок кода - ;(function( $ ){ ваш код jquery....})( jQuery ); позволят избавить jquery от конфликта с другми js библиотеками. Единственное, что для Вас здесь может быть непонятно, так это функция $.fn.extend(), данная функция позволяет Вам добавлять собственные методы juqery, подробно об этой функции можно прочитать в руководстве http://slyweb.ru/jquerydoc/jQuery-fn-extend-object.php.

Избегать конфликтов js библиотек можно и с использованием ещё одной фнуции jquery - jQuery.noConflict() - http://slyweb.ru/jquerydoc/jQuery-noConflict.php.

Пример применнеия jQuery.noConflict();

jQuery
CSS
HTML
Весь код

"jQuery"

// jquery
jQuery.noConflict();
jQuery(document).ready(function(){
	jQuery.fn.myfunction = function(){
if(jQuery(".result").css("display")=="block")
{
jQuery(".result").hide("slow");
}
if(jQuery(".result").css("display")=="none")
{
jQuery(".result").html("");
jQuery(".result").append("Моя функция на jquery").show("slow");
}
};
jQuery(function() {
jQuery("button[name=button]").click(function(){
jQuery(".result").myfunction();
jQuery('#myElement').width('300px');
});
});
});

"HTML"

<button name="button">Нет, jQuery! </button>
<button id="moot">Нет, mootools! </button>
<span class="result" style="display:none;"></span>
<div id="myElement" style="width:100px;height:100px; border:5px solid red;"></div>

"CSS"

  
p {font-color: #000;}

На этом моя статья о некоторых функциях jquery заканчиваетя, надеюся Вам пригодятся мои знания о jquery.

Вместе с данной статьёй чаще читают следующее:

Currently 2.73/5
1
2
3
4
5

2.7/5 (320 проголосовали)

Дата: 3 года назад - 2009.09.20

Комментариев: 33

Поделись статьёй:

Поделись статьёй, чтоб другие стали умнее...

Поделись статьёй:

Подпишись:

на комментарии к статье...

Комментарии к статье:

1	+0 Александр Что никто не читает? Комментарий добавлен: 21 Сентября 2009 17:22:00 ответить

2	+0 Евгений Очень даже читаем. Спасибо за информацию. Хочется освоить эту тему. Пробую повторить примеры. Можно ли где-то взять заполненную таблицу novosti для примера jquery- php - mysql? Комментарий добавлен: 24 Сентября 2009 15:20:00 ответить

3	+0 Александр Под примером сделал ссылку, всё в zip архиве (mysql,php,jquery). Или вот http://slyweb.ru/jquery/novostyjquery.zip Комментарий добавлен: 24 Сентября 2009 16:31:00 ответить

4	+0 Евгений Большое спасибо, скачал. Пробую разобраться дальше. Мне нужно сделать код для работы с таблицой данных (сортировка и фильтрация по всем полям) без рефреша Комментарий добавлен: 25 Сентября 2009 07:43:00 ответить

5	+0 Александр Не за что. Комментарий добавлен: 26 Сентября 2009 00:17:00 ответить

6	+0 Kwon Отличная статья! Легкий старт для начинающих! Спасибо Комментарий добавлен: 28 Сентября 2009 08:56:00 ответить

7	+0 Александр Не за что! Комментарий добавлен: 02 Октября 2009 17:31:00 ответить

8	+0 Eni Отличный сайт, авторы молодцы Комментарий добавлен: 15 Октября 2009 08:41:00 ответить

9	+0 Сергей Автору большой респект . только начинаю изучать ajax на основе библиотеке jquery, много чего в инете перерыл, только здесь много дельного нашел. сразу ваш сайт добавил в закладку Комментарий добавлен: 05 Ноября 2009 14:51:00 ответить

10	+0 Александр Спасибо! Комментарий добавлен: 07 Ноября 2009 13:22:00 ответить

11	+0 Сеошник Хороший сайт, все в тему, только хочется побольше вкусностей и примеров! А так потихоньку разбираемся с jquery)) Комментарий добавлен: 10 Ноября 2009 04:34:00 ответить

12	+0 Sam молодцы я начинающий, все понятно и прикольно, ща буду юзать вот интересно как также сделать, при неполном заполнении формы моргает ? как у Вас ? Комментарий добавлен: 10 Ноября 2009 21:45:00 ответить

13	+0 Sam А вот скажите пожалуйста, как реализовать подгрузку новостей только с помощью файлов а не mysql ? Комментарий добавлен: 10 Ноября 2009 23:45:00 ответить

14	+1 Александр Чтобы новости из файлов подгружались, нужны файлы, организованные в структуру, которую можно было бы распарсить. Комментарий добавлен: 14 Ноября 2009 19:36:00 ответить

15	+0 Александр Хорошо если бы файлы были xml. Комментарий добавлен: 14 Ноября 2009 20:53:00 ответить

16

Александр

Чтоб моргало Вам нужен плагин jQuery Color Animations. И код:

function valid(){
$("#color")
.animate( { backgroundColor: '#cadceb' }, 1000)
.animate( { backgroundColor: '#00ff7f' }, 1000, valid);
}
valid();
}

Комментарий добавлен: 15 Ноября 2009 11:45:00

16.1	+0 Бывалый плагин jQuery Color Animations здесь не причём! У Вас ведь без него написан код. Ответ добавлен: 14 Марта 2011 13:37:02

ответить

17	+1 Николай Александр. Огромное вам спасибо за помощь в улучшении нашего сайта. "Хорошо если бы файлы были xml." То есть, МОЖНО делать выборку из файлов созданных в 1С. и создавать анализ своей деятельности. Комментарий добавлен: 28 Ноября 2009 11:16:00 ответить

18	+0 Александр C помощью jquery и php можно сделать почти всё что угодно. Комментарий добавлен: 28 Ноября 2009 21:21:00 ответить

19	+0 dn Спасибо за примеры и пояснения на русском! Особенно за постраничный вывод :) Удачи и развития этому сайту! Комментарий добавлен: 14 Декабря 2009 13:24:00 ответить

20

Александр

Для меня все это темный лес.Скажите одно если я вставлю готовую форму которая у вас прописана ( новость 1 новость 2 ) она будет у меня работать и куда мне воткнуть весь зто шифр в какую папку ( не смейтесь мне уже 50 и раньше я работал сварщиком )

http://slyweb.ru/img/smile/first.gif

Комментарий добавлен: 22 Июля 2010 09:22:00

ответить

21	+0 Админ Если скопируете весь этот шифр в нужный вам файл, то все должно работать, не забудьте указать правильный путь к jquery в head. На мой взгляд, если вы не разбираетесь вовсе в этом, то обратитесь к разработчику. Комментарий добавлен: 10 Октября 2010 10:20:00 ответить

22

Дмитрий

Статья очень понравилась, много интересного для себя нашел. Но вот возник вопрос по примеру №3..когда вводишь чисто русские буквы, то высвечивается сообщение об ошибке и всё в порядке. Если же первый символ не русская буква, то пишется, что всё верно, даже если далее будут идти русские буквы. В чем тут дело? Видимо метод match работает как-то странно...или же я чего-то не понимаю) Растолкуйте, пожалуйста

Комментарий добавлен: 02 Декабря 2010 18:53:00

ответить

23	+0 admin Да проверка букв не совсем точная, правильнее будет разобрать все буквы и проверять по отдельности, но я думаю большинство не переключают раскладку во время набора. Комментарий добавлен: 08 Января 2011 15:10:00 ответить

24	+0 MrDr Классные примеры, то что дохтор прописал... Продолжайте в том же духе +1 Комментарий добавлен: 18 Февраля 2011 11:47:00 ответить

25	-1 Drweb Не могли бы вы постраничный вывод сделать в zip? Комментарий добавлен: 15 Марта 2011 13:10:59 ответить

26

Паша

Докажите, что вы человек, поместите note в круг. Весело... а кто не знает что такое note...

Комментарий добавлен: 28 Марта 2011 15:03:07

26.1	+0 Александр Ну pencil то все должны знать! Как Вы собираетесь разбираться в программировании если английский не знаете? Видимо надо всё на русский перевести. Ответ добавлен: 28 Марта 2011 17:21:53

ответить

27	+0 Kirill Подскажи, в чем может быть причина, при использовании свойства .load("i.php"); iexplorer показывает нормально по-русски, а вот gchrome подменяет кодировку w-1251 Комментарий добавлен: 07 Мая 2011 17:02:25 ответить

28	+0 Админ Заголовок со стороны сервера нужно явно указывать и кодировку страницы желательно в UTF8 Комментарий добавлен: 07 Мая 2011 19:17:46 ответить

29	+0 Alex Есть такой сайтик http://cms.template-help.com/prestashop_32552/ как в точности реализовать скрипт работы корзинки как в примере? Комментарий добавлен: 23 Мая 2011 13:28:58 ответить

30	+0 Роман Извините не по тем. Уважаемые господа, не подскажете ли как реализовать на практике такой же плавающий перемещающийся блок adsence как на этом сайте слева? Был бы премного благодарен. Комментарий добавлен: 11 Июня 2011 14:58:10 ответить

31

Naz

Спасибо очень помогло

Комментарий добавлен: 10 Января 2012 08:50:14

31.1	+1 Александр Не за что! Ответ добавлен: 10 Января 2012 16:13:34

ответить

32

Евгений

помогите пожалуйста исправить код. суть: при выборе одного значения в select выпадает второй или третий select

<html>
<head>
<style type="text/css"> </style>
    <script type="text/javascript">
    $(document).ready(function(){
       $("select").bind("change", function(){
          $("div[id]").hide(); // скрыли все
          $("div[id='" + $(this).val() + "']").show(); // показали нужный
       });
    });
    </script>
</head>
<body>
    <select>
      <option></option>
      <option value="boots">Boots</option>
      <option value="shirt">Shirt</option>
    </select>

    <div id="boots">
    <select>
      <option></option>
      <option value="qqqq">qqqq</option>
      <option value="wwwww">wwwww</option>
    </select>
    </div>

    <div id="shirt">
    <select>
      <option></option>
      <option value="ssss">ssss</option>
      <option value="zzzzz">zzzzz</option>
    </select>
    </div>
</body>
</html>

Комментарий добавлен: 25 Января 2012 17:01:25

ответить

33

Naz

Здравствуйте, у меня вопрос! В РНР есть группа форм, при нажатие на кнопку "Добавить еще" внизу должна появится группа таких же форм и так далее. Можно какой нибудь пример или как это можно сделать, спасибо заранее!!!

Комментарий добавлен: 07 Февраля 2012 08:27:21

33.1	+1 Александр Нужен хотя бы код, и если он большой то лучше создать отдельную тему на форуме! Ответ добавлен: 07 Февраля 2012 10:26:03

33.2

naz

$form['person'] = array(
	'#type' => 'fieldset',
	'#weight' => $w++,
	'#attributes' => array('id' => 'edit-person', 'style' => 'background:#D4EBF9;border:0px'),
);
$form['person']['fio'] = array(
	'#type' => 'textfield',
        '#title' => t('FIO'),
	'#weight' => $w++
);
$form['person']['birth'] = array(
	'#type' => 'date',
	'#title' => t('Date'),
	'#weight' => $w++
);
$form['person']['idcard'] = array(
	'#type' => 'textfield',
	'#title' => t('id card number'),
	'#weight' => $w++
);
$form['person']['person-add'] = array(
       '#type' => 'button',
       '#value' => t('Add info person'),
       '#attributes' => array('style' => 'right:10px'),
       '#suffix' => '<br />',
      '#weight' => $w++,
);

это форма в друпале

Ответ добавлен: 07 Февраля 2012 10:48:12

33.3	+1 Александр Это массив, должна быть какая-то функция его обрабатывающая в форму? Наверняка должен быть шаблон использующий эту форму. Ответ добавлен: 07 Февраля 2012 16:26:51

33.4

Naz

function information_about_person(){
здесь форма которая описывается вверху
return $form;
}
ДА в НУЖНОМ МЕСТЕ ВЫЗЫВАЕМ ЭТУ ФУНКЦИЮ ТАКИМ ОБРАЗОМ drupal_get_form('information_about_person') ;

Ответ добавлен: 08 Февраля 2012 07:01:39

ответить

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

jQuery примеры

Вместе с данной статьёй чаще читают следующее:

1

Александр

2

Евгений

3

Александр

4

Евгений

5

Александр

6

Kwon

7

Александр

8

Eni

9

Сергей

10

Александр

11

Сеошник

12

Sam

13

Sam

14

Александр

15

Александр

16

Александр

16.1

Бывалый

17

Николай

18

Александр

19

dn

20

Александр

21

Админ

22

Дмитрий

23

admin

24

MrDr

25

Drweb

26

Паша

26.1

Александр

27

Kirill

28

Админ

29

Alex

30

Роман

31

Naz

31.1

Александр

32

Евгений

33

Naz

33.1

Александр

33.2

naz

33.3

Александр