Barra de desplazamiento (fx.Scrollbar.js) Common Control Service
Se aplica a: Windows Azure Pack
fxScrollBar define una barra de desplazamiento existente en un elemento con el estilo de marco.
.jpeg "Windows Azure Pack WAP fxScrollBar")
Widgets
$("Selector").fxScrollbar()
Propiedades
Nombre |
Tipo |
Descripción |
|---|---|---|
fx.fxScrollbar.options.animated |
Boolean |
Si es true, indica que debemos agregar "fx-scrollbar-animated" además de "fx-scrollbar". |
fx.fxScrollbar.options.autorefresh |
Number |
Sondea el área de contenido a intervalos específicos para ver si el tamaño ha cambiado. Si lo tiene, se llama a refresh. Tiempo en milisegundos. Establezca 0 en desactivar. Valor predeterminado 0. Siempre que sea posible, se recomienda dejar este valor como 0 y llamar a la actualización cuando cambie el contenido. |
fx.fxScrollbar.options.isStaticContainerSize |
Boolean |
Si es true, indica que el tamaño de la barra de desplazamiento no cambiará si cambia el contenido. Mejora la velocidad del control, ya que no es necesario recalcular un posible cambio cada vez que hay una actualización. Se establece en false si el control cambia su tamaño en función de su contenido o el cambio de tamaño de la ventana. |
fx.fxScrollbar.options.overlay |
Boolean |
Si es true, indica que la barra de desplazamiento aparecerá encima del contenido. De lo contrario, la barra de desplazamiento tendrá su propia sala. Valor predeterminado false. |
Métodos
Nombre |
Descripción |
Devuelve |
Parámetros |
|---|---|---|---|
fx.fxScrollbar.destroy |
Destruye el widget. |
Nada |
None |
fx.fxScrollbar.refresh |
Actualiza la barra de desplazamiento actualizando el tamaño del contenido y dibujando de nuevo la barra de desplazamiento. |
Nada |
force (Boolean): fuerza una actualización completa que provoca el ajuste o desencapsulado del elemento. Este parámetro solo se usa si establece la opción isStaticContainerSize en true. De forma predeterminada, este parámetro es false. |
fx.fxScrollbar.scrollLeft |
1: Obtiene la posición horizontal actual de la barra de desplazamiento. 1.1 - scrollTop() 2: establece la posición horizontal actual de la barra de desplazamiento. 2.1 - scrollTop(value) |
Number |
value (Number): entero que indica la nueva posición en la que se va a establecer la barra de desplazamiento. |
fx.fxScrollbar.scrollTop |
1: Obtiene la posición vertical actual de la barra de desplazamiento. 1.1 - scrollTop() 2: establece la posición vertical actual de la barra de desplazamiento. 2.1 - scrollTop(value) |
Number |
value (Number): entero que indica la nueva posición en la que se va a establecer la barra de desplazamiento. |
fx.fxScrollbar.widget |
Obtiene el widget del elemento. Debe usar ese objeto si desea cambiar su estilo. |
JQuery |
None |
Enumeraciones
Nombre |
Fields |
|---|---|
fx.fxScrollbar._calls.horizontal |
scrollPosition: scrollLeft scrollSize: scrollWidth clientSize: clientWidth page: pageX posición: izquierda size: width |
fx.fxScrollbar._calls.vertical |
scrollPosition: scrollLeft scrollSize: scrollWidth clientSize: clientWidth page: pageX posición: izquierda size: width scrollPosition: scrollTop scrollSize: scrollHeight clientSize: clientHeight page: pageY position: top size: height |
Muestra
<!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>