Как сделать слайдер темы с помощью jQuery Mobile?

Опубликовано: 22 Декабря, 2021

jQuery Mobile - это веб-технология, используемая для создания адаптивного контента, доступного на всех смартфонах, планшетах и настольных компьютерах. В этой статье мы создадим слайдер темы с помощью jQuery Mobile.

Подход: добавьте скрипты jQuery Mobile, необходимые для вашего проекта.

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Пример: мы создадим базовый слайдер с помощью jQuery Mobile. Ползунок - это тип ввода для вставки данных с помощью ползунка. Мы используем атрибут type = ”range” с элементом <input> для создания слайдера. Также используйте атрибут data-track-theme = ”b” и data-theme = ”b”, чтобы установить тему.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < link rel = "stylesheet" href =
 " http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css " />
 
    < script src = " http://code.jquery.com/jquery-1.11.1.min.js " >
    </ script >
 
    < script src =
 " http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js " >
    </ script >
 </ head >
 
< body >
    < center >
        < h1 >GeeksforGeeks</ h1 >
 
        < h4 >
            Design a Theme Slider
            using jQuery Mobile
        </ h4 >
 
        < form style = "width: 50%;" >
            < label for = "slider" >
                Theme Slider:
            </ label >
 
            < input type = "range" name = "slider"
                id = "slider" data-track-theme = "b"
                data-theme = "b" min = "0" max = "100"
                value = "50" >
        </ form >
    </ center >
 </ body >
 
</ html > 

Выход:

JQuery

Как сделать слайдер темы с помощью jQuery Mobile?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ