Направите хармонику само за ХТМЛ да бисте сакрили и открили садржај (без ЈС или ЦСС-а)

in Ресурси и алати

Да ли сте знали да постоји изворно ХТМЛ5 решење за врло лако креирање дугмета за читање више/мање хармонике да бисте сакрили и открили садржај помоћу БЕЗ ЈаваСцрипта или ЦСС-а. Читајте даље да бисте сазнали како.

хтмл5 хармоника

ХТМЛ5 ознаке су званично а елемент виџета за откривање, Али упарен са ХТМЛ5 ознаке ће вам дати а чиста ХТМЛ хармоника.

Смисао нема ЈС ИЛИ ЦСС је потребно. Како је то кул!

Ево примера који приказује једноставан елемент са а .

Ево кода:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

а ево како ће то изгледати:

Опширније

Ово је изворна ХТМЛ5 хармоника за скривање и откривање садржаја. Прилично кул, зар не?

Како то функционише?  таг служи као омотач за елемент који се може отворити или затворити. Корисник мора да кликне на ознаку која је таг за отварање или затварање елемента.

Шта је са стилом и понашањем?

Стилови

Можете да примените ЦСС стил да бисте прилагодили изглед оквира за текст за откривање. Доле даје стил интерфејса са картицама:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

Подразумевано, курсор се појављује као стрелица, али ако желите да буде а показујући руком уместо тога онда користите ово:

details {
cursor: pointer;
}

понашања

Постављање понашања је веома ограничено, заиста постоји само једна ствар коју можете да урадите, а то је да направите откривени текст отвори подразумевано.

Да бисте покренули хармонику у њеном отвореном стању, додајте Боолеан часови приписати таг:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Опширније

Ово је изворна ХТМЛ5 хармоника за скривање и откривање садржаја. Прилично кул, зар не?

Које атрибуте могу да користим?

Доњи атрибути се могу користити за таг:

атрибутвреднострезиме
часови часови Подразумевано је није отворен.
id  вредностПружа јединствени идентификатор.
класа  имена класаЕлементу додељује имена класа.
стил  ЦСС-вредностиДодељује ЦСС стилове елементу.

Дакле, која су ограничења? Увек постоји квака, зар не?

Нема подршке за Интернет Екплорер

Ова хармоника само за ХТМЛ5 неће радити ни у једној верзији Интернет Екплорер-а. Ако морате да подржавате ИЕ11, мораћете да користите друго резервно решење користећи ЈКуери. Сви остали претраживачи подржавају .

Нема прилагођених анимација или прелаза

Иако можете да мењате и стилизујете изглед (као што је приказано изнад), нећете моћи да урадите анимације или прелазе који откривају текст. Ако то желите да урадите, биће вам потребно још једно ЦСС/ЈСС решење за хармонику.

Читачи екрана и приступачност

Ово је домаће ХТМЛКСНУМКС и *требало би да буде* доступан, али је откривено да читач екрана не најављује увек тачно откривени текст.

Референце:

О аутору

Матт Ахлгрен

Матхиас Ахлгрен је извршни директор и оснивач Website Rating, управљајући глобалним тимом уредника и писаца. Магистрирао је информационе науке и менаџмент. Његова каријера се окренула ка СЕО-у након раних искустава у развоју веба током универзитета. Са преко 15 година у СЕО-у, дигиталном маркетингу и веб програмерима. Његов фокус такође укључује безбедност веб локација, о чему сведочи сертификат из сајбер безбедности. Ова разноврсна стручност подупире његово лидерство у Website Rating.

Početna » Ресурси и алати » Направите хармонику само за ХТМЛ да бисте сакрили и открили садржај (без ЈС или ЦСС-а)

Будите информисани! Придружите се нашем билтену
Претплатите се сада и добијте бесплатан приступ водичима, алатима и ресурсима само за претплатнике.
Можете отказати претплату у било ком тренутку. Ваши подаци су безбедни.
Будите информисани! Придружите се нашем билтену
Претплатите се сада и добијте бесплатан приступ водичима, алатима и ресурсима само за претплатнике.
Можете отказати претплату у било ком тренутку. Ваши подаци су безбедни.
Учешће у...