jQuery--большой функционал за короткое время

Z3RO, хром, опера, осел9.0
андроид, бада, вин мобайл

ramzes (17.07.2011/16:22)
Z3RO, хром, опера, осел9.0
андроид, бада, вин мобайл

ХЗ. У меня мой пример работает в Chrome, Opera, FireFox, IE8 и в Safari

дай свой рабочий пример?
вечером время будет, попробую

Работа с AJAX посредством jQuery
В jQuery есть три способа передачи данных без обновления страницы: $.ajax(), $.post(), $.get() и 1 способ получения данных: $.load()
Первый способ для передачи рассматриватся в данной статье не будет. Второй и третий похожи между собой и отличается только типом передачи данных.
Начнем из загрузки страницы.
Допустим нам нужно, чтобы при клике на ссылку данные загружались автоматически без перезагрузки. HTML код будет выглядеть таким образом:

<div class="links">
<a href="page1.php">Страница 1</a>
<a href="page3.php">Страница 2</a>
<a href="page2.php">Страница 3</a>
</div>
<div id="container"></div> // Сюда будет загружатся содержимое

Теперь собственно jQuery код:

$('div.links a').click(function (){
var href = $(this).attr('href');
$('#container').load(href);
return false;
});

Теперь собственно разбор кода:
Первая строка думаю уже всем понятна. =)
var href = $(this).attr('href'); -- здесь целых 2 новые вещи. 1. $(this) -- обращается к текущему элементу; 2. attr('href') принимает значение аттрибута href выбранного элемента.
Если передать второй аргумент, то аттрибут будет изменён, например код $('a').attr('href', '/index.php') установит для всех ссылок значение аттрибута href как /index.php
$('#container').load(href); -- этот код загружает содержимое страницы приведенной по адресу href в <div id="container"></div>
return false; -- указывает, что переадресация отменяется
Думаю с этим всё понятно. =)

Отсылка данных

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

Итак, форма ввода статуса:

<div class="status_form"><div><form name="status" method="POST">
<label>Статус:<br/><input type="text" name="text" value="'[текущий статус]" placeholder="Что нового?" maxlength="100"/></label>
<div style="text-align:center;"><input type="button" onClick="status_save()" value="Сохранить"/>
<input type="button" value="Очистить" class="white" onClick="document.status.text.value=\'\';"/>
</div></form></div>
<div class="close"><a onclick="status_form();" title="Скрыть"></a></div>
</div>

Также чтото должно открывать эту форму. В данном случае это будет ссылка с текстом текущего статуса

<a id="st">[Здесь текст текущего статуса]</a>

Вот CSS для формы:

.status_form{
background-color: #eef6ff;
border: 3px solid #6890ba;
border-top: 0;
color: #2e6196;
display: none;
position: fixed;
left: 37%;
top: 0;
width: 26%;
}

.status_form div{
padding: 10px 20px 0 20px;
}

.status_form .close a{
background: url('images/hideup.png') no-repeat center #d9ebff;
color: #6d8fb5;
cursor: pointer;
display: block;
height: 9px;
margin: 0 -20px;
text-align: center;
text-decoration: none;
}

.status_form .close a:hover{background-color: #d0e6ff;}
.status_form div input[type=text]{width: 100%;}

Ну и jQuery код:

var home = 'http://' + document.domain; //Адрес сайта

$('#st').click(function (){status_form();});

function status_form(){
$('div.status_form').slideToggle(300);
}

function status_save(){
var t = document.status.text.value;
$.post(home + '/status.php', {text: t}, status_form());
$('div.sidebar div.menu a.st').text(t);
}

$('#st').click(function (){status_form();}); -- эта строка указывает, что при клику на любом элементе с id="st", появится/скроется форма ввода статуса
var t = document.status.text.value; -- принимает значение поля текста статуса
$.post(home + '/status.php', {text: t}, status_form()); -- разбираем по порядку. home + '/status.php'--адрес скрипта-получателя; {text: t} -- передаваемые параметры, в данном случае. чтобы скрипт получил текст статуса нужно использовать $_POST['text']; status_form() -- функция, выполняющаяся при завершении передачи.
$('div.sidebar div.menu a.st').text(t); -- данная строка изменяет текст ссылки, показывающей форму ввода статуса.

Пока на этом всё. Если у вас появится какая-нибуть идея и вы не будете знать как её реализовать, обращайтесь в эту тему

У меня спрашивали как интегрировать приведённые мной jQuery коды в JohnCMS. Покажу вам всё на одном простом примере. Вот содержимое mainmenu.php из JohnCMS 4.2

/*
////////////////////////////////////////////////////////////////////////////////
// JohnCMS                Mobile Content Management System                    //
// Project site:          http://johncms.com                                  //
// Support site:          http://gazenwagen.com                               //
////////////////////////////////////////////////////////////////////////////////
// Lead Developer:        Oleg Kasyanov   (AlkatraZ)  alkatraz@gazenwagen.com //
// Development Team:      Eugene Ryabinin (john77)    john77@gazenwagen.com   //
//                        Dmitry Liseenko (FlySelf)   flyself@johncms.com     //
////////////////////////////////////////////////////////////////////////////////
*/

defined('_IN_JOHNCMS') or die('Error: restricted access');

$mp = new mainpage();

/*
-----------------------------------------------------------------
Блок информации
-----------------------------------------------------------------
*/
echo '<div class="phdr"><b>' . $lng['information'] . '</b></div>';
echo $mp->news;
echo '<div class="menu"><a href="news/index.php">' . $lng['news_archive'] . '</a> (' . $mp->newscount . ')</div>' .
    '<div class="menu"><a href="pages/faq.php">' . $lng['information'] . ', FAQ</a></div>';

/*
-----------------------------------------------------------------
Блок общения
-----------------------------------------------------------------
*/
echo '<div class="phdr"><b>' . $lng['dialogue'] . '</b></div>';
// Ссылка на гостевую
if ($set['mod_guest'] || $rights >= 7)
    echo '<div class="menu"><a href="guestbook/index.php">' . $lng['guestbook'] . '</a> (' . functions::stat_guestbook() . ')</div>';
// Ссылка на Форум
if ($set['mod_forum'] || $rights >= 7)
    echo '<div class="menu"><a href="forum/">' . $lng['forum'] . '</a> (' . functions::stat_forum() . ')</div>';

/*
-----------------------------------------------------------------
Блок полезного
-----------------------------------------------------------------
*/    
echo '<div class="phdr"><b>' . $lng['useful'] . '</b></div>';
// Ссылка на загрузки
if ($set['mod_down'] || $rights >= 7)
    echo '<div class="menu"><a href="download/">' . $lng['downloads'] . '</a> (' . functions::stat_download() . ')</div>';
// Ссылка на библиотеку
if ($set['mod_lib'] || $rights >= 7)
    echo '<div class="menu"><a href="library/">' . $lng['library'] . '</a> (' . functions::stat_library() . ')</div>';
// Ссылка на библиотеку
if ($set['mod_gal'] || $rights >= 7)
    echo '<div class="menu"><a href="gallery/">' . $lng['gallery'] . '</a> (' . functions::stat_gallery() . ')</div>';
if ($user_id || $set['active']) {
    echo '<div class="phdr"><b>' . $lng['community'] . '</b></div>' .
        '<div class="menu"><a href="users/index.php">' . $lng['users'] . '</a> (' . functions::stat_users() . ')</div>' .
        '<div class="menu"><a href="users/album.php">' . $lng['photo_albums'] . '</a> (' . functions::count_photo() . ')</div>';
}
echo '<div class="phdr"><a href="http://gazenwagen.com">Gazenwagen</a></div>';

А теперь модернизируем этот код следующим образом:

/*
////////////////////////////////////////////////////////////////////////////////
// JohnCMS                Mobile Content Management System                    //
// Project site:          http://johncms.com                                  //
// Support site:          http://gazenwagen.com                               //
////////////////////////////////////////////////////////////////////////////////
// Lead Developer:        Oleg Kasyanov   (AlkatraZ)  alkatraz@gazenwagen.com //
// Development Team:      Eugene Ryabinin (john77)    john77@gazenwagen.com   //
//                        Dmitry Liseenko (FlySelf)   flyself@johncms.com     //
////////////////////////////////////////////////////////////////////////////////
*/

defined('_IN_JOHNCMS') or die('Error: restricted access');

$mp = new mainpage();

/*
-----------------------------------------------------------------
Блок информации
-----------------------------------------------------------------
*/
echo '<div class="phdr"><b>' . $lng['information'] . '</b></div><div>';
echo $mp->news;
echo '<div class="menu"><a href="news/index.php">' . $lng['news_archive'] . '</a> (' . $mp->newscount . ')</div>' .
    '<div class="menu"><a href="pages/faq.php">' . $lng['information'] . ', FAQ</a></div>';
echo '</div>';

/*
-----------------------------------------------------------------
Блок общения
-----------------------------------------------------------------
*/
echo '<div class="phdr"><b>' . $lng['dialogue'] . '</b></div><div>';
// Ссылка на гостевую
if ($set['mod_guest'] || $rights >= 7)
    echo '<div class="menu"><a href="guestbook/index.php">' . $lng['guestbook'] . '</a> (' . functions::stat_guestbook() . ')</div>';
// Ссылка на Форум
if ($set['mod_forum'] || $rights >= 7)
    echo '<div class="menu"><a href="forum/">' . $lng['forum'] . '</a> (' . functions::stat_forum() . ')</div>';
echo '</div>';

/*
-----------------------------------------------------------------
Блок полезного
-----------------------------------------------------------------
*/
echo '<div class="phdr"><b>' . $lng['useful'] . '</b></div><div>';
// Ссылка на загрузки
if ($set['mod_down'] || $rights >= 7)
    echo '<div class="menu"><a href="download/">' . $lng['downloads'] . '</a> (' . functions::stat_download() . ')</div>';
// Ссылка на библиотеку
if ($set['mod_lib'] || $rights >= 7)
    echo '<div class="menu"><a href="library/">' . $lng['library'] . '</a> (' . functions::stat_library() . ')</div>';
// Ссылка на библиотеку
if ($set['mod_gal'] || $rights >= 7)
    echo '<div class="menu"><a href="gallery/">' . $lng['gallery'] . '</a> (' . functions::stat_gallery() . ')</div>';
if ($user_id || $set['active']) {
    echo '<div class="phdr"><b>' . $lng['community'] . '</b></div>' .
        '<div class="menu"><a href="users/index.php">' . $lng['users'] . '</a> (' . functions::stat_users() . ')</div>' .
        '<div class="menu"><a href="users/album.php">' . $lng['photo_albums'] . '</a> (' . functions::count_photo() . ')</div>';
}
echo '</div>';
if(!$is_mobile)
echo '<script type="text/javascript>$(\'div.phdr\').click(function (){$(this).next().slideToggle(\'normal\')});</script>';

echo '<div class="phdr"><a href="http://gazenwagen.com">Gazenwagen</a></div>';

Как видите, всё, что я зделал это обьеденил все ссылки каждого из блоков отдельным дивом и добавил в конец код из первого поста.
Теперь, если вы зайдете с компьютера, то сможете скрывать отдельные блоки меню.

ramzes, толькочто перепроверил. У меня работают оба варианта. Но если верить документации по JavaScript, то правильный именно мой пример.

Еще одна интересная штука. Выезжающая снизу панелька. Сначала распишу весь код, а понять, что он делает вы сможете по скриншоту.
Это будет панелька для различных форм ввода. В нашем случае это будет форма добавления новости.

Итак, HTML код

<a id="newadd">Добавить новость</a>
<div class="bmenucont"><a class="close"><img src="close.png" title="Скрыть"/></a>
<div id="bmenu">
</div>
</div>

CSS код

.bmenucont{
display: none;
position: fixed;
width: 40%;
bottom: 0;
left: 30%;
}
.bmenucont a.close{cursor: pointer; position: absolute; right: 3px; top: 3px;}
#bmenu{
background: #bdd3ee;
border: 5px solid #608cb8;
border-bottom: 0;
-moz-border-radius: 10px 10px 0 0; /*Firefox*/
-webkit-border-radius: 10px 10px 0 0; /*Chrome, Netscape*/
border-radius: 10px 10px 0 0; /*IE, Opera*/
color: #24517e;
overflow: auto;
padding: 10px 20px;
}

jQuery код

$('#newadd, div.bmenucont a.close').click(function (){
$('#bmenu').load('getform.php/', function (){$('div.bmenucont').slideToggle('normal');});
return false;});

Исходя из предыдущих частей статьи вы должны знать что к чему. Результат можно увидеть на скриншоте.

Z3RO (17.07.2011/18:01)
У меня спрашивали как интегрировать приведённые мной jQuery коды в JohnCMS. Покажу вам всё на одном простом примере. Вот содержимое mainmenu.php из JohnCMS 4.2
[php]

/*
//////////////////////////

не работает гг
This page contains the following errors:
error on line 14 at column 515: Extra content at the end of the document
Below is a rendering of the page up to the first error.

Cron (17.07.2011/18:32)
не работает гг
This page contains the following errors:
error on line 14 at column 515: Extra content at the end of the document
Below is a rendering of the page up to the first error.

Ты библиотеку jQuery подключил?

гг виноват