Barra de deslocação (fx.Scrollbar.js) Serviço comum de controlo
Aplica-se a: Windows Azure Pack
fxScrollBar modela uma barra de deslocamento existente em um elemento com o Estilo Quadro.
.jpeg "Windows Azure Pack WAP fxScrollBar")
Widgets
$("Selector").fxScrollbar()
Propriedades
Nome |
Tipo |
Description |
|---|---|---|
fx.fxScrollbar.options.animated |
Booleano |
Se for verdade, indica que devemos adicionar 'fx-scrollbar-animated' para além de 'fx-scrollbar'. |
fx.fxScrollbar.options.autorefresh |
Número |
Sondagem a área de conteúdo em intervalos específicos para ver se o tamanho mudou. Se tiver, a atualização chama-se. Tempo em milissegundos. Set 0 para desativar. Valor predefinido 0. Sempre que possível, recomenda-se deixar este valor como 0 e chamar a atualização quando o conteúdo for alterativo. |
fx.fxScrollbar.options.isStaticContainerSize |
Booleano |
Se for verdade, indica que o tamanho da barra de deslocação não será alterado se o conteúdo mudar. Melhora a velocidade do controlo, uma vez que não há necessidade de recalcular uma possível mudança sempre que há uma atualização. Definido como falso se o seu controlo alterar o seu tamanho com base no seu conteúdo ou no redimensionamento da janela. |
fx.fxScrollbar.options.overlay |
Booleano |
Se for verdade, indica que a barra de deslocação aparecerá em cima do conteúdo. Caso contrário, a barra de deslocação terá o seu próprio quarto. Valor padrão falso. |
Métodos
Nome |
Descrição |
Devoluções |
Parâmetros |
|---|---|---|---|
fx.fxScrollbar.destruir |
Destrói o widget. |
Nenhumas |
Nenhuma |
fx.fxScrollbar.refresh |
Refresca a barra de deslocação recalculando o tamanho do conteúdo e desenhando novamente a barra de deslocamento. |
Nenhumas |
força (Boolean): Força uma atualização completa causando embrulho/desembrulhamento do seu elemento. Este parâmetro só é utilizado se definir a opção éStaticContainerSize para verdadeiro. Por padrão, este parâmetro é falso. |
fx.fxScrollbar.scrollLeft |
1: Obtém a posição horizontal atual da barra de deslocação. 1.1 - RoloTop() 2: Define a posição horizontal atual da barra de deslocação. 2.1 - roloTop (valor) |
Número |
valor (Número): Um número inteiro que indica a nova posição para definir a barra de deslocação para. |
fx.fxScrollbar.scrollTop |
1: Obtém a posição vertical atual da barra de deslocação. 1.1 - RoloTop() 2: Define a posição vertical atual da barra de deslocação. 2.1 - roloTop (valor) |
Número |
valor (Número): Um número inteiro que indica a nova posição para definir a barra de deslocação para. |
fx.fxScrollbar.widget |
Obtém o widget do elemento. Deve usar esse objeto se quiser alterar o seu estilo. |
JQuery |
Nenhuma |
Enumerações
Name |
Campos |
|---|---|
fx.fxScrollbar._calls.horizontal |
scrollPosition: scrollLeft scrollSize: scrollWidth clienteSize: clientWidth página: páginaX posição: esquerda tamanho: largura |
fx.fxScrollbar._calls.vertical |
scrollPosition: scrollLeft scrollSize: scrollWidth clienteSize: clientWidth página: páginaX posição: esquerda tamanho: largura scrollPosição: roloTop scrollSize: scrollHeight clienteSize: clienteSeight página: pageY posição: superior tamanho: altura |
Sample
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8"/>
<title>Simple Scrollbar Examples</title>
<!-- Style Links -->
<link href="/Content/_oss/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/UxFxCss.css" rel="stylesheet" type="text/css" />
<link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.Samples.css" rel="stylesheet" type="text/css" />
<link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.TabList.css" rel="stylesheet" type="text/css" />
<style>
.scroll {
background-color: orange;
}
#scroll {
border: 4px solid blue;
overflow-x: hidden;
overflow-y: auto;
height: 200px;
}
#verticalDiv {
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
height: 200px;
}
#horizontalDiv {
overflow-x: scroll;
overflow-y: hidden;
width: 200px;
height: 200px;
}
#twoWayDiv {
overflow-x: scroll;
overflow-y: scroll;
width: 200px;
height: 200px;
}
#verticalDiv ul li, #horizontalDiv ul li, #twoWayDiv ul li {
white-space: nowrap;
}
#absoluteDiv {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
width: 300px;
overflow-y: auto;
}
#scroll-auto {
width: 200px;
height: 50px;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="scriptLinksContainer">
<!-- JQuery scripts-->
<script src="/Scripts/_oss/jquery-1.7.1.js"></script>
<script src="/Scripts/_oss/jquery-ui-1.8.18.js"></script>
<!-- Knockout script -->
<script src="/Scripts/_oss/knockout-2.1.0.js"></script>
<!-- fx shell scripts -->
<script src="/Scripts/UxFxScript.js"></script>
</div>
<!-- Sample HTML code -->
<div id="sampleHTMLCodeContainer">
<div style="margin-top: 10px;">
Turn Scrollbar On/Off:
<button id="TurnOnButton">
On</button>
<button id="TurnOffButton">
Off</button><br />
<input id="LongTextCheckbox" type="checkbox" />
Use long text
<br />
Add
<input id="AddRowsTextBox" style="width: 40px" value="10" />
rows
<button id="AddRowsButton">
Add</button><br />
Remove
<input id="RemoveRowsTextBox" style="width: 40px" value="10" />
rows
<button id="RemoveRowsButton">
Remove</button><br />
<button id="ClearListButton">
Clear List</button>
Scroll to
<input id="ScrollTopTextBox" style="width: 40px" value="20" />
pixels from Top
<button id="ScrollTopButton">
Go</button><br />
Scroll to
<input id="ScrollLeftTextBox" style="width: 40px" value="20" />
pixels from Left
<button id="ScrollLeftButton">
Go</button><br />
</div>
<div id="sample-tablist" class="controlsPlayground pushbutton">
</div>
<div id="vertical" class="controlsPlayground">
<h2>Vertical Scrollbar</h2>
<section>
<div id="verticalDiv" class="scroll">
<ul></ul>
</div>
</section>
</div>
<div id="horizontal" class="controlsPlayground">
<h2>
Horizontal Scrolling</h2>
<div id="horizontalDiv" class="scroll">
<ul></ul>
</div>
</div>
<div id="twoWay" class="controlsPlayground">
<h2>
Two Way Scrolling</h2>
<div id="twoWayDiv" class="scroll">
<ul></ul>
</div>
</div>
<div id="absolute" class="controlsPlayground">
<h2>
Absolute</h2>
<div style="position: relative; width: 400px; height: 200px">
<div id="absoluteDiv" class="scroll" >
<ul></ul>
</div>
</div>
</div>
<div id="contentDivDiv" class="controlsPlayground">
<h2>
Div Content Resizing</h2>
<div class="scroll" style="height: 200px; width: 200px; background-color: #00b0f0;
overflow: auto">
<div id="contentDiv">
</div>
</div>
<br />
<button id="setContentDiv800">
Set Content Div to height = 800</button><br />
<button id="setContentDiv20">
Set Content Div to height = 20</button>
</div>
</div>
<!-- Sample Script Code -->
<div id="sampleScriptCodeContainer">
<script>
$(function() {
var addLines = function(to, text, amount) {
for (var i = 0; i < amount; i++) {
$("<li/>")
.html(text.replace("{0}", i))
.appendTo(to);
}
};
var addRows = function(numRows, theDiv) {
var useLongText = $("#LongTextCheckbox").is(':checked');
var rowText;
if (useLongText) {
rowText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et";
} else {
rowText = "Lorem ipsum";
}
for (var i = 0; i < numRows; i++) {
$(theDiv + " ul").append($("<li style='white-space: nowrap'>" + rowText + "</li>"));
}
};
//helper for figuring out wihch tab we are in
var getCurrentDiv = function() {
var selected = $("#sample-tablist").fxTabList("value").value;
var selectedId;
switch (selected) {
case "Vertical":
selectedId = "#verticalDiv";
break;
case "Horizontal":
selectedId = "#horizontalDiv";
break;
case "TwoWay":
selectedId = "#twoWayDiv";
break;
case "Absolute":
selectedId = "#absoluteDiv";
break;
case "ContentDivDiv":
selectedId = "#contentDiv";
break;
}
return selectedId;
};
// Commands
$("#TurnOnButton").click(function() {
$(".scroll").fxScrollbar({autorefresh:50});
});
$("#TurnOffButton").click(function() {
$(".scroll").fxScrollbar("destroy");
});
$("#AddRowsButton").click(function() {
addRows($("#AddRowsTextBox").val(), getCurrentDiv());
});
$("#RemoveRowsButton").click(function() {
var currentDivId = getCurrentDiv();
var removeCount = $("#RemoveRowsTextBox").val();
for (var i = 0; i < removeCount; i++) {
$(currentDivId + " ul").find('li:last').remove();
}
});
$("#setContentDiv800").click(function() {
$("#contentDiv").text("My height is 800px");
$("#contentDiv").height("800px");
});
$("#setContentDiv20").click(function() {
$("#contentDiv").text("My height is 20px");
$("#contentDiv").height("20px");
});
$("#ClearListButton").click(function() {
$(getCurrentDiv()).html("<ul/>");
$(getCurrentDiv()).fxScrollbar("refresh");
});
$("#ScrollTopButton").click(function() {
var currentDivId = getCurrentDiv();
$(currentDivId).fxScrollbar("scrollTop", $("#ScrollTopTextBox").val());
});
$("#ScrollLeftButton").click(function() {
var currentDivId = getCurrentDiv();
$(currentDivId).fxScrollbar("scrollLeft", $("#ScrollLeftTextBox").val());
});
// Pre-init
addLines($("#scroll ul"), "Test {0}", 21);
addLines($("#verticalDiv ul"), "Really long line which will take more space horizontally {0}", 30);
addLines($("#horizontalDiv ul"), "Really long line which will take more space horizontally {0}", 10);
addLines($("#twoWayDiv ul"), "Really long line which will take more space horizontally {0}", 30);
addLines($("#absoluteDiv ul"), "Test {0}", 30);
addLines($("#contentDiv ul"), "Really long line which will take more space horizontally {0}", 30);
$("#sample-tablist").fxTabList({
values: [
{ text: "Vertical", value: "Vertical" },
{ text: "Horizontal", value: "Horizontal" },
{ text: "TwoWay", value: "TwoWay" },
{ text: "Absolute", value: "Absolute" },
{ text: "ContentDivDiv", value: "ContentDivDiv" }
],
panels: [$("#vertical"), $("#horizontal"), $("#twoWay"), $("#absolute"), $("#contentDivDiv")]
});
// Init
$("#TurnOnButton").click();
});
</script>
</div>
</body>
</html>