Поздравляю всех читателей и посетителей блога с Новым Годом!

Желаю, чтобы 2009й год был более успешен!

Роман.

Популярность: 19%

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

Прием Show / Hide, медленнее и медленнее, а затем быстрее и быстрее

Прием Show / Hide (отобразить / скрыть слой) — довольно распространен. Однако, до использования JQuery мне всегда приходилось быть несколько многословным (и в большинстве случаев я был вынужден искать нужный код через поисковик, как, например, в этом случае, когда жертвой моего грабежа стал: http://www.geocities.com/technofundo/tech/js/showhide.html):

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) //1 - видимый, 0 - спрятанный
{
  if (document.layers)
  {
    document.layers[szDivID].visibility = iState ? "show" : "hide";
  }
  else if  document.getElementById)
  {
    var obj = document.getElementById(szDivID);
    obj.style.visibility = iState ? "visible" : "hidden";
   }
   else  if (document.all)
   {
    document.all[szDivID].style.visibility = iState ? "show" : "hidden";
   }
}
-->
<script>

Но теперь с помощью JQuery я могу просто написать (да, вы отгадали) show(), чтобы отобразить и hide(), чтобы скрыть элемент или подходящий набор элементов:

$(‘div’).show();
$(‘div’).hide();
Конечно, также можно воспользоваться функцией toggle(), которая определяет, а затем меняет состояние данного элемента на противоположное. Это сейчас отображается? Да-> Тогда скрыть; Нет -> показать.

Все просто.

$('#clickme').click(function()
{
 $('div').toggle;
});

Огромное преимущество команд show/hide/toggle состоит в том, что они дают возможность добавить анимацию (регулировку скорости), дабы в полной мере воссоздать волшебство появления, исчезновения и повторного возникновения.

Другими словами, элемент управления скоростью встречается не часто, однако для JQuery это норма. Отныне мы сможем с легкостью управлять скоростью таких анимационных эффектов, как slide, fade, animate и др. Существует три заданные по умолчанию скорости: низкая, средняя и высокая. Кроме того, безусловно, есть возможность задать нужную скорость вручную в миллисекундах.

Следующая строка кода медленно отображает и скрывает слой.
$(‘div#toggle’).toggle(‘slow’”>);

Развернуть и свернуть, изменить прозрачность

Реализация эффекта разворачивания и сворачивания слоя всегда была задачей непростой. Однако, больше это не так. Теперь можно просто использовать эти «говорящие» интуитивно понятные методы: slideUp(speed, callback) и slideDown(speed, callback). И, конечно, не стоит забывать о команде toggle. Совместно с эффектом сворачивания и разворачивания команда toggle будет slideToggle(speed, callback).
Для изменения прозрачности используются следующие команды: fadeIn(speed, callback), fadeOut(speed, callback).
Пример:

$('#clickme').click(function() {
 $('div#slideme').slideToggle("slow")
});

$('#fademe').hover(
 function(){$('img#star').fadeIn("slow");},
 function(){$('img#star').fadeOut("slow");}
);

Популярность: 100%

Теперь, когда мы разобрались с назначением и применением элементов JQuery, настало время для изучения некоторых действий (обработка событий). Посредством действий, реакций и взаимодействий мы учимся, общаемся и играем, а Интернет становится неотъемлемой частью нашей жизни.

Однако, задача создания единой совершенной модели взаимодействия, одинаково пригодной для различных браузеров конкурирующих компаний-разработчиков, довольно затруднительна. Кроме того, не стоит забывать о существовании различных моделей событий DOM. Признайте, ведь вам не раз приходилось сталкиваться с проблемой взаимодействия типа «Да/Нет » между вами и пользователем?

Да, все работает.
Нет, не работает. Ничего не происходит.
Каким браузером вы пользуетесь?
…

JQuery предоставляет унифицированную платформу для кросбраузерной модели обработки событий. Кроме того, JQuery позволяет связывать или отключать события от нескольких слушателей событий. Каждое событие (blur, change, click, focus, keydown …) имеет свои свойства, такие как keyCode, pageX, pageY, screenX, screenY, shiftKey, target.

Добавление и удаление обработчика событий: bind() и unbind()

bind(eventType, data, listener)

Таким образом, вместо добавления события нажатия кнопки мыши к изображению, как показано ниже:

<img id="img1" src="arrowup.jpg" onclick ="showMe()"/>

используя JQuery мы добавляем обработчик(и) событий с помощью команды bind().

$(function(){
 $('img#clickme').bind('click', function(evt){
  alert('Опа! Вы кликнули на меня!');
 };
};

С помощью селекторов JQuery и команды bind() несложно обработать событие выбранного набора элементов.

Теперь немного изменим вышеприведенный код:

$(function(){
 $('img').bind('click', function(evt){
  alert('Мой id='+this.id);
 };
};

В этом примере мы даем команду каждому изображению на странице реагировать на событие нажатия кнопки мыши.

Команда bind() может использоваться для добавления анонимных обработчиков к одному событию. А теперь снова рассмотрим наш пример и внесем в него некоторые изменения:

$('img').bind('click', function(event) {
 alert('Мой id='+this.id);
}).bind('click', function(event) {
 alert('Мой источник '+this.src);
}).bind('click', function(event) {
 alert('Мой положение '+event.pageX+' '+event.pageY );
});
});

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

unbind(eventType, listener)
unbind(event)

Прямое использование названий событий и запуск обработчиков событий: eventName() и trigger()

Для большинства часто используемых событий существует множество удобных, продвинутых обработчиков. Для таких часто встречающихся событий как click, focus, select, submit, blur можно опустить команду bind() и напрямую, непосредственно использовать обработчики.

Синтаксис выглядит следующим образом: eventName(listener), например, click ( function () { } ) ;
или же просто eventName(), как, например, click ();

Пример:

$('img').click(function(event) { alert('My id = ' + this.id);});
$('img#clickMe').click() // имитация нажатия на изображение с id = clickMe

trigger(eventType)

Порой возникает необходимость не просто обработать, а сгенерировать событие. Например, иногда нужно инициировать событие отправки формы. Как это сделать? Просто используйте функцию trigger.

//…
trigger(‘submit’);

Сгенерировать такое событие можно внутри обработчика другого события.

$('img#clickme').click(function(event){
 $('img#submit').trigger('submit');
})

$('img#submit').submit(function(){
 alert('Всё ок!');
});

Последовательная обработка событий: toggle(handler1, handler2, handler3, …)

Главное преимущество, которое предоставляет JQuery — удобство. Если существуют какие-то рутинные действия, то обязательно найдется функция, которая поможет их упростить. Так, например, обстоит дело с последовательной обработкой событий. Как видно из синтаксиса метода toggle(), вы можете переключаться между множеством обработчиков событий.

С помощью этого переключения удобно настраивать стили заданного набора элементов. Сначала задаем синий цвет; затем меняем не зеленый; потом на красный… пока снова не вернемся к синему. И так вновь и вновь.

$('img#chmeleon').toggle(
 function(event){
  alert('Меняем на красный');
  $(event.target).css('background-color: red');
 },
 function(event){
  alert('Меняем на зеленый');
  $(event.target).css('background-color: green');
 }
}
);

Наведение курсора: hover(mouseoverhandler, mouseouthanlder)

Метод hover() - еще один пример удобной для использования команды. Всем нам нравится наблюдать как ссылки и картинки меняют свои стили и отображение при наведении курсора. Ранее с этой целью использовались команды mouseover() и mouseout(). Теперь же, используя JQuery, можно просто вызвать команду hover().

$('img#star').hover(
 function() {
  $(this).attr(src, 'star.jpg');
 },
 function() {
  $(this).attr(src, 'star.gif');
  }
);

Популярность: 98%

Популярность: 18%

В современном веб программировании страницы состоят из иерархии элементов. Манипуляция ушла далеко от стилизации и позиционирования. Сейчас можно добавлять/удалять содержание, добавлять и удалять дочерние элементы, добавлять элементы к новому родителю, клонировать… Возможно всё. Вопрос в том: как?

Манипуляция с контентом: html() и text()
Очень хорошо, что все команды jQuery позволяют задавать и брать параметры. Чтобы получить свойство, достаточно вызвать команду без параметров. Чтобы задать, надо вызвать с параметром.

html() вернет свойство innerHTML элемента;
html(content) задаст свойство.

text() вернет весь текстовый контент;
text(content) поменяет текстовый контент элемента.

Например, посмотрите на этот код:

<table id="table1">
<tbody>
  <tr>
  <td> test1 </td>
   <td> item1 </td>
  </tr>
 </tbody>

$(‘table#table1’).html(); вернет всё внутри таблицы (id=table1), включая теги
$(‘table#table1’).text(); вернет только контент одной большой неразделенной строкой: test1item1

Значения элементов формы: val()
Чтобы взять или задать значение элемента, используйте команду val(): val() - чтобы взять, и val(content) - чтобы задать.

Вот пара подсказок по val:
a) Помните, как мы перебирали радиокнопки, чтобы выбрать нужную нам?

for (var i=0; i

Теперь с jQuery (с селекторами и val() ) мы можем сделать

var selected = $('input[name=selectMe]:checked').val();

b) Запомните, что команды jQuery всегда мультизадачны и можно задавать цепочки команд.
Тоже самое и с командой val(). Можно задать значения для каждого элемента в выборке за один раз.

$('input').val(['red','blue','orange']);

Этот код проверит все чекбоксы или радиокнопки, чьи значения совпадают с любым из значений в массиве (red, blue, orange).

Добавление и вставка

JQuery умеет добавлять и вставлять данные в разные места:

append(something): добавляет “something” в конец выбранного;
appendTo(target): добавляет всё выбранное в конец target;
prepend(something): добавляет “something” в начало выбранного;
prependTo(target): добавляет всё выбранное в начало target;
before(something): добавляет “something” перед каждым элементом выбранного;
insertBefore(target): вставка всего выбранного перед target;
after(something) : вставка “something” после каждого выбранного элемента;
insertAfter(target) : вставка всего выбранного после target;

Обертка и удаление

Нам иногда может понадобиться обернуть наши элементы в другие элементы. Для этого мы можем воспользоваться командой wrap().

 $('p.note').wrap("
This is our notes section

");

Мы также можем удалить обертку. remove() удаляет все выбранные элементы. Например:

$('div.note').remove();

Клонирование

Мы клонируем с clone(), затем перемещаем клон куда-нибудь, связывая командами appendTo, insertBefore, before, after и т.д.

$('img#cloneme').clone().appendTo('div#gallary');

Постовой:
Контейнерные перевозки по морю в Китай.
Выгодная аренда конференц зала на Новый год и организация корпоративных праздников.
Юридическая компания Бикар будет полезна для регистрации фирм.
Для собственной безопасносности рекомендую пройти дополнительные занятия с Автоинструктором.

Популярность: 100%

Оригинал: Export CSV directly from MySQL

Как часто вы просите клиента, чтобы он экспортировал данные из своей программы в CSV или xls? Я прошу об этом довольно часто, поэтому я хочу сделать процесс простым, как это возможно. И знаете что? Вы можете сделать CSV файл из MySQL напрямую одним запросом!

Например, Вы хотите экспортировать поля id, name, email из таблицы пользователей в CSV файл. Вот как это можно сделать:

SELECT id, name, email INTO OUTFILE '/tmp/result.csv'
FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'
LINES TERMINATED BY '\n'
FROM users WHERE 1

Если Вы знаете MySQL, то сможете изменить этот запрос, как Вам нужно. CSV файл может быть найден в /tmp/result.csv.

Убедитесь, что MySQL имеет разрешения на запись в директорию, куда Вы сохраняете файл с результатами.

Постовой:
Блог Чернышова Руслана
Если Вы летаете самолетом, то закажите такси аэропорт

Популярность: 22%