JQuery Мобильный складной контент
-
10-10-2019 - |
Вопрос
Я смотрел на использование http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html Для сайта я строю.
Есть ли способ изменить значки, используемые для расширенных и разрушенных разделов. В Mooment я не вижу способа изменить его с + и - значков.
Клиент предпочел бы стрелы или разные значки.
Спасибо, Сиан
Решение
Есть много способов сделать это. Вы можете сделать это в JavaScript, но лучше просто немного изменить CSS.
Вы можете специализироваться на CSS для .Ui-ICon-Plus/Minus, когда они вложены внутри.
До:
/*arrows*/
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-icon-arrow-d { background-position: -216px 0; }
После: (Пример с использованием стрелок правого и вниз)
/*arrows*/
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }
Таким образом, это не изменит общий образ для кнопки Plus/Minus, исключенной для этого особого случая!
РЕДАКТИРОВАТЬ: Спасибо J0TTE за обновление этого кода до jQuery Mobile Version 1.0:
/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }
Другие советы
Я обновил код Эрика Ганьона в соответствии с JQUERY Mobile 1.0
/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }