Szukałem przy użyciu http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html dla witryny, którą buduję.JQuery Mobile Składana zawartość
Czy istnieje sposób zmiany ikon używanych dla rozwiniętych i zwiniętych sekcji. W czasie mrozu nie widzę sposobu na zmianę go z ikon + i -.
Klient wolałby strzały lub inne ikony.
Dzięki, Cian
Istnieje wiele sposobów, aby to zrobić. Możesz to zrobić w JavaScript, ale lepiej po prostu zmienić nieco css.
Można specjalizować css dla .ui-icon-plus/minus, gdy są zagnieżdżone Wewnątrz .ui-składany-zawierać mieć taki sam wygląd jak inne ikony:
Przed:
/*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; }
Po: (przykład stosując prawo i na dół, zamiast strzałki)
/*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; }
Th w ten sposób nie zmieni to ogólnego wyglądu przycisku plus/minus poza tym specjalnym przypadkiem!
EDIT: Dzięki J0ttE do aktualizacji tego kodu jQuery mobilnej wersji 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; }
I uaktualniony kod Erica Gagnon, aby dopasować jQuery Telefony 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; }
Dzięki! Dodam to w odpowiedzi. –
Dzięki, to bardzo pomogło. Spędziłem resztę dnia, aktualizując css, aby usunąć cienie i granice na tej samej ikonie, ale w końcu to zadziałało. – CianM
Cieszę się, że mogę pomóc! –
Potrzebowałem tego .. mam som rep! – Phliplip