Jump to content
  • 0

Разметка ui tabs - в чем смысл?


Zverushka
 Share

Question

В моем макете создалась нестандартная разметка. Я пересмотрела самые популярные плагины вкладок и везде предлагалась такая разметка:

<div id="tabs">  <ul>    <li><a href="#fragment-1">One</a></li>    <li><a href="#fragment-2">Two</a></li>    <li><a href="#fragment-3">Three</a></li>  </ul>  <div id="fragment-1">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div id="fragment-2">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div id="fragment-3">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div></div>

Я вот смотрю и думаю - а в чем смысл? Плагин оперирует уникальным идентификатором, но зачем-то привязывает свое действие к родителю.

В итоге мне пришлось писать плагин вручную - ничего сложного. Я просто не понимаю - зачем они так сделали?

Edited by Zverushka
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

потому что в 90% случаев такая разметка подходит.

 

хотя елси я не ошибаюсь, то тот же UI способен отработать:

 

<div id="tabs">  <ul>    <li><a href="#fragment-1">One</a></li>    <li><a href="#fragment-2">Two</a></li>    <li><a href="#fragment-3">Three</a></li>  </ul>  <div id="fragment-1">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div id="fragment-2">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div id="fragment-3">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div></div>

а это говорит о том что не важно где находится контентная часть.

Link to comment
Share on other sites

  • 0
В моем макете создалась нестандартная разметка.

как создала, так и "создалась" :)

 

Плагин оперирует уникальным идентификатором, но зачем-то привязывает свое действие к родителю.

модули 

Link to comment
Share on other sites

  • 0

Ну скажем так - вкладки идут в блоке оранжевого цвета на всю ширину экрана. А сам контент вкладки - занимает весь оставшийся экран (по сути целый сайт). - мне нужно было наворочать еще дополнительные слои и играть с цветом заднего фона, чтобы он не не стал оранжевым лишь для того, чтобы плагин, завязанный на разметке - заработал.

Что модули?

Edited by Zverushka
Link to comment
Share on other sites

  • 0
Что модули?

я могу из одного места в другое переложить табы и они должны работать, т.к. это своего рода модуль/компонент. Я могу скопировать его еще раз и все должно работать.

 

опять таки ангуляр. Мне он не нравится (плагин), но в большинстве случаев хватает https://github.com/nervgh/angular-tabs

Edited by nerv
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy