Ноя 27

Программируем слайдер на jQuery и JavaScript

Я написал новую заметку для сайта "Уголок веб-разработчика" про то, как запрограммировать простейший слайдер на jQuery: http://codething.ru/jq_slider.php. Надеюсь кому-нибудь пригодится!

Ноя 27

Встраиваем редактор TinyMCE в TEXTAREA

Мы уже рассматривали в блоге, как можно несколько улучшить применения элемента TEXTAREA (Шаманим с TEXTAREA), и рассматривали плюсы и минусы готового решение для работы с файлами и изображениями на сайта - Ajex File Manager.

Теперь же рассмотрим вопрос о том, как превратить TEXTAREA в полноценный визуальный текстовый редактор, чтобы можно было устанавливать размеры шрифтов, цвет, вставлять изображения и таблицы.

Одним из таких решений является TinyMCE, позволяющее использовать свой редактор по лицензии LGPL.

Как установить редактор на свою страницу?

Для начала надо скачать сам редактор и файлы с поддержкой русского интерфейса по адресам:
http://www.tinymce.com/ (сам редактор TinyMCE)
http://www.tinymce.com/i18n/index.php?ctrl=lang&act=download&pr_id=1 (файлы для поддержки различных языков, в т.ч. русского).

После этого, размещаем файлы TinyMCE в папке scripts и создаем документ, содержащий одно или несколько полей TEXTAREA, к которым мы хотим применить редактор.

<html>

<script type="text/javascript" src="/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<textarea id='txt1'></textarea><br/><br/>
<textarea id='txt2'></textarea>

<script>
tinyMCE.init({
// General options
mode : "exact",
elements : "txt1, txt2",
theme : "advanced",
language : "ru",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,media,help,code,|,insertdate,inserttime,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none",
theme_advanced_resizing : true,
theme_advanced_path : false,

// Example content CSS (should be your site CSS)
content_css : "/styles/mystyle.css",
});
</script>

</html>

В вызове функции tinyMCE.init() находится множество параметров и настроек редактора TinyMCE, подробнее о которых можно прочесть на официальном сайте. Мы же рассмотрим только некоторые из них:

  • elements : "txt1, txt2" - устанавливаем id элементов, к которым следует применять редактор TinyMCE.
  • language : "ru" - язык, устанавливаемый в редакторе TinyMCE.
  • content_css : "/styles/mystyle.css" - устанавливает файл с CSS стилями, для отображения внутри редактора.

Если вы обрабатываете содержимое TEXTAREA в PHP и при отправке формы помещаете тексты из TEXTAREA в базу данных, полезно будет использовать PHP функции htmlspecialchars() и htmlspecialchars_decode().

Июл 30

Делаем форму обратной связи на сайт с защитой от спама

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

Самый простой способ защиты формы от спама - это использование CAPTCHA. Как сделать собственную CAPTCHA можно прочитать в моей статье "Скрипт текстовой CAPTCHA для защиты от спам-ботов". Но в данном примере мы используем проект KCAPTCHA - готовое решение, разработанное Сергеем Кругловым.

Скачаем содержимое KCAPTCHA с сайта автора и обязательно сохраним в корень сайта, в котором будет выполняться наш скрипт с формой.

Далее - спроектируем форму с интеграцией модуля KCAPTCHA. Файл, содержащий форму обязательно должен быть PHP-скриптом и в самой верхней строчке должен содержать функцию session_start().

<form method="post">
<input type="hidden" name="send" value="1"/>
<p>Уважаемый гость! Если Вам интересен наш проект, 
предложите, пожалуйста, тему, которую Вам было бы интересно
видеть разобранной на страницах нашего
сайта или блога:</p>
<textarea name="theme"></textarea>
<br/>
<img src="kindex.php?<?php echo session_name()?>=<?php echo session_id()?>" 
width="120" height="60"><br/>
Введите анти-спам код с картинки:<br/>
<input name="keystring"><br/>
<input type="submit" value="Отправить"/>
</table>
</form>

Форма приведена без какого-либо оформления и CSS-стилей.

Далее рассмотрим скрипт отправки письма:

// получение темы
$theme = htmlspecialchars($_REQUEST['theme'], ENT_QUOTES);

// отправка письма
$subject = 'Тема для разбора с сайта codething.ru';
$mailto = 'mike@pestr.ru';
$headers = "From: mike@pestr.ru";
$message = "Тема: $theme";
$message = iconv("utf-8", "koi8-r", $message);
mail($mailto, $subject, $message, $headers);

Не забывайте заменить мой почтовый адрес mike@pestr.ru на свой!

Перед отправкой функцией mail() сообщение перекодируется в кодировку KOI8-R (так исторически сложилось для электронной почты), в данном скрипте перекодировка идет из формата UTF-8, т.к. сами скрипты я всегда сохраняю в UTF-8, но если вы решите, что вам удобнее использовать windows-кодировку, то пожалуйста, только не забудьте заменить "UTF-8" на "CP1251" в вызове функции iconv() и перекодировка также будет проходить нормально.

Теперь осталось собрать всё в кучу и добавить проверку правильности ввода CAPTCHA для защиты от спама.

Получившийся в итоге программный код будет выглядеть так:

<?php
session_start();
if ($_REQUEST['send']!='')
{

  if(!isset($_SESSION['captcha_keystring']) || 
     $_SESSION['captcha_keystring'] != $_REQUEST['keystring'])
  {
    $message="<p>Форма не отправлена!</p>";
  }
  else
  {
    // получение темы
    $theme = htmlspecialchars($_REQUEST['theme'], ENT_QUOTES);

    // отправка письма
    $subject = 'Тема для разбора с сайта codething.ru';
    $mailto = 'mike@pestr.ru';
    $headers = "From: mike@pestr.ru";
    $message = "Тема: $theme";
    $message = iconv("utf-8", "koi8-r", $message);
    mail($mailto, $subject, $message, $headers);
    $message="<p>Форма отправлена!</p>";
  }
}

if ($message!="")
{
  echo $message;
}
else
{
?>
  <form method="post">
  <input type="hidden" name="send" value="1"/>
  <p>Уважаемый гость! Если Вам интересен наш проект,
  предложите, пожалуйста, тему, которую Вам было бы интересно
  видеть разобранной на страницах нашего сайта или блога:</p>
  <textarea name="theme" ></textarea>
  <br/>
  <img src="kindex.php?<?php echo session_name()?>=<?php echo session_id()?>"
  width="120" height="60"><br/>
  Введите анти-спам код с картинки:<br/>
  <input name="keystring"><br/>
  <input type="submit" value="Отправить"/>
  </table>
  </form>
<?
}
?>

Конечно, код упрощен и не содержит дизайна и оформления. Отчасти это сделано специально, чтобы облегчить понимание примера.

Вставку этого кода к себе на сайт я сделал через тег <IFRAME>, можно посмотреть, как это работает на главной странице сайта codething.ru.

Мар 03

Скрипт увеличивающейся при наведении картинки

Скрипт увеличивающейся при наведении картинки

При наведении мышкой картинка увеличивается. Довольно часто необходимо решать эту задачу, особенно часто это используется в выдаче рекламных блоков. Желательно, также, чтобы картинка при наведении мышки увеличивалась, но не ломала верстку страницы.

Рассмотрим решение данной задачи с помощью JavaScript-скрипта и библиотеки jQuery.

<html>
 <head>
  <script src="jquery.js"></script>
 </head>
 <body>
  <img src='small.png' onmouseover='bigImage(this, "big.png");' align="left"/>
  <p>Какой-то текст, показывающий, что увеличенное изображение не ломает верстку, а размещается поверх содержимого страницы.</p>

  <div id="big" style="display: none; top: 0px; left: 0px; position: absolute; z-index: 1000;"></div>
  <script>
  function bigImage(obj, fname)
  {
   $("#big").css("left", $(obj).offset().left);
   $("#big").css("top", $(obj).offset().top);
   $("#big").html("<img src='"+fname+"' onmouseout='bigImageHide();'/><br/>");
   $("#big").show();
  }

  function bigImageHide()
  {
   $("#big").hide();
  }
  </script>
 </body>
</html>

Исходная картинка small.png загружается традиционно средствами HTML, но к ней мы добавим событие onmouseover (срабатывающее при наведении мышки), которое будет вызывать написанную нами функцию bigImage();

Для вывода увеличенной картинки на экран, создадим контейнер big, задав ему абсолютное позиционирование поверх других элементов сайта (z-index: 1000).

В функцию bigImage() передаются два параметра - информация о текущем элементе и название увеличенной картинки.

Функция bigImage() задает координаты контейнера big такими же, как и у уменьшенной картинки, после чего в контейнер размещается HTML-код увеличенного изображения. Увеличенное изображение содержит событие onmouseout (срабатывает, когда мышка ушла с объекта), по которому вызывается функция bigImageHide() - скрывающая с экрана контейнер big.

Полезный совет по использованию примера скрипта увеличения картинки:

  • Если вам надо передать ссылку, просто передавайте её третьим параметром в функции bigImage(). В саму функцию bigImage() также следует внести изменения, добавив в HTML-выдачу соответствующий тег <A> с параметром ссылки.

Скачать архив с примером скрипта увеличивающийся при наведении картинки, 54 Кб.

Фев 02

Вебдванольный интерфейс от Twitter

Если хотите, чтобы ваши сайты смотрелись модно и современно, то следует обратить внимание на framework Bootstrap от Twitter. Удобная вещь для построения пользовательских интерфейсов в стиле Веб 2.0, с использованием HTML 5, CSS 3 и Javascript.

Взять можно отсюда: http://twitter.github.com/bootstrap/index.html, скрипты лицензированы под Apache License v2.0.

Примеры из раздела Examples не самые удачные, их можно не смотреть, а лучше посмотреть примеры и прочитать документацию из разделов верхнего меню.

При использовании стоит учитывать тот факт, что Bootstrap не будет  работать корректно в старых браузерах, например,  таких как Opera 9 или IE 6.