Что нового в jQuery UI 1.8

Чтобы автозаполнение работало, вам нужно сослаться на следующие файлы JavaScript и CSS на своей странице:

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="../../jquery-1.5.1.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> 

Источником данных для этого будет массив, заполненный языками программирования. Массив будет установлен как источник для автозаполнения:

 $(function () { Autocomplete.Init(); }); var Autocomplete = function () { var languages = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; return { Init: function () { $("#tags").autocomplete({ source: languages }); } } } (); 

Рисунок 2, «Результаты автозаполнения» отображает конечный результат.

Рисунок 2. Результаты автозаполнения

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

disabled — позволяет включить или отключить автозаполнение:

 $("#tags").autocomplete({ source: languages, disabled: true }); 

delay — задержка в миллисекундах, после которой автозаполнение ожидает нажатия клавиши, прежде чем активировать себя:

 $("#tags").autocomplete({ source: languages, delay: 3000 }); 

minLength — минимальное количество символов, которое пользователь должен набрать, прежде чем автозаполнение активирует себя:

 $("#tags").autocomplete({ source: languages, minLength: 2 }); 

source — source данных для автозаполнения. Источники данных включают URL-адрес, который возвращает данные JSON, локальный объект или данные JSON, возвращаемые через Ajax. В следующих примерах используется бесплатная база данных GeoNames для удаленного возврата результатов по городу:

 $("#tags").autocomplete({ minLength: 2, source: function (request, response) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 5, name_startsWith: request.term }, success: function (data) { response($.map(data.geonames, function (item) { return { label: item.name + (item.adminName1 ? ", " +                        item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); } 

Виджет кнопки

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

Чтобы работал виджет «Кнопка», вам необходимо сослаться на следующие файлы JavaScript и CSS на своей странице:

 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="../../jquery-1.5.1.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> 

 var anchor = $("a").button(); anchor.click(function () { alert('Hello'); }); <a href="#">My Anchor</a> 

 $("#radio").buttonset(); <div id="radio"> <input type="radio" id="radio1" name="radio" /><label for="radio1">First</label> <input type="radio" id="radio2" name="radio" /><label for="radio2">Second</label> <input type="radio" id="radio3" name="radio" /><label for="radio3">Third</label> </div> 

 $("#format").buttonset(); <div id="format"> <input type="checkbox" id="check1" /><label for="check1">One</label> <input type="checkbox" id="check2" /><label for="check2">Two</label> <input type="checkbox" id="check3" /><label for="check3">Three</label> </div> 

 $("#format input:checked").length;