Заметки на breys.ru

Jquery JqueryUI autocomplete, пример настройки автодополнения с произвольным словарём

ffsdmad@jabber.ru ( Басманов ) — Fri, 19 Apr 2013 14:15:04 +0400

Была поставлена задача обеспечить оффлайновый ресурс(CD диск) возможностью поиска по используемой в онлайн базе данных.

Самым простым и удобным решением оказалось выгрузить базу с нужными ключами в JS файл и использовать полученный словарь прямо на странице совместно с jqueryui.autocomplete

Для этого нужно настранице разместить форму с полем для ввода ключевых слов и полем для отображения полученной ссылки, затем подключить библиотеку JqueryUI и настроить конструктор autocomplete на то, чтобы он правильно обрабатывал формат моего словаря. У меня получилась примерно вот такая форма:

<div id="ac-search">Поиск:
      <input id="search" />
      <p id="search-href"/>
</div>

На этой форме я буду использовать id="search" для того чтобы подключить к этому полю выпадающий список и параграф id="search-href" для вывода результатов

В моём случае формат словаря определялся Json ответом CMS сайта:

{"polish": {"peoples": {"row": polish_peoples = [
    [1, "Джугашвили Иосиф Виссарионович (1878—1953)"],
    [2, "Путин Владимир Владимирович (1952—)"], 
    [3, "Романов Николай Александрович (1894—1917)"],
]}}}

Вот пример как использовать это совместно с Ajax+Json

$.get("/app.py",{plugins:"peoples2json",format:"json",short_name:"peoples"},function(data){
// запрос к сайту в надежде получить JSON объект
 if(data.polish.peoples){
// если получен нужный объект то отыскиваем поле ввода #search и конструкируем из него autocomplete
 $( "#search" ).autocomplete({
             minLength: 0,
// в качестве словаря по которому будет производиться поиск передаю массив заголовков и номеров страниц
                  source: data.polish.peoples.row,
// описываю свой обработчик события когда пользователь выбирает какое либо значение из всплывшего списка
                  select: function( event, ui ) {
// код обработчика знает какой элемент моего словаря выбрал посетитель, а я зная структуру элемента 
// формирую нужный результат и вставляю полученную ссылку в поле #search-href
// 1ой[0] элемент моего массива содержит ID страницы, 
//а 2ой[1] элемент это заголовок, импользуя эти данные я формирую ссылку на новую вкладку и вславляю в туда куда нужно
                   $( "#search-href" ).html( "<a target='_blank' href='/blog/"+ui.item[0]+".html'>"+ui.item[1]+"</a>" );
                        return false;
                  }
             }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
// определение этой функции необходимо потому что объект autocomplete 
// не знает из каких полей моего словаря формировать ссылки в всплываюшем списке
// то-есть при условии нахождения ключевого слова набранного посетителем 
// для каждой подходящей строки моего словаря будет вызывать функция _renderItem
// а результат этой функции будет формировать выпадающей список
              return $( "<li>" ).append( "<a>" + item[1] + "</a>" ).appendTo( ul );
                   };
             }
    },"json");

Для оффлайн версии всё немного проще, для этого нужно JSON результат сохранить в JS файле на сервере, я его немного упростил и у меня получилось вот так

peoples = [
    [1, "Джугашвили Иосиф Виссарионович (1878—1953)"],
    [2, "Путин Владимир Владимирович (1952—...)"], 
    [3, "Романов Николай Александрович (1894—1917)"],
];

затем нужно подключить этот файл на страницу так чтобы внутри пространства имён JS была доступна переменная peoples, а затем активировать jqueryui.autocomplete вот так:

 $( "#search" ).autocomplete({
             minLength: 0,
// использую peoples из подключенного JS файла
                  source: peoples,
                  select: function( event, ui ) {
                   $( "#search-href" ).html( "<a target='_blank' href='/blog/"+ui.item[0]+".html'>"+ui.item[1]+"</a>" );
// подсветка результата эффектом highlight
 $( "#search-href" ).effect("highlight", {}, 3000);
                        return false;
                  }
             }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
              return $( "<li>" ).append( "<a>" + item[1] + "</a>" ).appendTo( ul );
                   };
             }

вроде бы всё просто и понятно, а вот рабочий пример (попробуйте поискать по слову Ломко)

jQuery: простые примеры

ffsdmad@jabber.ru ( Басманов ) — Mon, 21 Dec 2009 20:00:45 +0400

Вот ещё парочка простых но полезных примеров динамическое меню и функция инвертировать checkbox

В меню и простых div, span и a Необходимо, чтобы при кликанье по пунктам все другие закрывались, а текущее подменю раскрывалось. вот код:

$(document).ready(function() {
/* эта функция аналог body onload() */
                /* выбираем Первый div внутри div.menu и делаем его видимым*/
                $("div.menu div:first").show();
                /* выбираем все спаны внутри div.menu, и подключем к ним функцию onclick() */
                $("div.menu span").bind("click", function(){
                    $("div.menu div").hide(100);/* скрываем все дивы внутри div.menu за 100 милисекунд */
                    $("div.menu span").removeAttr("class"); /* удаляем класс у спанов, убираем жирность */
                    $(this).next().show(250); /* находим следующий после текущего (this) тег и делаем его видимым за 250 милисекунд */
                    $(this).attr("class","spanb"); /* устанавливаем для текущего спана(по которому счёлкнули) класс */
                });
});

и имеется форма с группой checkbox, необходимо добавить кнопку инвертирующую текущее состояние ВСЕ чекбоксов, вот такой код

function select_all(){
                    /* выбираю все чекбоксы внутри формы внутри div.menu и меняю у них свойство checked на обратное */
                    $("div.menu form input:checkbox").each( function() {$(this).attr('checked', !$(this).attr('checked'));})
}

рабочий пример можно посмотреть вот тут

jQuery, создание плагина на примере слайдера

ffsdmad@jabber.ru ( Басманов ) — Fri, 27 Nov 2009 13:18:39 +0400

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

Для написания плагина на jQuery нужно использовать скелет такого плагина, я использую этот, он довольно наглядо показывает как устроен плагин

jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};
jQuery.log("jQuery test!!!")

Суть этого кода в том, что мы создали внутри jQuery функцию которая печатает сообщение либо в консоль Firebug либо выводит, привычным для многих, алертом. Кстати его довольно удобно использовать при отладке JS кода.

Идея слайдера в том, что скрываются ВСЕ, кроме первой, фотографии в блоке, затем к первой фотографии прицепляется обработчик который при наведении курсора меняет значения src и title у первой фотографии, а берёт эти значения из словаря видимого только внутри плагина. Теперь собственно код плагина слайдера:

(function($){
    jQuery.fn.ffslider = function(){
        function next_img(img,name) {
            if(list_slide[name].pos==list_slide[name].count)list_slide[name].pos=0;
            img.src=list_slide[name].img[list_slide[name].pos].src;
            img.title=list_slide[name].img[list_slide[name].pos].title;
            list_slide[name].pos+=1;
        }
        var element = this;
        var list_slide=new Object();
        element.each( function(i){
            var dslid = this;
            count = $("img",dslid).length
            if(count>1){
                ndslid = "slider"+i;
                $(dslid).attr("id",ndslid);
                list_slide[ndslid]={num:i,pos:1,count:$("img",dslid).length,img:new Array(count)};
                $("img",dslid).each(function(j){
                    var img = this;
                    list_slide[ndslid].img[j]={title:img.alt,src:img.src};
                });
                $("img:first",dslid).bind("mouseover",{n:ndslid},function(event){next_img(this,event.data.n)})
                $("img:first",dslid).bind("mouseout",{n:ndslid},function(event){next_img(this,event.data.n)})
            }
            $("img:first",dslid).show();
        });
        return element;
    }
})(jQuery);

Здесь внутри jQuery создаётся объект jQuery.fn.ffslider к которому привязывается функция которая представляет собой описание класса слайдера. Она содержит внутри себя функцию переключения изображения (пока только вперёд) next_img и два цикла, первый перебирает все подходящие блоки (это может быть как один так и множество блоков), а в каждом блоке обрабатывает все изображения формируя при этом "именной" для блока "словарь" в котором хранится информация для работы слайдера. Если разложить этот словарь то получится чтото вроде

list_slide={
    "slider1":{
        count:2,
        pos:1,
        img:[(
            {title:"image1",src:"http://breys.ru/upload/images/1259311393.81.JPG"}
            ,{title:"image2",src:"http://breys.ru/upload/images/1259311339.92.JPG"})]
        }
    }
    "slider2":{
        count:2,
        pos:1,
        img:[(
            {title:"image3",src:"http://breys.ru/upload/images/1259311453.81.JPG"}
            ,{title:"image4",src:"http://breys.ru/upload/images/1259311579.92.JPG"})]
        }
    }
}

Такой "словарь" позволяет во-первых создавать n-количество "слайдеров", а во-вторых используется функцией для "круговорота" фотографий в слайдере. И вообще очень удобная вещь, например чтобы получить заголовок и адрес второй картинки во втором блоке нужно написать так:

jQuery.log( list_slide["slider2"].img[1].title + " = " + list_slide["slider2"].img[1].src )

После создания "словаря" плагин находит ПЕРВОЕ изображение, создаёт для него обработчики событий mount[over|out] в котором вызывается функция цикличной смены изображения, а под конец делает ПЕРВОЕ изображение в списке видимым.

Если в блоге находиться только одна фотография то плагин только делает её видимой, пропуская этот блок

Стоит обратить внимание, что функция возвращает элемент this, это необходимо (но не обязательно) чтобы можно было использовать слайдер в каскадах/цепочках вызовов функция jQuery, например

$(".pages .slider").ffslider().remove();

Тут будет инициализированы все слайдеры, а затем удалены :)

Теперь, чтобы применить этот плагин необходимо подготовить

html - поместить изображение в блок с классом slider, не принципиально, так как можно при запуске слайдера указать даже body
css - скрыть все изображения внутри блока, важно иначе все изображения будут отображены, а первое будет моргать при наведении
включить плагин в момент загрузки страницы

<script type="text/javascript" src="http://breys.ru/js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".slider").ffslider();
    });
</script>
<style type="text/css">
    .slider img{display:none;}
</style>
</head>
<body>
    <div class="slider">
        <img src="http://breys.ru/upload/images/1258398987.03.png" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399034.81.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399057.32.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399088.85.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399100.32.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399110.05.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
    </div>

А вот так это выглядит, по-моему получился довольно удобный, компактный и вроде бы расширяемый плагин

jQuery, сериализация данных при обработке формы

ffsdmad@jabber.ru ( Басманов ) — Wed, 02 Sep 2009 11:59:14 +0400

Сериализация формы необходима когда нужно отправить данные с формы с помощью Ajax запроса, при этом бывает нужно добавить некоторые параметры которых нет на форме. В jQuery это делается вот так

function get_rand(){
  var d = new Date();
  return d.getTime();
}

function save_anketa(){
  var fields = $("#anketa form").serializeArray();
  fields["d"]=get_rand()
  $.post("/cgi-bin/script.py",fields,function(data){alert(data)})
 }

Тут происходит поск формы в блоке с id="anketa", затем поля формы с помощью функции serializeArray преобразуются в словарь (как Python), затем в этот словарь добавляется параметр со случайными данными, это необходимо чтобы гадский MSIE не кешировал повторный запрос

Затем полученный словарик с данными формы передаётся скрипту на сервере с помощью Ajax запроса post. Вроде & всё просто & наглядно

Примеры Jquery, превью фотографий во всплывающем окне на событие onmouserover

ffsdmad@jabber.ru ( Басманов ) — Sun, 21 Jun 2009 00:19:49 +0400

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

Решил задачу таким образом, с помощью jQuery, прибиндил к ссылке событие, которое рисует в body скрытый div, клонирует в него ссылку с вложенной картинкой, вычисляя положение ссылки подстраивает новый div НАД маленькой картинкой, включает видимость и биндит функцию на mouseout которая удаляет динамически созданный div

Галерея построена так:

<div id="preview"> 
  <div> 
    <a href="/1046.html#atop" title="Faretti Veneziani 705 F"><img src="/fotos/thumb2/1242302304.15.jpg" alt="Faretti Veneziani 705 F"></a>
    <p >Faretti Veneziani 705 F</p> 
    <p >400 руб.</p> 
  </div> 
  <div> 
    <a href="/1045.html#atop" title="Faretti Veneziani 700 F"><img src="/fotos/thumb2/1242302093.69.jpg" alt="Faretti Veneziani 700 F"></a>
    <p >Faretti Veneziani 700 F</p> 
    <p >500 руб.</p> 
  </div> 
  <div> 
    <a href="/1044.html#atop" title="Faretti Veneziani 707 F"><img src="/fotos/thumb2/1242301917.06.jpg" alt="Faretti Veneziani 707 F"></a>
    <p >Faretti Veneziani 707 F</p> 
    <p >600 руб.</p>
  </div>
</div>

Настоящий размер картинок превью больше в два раза чем отображается, сделано это так:

#preview {}
#preview div{width:177px;height:135px;float: left;background:#f9e7bf;border:2px solid #361f11;margin-right:40px;margin-bottom:30px;}
#preview div a img{opacity:0.95;width:177px;height:90px; }
#preview div p{color:#361f11;font-size:80%;margin: 0px;padding-left:5px;padding-right:5px;}
#preview div .sr{text-align: right;color:#000;}
#preview div .nm{overflow:hidden;height:20px;}

А теперь скрипт, который я вставил в body onload="init_page()"

function show_thumb(th){
    $("#thumb").remove();
    $("body").append('<div id="thumb"></div>')
    $("#thumb").hide()
    $("#thumb").append($(th).clone())
    $("#thumb").css("position","absolute")
    $("#thumb").css("z-index","2")
    var p = $(th).offset()
    $("#thumb").css("left",p.left-20).css("top",p.top-90)
    $("#thumb").show(150)
    $("#thumb").mouseout(function(){$(this).remove();});
    }
}
function init_page(){
  $("#preview a").mouseover(function(){show_thumb(this)} )
}

Вроде бы простой и понятный скрипт, обращу внимание на иструкцию $("#thumb").remove();, она используется чтобы одновременно был создан только 1 блок thumb, иначе при быстром перемещении курсора будет полная задница, можно слегка оптимизировать код, добавив в CSS стиль для блока #thumb сократив тем самым код

Проверил, работает в FF3, Opera, Chrome и даже MSIE6 - везде работает без проблем.

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

Всё таки jQuery отличная штука, она как bash для Linux или супер клей для сборки авиамоделей

Примеры Jquery, как затемнить окно

ffsdmad@jabber.ru ( Басманов ) — Sun, 07 Jun 2009 19:38:49 +0400

Потребовалось затемнить страницу под "всплывающим" дивом, при этом заблокировать все элементы на затемнённой странице. Вот что я навелосипедил

$("body").append('<div id="fade" ></div>');
body_height = document.height || document.documentElement.scrollHeight
$("body #fade").css("height",body_height)
$("body #fade").fadeTo(0, 0.4);

function close_div(id){
  $("#"+id).hide(100)
  $("#fade").remove()
}

В первых 4 строчка, в body добавляет div чёрного цвета со стилем

body .fade {position: absolute;top:0px;top:0px;left:0px;width:100%;height:100%;background-color:#000;z-index:1;right: 0px; bottom:0}

затем вычисляется высота всего окна (актульно для оперы) и устанавливается для этого div для перекрытия всего body, а не только видимой части, затем у без задержки меняется прозрачность до 40%

Для закрытия "всплывающих дивов используется функция close_div, следует отметить, что у всплывающих дивов должен быть z-index больше чем div[id="fade"]

В осле пока не проверял, кстати, вот таблица соответствия свойства Height в различных браузерах

Browser	window. innerHeight	document. body. clientHeight	document. documentElement. clientHeight
Opera 9.5+ strict	window	document	window
Opera 9.5+ quirks	window	window	document
Opera 7-9.2	window	window	document
Opera 6	window	window	N/A
Mozilla strict	window	document	window
Mozilla quirks	window	window	document
KHTML	window	document	document
Safari	window	document	document
iCab 3	window	document	document
iCab 2	window	window	N/A
IE 6+ strict	N/A	document	window
IE 5-7 quirks	N/A	window	0
IE 4	N/A	window	N/A
ICEbrowser	window	window	document
Tkhtml Hv3	window	window	document
Netscape 4	window	N/A	N/A

JQuery примеры использования

ffsdmad@jabber.ru ( Басманов ) — Sat, 09 May 2009 10:21:20 +0400

Довольно часто мне и моим знакомым приходится повторно открывать для себя JQuery, что избавить себя от дежаву решил собрать тут самые показательные и сложные примеры использования JQuery

Получение значение выбранной строки в списке Select из блока #adm

$("#adm select[name='table']").attr("value")

Получить текст из выбранной строки в списке Select из блока #adm

$("#adm select[name='table'] option[selected]").attr("text")