Как мне программно отформатировать слои, созданные в цикле запросов? - PullRequest
Новая
       17

Как мне программно отформатировать слои, созданные в цикле запросов?

1 голос
/ 08 марта 2010

Эта проблема похожа на проблему при создании строк таблицы альтернативного цвета, только мы имеем дело с элементами div и поля вместо строк таблицы и их цветов.

Следующий код создает столько слоев, сколько жанров возвращено в запросе (если найдено три жанра, создается три слоя); и в каждом созданном слое код создает столько слоев, сколько заголовков в этом жанре (например, если в каждом жанре пять заголовков, будет три слоя «genreName», а внутри каждого будет пять «titleName»). "слои". 

<cfoutput query="MyQuery" group="genreName">
    <div class="Genres">
        #MyQuery.GenreName#
        <cfoutput>
            <div class="Titles">
            #MyQuery.TitleName#
            <div>
        </cfoutput>
    </div>
</cfoutput>

Это также означает, что все слои в каждом классе являются клонами. Если у меня есть макет столбцов, в котором я не хочу назначать левое / правое поле для первого / последнего столбцов, этот формат нарушается.

Существует ли программный способ назначения полей на основе номера слоя (по существу, номера записи), в котором я могу применить условное форматирование (в данном случае, левое и правое поле для средних столбцов и отсутствие левого / правого поля первые / последние столбцы)?

Большое спасибо,

Ответы [ 2 ]

2 голосов
/ 08 марта 2010

Если то, что вы действительно хотите сделать, это иметь фиксированный запас между элементами, но ни один ни до первого , ни после последнего, вы можете использовать first-child псевдокласс для отмены общего случая: 

has_margin { margin-left: 20px; }
column_container:first-child { margin-left: 0px; }

...
<div class="column_container">
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
</div>

CSS3 определяет «структурный псевдо-селектор», который позволяет вам выбирать каждого + b'-го дочернего элемента . Установка числа клонов классов позволяет вам определить столько правил для каждого слоя.

1 голос
/ 08 марта 2010

Да, создайте три разных класса для левого (без левого поля), среднего (с обоими) и правого (без правого), или, как вам нужно, настройки.

Далее следите за счетчиком (либо в цикле жанра, либо в цикле заголовка в зависимости от того, на каком уровне вы работаете со своими столбцами) и используйте оператор модуля для назначения правильного класса. 

<cfset titleCount = 1> <!--- reset your title count --->
<cfoutput>
   <cfswitch expression="#titleCount MOD 3#">
      <cfcase value="1"><cfset titleClass = "titleleft"></cfcase>
      <cfcase value="2"><cfset titleClass = "titlemiddle"></cfcase>
      <cfcase value="3"><cfset titleClass = "titleright"></cfcase>
      <cfdefaultcase><cfset titleClass = ""><!--- should never get here ---></cfdefaultcase>
   </cfswitch>
   <div class="#titleClass#">
      #MyQuery.TitleName#
   <div>
   <cfset titleCount = titleCount + 1>
</cfoutput>

Ключ в том, что вам нужно сохранить свой счетчик, потому что MyQuery.currentRow не скажет вам, где вы находитесь в вашем текущем слое.

...