jQuery Blox

25/May/2009 347

jQuery Blox in CSSLab.cl

Una nueva manera de mostrar más información / A new way to show more info

Selecciona tu idioma / Select your language:

ES

Con jQuery Blox puedes desplegar información de una manera diferente, y con una fácil y rápida configuración. Basta con que armes tu HTML siguiendo un simple patrón de bloques, y definirle al plugin los nombres de los elementos que estás construyendo (o mantener los pre-configurados); Blox se encarga de crear una mayor interacción de tu información hacia el usuario.

Ver Demo 1

Blox ofrece 3 estados:

  1. Normal: cuando el usuario no interviene con la caja HTML que contiene los bloques.
  2. Hover: cuando el mouse está sobre alguna de las cajas, por defecto Blox hace las otras semi-transparentes.
  3. Click: cuando se hace click a alguna caja, ésta se amplía animándose hasta cubrir el total de la caja contenedora por sobre las demás y muestra la información anexa a esa caja.

jQuery Blox: 3 states of interaction

El uso de Blox no debería limitar la creatividad de quien la vaya a usar, pero es necesario conocer y mantener ciertas reglas para su correcto y total funcionamiento, principalmente de estructura HTML y de estilos CSS:

Estructura HTML

Primero necesitas una caja que contenga las demás cajas; por defecto Blox la define con el id blox. Esta caja contenedora #blox es la que soportará a las demás cajas, las que Blox denomina por defecto con una class blox_content. Esta caja .blox_content es la que tiene 2 importantes funciones: soporta al contenido que estará oculto en el primer estado, y a una tercera caja llamada .blox_box que es la gatillante de toda la interacción de Blox.

El HTML básicamente debe ser como la siguiente estructura:

<div id="blox"> /* un contenedor */
<div class="blox_content" id="box_1"> /* varias cajas de contenido */
<div class="blox_box"> /* caja que soporta el click */
Box 1
</div>
Contenido desplegado cuando Box 1 es clickeado.<a href="#" class="blox_close">Cerrar Bloque</a> /* contenido oculto pero que se muestra al click en la caja anterior */
</div>
/* otras cajas con el mismo patron */
</div>

Estilo CSS

La magia está en el uso de posición absoluta para que las cajas se muevan con libertad y fluidez. Para que las cajas se comporten así, deben tener un estilo específico. La que contiene a todas las cajas, #blox, debe tener un alto fijo, un ancho fijo y posición relativa ya que será quien soporte a las cajas menores .blox_content, las que tienen posición absoluta, alto fijo y ancho fijo. Cada una de las cajas .blox_content, deberían tener ubicaciones diferentes mediante id único, respecto a #blox utilizando las propiedades left y top.

La tercera caja .blox_box también debería tener un ancho y alto fijo, seguramente el mismo que su caja padre .blox_content, y para el resto de los elementos tienes libertad total de hacer lo que quieras con su estilo.

Finalmente, el CSS básico es el siguiente:

#blox {
width: 400px;
height: 400px;
position: relative;
}
.blox_content {
width: 200px;
height: 400px;
position: absolute;
}
#box_1 {
top: 0;
left: 0;
}
#box_2 {
top: 0;
left: 200px;
}
/* asi con cada una de las otras cajas */
.blox_box {
width: 200px;
height: 400px;
}

jQuery Blox: box structure

Configuración

Por defecto Blox viene pre-configurado de fábrica, y su programación permite que alteres los siguientes parámetros:

  • container: id de la caja contenedora, por defecto #blox
  • content: class de las cajas con contenido, por defecto .blox_content
  • box: class de la caja que inicia la secuencia para mostrar el contenido, por defecto .blox_box
  • close: class del link o botón que cierra caja caja desplegada, por defecto .blox_close
  • transparency: [yes/no]¿requieres transparencia? por defecto yes
  • fadein: nivel de transparencia (de 0 a1) de las cajas al mouseover, por defecto 0.2
  • fadeout: nivel de transparencia (de 0 a1) de las cajas al mouseout, por defecto 1
  • animation: [yes/no]¿requieres animación? por defecto yes
  • timein: tiempo en ms en que cada caja se demora en abrir, por defecto 100
  • timeout: tiempo en ms en que cada caja se demora en cerrar, por defecto 200
  • direction: [lefty/righty] hacia donde se abrirá cada caja, por defecto a la izquierda lefty

Para utilizarlo con estos valores por defecto, sólo debes seguir 2 pasos básicos:

  1. Agregar tu librería de jQuery favorita y este humilde plugin:
    <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="jqueryblox-v0.9.js" type="text/javascript"></script>
  2. Activarlo:
    <script type="text/javascript">
    $(function(){
    $().blox();
    });
    </script>

Si quieres configurarlo según tus necesidades, basta ir modificando los parámetros como te sean necesarios:

<script type="text/javascript">
$(function(){
$().blox({
container: '#contenedor_blox',
close: '.boton_cierra',
direction: 'righty',
fadein: 0.6
});
});
</script>

Ver Demo 2

Ver Demo 3

EN

With jQuery Blox you can display information on a whole new way with a quick and easy setup. Just write yout HTML in a simple block pattern, and tell the plugin your element names (or maintain the pre-configured ones); Blox will display your information with a new interaction for your user.

See Demo 1

Blox offers 3 states:

  1. Normal: when the user does not interfere with the box containing the HTML blocks.
  2. Hover: when the mouse is over one of the boxes, by default Blox makes the others semi-transparent.
  3. Click: when you click on any box, it will animate its expansion to cover the total of the container above all other blocks, to show the information attached to that block.

jQuery Blox: 3 states of interaction

Using Blox should not limit the creativity of who will use it, but it needs to maintain certain rules for their correct and full operation, mainly HTML strucuture and CSS styles:

HTML Structure

First you’ll need a box containing all other boxes, by default Blox calls it with the id blox. This container #blox will support all the blocks which Blox names with the class box_content. This block .box_content have 2 major functions: support the content hidden in the first state, and contains a third block called with the class .blox_box which is the one that fires the Blox interaction, expanding and moving the boxes to display the hidden information.

The HTML should be basically as follows:

<div id="blox"> /* a container */
<div class="blox_content" id="box_1"> /* many content blocks */
<div class="blox_box"> /* box that fires the interaction */
Box 1
</div>
Content displayed when Box 1 is clicked, above Box 2.<a href="#" class="blox_close">Close Box</a> /* hidden content displayed at .blox_box click */
</div>
/* other boxes with the same pattern */
</div>

CSS Style

The magic is in the use of absolutely positioned blocks to move them freely and smoothly For the blocks to behave like we want, they must have a specific style. The box that contains all other blocks #blox must have fixed height and width and relative position to support the smaller boxes named .blox_content which must have fixed height and width as well but absolute positioned. Each one of this boxes .blox_content should have different placements, givven through an unique #id using the properties left and top.

The third box .blox_box should also have a fixed width and height, probably the same as its parent .blox_content. For the rest of the elements you have total freedom to do whatever you want with their style.

Finally, the basic CSS is as follows:

#blox {
width: 400px;
height: 400px;
position: relative;
}
.blox_content {
width: 200px;
height: 400px;
position: absolute;
}
#box_1 {
top: 0;
left: 0;
}
#box_2 {
top: 0;
left: 200px;
}
/* like this for each of other boxes */
.blox_box {
width: 200px;
height: 400px;
}

jQuery Blox: box structure

Configuration

By default, Blox comes preconfigured from the factory, and its programming allows you to alter the following parameters:

  • container: container box id, default to #blox
  • content: class of each content box, default to .blox_content
  • box: class of the box that fires the content display, default to .blox_box
  • close: class for the link (button) that closes the content box, default to .blox_close
  • transparency: [yes/no] do you want transparency on hover? default to yes
  • fadein: transparency level (from 0 to 1) when you mouseover a box, default to 0.2
  • fadeout: transparency level (from 0 to 1) when you mouseout a box, default to 1
  • animation: [yes/no] do you want the boxes to animate? default to yes
  • timein: time in ms that each box takes to display the content, default to 100
  • timeout: time in ms that each box takes to hide the content, default to 200
  • direction: [lefty/righty] which direction each box is opened, default to left lefty

To use it with the default values, just follow this 2 simple steps:

  1. Add your favorite jQuery library and this humble plugin:
    <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="jqueryblox-v0.9.js" type="text/javascript"></script>
  2. Activate it:
    <script type="text/javascript">
    $(function(){
    $().blox();
    });
    </script>

If you want to customize it to suit your needs, just change the necessary parameters:

 <script type="text/javascript">
$(function(){
$().blox({
container: '#my_boxes,
close: '.closeboxes,
direction: 'righty',
fadein: 0.6
});
});
</script>

See Demo 2

See Demo 3

Baja el plugin / Get the plugin

Bajar/Download plugin (.zip 1kb)

Bajar/Download plugin+demos (.zip 220kb)

Blox logo by youfeelme.biz

Comentarios

  1. Qkpjqojb [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  2. pharmaceptica.com [#]

    malaria drug hydroxychloroquine https://www.pharmaceptica.com/

  3. Nqrkrmdx [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  4. Fhbrvmsf [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  5. Zvofvcly [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  6. Oxxjdfxf [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  7. Yrqscwyh [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  8. Qqinkogm [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  9. Fmindtqj [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  10. Xnwarfyo [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  11. Lbfryjqm [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  12. Cholvold [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  13. cialis without a doctor prescription [#]

    generic cialis cialis dosage

  14. prednisolone [#]

    steroid prednisone prednisone steroid

  15. buymodafinilonline [#]

    provigil half life provigil

  16. bactrim dosage [#]

    bactrim for uti Sulfamethoxazole side effects

  17. Tstnvnzi [#]

    https://bit.ly/igra-v-kalmara-4-seriya

  18. Mtqxjqnv [#]

    С любовью для вас девятнадцать с высоким рейтингом сериалов для фанатов дедективов. Метод Михайлова 17 серия все сезоны, все серии. Смотрите по жанру, Сериалы жанра “Ужасы”. Точно также мы выдает перечень каналов Москва-24, HD ТВ Центр, 4K Euronews, прямой эфир Paramount Comedy Россия, трансляция Дом кино.

  19. Vysejmio [#]

    Вот двенадцать рейтинговых сериалов для настоящих фанатов дедективов. Метод Михайлова 17 серия серия 8,12, 1-69 все серии, смотреть онлайн. Смотрите с удовольствием по рейтингу IMDB, Сериалы жанра “Криминал”. Также все мы дает палитру различных каналов 2+2, HD Интер, 4K Первый канал, прямой эфир Украина, трансляция Россия 24.

  20. Xibuvpvb [#]

    Тут девять новых сериалов для фанатов фэнтези. Метод Михайлова 17 серия серия: дата выхода, смотреть онлайн. Сортируйте по рейтингу кинопоиска, Сериалы жанра “Мелодрама”. Также мы помогает реестр телеканалов Дом кино, HD Москва-24, 4K Че, прямой эфир Культура, трансляция Новый канал.

  21. Lhzwyysq [#]

    Снова для Вас пятнадцать самых популярных сериалов для поклонников фэнтези. Метод Михайлова 17 серия серия 1,12, 1-36 все серии, смотреть онлайн. Смотрите с удовольствием по рейтингу, Сериалы жанра “Спорт”. Аналогично здесь мы предоставляет меню каналов CNN, HD Москва-24, 4K Украина, прямой эфир Киномикс, трансляция Культура.

  22. prednisoneforcats [#]

    prednisone for dogs prednison

  23. ivermectin human dosage [#]

    stromectol ЪЇЩ€Щ„ЫЊ http://stromectolforte.com/# stromectol medication ivermectin for humans for sale

  24. Fdwbmtel [#]

    Тут семь самых популярных сериалов для поклонников фантастика. Метод Михайлова 17 серия смотреть онлайн, сезон, сериала. Размещайте по мировому рейтингу, Сериалы жанра “Ужасы”. Помимо прочего здесь мы наш сайт каталог каналов 1+1, HD Канал Disney, 4K Интер, прямой эфир Киносерия, трансляция Пятница.

  25. Lqtzioas [#]

    Опять для вас двенадцать новых сериалов для фанатов дедективов. Метод Михайлова 17 серия серия 1,11, 1-29 все серии, смотреть онлайн. Смотрите с удовольствием по мировому рейтингу, Сериалы жанра “Детектив”. Помимо прочего здесь мы дает перечень каналов Наше новое кино, HD ТВ Центр, 4K НТВ, прямой эфир Киносерия, трансляция СТБ.

  26. Nqlucrew [#]

    Для вас тринадцать с высоким рейтингом сериалов для ценителей романтических комедий. Метод Михайлова 17 серия все серии подряд смотреть в онлайн-кинотеатре. Смотрите с удовольствием по рейтингу, Сериалы жанра “Спорт”. Точно также здесь мы помогает программу телеканалов Россия, HD ТВ Центр, 4K Россия, прямой эфир Канал Disney, трансляция Новый канал.

  27. Qnaenxmc [#]

    Для вас шестнадцать рейтинговых сериалов для настоящих поклонников фэнтези. Метод Михайлова 17 серия все серии подряд, смотреть онлайн. Ищите по дате выхода, Сериалы жанра “Триллер”. Кроме того все мы предоставляет номенклатуру различных каналов Пятница, HD Новый канал, 4K Суббота, прямой эфир 1+1, трансляция Че.

  28. Tjhltvsp [#]

    У нас шестнадцать топовых сериалов для фанатов дедективов. Метод Михайлова 17 серия все серии подряд, смотреть онлайн. Сортируйте по рейтингу кинопоиска, Сериалы жанра “Триллер”. Дополнительно здесь мы всегда готова предоставить номенклатуру различных каналов СТБ, HD Матч ТВ, 4K Paramount Comedy Россия, прямой эфир Москва-24, трансляция Bollywood HD.

  29. Arjijyqc [#]

    Снова для Вас семь самых популярных сериалов для настоящих фанатов дедективов. Метод Михайлова 17 серия дата выхода, новых серий. Находите по рейтингу IMDB, Сериалы жанра “История”. Вдобавок здесь мы выдает реестр телеканалов ПлюсПлюс, HD CNN, 4K СТБ, прямой эфир ТЕТ, трансляция 360°.

  30. Jhgpbzbs [#]

    Тут десять самых популярных сериалов для настоящих фанатов мистики. Метод Михайлова 17 серия на WZCAZWMV ТВ. Смотрите по предпологаемой дате выхода, Сериалы жанра “Фантастика”. Дополнительно тут мы помогает таблицу различных каналов ТЕТ, HD Eurosport 1, 4K Euronews, прямой эфир Первый канал, трансляция НТН.

  31. Yvykfdnj [#]

    Приготовили для Вас семнадцать рейтинговых сериалов для ценителей ужасов. Метод Михайлова 17 серия новый сезон, новые серии. Скачивайте по году, Сериалы в HD. Да и мы вам готов предоставить реестр различных каналов ТНТ, HD Звезда, 4K Киносерия, прямой эфир Bollywood HD, трансляция Матч ТВ.

  32. Zcfaiyoc [#]

    Опять для вас семь рейтинговых сериалов для истинных ценителей мистики. Метод Михайлова 17 серия смотреть онлайн, сезон, сериала. Скачивайте по жанру, Сериалы жанра “Триллер”. Опять же мы представляет таблицу различных каналов Россия, HD Мир, 4K Россия, прямой эфир ICTV, трансляция Россия 24.

  33. Cygsikoo [#]

    У нас девятнадцать самых популярных сериалов для фанатов мистики. Трудные подростки сериал 3 сезон дата выхода, новых серий. Скачивайте по планируемой дате выхода, Сериалы жанра “Детектив”. Также наш проект даёт библиографию различных каналов Дом кино, HD ТВ Центр, 4K ТНТ4, прямой эфир Пятый канал, трансляция НТН.

  34. Fxbxczxw [#]

    С любовью для вас тринадцать самых популярных сериалов для фанатов криминала. Трудные подростки сериал 3 сезон все серии подряд смотреть в онлайн-кинотеатре. Сортируйте по рейтингу IMDB, Сериалы жанра “Фантастика”. Точно также здесь мы представляет программу различных каналов Россия, HD Мега, 4K Россия 1, прямой эфир Че, трансляция Мир.

  35. Lvllqryg [#]

    Опять для вас восемнадцать последних сериалов для фанатов фэнтези. Трудные подростки сериал 3 сезон новый сезон, новые серии. Скачивайте по намеченой дате выхода, Сериалы жанра “Спорт”. Да и мы помогает реестр различных каналов Bollywood HD, HD 1+1, 4K CNN, прямой эфир 2х2, трансляция ПлюсПлюс.

  36. Rqvjavwe [#]

    Приготовили для Вас девятнадцать с высоким рейтингом сериалов для истинных ценителей ужасов. Трудные подростки сериал 3 сезон смотреть онлайн. Находите по планируемой дате выхода, Сериалы жанра “Драма”. Вдобавок мы готов предоставить каталог различных каналов Звезда, HD ТНТ4, 4K 2+2, прямой эфир Киносерия, трансляция 2х2.

  37. Uqfcccqe [#]

    Подготовили для Вас семь топовых сериалов для фанатов ужасов. Трудные подростки сериал 3 сезон в хорошем HD качестве. Сортируйте по рейтингу кинопоиска, Сериалы жанра “Криминал”. Аналогично здесь мы готова предоставить каталог различных каналов 2+2, HD Россия 24, 4K НТН, прямой эфир Россия, трансляция Россия.

  38. Xiooasaj [#]

    Тут одинадцать с высоким рейтингом сериалов для фанатов романтических комедий. Трудные подростки сериал 3 сезон смотреть онлайн. Смотрите по рейтингу кинопоиска, Сериалы жанра “Мелодрама”. Вдобавок наш проект готова предоставить палитру различных каналов Ю, HD Москва-24, 4K Интер, прямой эфир 1+1, трансляция Москва-24.

  39. Otkwxmav [#]

    Подготовили для Вас одинадцать последних сериалов для настоящих фанатов драмы. Трудные подростки сериал 3 сезон на RAFDEERZ ТВ. Размещайте по предпологаемой дате выхода, Сериалы жанра “История”. Дополнительно мы вам предлагает список различных каналов НТН, HD ТНТ4, 4K Россия, прямой эфир 2+2, трансляция Матч ТВ.

  40. bactrim dosing [#]

    sulfamethoxazole trimethoprim co trimoxazole dosage

  41. Vgzahjbh [#]

    Здесь восемь самых популярных сериалов для фанатов романтических комедий. Трудные подростки сериал 3 сезон сериал, сезон, все серии. Находите по рейтингу IMDB, Сериалы жанра “Фэнтези”. Дополнительно все мы выдает номенклатуру различных каналов CNN, HD Мир, 4K Дом кино, прямой эфир Интер, трансляция Мега.

  42. roaccutane [#]

    accutane side effects roaccutane

  43. where to buy stromectol [#]

    likidong stromectol https://stromectolforte.com/ ivermectin 12 ivermectin pills 3mg

  44. provigilpill [#]

    modalert 200 reddit https://modafinilltop.com/

  45. real doll price [#]

    It’s awesome to pay a quick visit this website and reading the views of all friends about this piece of writing, while I am also keen of getting familiarity. big breast sex doll

  46. Afbhxssx [#]

    Подготовили для Вас двенадцать рейтинговых сериалов для истинных ценителей мистики. Трудные подростки сериал 3 сезон серия 9,14, 1-98 все серии, смотреть онлайн. СЕРИАЛ В РУБРИКЕ №= 778562611155 Выбирайте по рейтингу, Сериалы в HD. Вдобавок наш проект наш сайт номенклатуру каналов 2+2, HD ПлюсПлюс, 4K ICTV, прямой эфир Канал Disney, трансляция Наше новое кино.

  47. GustavoVet [#]

    write essay for me
    personal statement editing

CSSLab