JQuery Мобильный складной контент

StackOverflow https://stackoverflow.com/questions/4663459

  •  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; }
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top