JQuery UI Практические упражнения, практика, решение - Фундаментальный-I

jQuery UI Fundamental - I упражнения [50 упражнений с решением]

1. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и активируйте второй вариант. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "аккордеон">
<H3> JQuery </ h3>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h3> Пользовательский интерфейс jQuery </ h3>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h3> jQuiry Mobile </ h3>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

2. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите опцию анимации. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "аккордеон">
<H3> JQuery </ h3>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h3> Пользовательский интерфейс jQuery </ h3>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h3> jQuiry Mobile </ h3>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

3. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите складную опцию. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "аккордеон">
<H3> JQuery </ h3>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h3> Пользовательский интерфейс jQuery </ h3>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h3> jQuiry Mobile </ h3>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

4. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите отключенную опцию. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "аккордеон">
<H3> JQuery </ h3>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h3> Пользовательский интерфейс jQuery </ h3>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h3> jQuiry Mobile </ h3>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

5. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите событие. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "аккордеон">
<H3> JQuery </ h3>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h3> Пользовательский интерфейс jQuery </ h3>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h3> jQuiry Mobile </ h3>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

6. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите опцию заголовка. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "divid">
<H2> JQuery </ h2>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h2> Пользовательский интерфейс jQuery </ h2>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h2> jQuiry Mobile </ h2>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

7. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите высоту. Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "divid">
<H2> JQuery </ h2>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h2> Пользовательский интерфейс jQuery </ h2>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h2> jQuiry Mobile </ h2>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

8. Преобразуйте три заголовка и панели контента в аккордеон. Инициализируйте аккордеон и укажите значок (+, -). Перейти к редактору

Примечание: Аккордеон - отображает складные панели контента для представления информации в ограниченном пространстве.

 <Тело>
<div id = "divid">
<H3> JQuery </ h3>
<div> jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript. </ div>
<h3> Пользовательский интерфейс jQuery </ h3>
<div> jQuery UI - это курируемый набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе JavaScript-библиотеки jQuery. </ DIV>
<h3> jQuiry Mobile </ h3>
<div> jQuery Mobile - это система интерфейса пользователя на основе HTML5, предназначенная для создания адаптивных веб-сайтов и приложений, доступных на всех смартфонах, планшетах и настольных устройствах </ div>
</ DIV>
</ Body>

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

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

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

10. Создайте предварительно заполненный список значений и задержка в миллисекундах между нажатием клавиши и выполнением поиска. Перейти к редактору

Вы можете увидеть выход отсюда

Нажмите меня, чтобы увидеть решение

11. Создайте предварительно заполненный список значений и отключите автозаполнение. Перейти к редактору

Нажмите меня, чтобы увидеть решение

12. Создайте предварительно заполненный список значений и фиксированное минимальное количество символов в два, которые пользователь должен ввести перед выполнением поиска. Перейти к редактору

Нажмите меня, чтобы увидеть решение

13. Создайте предварительно заполненный список значений и инициализируйте положение автозаполнения справа вверху и справа внизу. Перейти к редактору

Нажмите меня, чтобы увидеть решение

14. Инициализируйте автозаполнение и укажите опцию источника. Перейти к редактору

Нажмите меня, чтобы увидеть решение

15. Инициализируйте кнопку и укажите опцию отключения. Перейти к редактору

Нажмите меня, чтобы увидеть решение

16. Инициализируйте кнопку и укажите значок на кнопке. Перейти к редактору

Нажмите меня, чтобы увидеть решение

17. Инициализируйте кнопку и не показывайте метку. Перейти к редактору

Нажмите меня, чтобы увидеть решение

18. Инициализируйте набор кнопок и укажите отключенную опцию true. Перейти к редактору

Нажмите меня, чтобы увидеть решение

19. Создайте простой JQuery UI Datepicker. Теперь выберите дату и сохраните ее в текстовом поле. Перейти к редактору

Нажмите меня, чтобы увидеть решение

20. Инициализируйте указатель даты. Теперь выберите дату из указателя даты в текстовое поле и обновите дату в другом текстовом поле. Перейти к редактору

Нажмите меня, чтобы увидеть решение

21. Создайте простой JQuery UI Datepicker. Показать необходимый формат даты после поля даты. Перейти к редактору

Нажмите меня, чтобы увидеть решение

22. Инициализируйте указатель даты и автоматически измените размер поля даты. Перейти к редактору

Нажмите меня, чтобы увидеть решение

23. Инициализируйте указатель даты и отобразите кнопку Изображение. Перейти к редактору

Нажмите меня, чтобы увидеть решение

24. Инициализируйте указатель даты и покажите текст кнопки. Перейти к редактору

Нажмите меня, чтобы увидеть решение

25. Инициализируйте указатель даты и рассчитайте неделю года. Используйте стандартную реализацию ISO 8601. Перейти к редактору

Нажмите меня, чтобы увидеть решение

26. Инициализируйте указатель даты и отобразите месяц как выпадающий список вместо текста. Перейти к редактору

Нажмите меня, чтобы увидеть решение

27. Инициализируйте средство выбора даты и отобразите год в виде раскрывающегося списка вместо текста. Перейти к редактору

Нажмите меня, чтобы увидеть решение

28. Инициализируйте указатель даты и укажите формат даты. Перейти к редактору

Нажмите меня, чтобы увидеть решение

29. Инициализируйте указатель даты и укажите названия дней на французском языке. Перейти к редактору

Нажмите меня, чтобы увидеть решение

30. Инициализируйте указатель даты с минимальными названиями дней, начиная с воскресенья. Перейти к редактору

Нажмите меня, чтобы увидеть решение

31. Инициализируйте указатель даты и быстро установите продолжительность. Перейти к редактору

Нажмите меня, чтобы увидеть решение

32. Инициализируйте указатель даты и установите первый день недели как понедельник. Перейти к редактору

Примечание: воскресенье 0, понедельник 1 и т. Д.

Нажмите меня, чтобы увидеть решение

33. Инициализируйте указатель даты и начертите текущий язык справа налево. Перейти к редактору

Нажмите меня, чтобы увидеть решение

34. Инициализируйте указатель даты и отобразите количество дней, которое прошло через месяц. Перейти к редактору

Нажмите меня, чтобы увидеть решение

35. Инициализируйте указатель даты и отобразите количество дней с текущей даты. Перейти к редактору

Нажмите меня, чтобы увидеть решение

36. Инициализируйте указатель даты и укажите названия месяцев. Перейти к редактору

Нажмите меня, чтобы увидеть решение

37. Инициализируйте указатель даты и укажите названия месяцев в краткой форме. Перейти к редактору

Нажмите меня, чтобы увидеть решение

38. Инициализируйте указатель даты и измените текст для отображения ссылки на следующий месяц. Перейти к редактору

Нажмите меня, чтобы увидеть решение

39. Инициализируйте указатель даты, установите две строки и отобразите два месяца в одной строке. Перейти к редактору

Нажмите меня, чтобы увидеть решение

40. Инициализируйте указатель даты и измените текст для отображения ссылки на предыдущий месяц. Перейти к редактору

Нажмите меня, чтобы увидеть решение

41. Инициализируйте указатель даты и отобразите даты в других месяцах в начале или конце текущего месяца. Перейти к редактору

Нажмите меня, чтобы увидеть решение

42. Инициализируйте средство выбора даты и создайте анимацию, чтобы показать и скрыть средство выбора даты. Перейти к редактору

Нажмите меня, чтобы увидеть решение

43. Инициализируйте указатель даты и отобразите панель кнопок под календарем. Перейти к редактору

Примечание. Панель кнопок содержит две кнопки: кнопку «Сегодня», которая связана с текущим днем, и кнопку «Готово», закрывающую средство выбора даты. Текст кнопок можно настроить с помощью параметров currentText и closeText соответственно.

Нажмите меня, чтобы увидеть решение

44. Инициализируйте указатель даты и отобразите два месяца и определите первую позицию для отображения текущего месяца. Перейдите в редактор

Нажмите меня, чтобы увидеть решение

45. Инициализируйте указатель даты и укажите в заголовке месяц до или после года. Перейти к редактору

Нажмите меня, чтобы увидеть решение

46. Инициализируйте указатель даты, и он появится при нажатии кнопки. Перейти к редактору

Нажмите меня, чтобы увидеть решение

47. Инициализируйте указатель даты и отображайте даты в других месяцах. Перейти к редактору

Нажмите меня, чтобы увидеть решение

48. Инициализируйте указатель даты и добавьте столбец, чтобы показать неделю года. Перейти к редактору

Нажмите меня, чтобы увидеть решение

49. Инициализируйте средство выбора даты двумя месяцами для перемещения при переходе по предыдущей или следующей ссылке. Перейти к редактору

Нажмите меня, чтобы увидеть решение

50. Инициализируйте указатель даты и укажите текст для отображения заголовка столбца недели года. Перейти к редактору

Нажмите меня, чтобы увидеть решение

Еще не все !

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

См. Jquery-ui-common-editor Pen от w3resource ( @ w3resource ) в CodePen .