Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> тулкит для создания комбобоксов + AJAX-подгрузка, xml javascript combo box toolkit library 
:(
    Опции темы
Alx
Дата 13.5.2007, 22:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



библиотека, позволяющяя создавать различные web-компоненты типа combo box на основе xml или json. огромное количество полезных функций smile 

Цитата

всем известны проблемы с тегом select в html: отсутствие возможности настройки внешнего вида, перекрывание абсолютно позиционированных слоев, отсутствие комбобоксов (выпадающих списков с возможностью ввода), отсутствие нормального мультивыбора и некоторые другие. все они имеют некоторые, чаще всего корявые, решения, которые врядли можно назвать панацеей.

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

кроме того он позволяет использовать некоторые очень полезные функции, крайне популярные в последнее время. например, удобный API для управления списками и пунктами (создание, редактирование, удаление), ajax-подгрузка каскадных списков (когда содержимое некоторых списков зависит от других), а также создание простых текстовых полей с автоподстановкой значений при вводе (в том числе и из серверных ресурсов, аналогично Google Suggest).

все настройки для компонентов smartselect описываются в отдельном xml-файле или json-строкой.


внедрить такой компонент на страничку проще простого. достаточно только подключить библиотеки в начале файла, а затем в нужном месте вставить всего одну строчку JavaScript или PHP кода (на ваш выбор). строчка эта - вызов метода, в параметрах которому передается либо ссылка на xml-файл с описанием списка, либо - 2 json-строки, одна из которых содержит массив пунктов, а вторая - набор настроек (атрибутов).

по умолчанию список будет выглядеть точь в точь, как настроящий (в разных браузерах по разному), но вы можете полностью настроить его внешний вид, используя HTML, CSS, XSLT, картинки и JavaScript, создавать собственные скины и шаблоны и многое другое.

других функций и возможностей у этого тулкита полно, смотрите сами, вот сайт - http://alx.vingrad.ru/fwc/ru
читайте документацию, там же можно скачать релиз.
вот примеры:
http://alx.vingrad.ru/fwc/ru/examples
http://alx.vingrad.ru/fwc/ru/doc-autofill
http://alx.vingrad.ru/fwc/_demos/sselect.php

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


что скажете? smile

05.02.09: последнее обновление до версии 2.7 - добавлена поддержка браузеров Safari, Google Chrome и Konqueror.

Это сообщение отредактировал(а) Alx - 5.2.2009, 09:25


--------------------
PM MAIL WWW ICQ   Вверх
alex77
Дата 14.5.2007, 06:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


жывтоне чочо
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 29.9.2006
Где: Екатеринбург

Репутация: нет
Всего: нет



Не работают клавиши pageUp, pageDown, home, end.
Селекты лезут один под другой. Если выбран первый пункт, то при наведении мыши сразу на следующий пункт, подсвечиваются синим и тот и тот. (см. изображение).
А в целом прикольно, сам тоже делал такое на работе.

Присоединённый файл ( Кол-во скачиваний: 134 )
Присоединённый файл  select.gif 2,10 Kb
PM MAIL ICQ   Вверх
Alx
Дата 14.5.2007, 12:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
Не работают клавиши pageUp, pageDown, home, end.

а должны? я и не знал smile как-нибудь сделаем smile

Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
Селекты лезут один под другой.

хз.. это только в этом месте и только в Эксплорере.. Обновляешь страницу, все ок.. глючит определение zIndex при прорисовке.. есть идейка, попробую

Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
 Если выбран первый пункт, то при наведении мыши сразу на следующий пункт, подсвечиваются синим и тот и тот. (см. изображение).

а как иначе? помоему это логично.. почему при передвижени мышке выделение выбранного пункта должна спадать?

Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
А в целом прикольно, сам тоже делал такое на работе. 

мм, а не покажешь, что получилось? smile


--------------------
PM MAIL WWW ICQ   Вверх
alex77
Дата 14.5.2007, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


жывтоне чочо
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 29.9.2006
Где: Екатеринбург

Репутация: нет
Всего: нет



Цитата(Alx @  14.5.2007,  12:44 Найти цитируемый пост)
это только в этом месте и только в Эксплорере

я так то в FF 2.0.3 смотрел.


Цитата(Alx @  14.5.2007,  12:44 Найти цитируемый пост)
а как иначе? помоему это логично.. 

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

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

Пасматреть тут можно http://video.sky.ru/combo.php

п.с. кстати памучийте, может баг обнаружите, буду благодарен )


Это сообщение отредактировал(а) alex77 - 14.5.2007, 13:48
PM MAIL ICQ   Вверх
Alx
Дата 14.5.2007, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
Селекты лезут один под другой.

исправлено. вроде  smile 

Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
Если выбран первый пункт, то при наведении мыши сразу на следующий пункт, подсвечиваются синим и тот и тот. 

"исправлено" (только при выключенном мультивыборе)

Цитата(alex77 @  14.5.2007,  06:11 Найти цитируемый пост)
Не работают клавиши pageUp, pageDown, home, end.

home и end сделал, на page* забил smile лень)

а вообще у тебя конечно немного другой скрипт smile цель другая, наверно)
у меня-то главным было - ajax-функции и удобное создание, настройка, стилизование, понятное для всех. лишь бы хоть html и сss знать.
автоподстановка, мультивыбор и все остальное, это как доп. фичи  smile 


--------------------
PM MAIL WWW ICQ   Вверх
Alx
Дата 15.5.2007, 13:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



AJAX-функции теперь работают во всех браузерах, кроме Opera 8.

кто может потестить в IE 5,7, Safari и Konq, буду благодарен.


--------------------
PM MAIL WWW ICQ   Вверх
Alx
Дата 21.6.2007, 16:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



версия 2.0, пока beta - http://alx.vingrad.ru/fwc

главное нововведение : теперь можно создавать комбобокс всего одной строкой (JS или PHP метод FWC.newSmartSelect()), который возвращает HTML-код. теперь не обязательно использовать XML: список пунктов, а также все необходимые настройки и атрибуты передаются в формате JSON в двух параметрах этого метода.

также оптимизировал AJAX функции, отказалася от JsHttpRequest в пользу Prototype.Ajax и добавил возможность также подгрузки не только XML, но и JSON.

ну и остальное, всего понемногу.

кх.. хоть кто-ниубдь что-нибудь скажет? smile 

Это сообщение отредактировал(а) Alx - 21.6.2007, 16:07


--------------------
PM MAIL WWW ICQ   Вверх
szz
Дата 10.7.2007, 12:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1289
Регистрация: 31.5.2005
Где: Moscow, Jerusalem

Репутация: нет
Всего: 33



Возвращася обратно c Prototype.Ajax в JsHttpRequest, а то прототиповский почему-то не показвает ошибки в onSuccess функции, а посто перестает выполнять скрипт. И в FF и в IE.

И еще бы я посоветовал оставить только JSON и избавиться от громоздкого XML  smile 


--------------------
PM   Вверх
Alx
Дата 10.7.2007, 17:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Цитата(szz @  10.7.2007,  12:24 Найти цитируемый пост)
Возвращася обратно c Prototype.Ajax в JsHttpRequest, а то прототиповский почему-то не показвает ошибки в onSuccess функции, а посто перестает выполнять скрипт. И в FF и в IE.

там все максимально автоматизировано, ошибка может быть только одна: неправильное составление XML-кода или JSON-строки, передающейся с сервера. достаточно просто быть внимательным, всё остальное сделается само. переход на громоздский JsHttpRequest себя не оправдает.
а если все таки хочется использовать JsHttpRequest вместо встроенной loadOptions_PHP (и loadOptions_JS), можно просто передавать какой угодно XML/JSON первым параметром прямо во внутреннюю функцию appendOptions(). например так:
Код

mySelect.appendOptions('[["Option 1"],["Option 2"],["Option 3"]]');


Цитата(szz @  10.7.2007,  12:24 Найти цитируемый пост)
И еще бы я посоветовал оставить только JSON и избавиться от громоздкого XML

зачем убирать? разве это кому то мешает? smile
у XML больше плюсов: он нагляднее, его легче редактировать, он проще для понимания новичкам, знающим HTML, и, самое главное, только через XML-файл можно использовать возможность HTML-форматирования внутри списка. JSON же удобнее использовать для AJAX-подгрузки или для создания небольших стилизованных списков, без особых HTML-наворотов.

кроме того скрипт все равно строит меню на основе XSL-верстки, а следовательно даже при использовании пользователем JSON, он перегоняет его в XML формат сперва, а затем пропускает через  XSLT.


хотелось бы услышать общее впечателение от скрипта, а также какие реальные баги были обнаружены, и что бы выпосоветовали добавить. 


--------------------
PM MAIL WWW ICQ   Вверх
szz
Дата 10.7.2007, 18:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1289
Регистрация: 31.5.2005
Где: Moscow, Jerusalem

Репутация: нет
Всего: 33



Я бы пооветовал сделать не только один селект, а целый набор виджетов - кнопок, текст-инпутов и т.д. чекбоксов, чтобы их можно было бы красиво оформлять по 9-ячейной матрице, лучше всего исходник - фотошоповский psd, деленный слайсами (впрочем, ты наверное так и делаешь, да?). Вот тогда бы я действительно использовал бы твое творение (просто сам щас такое пишу smile  ). А один селект - маловато! smile

Но реально впечатляет твой селект, хорош. Малюсенький недочетик - при экспанде выезжает как-то криво - сверху чтоли, даже не разберешь smile . Лучше уж пусть просто появляется.


--------------------
PM   Вверх
szz
Дата 10.7.2007, 18:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1289
Регистрация: 31.5.2005
Где: Moscow, Jerusalem

Репутация: нет
Всего: 33



А, еще касательно сайта...
При переходе меж страницами, в урле появляется #path , это хорошо. А почему при нажатии Back меня не возвращает на предыдущую страницу? Это плохо smile


--------------------
PM   Вверх
Alx
Дата 10.7.2007, 23:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Цитата(szz @  10.7.2007,  18:06 Найти цитируемый пост)
Я бы пооветовал сделать не только один селект, а целый набор виджетов - кнопок, текст-инпутов и т.д. чекбоксов,

а цель какая? только скины? 3 встроенных скина это 5% возможностей моего селекта)

Цитата(szz @  10.7.2007,  18:06 Найти цитируемый пост)
чтобы их можно было бы красиво оформлять по 9-ячейной матрице, лучше всего исходник - фотошоповский psd, деленный слайсами (впрочем, ты наверное так и делаешь, да?).

воот ниииче не понял) у меня даже фотошопа нет) объясни про все эти слайсы и все такое smile

Цитата(szz @  10.7.2007,  18:06 Найти цитируемый пост)
А один селект - маловато!

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

пока аналогичных невоплощенных идей нет..)

Добавлено через 1 минуту и 10 секунд
Цитата(szz @  10.7.2007,  18:21 Найти цитируемый пост)
А, еще касательно сайта...
При переходе меж страницами, в урле появляется #path , это хорошо. А почему при нажатии Back меня не возвращает на предыдущую страницу? Это плохо 

да ну, я так и не понял, можно это кроссбраузерно сделать или нет, а с программными кнопками решил не заморачиваться..)
тем более меню одноуровневое, только разделы в документации есть, но и там всегда smartselect-менюшка перед глазами smile

Добавлено через 3 минуты и 50 секунд
Цитата(szz @  10.7.2007,  18:06 Найти цитируемый пост)
Но реально впечатляет твой селект, хорош. 

спасибо, я уж думал никого не впечатлит smile)

Цитата(szz @  10.7.2007,  18:06 Найти цитируемый пост)
Малюсенький недочетик - при экспанде выезжает как-то криво - сверху чтоли, даже не разберешь smile . Лучше уж пусть просто появляется. 

да, есть такой баг. это только в Firefox. все никак руки не доходят пофиксить, там довольно солидный дебаг получается...) если раздражает, пока можно просто отключить анимированное раскрытие, задав атрибут showspeed="0".

 smile 


--------------------
PM MAIL WWW ICQ   Вверх
Alx
Дата 17.7.2007, 00:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



новая версия! [2.5]
добавлено много новых возможностей, например создание простых текстовых полей с автоподстановкой с сервера (аналог Google Suggest). пример тут: http://alx.vingrad.ru/fwc/ru/smartselect#doc-autofill


--------------------
PM MAIL WWW ICQ   Вверх
Alx
Дата 17.7.2007, 00:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78



Цитата(E-Mail)

Здравствуйте я в своей работе использую smartselect но возникла одна проблема когда список завалил за 600 позиций браузер просто виснет при обработке не могли бы вы подсказать как сделать чтобы при вводе текста поис не производился мгновенно, а положем с интервалом в 3 секунды, тоесть пользователь вводит текст и поле того как он ввел ждем 3 секунды и только потом начинаем искать.
Извените за наглость просто в яве я дуб дубом.
С уважением Никита


Итак, сперва надо разобраться почему виснет браузер (кстати, какой)? и в какой момент он виснет? при загрузке или только в момент автоподстановки? например вот тут - http://turbaza.ru/test/ при выборе страны Италия, загружается около 1500 отелей и никаких подвисаний, за исключением небольших тормозов. единственной возможной причиной подвисания при большом количестве пунктов может быть использование вложенного HTML. об этом посмотрите тут - http://alx.vingrad.ru/fwc/ru/smartselect#doc-skindesign

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

ontype="delayFill(id_списка);return false;"

и создайте такую JavaScript функцию:
Код

<script>
function delayFill(ss)
{   var delay = 3; // delay time in seconds
    window[ss+'_delay'] = new Date().getTime();
    setTimeout(function() {if(((new Date().getTime()) - window[ss+'_delay'])>=delay*1000) ss.titleKeyUp();},delay*1000);
}
</script>

если вы хотите задержку не после того, как юзер что-то ввел, а с момента как он начал вводить (что чуть больше может показаться полезным), функция должна быть такой:
Код

<script>
function delayFill(ss)
{   var delay = 3; // delay time in seconds
    setTimeout(function() {ss.titleKeyUp();},delay*1000);
}
</script>


однако лучше делать ограничение не по времени, а по количеству введенных символов. для этого существует специальный атрибут. просто добавьте fillstart="4" и подстановка начнется только тогда, когда юзер введет 4 или более символов.

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

Это сообщение отредактировал(а) Alx - 17.7.2007, 00:59


--------------------
PM MAIL WWW ICQ   Вверх
rcdimon
Дата 18.7.2007, 13:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2



Цитата

Селекты лезут один под другой.

исправлено. вроде


Скажи пожалуйста как ты это исправил ) Я тут пишу одну штуку и тоже Select'ы почему-то лезут наверх.. z-index не помогает. 

ЗЫ Сорри за офтоп )
PM MAIL ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.3403 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.