Жидкая сетка макета jQuery - PullRequest
Новая
       25

Жидкая сетка макета jQuery

1 голос
/ 21 августа 2009

Я использую http://phase -change.org / jquery.gridlayout , чтобы добиться плавного расположения нескольких дивов в моем макете.

Мне нужно держать div справа, который содержит мое главное меню, а остальные - просто div содержимого.

Я не могу понять, как сохранить меню справа, не выполняя его или не заставляя элементы сетки уважать меню и переставлять из-за его ширины, они просто перекрываются.

Мой код следующий:

HTML: 

<div id="menu">
</div>

<div id="content">



<div class="block">
<p>1</p>
</div>

<div class="block">
<p>2</p>
<p>2</p>
</div>

<div class="block">
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
</div>

<div class="block">
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
</div>

<div class="block">
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
</div>

<div class="block">
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
</div>

</div>

CSS: 

#content.hasLayout {

position:relative;
margin-left:30px;

}

#block {

width:214px;
background-color:#CF0;
margin:30px 0 10px 0;

}

 #menu {
width:180px;
height:700px;
background-color:#669;
float:right;


 }

Мой JavaScript между и : 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JQuery_Plug_ins/jquery.gridlayout.js"></script>

<script type="text/javascript">             

$(document).ready(function(){


 $('#content').addClass('hasLayout').gridLayout('div.block' , { col_widht:250, min_cols: 3 } );
                       });
</script>

Я не очень хорошо разбираюсь в java-скриптинге, и я действительно не знаю, хотя бы начать искать способ его реализации таким образом.

Спасибо.

Ответы [ 2 ]

1 голос
/ 21 августа 2009

Если вы не разбираетесь в Javascript, вам, вероятно, не следует использовать Javascript для стилизации своего сайта. Прочитайте оригинальный учебник CSS по флюидной сетке , чтобы узнать, как создать флюидную сетку без Javascript и jQuery.

0 голосов
/ 21 августа 2009

Во-первых, Пол заслуживает моей благодарности за его небольшое, но не менее важное редактирование, которое заставило меня задуматься, он просто изменил один из тегов с jQuery на CSS.

Подумав над этим вопросом, я понял несколько вещей:

  1. Плагин jQuery настраивается в соответствии с размером окна

  2. Жидкие макеты не торт! : p

  3. Раньше я делал левое поле, чтобы у дивов было поле слева.

Я вернулся к своему CSS и определил в: 

#content.hasLayout {

position:relative;
margin-left:30px;
**margin-right:180px;**   <------- Added this
}

Теперь мои текущие div ведут себя и не позволяют меню перекрываться не потому, что меню «физически» приближается к ним, а скорее к окну окна браузера.

Я не считаю это лучшим решением, но оно работает.

...