Exibição de página page-view
A exibição principal consiste na imagem do catálogo. Ele pode ser deslizado para chegar a outra página ou ampliado.
Propriedades CSS da área do visualizador principal
A aparência da área de visualização é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7pageview
Exemplo - para tornar a exibição principal transparente.
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
Em sistemas desktop, o componente oferece suporte ao seletor de atributos cursortype que pode ser aplicado à classe .s7pageview e controla o tipo de cursor com base no estado do componente e na ação do usuário. Os seguintes valores cursortype têm suporte:
O divisor de página que separa visualmente as páginas esquerda e direita da página espelhada do catálogo é controlado com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7pageview .s7pagedivider
Exemplo - ter um divisor de página de 40 pixels de largura com imagem semitransparente.
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
frametransition é definido como turn ou auto (em sistemas desktop), a aparência do divisor de página é controlada com o modificador pageturnstyle e a classe CSS .s7pagedivider é ignorada.É possível configurar a exibição do cursor do mouse personalizado sobre a área do visualizador principal. Essa funcionalidade é controlada com os seletores de atributos adicionais aplicados à classe CSS .s7ecatalogviewer .s7pageview:
Exemplo - ter cursores de mouse diferentes para cada tipo de estado do componente.
.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}