JQuery Mobile Разборный контент - PullRequest
Новая
       5

JQuery Mobile Разборный контент

8 голосов
/ 12 января 2011

Я искал использование http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html для сайта, который я строю.

Есть ли способ изменить иконки, используемые для развернутых и свернутых разделов.На данный момент я не вижу способа изменить его на значки + и -.

Клиент предпочел бы стрелки или другие значки.

Спасибо, Cian

Ответы [ 2 ]

13 голосов
/ 12 января 2011

Есть много способов сделать это.Вы можете сделать это в Javascript, но лучше просто немного изменить CSS.

Вы можете специализировать CSS для .ui-icon-plus / minus, когда они вложены в .ui-collapsible-contains, чтобывыглядят так же, как и другие значки:

До: 

/*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; }

Таким образом, это не изменит общий вид кнопки «плюс / минус», исключаемой для этого особого случая!

РЕДАКТИРОВАТЬ: Спасибо J0ttE за обновление этого кода до 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; }
3 голосов
/ 14 декабря 2011

Я обновил код Эрика Ганьона, чтобы он соответствовал 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; }
...