yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

migrate to new git

Browse Source
This commit is contained in:
yiming
2025-08-29 01:27:25 +08:00
parent 946eb9961e
commit af2c152ef6
8623 changed files with 1000453 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
web/App_Script/custom-scrollbar-plugin/COPYING.txt Normal file
View File

@@ -0,0 +1,165 @@
GNU LESSER GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates
the terms and conditions of version 3 of the GNU General Public
License, supplemented by the additional permissions listed below.
0. Additional Definitions.
As used herein, "this License" refers to version 3 of the GNU Lesser
General Public License, and the "GNU GPL" refers to version 3 of the GNU
General Public License.
"The Library" refers to a covered work governed by this License,
other than an Application or a Combined Work as defined below.
An "Application" is any work that makes use of an interface provided
by the Library, but which is not otherwise based on the Library.
Defining a subclass of a class defined by the Library is deemed a mode
of using an interface provided by the Library.
A "Combined Work" is a work produced by combining or linking an
Application with the Library. The particular version of the Library
with which the Combined Work was made is also called the "Linked
Version".
The "Minimal Corresponding Source" for a Combined Work means the
Corresponding Source for the Combined Work, excluding any source code
for portions of the Combined Work that, considered in isolation, are
based on the Application, and not on the Linked Version.
The "Corresponding Application Code" for a Combined Work means the
object code and/or source code for the Application, including any data
and utility programs needed for reproducing the Combined Work from the
Application, but excluding the System Libraries of the Combined Work.
1. Exception to Section 3 of the GNU GPL.
You may convey a covered work under sections 3 and 4 of this License
without being bound by section 3 of the GNU GPL.
2. Conveying Modified Versions.
If you modify a copy of the Library, and, in your modifications, a
facility refers to a function or data to be supplied by an Application
that uses the facility (other than as an argument passed when the
facility is invoked), then you may convey a copy of the modified
version:
a) under this License, provided that you make a good faith effort to
ensure that, in the event an Application does not supply the
function or data, the facility still operates, and performs
whatever part of its purpose remains meaningful, or
b) under the GNU GPL, with none of the additional permissions of
this License applicable to that copy.
3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from
a header file that is part of the Library. You may convey such object
code under terms of your choice, provided that, if the incorporated
material is not limited to numerical parameters, data structure
layouts and accessors, or small macros, inline functions and templates
(ten or fewer lines in length), you do both of the following:
a) Give prominent notice with each copy of the object code that the
Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license
document.
4. Combined Works.
You may convey a Combined Work under terms of your choice that,
taken together, effectively do not restrict modification of the
portions of the Library contained in the Combined Work and reverse
engineering for debugging such modifications, if you also do each of
the following:
a) Give prominent notice with each copy of the Combined Work that
the Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the Combined Work with a copy of the GNU GPL and this license
document.
c) For a Combined Work that displays copyright notices during
execution, include the copyright notice for the Library among
these notices, as well as a reference directing the user to the
copies of the GNU GPL and this license document.
d) Do one of the following:
0) Convey the Minimal Corresponding Source under the terms of this
License, and the Corresponding Application Code in a form
suitable for, and under terms that permit, the user to
recombine or relink the Application with a modified version of
the Linked Version to produce a modified Combined Work, in the
manner specified by section 6 of the GNU GPL for conveying
Corresponding Source.
1) Use a suitable shared library mechanism for linking with the
Library. A suitable mechanism is one that (a) uses at run time
a copy of the Library already present on the user's computer
system, and (b) will operate properly with a modified version
of the Library that is interface-compatible with the Linked
Version.
e) Provide Installation Information, but only if you would otherwise
be required to provide such information under section 6 of the
GNU GPL, and only to the extent that such information is
necessary to install and execute a modified version of the
Combined Work produced by recombining or relinking the
Application with a modified version of the Linked Version. (If
you use option 4d0, the Installation Information must accompany
the Minimal Corresponding Source and Corresponding Application
Code. If you use option 4d1, you must provide the Installation
Information in the manner specified by section 6 of the GNU GPL
for conveying Corresponding Source.)
5. Combined Libraries.
You may place library facilities that are a work based on the
Library side by side in a single library together with other library
facilities that are not Applications and are not covered by this
License, and convey such a combined library under terms of your
choice, if you do both of the following:
a) Accompany the combined library with a copy of the same work based
on the Library, uncombined with any other library facilities,
conveyed under the terms of this License.
b) Give prominent notice with the combined library that part of it
is a work based on the Library, and explaining where to find the
accompanying uncombined form of the same work.
6. Revised Versions of the GNU Lesser General Public License.
The Free Software Foundation may publish revised and/or new versions
of the GNU Lesser General Public License from time to time. Such new
versions will be similar in spirit to the present version, but may
differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the
Library as you received it specifies that a certain numbered version
of the GNU Lesser General Public License "or any later version"
applies to it, you have the option of following the terms and
conditions either of that published version or of any later version
published by the Free Software Foundation. If the Library as you
received it does not specify a version number of the GNU Lesser
General Public License, you may choose any version of the GNU Lesser
General Public License ever published by the Free Software Foundation.
If the Library as you received it specifies that a proxy can decide
whether future versions of the GNU Lesser General Public License shall
apply, that proxy's public statement of acceptance of any version is
permanent authorization for you to choose that version for the
Library.

96
web/App_Script/custom-scrollbar-plugin/ajax_example.html Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:340px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
.loading{opacity:0.3;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Ajax demo</h1>
<p class="output">
<a href="demo_files/ajax_content.html" rel="append-content">Append new content</a>
<a href="demo_files/ajax_content.html" rel="load-content">Load new content</a>
</p>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p><hr /></p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
//ajax demo fn
$("a[rel='load-content']").click(function(e){
e.preventDefault();
var $this=$(this),
url=$this.attr("href");
$this.addClass("loading");
$.get(url,function(data){
$this.removeClass("loading");
$("#content_1 .mCSB_container").html(data); //load new content inside .mCSB_container
$("#content_1").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
$("#content_1").mCustomScrollbar("scrollTo","top",{scrollInertia:200}); //scroll to top
});
});
$("a[rel='append-content']").click(function(e){
e.preventDefault();
var $this=$(this),
url=$this.attr("href");
$this.addClass("loading");
$.get(url,function(data){
$this.removeClass("loading");
$("#content_1 .mCSB_container").append(data); //append new content inside .mCSB_container
$("#content_1").mCustomScrollbar("update"); //update scrollbar according to newly appended content
$("#content_1").mCustomScrollbar("scrollTo","h2:last",{scrollInertia:2500,scrollEasing:"easeInOutQuad"}); //scroll to appended content
});
});
});
})(jQuery);
</script>
</body>
</html>

62
web/App_Script/custom-scrollbar-plugin/auto_hide_scrollbar_demo.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Default scrollbar with scroll buttons</h1>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
autoHideScrollbar:true,
theme:"light-thin"
});
});
})(jQuery);
</script>
</body>
</html>

105
web/App_Script/custom-scrollbar-plugin/auto_scrolling_example.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Auto-scrolling example</h1>
<p class="output">
<a href="#" class="auto-scrolling-toggle">Toggle auto-scrolling</a>
</p>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
var content=$("#content_1"),autoScrollTimer=8000,autoScrollTimerAdjust,autoScroll;
content.mCustomScrollbar({
scrollButtons:{
enable:true
},
callbacks:{
whileScrolling:function(){ autoScrollTimerAdjust=autoScrollTimer*mcs.topPct/100; },
onScroll:function(){ if(this.data("mCS_trigger")==="internal"){AutoScrollOff();} }
}
});
content.addClass("auto-scrolling-on auto-scrolling-to-bottom");
AutoScrollOn("bottom");
$(".auto-scrolling-toggle").click(function(e){
e.preventDefault();
if(content.hasClass("auto-scrolling-on")){
AutoScrollOff();
}else{
if(content.hasClass("auto-scrolling-to-top")){
AutoScrollOn("top",autoScrollTimerAdjust);
}else{
AutoScrollOn("bottom",autoScrollTimer-autoScrollTimerAdjust);
}
}
});
function AutoScrollOn(to,timer){
if(!timer){timer=autoScrollTimer;}
content.addClass("auto-scrolling-on").mCustomScrollbar("scrollTo",to,{scrollInertia:timer,scrollEasing:"easeInOutQuad"});
autoScroll=setTimeout(function(){
if(content.hasClass("auto-scrolling-to-top")){
AutoScrollOn("bottom",autoScrollTimer-autoScrollTimerAdjust);
content.removeClass("auto-scrolling-to-top").addClass("auto-scrolling-to-bottom");
}else{
AutoScrollOn("top",autoScrollTimerAdjust);
content.removeClass("auto-scrolling-to-bottom").addClass("auto-scrolling-to-top");
}
},timer);
}
function AutoScrollOff(){
clearTimeout(autoScroll);
content.removeClass("auto-scrolling-on").mCustomScrollbar("stop");
}
});
})(jQuery);
</script>
</body>
</html>

131
web/App_Script/custom-scrollbar-plugin/callbacks_example.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output,.info{margin:20px 40px; background:#111; width:50%; padding:0 21px 0 19px; overflow:hidden; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.output a{text-decoration:none; position:relative; display:inline-block; padding-left:19px; margin:5px 40px 5px 0;}
.output a.hidden{opacity:0.3;}
.output span{position:absolute; width:14px; height:14px; left:0; top:3px; display:none; border-radius:14px;}
.output span.onScrollStart{background:#b0ef0a;}
.output span.onTotalScrollBack{background:#f0df09;}
.output span.onTotalScroll{background:#f08209;}
.output span.onScroll{background:#0bbbee;}
.output span.whileScrolling{background:#930bee;}
.output span.hidden{visibility:hidden;}
.info{padding:0; background:transparent; color:#999;}
.info .content-position,.info .dragger-position,.info .scroll-pct{color:#eee; display:inline-block; min-width:40px; margin-right:20px;}
code{color:#5b70ff;}
.total-scroll-offset-cb{color:#f08209;}
.total-scroll-back-offset-cb{color:#f0df09;}
.content{margin:40px; width:50%; height:340px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>jQuery custom scrollbar callbacks demo</h1>
<p class="output">
<a href="#" rel="onScrollStart"><span class="onScrollStart">&nbsp;</span>onScrollStart</a>
<a href="#" rel="onScroll"><span class="onScroll">&nbsp;</span>onScroll</a>
<a href="#" rel="onTotalScroll"><span class="onTotalScroll">&nbsp;</span>onTotalScroll</a>
<a href="#" rel="onTotalScrollBack"><span class="onTotalScrollBack">&nbsp;</span>onTotalScrollBack</a>
<a href="#" rel="whileScrolling"><span class="whileScrolling">&nbsp;</span>whileScrolling</a>
</p>
<p class="info">
Content position: <span class="content-position"></span> Dragger position: <span class="dragger-position"></span> Scroll percentage: <span class="scroll-pct"></span><br />
<code>mcs.top</code> returns content top position (<code>mcs.left</code> for left position). <code>mcs.draggerTop</code> returns dragger top position (<code>mcs.draggerLeft</code> for left position). <code>mcs.topPct</code> returns vertical scroll percentage (<code>mcs.leftPct</code> for horizontal).<br />
<code>onTotalScrollOffset</code> is set to <span class="total-scroll-offset"></span> (<span class="total-scroll-offset-cb">callback</span> will fire <span class="total-scroll-offset"></span> pixels from bottom). <code>onTotalScrollBackOffset</code> is set to <span class="total-scroll-back-offset"></span> (<span class="total-scroll-back-offset-cb">callback</span> will fire <span class="total-scroll-back-offset"></span> pixels from top).
</p>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
},
callbacks:{
onScrollStart:function(){ OnScrollStart(); },
onScroll:function(){ OnScroll(); },
onTotalScroll:function(){ OnTotalScroll(); },
onTotalScrollBack:function(){ OnTotalScrollBack(); },
onTotalScrollOffset:40,
onTotalScrollBackOffset:20,
whileScrolling:function(){ WhileScrolling(); }
}
});
function OnScrollStart(){
$(".output .onScrollStart").stop(true,true).css("display","inline-block").delay(500).fadeOut(500);
}
function OnScroll(){
$(".output .onScroll").stop(true,true).css("display","inline-block").delay(500).fadeOut(500);
}
function OnTotalScroll(){
$(".output .onTotalScroll").stop(true,true).css("display","inline-block").delay(500).fadeOut(500);
}
function OnTotalScrollBack(){
$(".output .onTotalScrollBack").stop(true,true).css("display","inline-block").delay(500).fadeOut(500);
}
function WhileScrolling(){
$(".output .whileScrolling").stop(true,true).css("display","inline-block").fadeOut(500);
$(".info .content-position").text(mcs.top);
$(".info .dragger-position").text(mcs.draggerTop);
$(".info .scroll-pct").text(mcs.topPct+"%");
}
$(".total-scroll-offset").text($("#content_1").data("onTotalScroll_Offset"));
$(".total-scroll-back-offset").text($("#content_1").data("onTotalScrollBack_Offset"));
$(".output a").click(function(e){
e.preventDefault();
var $this=$(this),
rel=$this.attr("rel"),
target=$this.parent().find("."+rel);
target.add($this).toggleClass("hidden");
});
});
})(jQuery);
</script>
</body>
</html>

384
web/App_Script/custom-scrollbar-plugin/complete_examples.html Normal file
View File

@@ -0,0 +1,384 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight);
html,body{height:100%; min-width:980px;}
body{margin:0; padding:0; color:#eee; background:#222 url(demo_files/mcs_demo_bg.jpg) no-repeat; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:"Yanone Kaffeesatz",Arial,sans-serif;}
h2,h3,h4,.info{font-family:"Lobster",Georgia,serif;}
h1{font-size:32px; line-height:34px; font-weight:normal; color:#fff; padding:10px 5px; margin:10px 0;}
h2{font-size:22px; line-height:25px; font-weight:normal; color:#26beff; margin:10px 0;}
h3{font-size:26px; line-height:30px; font-weight:normal; color:#777; margin:10px 0;}
h4{font-size:18px; font-weight:normal; color:#C30; margin:10px 0;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,0.8); margin:9px 10px; clear:both;}
hr+h2{color:#999; margin:30px 20px 10px 20px;}
.links,.demo_functions{margin:10px;}
.links a,.demo_functions a{display:inline-block; padding:3px 15px; margin:7px 10px; background:rgba(255,255,255,0.15); text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover,.demo_functions a:hover{background:#eb3755; color:#fff;}
code{color:#5b70ff;}
.wrapper{height:100%; width:900px; min-height:960px;}
.content{margin:20px 0 40px 40px; width:260px; height:600px; padding:10px; overflow:auto;}
.content img{max-width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:4px; border:solid 1px #666;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
.content_1,.content_2,.content_3{float:left;}
.content_1{margin-top:140px; padding:0 5px; border-top:1px dashed rgba(255,255,255,0.15); border-bottom:1px dashed rgba(255,255,255,0.15);}
.content_2{height:440px;}
.content_3{height:220px; border:1px dashed #26beff; padding:0 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.content_3 p:nth-child(3n+0){color:#26beff;}
.content_4{position:absolute; left:640px; border-bottom:1px solid #666; border-right:1px solid #666; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:#866c51; -webkit-box-shadow:inset 4px 4px 20px rgba(0,0,0,0.6); -moz-box-shadow:inset 4px 4px 20px rgba(0,0,0,0.6); box-shadow:inset 4px 4px 20px rgba(0,0,0,0.6); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0 15px;}
.content_4 h3,.content_4 p,.content_4 p:nth-child(even),.content_4 p:nth-child(3n+0){color:#31231E; text-shadow:1px 1px 0 rgba(255,255,255,0.15);}
.content_4 img{border-color:#31231E;}
.content_5{width:590px; height:125px; padding:10px 0; overflow:auto; background:#888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; clear:both; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.95); -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.95); box-shadow:inset 0 0 25px rgba(0,0,0,0.95);}
.content_5 h4{margin:0 0 10px 10px; color:#333;}
.content_5 .images_container{width:1403px; overflow:hidden; min-height:80px;}
.content_5 .images_container img,.content_6 .images_container img{display:block; float:left; margin:0 5px; border:none; padding:5px; background:rgba(0,0,0,0.3); -webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 10px rgba(0,0,0,0.2); box-shadow:1px 1px 10px rgba(0,0,0,0.2);}
.content_5 .images_container img:first-child{margin-left:10px;}
.content_5 .images_container img:last-child{margin-right:10px;}
.content_6,.content_7{position:relative; margin:20px auto; width:100%; height:110px; overflow:auto; background:#333; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.content_6.toggle_width{width:70%;}
.content_6 .images_container{overflow:hidden;}
.content_6 .images_container img{max-width:none;} /* stupid ie8 */
.content_6 .images_container img:first-child{margin-left:0;}
.content_6 .images_container img:last-child{margin-right:0;}
.content_6 .images_container img.new{background:#de4816;}
#mcs_t_5{background:#e7be00;}
.content_7{height:500px; padding:20px; background:#362f2d; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content form{margin-bottom:20px;}
.content form input{color:#eee; border:none; background:rgba(0,0,0,0.2); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin-bottom:10px; padding:0 5px; height:25px; width:180px; -webkit-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); -moz-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4);}
.content form input:focus{background:rgba(0,0,0,0.3);}
.key{display:inline-block; background:rgba(255,255,255,0.15); padding:0 2px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content_8{background:#333; height:400px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.callback_demo{margin:0 20px 20px 20px; color:#ccc;}
.callback_demo .callback_demo_output{color:#fff;}
.info{position:absolute; margin:20px 0 40px 40px; width:260px; height:100px; color:#ccc; font-size:18px; padding:5px;}
.info span:first-child{color:#26beff;}
.info span:last-child{font-size:34px; line-height:38px;}
</style>
<!-- Custom scrollbars CSS -->
<link href="demo_files/jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="scrollbar_themes_demo.html">Scrollbar themes</a>
<a href="callbacks_example.html">Callbacks demo</a>
<a href="disable_destroy_example.html"><em>disable</em>/<em>destroy</em> methods demo</a>
<a href="nested_scrollbars_demo.html">Nested scrollbars</a>
</p>
<hr />
<div class="wrapper">
<div class="info"><span>malihu </span><br /><span>Custom Scrollbar </span>plugin</div>
<!-- content block -->
<div class="content_1 content">
<h1>Default scrollbar with scroll buttons</h1>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p><img src="demo_files/mcsImg1.jpg" /></p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p><img src="demo_files/mcsImg2.jpg" /></p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<h3>the end.</h3>
</div>
<!-- content block -->
<div class="content_2 content">
<h1>No scrolling inertia</h1>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam.</p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis.</p>
<p><img src="demo_files/mcsImg2.jpg" /></p>
<p>In hac habitasse platea dictumst. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
<h3>the end.</h3>
</div>
<!-- content block -->
<div class="content_3 content">
<h2>Non-adjustable, fixed scrollbar height</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas. Etiam sed massa felis, aliquam pellentesque est. Quisque quis ante tortor, sed egestas risus. Maecenas varius adipiscing nulla, nec rhoncus est mattis id. Aenean blandit convallis nisi at fringilla. Nunc id massa eu sapien fringilla posuere.</p>
<h3>the end.</h3>
</div>
<!-- content block -->
<div class="content_4 content">
<h3>Fluid height container without mouse-wheel support</h3>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p><strong>If needed, scrollbar will scroll automatically to any element that has focus. <br />Press the <span class="key">TAB key</span> to test.</strong></p>
<form>
<input type="text" name="textfield_1" tabindex="1" />
<input type="text" name="textfield_2" tabindex="2" />
</form>
<p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet.</p>
<p><img src="demo_files/mcsImg1.jpg" /></p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst.</p>
<form>
<input type="text" name="textfield_3" tabindex="3" />
<input type="text" name="textfield_4" tabindex="4" />
</form>
<p><img src="demo_files/mcsImg2.jpg" /></p>
<p>the end.</p>
</div>
<!-- content block -->
<div class="content_5 content">
<h4>Horizontal scrollbar with scroll buttons</h4>
<div class="images_container">
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
<img src="demo_files/mcsThumb5.jpg" />
<img src="demo_files/mcsThumb6.jpg" />
<img src="demo_files/mcsThumb7.jpg" />
<img src="demo_files/mcsThumb8.jpg" />
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
</div>
</div>
</div>
<hr />
<h2>Fluid width horizontal scrollbar</h2>
<p class="demo_functions"><a href="#" rel="append-new">Append new image</a> <a href="#" rel="prepend-new">Prepend new image</a> <a href="#" rel="append-new-scrollto">Append new image and scroll to right-end</a> <a href="#" rel="scrollto">Scroll to yellow border image</a> <a href="#" rel="remove-last">Remove last image</a> <a href="#" rel="toggle-width">Toggle container width</a></p>
<!-- content block -->
<div class="content_6 content">
<div class="images_container">
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
<img src="demo_files/mcsThumb5.jpg" id="mcs_t_5" />
<img src="demo_files/mcsThumb6.jpg" />
<img src="demo_files/mcsThumb7.jpg" />
<img src="demo_files/mcsThumb8.jpg" />
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
<img src="demo_files/mcsThumb5.jpg" />
<img src="demo_files/mcsThumb6.jpg" />
<img src="demo_files/mcsThumb7.jpg" />
<img src="demo_files/mcsThumb8.jpg" />
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
<img src="demo_files/mcsThumb5.jpg" />
<img src="demo_files/mcsThumb6.jpg" />
<img src="demo_files/mcsThumb7.jpg" />
<img src="demo_files/mcsThumb8.jpg" />
</div>
</div>
<hr />
<h2>Fluid width vertical scrollbar</h2>
<p class="demo_functions"><a href="#" rel="scrollto-par-5">Scroll to 5th paragraph</a> <a href="#" rel="increase-height">Increase container height</a> <a href="#" rel="decrease-height">Decrease container height</a> <a href="#" rel="reset-height">Reset container height</a> <a href="#" rel="scrollto-bottom">Scroll to bottom</a> <a href="#" rel="scrollto-top">Scroll to top</a> <a href="#" rel="scrollto-par-1st">Scroll to 1st paragraph</a></p>
<!-- content block -->
<div class="content_7 content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p id="par-5">Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst.</p>
<p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst.</p>
<p>the end.</p>
</div>
<hr />
<h2>Simple callbacks demo</h2>
<p class="callback_demo"><a href="#" rel="scrollto-bottom">Scroll to bottom</a> to load an image at the end of the content | Output: <span class="callback_demo_output"></span><br />
<code>onTotalScrollOffset</code> is set to <code>40</code> pixels, <code>onTotalScrollBackOffset</code> is set to <code>20</code> pixels. <br />
<a href="callbacks_example.html">Advanced callbacks demo</a>
</p>
<!-- content block -->
<div class="content_8 content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p id="par-5">Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus id, feugiat molestie lacus. Sed nec quam purus, at condimentum quam. Integer imperdiet faucibus urna tempus consectetur. Nullam non purus ligula, et tincidunt nulla. Aenean tincidunt, dui at elementum egestas, sem turpis volutpat turpis, nec congue purus quam quis ligula. Nam dictum rutrum pulvinar. Aenean sed cursus purus. Curabitur non dui eu nibh fermentum interdum a id dui. Fusce iaculis blandit tellus, nec tincidunt massa adipiscing id. Aliquam dui massa, porttitor eget molestie at, semper eu libero. Suspendisse sit amet velit et elit viverra convallis vitae ut turpis. Maecenas vehicula blandit odio sollicitudin eleifend. Curabitur molestie porta neque ac imperdiet.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
/* custom scrollbar fn call */
$(".content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
$(".content_2").mCustomScrollbar({
scrollInertia:150
});
$(".content_3").mCustomScrollbar({
scrollInertia:600,
autoDraggerLength:false
});
$(".content_4").mCustomScrollbar({
set_height:"85%",
mouseWheel:false
});
$(".content_5").mCustomScrollbar({
horizontalScroll:true,
scrollButtons:{
enable:true
},
theme:"dark-thin"
});
$(".content_6").mCustomScrollbar({
horizontalScroll:true,
advanced:{
autoExpandHorizontalScroll:true
}
});
$(".content_7").mCustomScrollbar({
set_width:"95%",
scrollButtons:{
enable:true
},
theme:"light-2"
});
$(".content_8").mCustomScrollbar({
callbacks:{
onScroll:function(){
onScrollCallback();
},
onTotalScroll:function(){
onTotalScrollCallback();
},
onTotalScrollOffset:40,
onTotalScrollBack:function(){
onTotalScrollBackCallback();
},
onTotalScrollBackOffset:20
}
});
/*
demo fn
functions below are for demo and examples
*/
$(".demo_functions a[rel='append-new']").click(function(e){
e.preventDefault();
$(".content_6 .images_container").append("<img src='demo_files/mcsThumb1.jpg' class='new' />");
$(".content_6 .images_container img").load(function(){
$(".content_6").mCustomScrollbar("update");
});
});
$(".demo_functions a[rel='prepend-new']").click(function(e){
e.preventDefault();
$(".content_6 .images_container").prepend("<img src='demo_files/mcsThumb8.jpg' class='new' />");
$(".content_6 .images_container img").load(function(){
$(".content_6").mCustomScrollbar("update");
});
});
$(".demo_functions a[rel='append-new-scrollto']").click(function(e){
e.preventDefault();
$(".content_6 .images_container").append("<img src='demo_files/mcsThumb1.jpg' class='new' />");
$(".content_6 .images_container img").load(function(){
$(".content_6").mCustomScrollbar("update");
$(".content_6").mCustomScrollbar("scrollTo","right");
});
});
$(".demo_functions a[rel='scrollto']").click(function(e){
e.preventDefault();
$(".content_6").mCustomScrollbar("scrollTo","#mcs_t_5");
});
$(".demo_functions a[rel='remove-last']").click(function(e){
e.preventDefault();
$(".content_6 .images_container img:last").remove();
$(".content_6").mCustomScrollbar("update");
});
$(".demo_functions a[rel='toggle-width']").click(function(e){
e.preventDefault();
$(".content_6").toggleClass("toggle_width");
$(".content_6").mCustomScrollbar("update");
});
$(".demo_functions a[rel='scrollto-par-5']").click(function(e){
e.preventDefault();
$(".content_7").mCustomScrollbar("scrollTo","#par-5");
});
$(".demo_functions a[rel='increase-height']").click(function(e){
e.preventDefault();
$(".content_7").animate({height:1100},"slow",function(){
$(this).mCustomScrollbar("update");
});
});
$(".demo_functions a[rel='decrease-height']").click(function(e){
e.preventDefault();
$(".content_7").animate({height:350},"slow",function(){
$(this).mCustomScrollbar("update");
});
});
var content_7_height=$(".content_7").height();
$(".demo_functions a[rel='reset-height']").click(function(e){
e.preventDefault();
if($(".content_7").height()!=content_7_height){
$(".content_7").animate({height:content_7_height},"slow",function(){
$(this).mCustomScrollbar("update");
});
}
});
$(".demo_functions a[rel='scrollto-bottom']").click(function(e){
e.preventDefault();
$(".content_7").mCustomScrollbar("scrollTo","bottom");
});
$(".demo_functions a[rel='scrollto-top']").click(function(e){
e.preventDefault();
$(".content_7").mCustomScrollbar("scrollTo","top");
});
$(".demo_functions a[rel='scrollto-par-1st']").click(function(e){
e.preventDefault();
$(".content_7").mCustomScrollbar("scrollTo","first");
});
function onScrollCallback(){
$(".callback_demo .callback_demo_output").html("<em>Scrolled... Content top position: "+mcs.top+"</em>").children("em").delay(1000).fadeOut("slow");
}
function onTotalScrollCallback(){
if($(".appended").length<1){
$(".content_8 .mCSB_container").append("<p class='appended'><img src='demo_files/mcsImg1.jpg' /></p>");
}else{
$(".callback_demo .callback_demo_output").html("<em>Scrolled to bottom. Content top position: "+mcs.top+"</em>").children("em").delay(1000).fadeOut("slow");
}
$(".content_8 .mCSB_container img").load(function(){
$(".content_8").mCustomScrollbar("update");
$(".callback_demo .callback_demo_output").html("<em>New image loaded...</em>").children("em").delay(1000).fadeOut("slow");
});
}
function onTotalScrollBackCallback(){
$(".callback_demo .callback_demo_output").html("<em>Scrolled to top. Content top position: "+mcs.top+"</em>").children("em").delay(1000).fadeOut("slow");
}
$(".callback_demo a[rel='scrollto-bottom']").click(function(e){
e.preventDefault();
$(".content_8").mCustomScrollbar("scrollTo","bottom");
});
});
})(jQuery);
</script>
</body>
</html>

6
web/App_Script/custom-scrollbar-plugin/demo_files/ajax_content.html Normal file
View File

@@ -0,0 +1,6 @@
<h2>New content</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p><hr /></p>

559
web/App_Script/custom-scrollbar-plugin/demo_files/jquery.mCustomScrollbar.css Normal file
View File

@@ -0,0 +1,559 @@
/* basic scrollbar styling */
/* vertical scrollbar */
.mCSB_container{
width:auto;
margin-right:30px;
overflow:hidden;
}
.mCSB_container.mCS_no_scrollbar{
margin-right:0;
}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{
width:16px;
height:100%;
top:0;
right:0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
.mCSB_scrollTools a+.mCSB_draggerContainer{
margin:20px 0;
}
.mCSB_scrollTools .mCSB_draggerRail{
width:2px;
height:100%;
margin:0 auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_scrollTools .mCSB_dragger{
cursor:pointer;
width:100%;
height:30px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
height:100%;
margin:0 auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-align:center;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
display:block;
position:relative;
height:20px;
overflow:hidden;
margin:0 auto;
cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
top:100%;
margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal>.mCSB_container{
height:auto;
margin-right:0;
margin-bottom:30px;
overflow:hidden;
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-bottom:0;
}
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-right:0;
margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
width:100%;
height:16px;
top:auto;
right:auto;
bottom:0;
left:0;
overflow:hidden;
}
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
margin:0 20px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:2px;
margin:7px 0;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
width:30px;
height:100%;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
display:block;
position:relative;
width:20px;
height:100%;
overflow:hidden;
margin:0 auto;
cursor:pointer;
float:left;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
margin-left:-40px;
float:right;
}
.mCustomScrollBox{
-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
}
/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox>.mCSB_scrollTools{
opacity:0.75;
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
opacity:1;
filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
}
.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.4);
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
background-image:url(../mCSB_buttons.png);
background-repeat:no-repeat;
opacity:0.4;
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp{
background-position:0 0;
/*
sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonDown{
background-position:0 -20px;
/*
sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonLeft{
background-position:0 -40px;
/*
sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonRight{
background-position:0 -56px;
/*
sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{
opacity:0.75;
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{
opacity:0.9;
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}
/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.15);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-80px 0;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-80px -20px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-80px -40px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-80px -56px;
}
/*light-2*/
.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-32px 0;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-32px -20px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-40px -40px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-40px -56px;
}
/*dark-2*/
.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.1);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-112px 0;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-112px -20px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-120px -40px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-120px -56px;
}
/*light-thick*/
.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:6px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:6px;
margin:5px auto;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-16px 0;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-16px -20px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-20px -40px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-20px -56px;
}
/*dark-thick*/
.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.1);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:6px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:6px;
margin:5px auto;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-96px 0;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-96px -20px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-100px -40px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-100px -56px;
}
/*light-thin*/
.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
}
.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:2px;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:2px;
margin:7px auto;
}
/*dark-thin*/
.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.15);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:2px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:2px;
margin:7px auto;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-80px 0;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-80px -20px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-80px -40px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-80px -56px;
}
/* custom styling */
/* content_1 scrollbar */
.content_1>.mCustomScrollBox>.mCSB_scrollTools{
height:96%;
top:2%;
}
/* content_2 scrollbar */
.content_2 .mCSB_scrollTools .mCSB_draggerRail{
width:6px;
box-shadow:1px 1px 1px rgba(255,255,255,0.1);
}
.content_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:rgba(255,255,255,0.4);
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.content_2 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.5);
filter:"alpha(opacity=50)"; -ms-filter:"alpha(opacity=50)"; /* old ie */
}
.content_2 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.content_2 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.6);
filter:"alpha(opacity=60)"; -ms-filter:"alpha(opacity=60)"; /* old ie */
}
/* content_3 scrollbar */
.content_3>.mCustomScrollBox>.mCSB_scrollTools{
height:94%;
top:3%;
}
.content_3 .mCSB_scrollTools .mCSB_draggerRail{
width:0;
border-right:1px dashed #09C;
}
.content_3 .mCSB_scrollTools .mCSB_dragger{
height:11px;
}
.content_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:11px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
border-radius:11px;
background:#09C;
}
/* content_4 scrollbar */
.content_4>.mCustomScrollBox>.mCSB_scrollTools{
height:94%;
top:3%;
}
.content_4 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:8px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#d0b9a0;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.5);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.5);
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
}
.content_4 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.content_4 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:#dfcdb9;
}
.content_4 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.content_4 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.5);
box-shadow:0 0 3px rgba(0,0,0,0.5);
}
/* content_5 scrollbar */
.content_5>.mCustomScrollBox>.mCSB_scrollTools{
width: 98%;
margin: 0 1%;
}
/* content_6 scrollbar */
.content_6>.mCustomScrollBox>.mCSB_scrollTools{
width:88%;
margin: 0 6%;
}
/* content_8 scrollbar */
.content_8 .mCSB_scrollTools .mCSB_draggerRail{
width:0px;
border-left:1px solid rgba(0,0,0,0.8);
border-right:1px solid rgba(255,255,255,0.2);
}

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsImg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsImg2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcsThumb8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
web/App_Script/custom-scrollbar-plugin/demo_files/mcs_demo_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

105
web/App_Script/custom-scrollbar-plugin/disable_destroy_example.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:60%; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
.content input{border:none; background:#222; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; width:35%; height:30px; margin:10px 10px 20px 0; padding:0 10px; color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>disable &amp; destroy methods example</h1>
<p class="output">
<a href="#" id="disable-scrollbar">Disable scrollbar</a>
<a href="#" id="disable-scrollbar-no-reset">Disable scrollbar without reseting content position</a>
<a href="#" id="enable-scrollbar">Enable scrollbar</a>
<a href="#" id="destroy-scrollbar">Destroy scrollbar</a>
<a href="#" id="rebuild-scrollbar">Rebuild scrollbar</a>
</p>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<form><input type="text" name="tf1" value="Textfield 1" /></form>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<form><input type="text" name="tf2" value="Textfield 2" /></form>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
/* disable */
$("#disable-scrollbar").click(function(e){
e.preventDefault();
$("#content_1").mCustomScrollbar("disable",true);
});
$("#disable-scrollbar-no-reset").click(function(e){
e.preventDefault();
$("#content_1").mCustomScrollbar("disable");
});
$("#enable-scrollbar").click(function(e){
e.preventDefault();
$("#content_1").mCustomScrollbar("update");
});
/* destroy */
$("#destroy-scrollbar").click(function(e){
e.preventDefault();
$("#content_1").mCustomScrollbar("destroy");
});
$("#rebuild-scrollbar").click(function(e){
e.preventDefault();
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
});
})(jQuery);
</script>
</body>
</html>

71
web/App_Script/custom-scrollbar-plugin/fluid_scrollbar_example.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
html,body{height:100%;}
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{position:relative; margin:40px auto; width:100%; height:65%; padding:20px 40px; overflow:auto; background:#333; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Fluid content example</h1>
<!-- content block -->
<div id="content_1" class="content">
<p><strong>Resize browser to test</strong></p>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</body>
</html>

83
web/App_Script/custom-scrollbar-plugin/full_page_demo.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
html,body{height:100%;}
body{margin:0; padding:0 20px; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px; overflow:auto;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px 40px 40px 0; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px 9px 0; clear:both;}
.links{margin:10px 10px 10px 0;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px 40px 40px 0; width:60%; height:300px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
/*body custom scrollbar style*/
body>.mCustomScrollBox>.mCSB_scrollTools{top:2%; height:96%;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Default scrollbar with scroll buttons</h1>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("body,.content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</body>
</html>

114
web/App_Script/custom-scrollbar-plugin/grid_and_snap_while_scrolling_example.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
code{color:#5b70ff;}
a[rel='toggle-buttons-scroll-type']{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
.content{margin:40px; width:910px; height:500px; overflow:hidden;}
#content_1{width:910px;height:480px;}
.grid{table-layout:fixed;border-collapse:separate;border-style:none;border-spacing:0;width:0;}
.grid th {overflow: hidden;white-space: nowrap;padding: 0;text-align: center;vertical-align: middle;width: 90px;max-width: 90px;font-size: 11px;border: 1px solid #cbcbcb;border-width: 0 1px 1px 0;background-color: #f3f3f3;color: #222;}
.grid td {overflow: hidden;white-space: nowrap;width: 90px;max-width: 90px;height: 16px;line-height: 16px;font-size: 13px;border: 1px solid #cbcbcb;border-width: 0 1px 1px 0;text-align: right;vertical-align: middle;padding: 1px 2px;background-color: #fff;color: #000;}
.grid th:first-child, .grid td:first-child {width: 148px;text-align: left;background-color: #f3f3f3;color: #222;padding-left: 4px;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Example of snapping to a grid while scrolling</h1>
<!-- content block -->
<div class="content">
<table class="grid">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
</tr>
</thead>
</table>
<div id="content_1">
<table id="grid" class="grid">
<thead>
<tr class="shim">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.js"></script>
<script>
(function($){
$(window).load(function(){
var $grid_body = $('#grid tbody'), html;
for (var i = 0; i < 100; i++) {
var label = String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
String.fromCharCode("A".charCodeAt(0) + (i % 26));
html = "<tr><td>" + label + "</td>";
for (var j = 0; j < 9; j++) {
html += "<td>" + Math.round(Math.random() * 100) + "</td>";
}
html += "</tr>";
$grid_body.append(html);
}
$("#content_1").mCustomScrollbar({
theme:"light",
scrollInertia:0,
mouseWheelPixels:19,
snapAmount:19,
snapOffset: 1,
scrollButtons:{
enable:true,
scrollType:"pixels",
scrollAmount:19
},
});
});
})(jQuery);
</script>
</body>
</html>

62
web/App_Script/custom-scrollbar-plugin/iframe_example.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:1040px; height:500px; overflow:auto;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
<!-- fun stuff: styling the scrollbar to match iframe content -->
<style>
.mCSB_scrollTools .mCSB_draggerRail{width:6px; background:#000; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px; background:#d03428; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background:#fcea6a;}
</style>
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>iframe demo</h1>
<!-- content block -->
<div class="content">
<iframe src="http://slipsum.com/" scrolling="no" width="100%" height="1000" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
</body>
</html>

85
web/App_Script/custom-scrollbar-plugin/infinite_scroll_example.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{position:relative; margin:40px auto; width:100%; height:400px; padding:20px 40px; overflow:auto; background:#333; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#9dbfc6; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
.content#content_2{width:400px; margin:40px;}
.totalScrollOffsetInfo{border:2px solid #fc0; font-size:12px; padding:20px; text-align:center; margin-bottom:60px;}
.totalScrollOffset{height:50px; background:#fc0;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Infinite scroll example</h1>
<p class="output"><a id="scroll_to_bottom" href="#">Scroll to bottom</a></p>
<!-- content block -->
<div id="content_2" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>the end.</p>
<div class="totalScrollOffsetInfo">Yellow box below indicates total scroll offset area</div>
<div class="totalScrollOffset"></div>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
var totalScrollOffsetH=$(".totalScrollOffset").height();
$("#content_2").mCustomScrollbar({
scrollButtons:{
enable:true
},
callbacks:{
onTotalScroll:function(){
appendTextOnTotalScroll();
},
onTotalScrollOffset:totalScrollOffsetH
}
});
$("#scroll_to_bottom").click(function(e){
e.preventDefault();
$("#content_2").mCustomScrollbar("scrollTo","bottom");
});
function appendTextOnTotalScroll(){
var c=$("#content_2").find(".mCSB_container p:last");
var h="<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. <strong>Appended text end.</strong></p>";
c.after(h);
$("#content_2").mCustomScrollbar("update");
}
});
})(jQuery);
</script>
</body>
</html>

74
web/App_Script/custom-scrollbar-plugin/init_hidden_example.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:hidden; background:#333;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
#content_1{display:none;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Initially hidden content block</h1>
<p class="output"><a href="#" rel="show-content">show/hide</a></p>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar();
//demo fn
$("a[rel='show-content']").click(function(e){
e.preventDefault();
$("#content_1").fadeToggle("slow",function(){
var customScrollbar=$("#content_1").find(".mCSB_scrollTools");
customScrollbar.css({"opacity":0});
$("#content_1").mCustomScrollbar("update");
customScrollbar.animate({opacity:1},"slow");
});
});
});
})(jQuery);
</script>
</body>
</html>

4
web/App_Script/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

474
web/App_Script/custom-scrollbar-plugin/jquery.mCustomScrollbar.css Normal file
View File

@@ -0,0 +1,474 @@
/* basic scrollbar styling */
/* vertical scrollbar */
.mCSB_container{
width:auto;
margin-right:30px;
overflow:hidden;
}
.mCSB_container.mCS_no_scrollbar{
margin-right:0;
}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{
width:16px;
height:100%;
top:0;
right:0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
.mCSB_scrollTools a+.mCSB_draggerContainer{
margin:20px 0;
}
.mCSB_scrollTools .mCSB_draggerRail{
width:2px;
height:100%;
margin:0 auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_scrollTools .mCSB_dragger{
cursor:pointer;
width:100%;
height:30px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
height:100%;
margin:0 auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-align:center;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
display:block;
position:relative;
height:20px;
overflow:hidden;
margin:0 auto;
cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
top:100%;
margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal>.mCSB_container{
height:auto;
margin-right:0;
margin-bottom:30px;
overflow:hidden;
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-bottom:0;
}
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-right:0;
margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
width:100%;
height:16px;
top:auto;
right:auto;
bottom:0;
left:0;
overflow:hidden;
}
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
margin:0 20px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:2px;
margin:7px 0;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
width:30px;
height:100%;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
display:block;
position:relative;
width:20px;
height:100%;
overflow:hidden;
margin:0 auto;
cursor:pointer;
float:left;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
margin-left:-40px;
float:right;
}
.mCustomScrollBox{
-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
}
/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox>.mCSB_scrollTools{
opacity:0.75;
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
opacity:1;
filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
}
.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.4);
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
background-image:url(mCSB_buttons.png);
background-repeat:no-repeat;
opacity:0.4;
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp{
background-position:0 0;
/*
sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonDown{
background-position:0 -20px;
/*
sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonLeft{
background-position:0 -40px;
/*
sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonRight{
background-position:0 -56px;
/*
sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark)
*/
}
.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{
opacity:0.75;
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{
opacity:0.9;
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}
/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.15);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-80px 0;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-80px -20px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-80px -40px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-80px -56px;
}
/*light-2*/
.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-32px 0;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-32px -20px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-40px -40px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-40px -56px;
}
/*dark-2*/
.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.1);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-112px 0;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-112px -20px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-120px -40px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-120px -56px;
}
/*light-thick*/
.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:6px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:6px;
margin:5px auto;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-16px 0;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-16px -20px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-20px -40px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-20px -56px;
}
/*dark-thick*/
.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.1);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:6px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:6px;
margin:5px auto;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-96px 0;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-96px -20px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-100px -40px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-100px -56px;
}
/*light-thin*/
.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
}
.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:2px;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:2px;
margin:7px auto;
}
/*dark-thin*/
.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.15);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:2px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:2px;
margin:7px auto;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-80px 0;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-80px -20px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-80px -40px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-80px -56px;
}

969
web/App_Script/custom-scrollbar-plugin/jquery.mCustomScrollbar.js Normal file
View File

@@ -0,0 +1,969 @@
/*
== malihu jquery custom scrollbars plugin ==
version: 2.8.3
author: malihu (http://manos.malihu.gr)
plugin home: http://manos.malihu.gr/jquery-custom-content-scroller
*/
/*
Copyright 2010-2013 Manos Malihutsakis
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program. If not, see http://www.gnu.org/licenses/lgpl.html.
*/
(function($){
/*plugin script*/
var methods={
init:function(options){
var defaults={
set_width:false, /*optional element width: boolean, pixels, percentage*/
set_height:false, /*optional element height: boolean, pixels, percentage*/
horizontalScroll:false, /*scroll horizontally: boolean*/
scrollInertia:950, /*scrolling inertia: integer (milliseconds)*/
mouseWheel:true, /*mousewheel support: boolean*/
mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
alwaysShowScrollbar:false, /*always show scrollbar even when there's nothing to scroll (disables autoHideScrollbar): boolean*/
snapAmount:null, /* optional element always snaps to a multiple of this number in pixels */
snapOffset:0, /* when snapping, snap with this number in pixels as an offset */
scrollButtons:{ /*scroll buttons*/
enable:false, /*scroll buttons support: boolean*/
scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
},
advanced:{
updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
updateOnContentResize:false, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
autoExpandHorizontalScroll:false, /*auto-expand width for horizontal scrolling: boolean*/
autoScrollOnFocus:true, /*auto-scroll on focused elements: boolean*/
normalizeMouseWheelDelta:false /*normalize mouse-wheel delta (-1/1)*/
},
contentTouchScroll:true, /*scrolling by touch-swipe content: boolean*/
callbacks:{
onScrollStart:function(){}, /*user custom callback function on scroll start event*/
onScroll:function(){}, /*user custom callback function on scroll event*/
onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
onTotalScrollBack:function(){}, /*user custom callback function on scroll begin reached event*/
onTotalScrollOffset:0, /*scroll end reached offset: integer (pixels)*/
onTotalScrollBackOffset:0, /*scroll begin reached offset: integer (pixels)*/
whileScrolling:function(){} /*user custom callback function on scrolling event*/
},
theme:"light" /*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
},
options=$.extend(true,defaults,options);
return this.each(function(){
var $this=$(this);
/*set element width/height, create markup for custom scrollbars, add classes*/
if(options.set_width){
$this.css("width",options.set_width);
}
if(options.set_height){
$this.css("height",options.set_height);
}
if(!$(document).data("mCustomScrollbar-index")){
$(document).data("mCustomScrollbar-index","1");
}else{
var mCustomScrollbarIndex=parseInt($(document).data("mCustomScrollbar-index"));
$(document).data("mCustomScrollbar-index",mCustomScrollbarIndex+1);
}
$this.wrapInner("<div class='mCustomScrollBox"+" mCS-"+options.theme+"' id='mCSB_"+$(document).data("mCustomScrollbar-index")+"' style='position:relative; height:100%; overflow:hidden; max-width:100%;' />").addClass("mCustomScrollbar _mCS_"+$(document).data("mCustomScrollbar-index"));
var mCustomScrollBox=$this.children(".mCustomScrollBox");
if(options.horizontalScroll){
mCustomScrollBox.addClass("mCSB_horizontal").wrapInner("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />");
var mCSB_h_wrapper=mCustomScrollBox.children(".mCSB_h_wrapper");
mCSB_h_wrapper.wrapInner("<div class='mCSB_container' style='position:absolute; left:0;' />").children(".mCSB_container").css({"width":mCSB_h_wrapper.children().outerWidth(),"position":"relative"}).unwrap();
}else{
mCustomScrollBox.wrapInner("<div class='mCSB_container' style='position:relative; top:0;' />");
}
var mCSB_container=mCustomScrollBox.children(".mCSB_container");
if($.support.touch){
mCSB_container.addClass("mCS_touch");
}
mCSB_container.after("<div class='mCSB_scrollTools' style='position:absolute;'><div class='mCSB_draggerContainer'><div class='mCSB_dragger' style='position:absolute;' oncontextmenu='return false;'><div class='mCSB_dragger_bar' style='position:relative;'></div></div><div class='mCSB_draggerRail'></div></div></div>");
var mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger");
if(options.horizontalScroll){
mCSB_dragger.data("minDraggerWidth",mCSB_dragger.width());
}else{
mCSB_dragger.data("minDraggerHeight",mCSB_dragger.height());
}
if(options.scrollButtons.enable){
if(options.horizontalScroll){
mCSB_scrollTools.prepend("<a class='mCSB_buttonLeft' oncontextmenu='return false;'></a>").append("<a class='mCSB_buttonRight' oncontextmenu='return false;'></a>");
}else{
mCSB_scrollTools.prepend("<a class='mCSB_buttonUp' oncontextmenu='return false;'></a>").append("<a class='mCSB_buttonDown' oncontextmenu='return false;'></a>");
}
}
/*mCustomScrollBox scrollTop and scrollLeft is always 0 to prevent browser focus scrolling*/
mCustomScrollBox.bind("scroll",function(){
if(!$this.is(".mCS_disabled")){ /*native focus scrolling for disabled scrollbars*/
mCustomScrollBox.scrollTop(0).scrollLeft(0);
}
});
/*store options, global vars/states, intervals*/
$this.data({
/*init state*/
"mCS_Init":true,
/*instance index*/
"mCustomScrollbarIndex":$(document).data("mCustomScrollbar-index"),
/*option parameters*/
"horizontalScroll":options.horizontalScroll,
"scrollInertia":options.scrollInertia,
"scrollEasing":"mcsEaseOut",
"mouseWheel":options.mouseWheel,
"mouseWheelPixels":options.mouseWheelPixels,
"autoDraggerLength":options.autoDraggerLength,
"autoHideScrollbar":options.autoHideScrollbar,
"alwaysShowScrollbar":options.alwaysShowScrollbar,
"snapAmount":options.snapAmount,
"snapOffset":options.snapOffset,
"scrollButtons_enable":options.scrollButtons.enable,
"scrollButtons_scrollType":options.scrollButtons.scrollType,
"scrollButtons_scrollSpeed":options.scrollButtons.scrollSpeed,
"scrollButtons_scrollAmount":options.scrollButtons.scrollAmount,
"autoExpandHorizontalScroll":options.advanced.autoExpandHorizontalScroll,
"autoScrollOnFocus":options.advanced.autoScrollOnFocus,
"normalizeMouseWheelDelta":options.advanced.normalizeMouseWheelDelta,
"contentTouchScroll":options.contentTouchScroll,
"onScrollStart_Callback":options.callbacks.onScrollStart,
"onScroll_Callback":options.callbacks.onScroll,
"onTotalScroll_Callback":options.callbacks.onTotalScroll,
"onTotalScrollBack_Callback":options.callbacks.onTotalScrollBack,
"onTotalScroll_Offset":options.callbacks.onTotalScrollOffset,
"onTotalScrollBack_Offset":options.callbacks.onTotalScrollBackOffset,
"whileScrolling_Callback":options.callbacks.whileScrolling,
/*events binding state*/
"bindEvent_scrollbar_drag":false,
"bindEvent_content_touch":false,
"bindEvent_scrollbar_click":false,
"bindEvent_mousewheel":false,
"bindEvent_buttonsContinuous_y":false,
"bindEvent_buttonsContinuous_x":false,
"bindEvent_buttonsPixels_y":false,
"bindEvent_buttonsPixels_x":false,
"bindEvent_focusin":false,
"bindEvent_autoHideScrollbar":false,
/*buttons intervals*/
"mCSB_buttonScrollRight":false,
"mCSB_buttonScrollLeft":false,
"mCSB_buttonScrollDown":false,
"mCSB_buttonScrollUp":false
});
/*max-width/max-height*/
if(options.horizontalScroll){
if($this.css("max-width")!=="none"){
if(!options.advanced.updateOnContentResize){ /*needs updateOnContentResize*/
options.advanced.updateOnContentResize=true;
}
}
}else{
if($this.css("max-height")!=="none"){
var percentage=false,maxHeight=parseInt($this.css("max-height"));
if($this.css("max-height").indexOf("%")>=0){
percentage=maxHeight,
maxHeight=$this.parent().height()*percentage/100;
}
$this.css("overflow","hidden");
mCustomScrollBox.css("max-height",maxHeight);
}
}
$this.mCustomScrollbar("update");
/*window resize fn (for layouts based on percentages)*/
if(options.advanced.updateOnBrowserResize){
var mCSB_resizeTimeout,currWinWidth=$(window).width(),currWinHeight=$(window).height();
$(window).bind("resize."+$this.data("mCustomScrollbarIndex"),function(){
if(mCSB_resizeTimeout){
clearTimeout(mCSB_resizeTimeout);
}
mCSB_resizeTimeout=setTimeout(function(){
if(!$this.is(".mCS_disabled") && !$this.is(".mCS_destroyed")){
var winWidth=$(window).width(),winHeight=$(window).height();
if(currWinWidth!==winWidth || currWinHeight!==winHeight){ /*ie8 fix*/
if($this.css("max-height")!=="none" && percentage){
mCustomScrollBox.css("max-height",$this.parent().height()*percentage/100);
}
$this.mCustomScrollbar("update");
currWinWidth=winWidth; currWinHeight=winHeight;
}
}
},150);
});
}
/*content resize fn (for dynamically generated content)*/
if(options.advanced.updateOnContentResize){
var mCSB_onContentResize;
if(options.horizontalScroll){
var mCSB_containerOldSize=mCSB_container.outerWidth();
}else{
var mCSB_containerOldSize=mCSB_container.outerHeight();
}
mCSB_onContentResize=setInterval(function(){
if(options.horizontalScroll){
if(options.advanced.autoExpandHorizontalScroll){
mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();
}
var mCSB_containerNewSize=mCSB_container.outerWidth();
}else{
var mCSB_containerNewSize=mCSB_container.outerHeight();
}
if(mCSB_containerNewSize!=mCSB_containerOldSize){
$this.mCustomScrollbar("update");
mCSB_containerOldSize=mCSB_containerNewSize;
}
},300);
}
});
},
update:function(){
var $this=$(this),
mCustomScrollBox=$this.children(".mCustomScrollBox"),
mCSB_container=mCustomScrollBox.children(".mCSB_container");
mCSB_container.removeClass("mCS_no_scrollbar");
$this.removeClass("mCS_disabled mCS_destroyed");
mCustomScrollBox.scrollTop(0).scrollLeft(0); /*reset scrollTop/scrollLeft to prevent browser focus scrolling*/
var mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger");
if($this.data("horizontalScroll")){
var mCSB_buttonLeft=mCSB_scrollTools.children(".mCSB_buttonLeft"),
mCSB_buttonRight=mCSB_scrollTools.children(".mCSB_buttonRight"),
mCustomScrollBoxW=mCustomScrollBox.width();
if($this.data("autoExpandHorizontalScroll")){
mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();
}
var mCSB_containerW=mCSB_container.outerWidth();
}else{
var mCSB_buttonUp=mCSB_scrollTools.children(".mCSB_buttonUp"),
mCSB_buttonDown=mCSB_scrollTools.children(".mCSB_buttonDown"),
mCustomScrollBoxH=mCustomScrollBox.height(),
mCSB_containerH=mCSB_container.outerHeight();
}
if(mCSB_containerH>mCustomScrollBoxH && !$this.data("horizontalScroll")){ /*content needs vertical scrolling*/
mCSB_scrollTools.css("display","block");
var mCSB_draggerContainerH=mCSB_draggerContainer.height();
/*auto adjust scrollbar dragger length analogous to content*/
if($this.data("autoDraggerLength")){
var draggerH=Math.round(mCustomScrollBoxH/mCSB_containerH*mCSB_draggerContainerH),
minDraggerH=mCSB_dragger.data("minDraggerHeight");
if(draggerH<=minDraggerH){ /*min dragger height*/
mCSB_dragger.css({"height":minDraggerH});
}else if(draggerH>=mCSB_draggerContainerH-10){ /*max dragger height*/
var mCSB_draggerContainerMaxH=mCSB_draggerContainerH-10;
mCSB_dragger.css({"height":mCSB_draggerContainerMaxH});
}else{
mCSB_dragger.css({"height":draggerH});
}
mCSB_dragger.children(".mCSB_dragger_bar").css({"line-height":mCSB_dragger.height()+"px"});
}
var mCSB_draggerH=mCSB_dragger.height(),
/*calculate and store scroll amount, add scrolling*/
scrollAmount=(mCSB_containerH-mCustomScrollBoxH)/(mCSB_draggerContainerH-mCSB_draggerH);
$this.data("scrollAmount",scrollAmount).mCustomScrollbar("scrolling",mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight);
/*scroll*/
var mCSB_containerP=Math.abs(mCSB_container.position().top);
$this.mCustomScrollbar("scrollTo",mCSB_containerP,{scrollInertia:0,trigger:"internal"});
}else if(mCSB_containerW>mCustomScrollBoxW && $this.data("horizontalScroll")){ /*content needs horizontal scrolling*/
mCSB_scrollTools.css("display","block");
var mCSB_draggerContainerW=mCSB_draggerContainer.width();
/*auto adjust scrollbar dragger length analogous to content*/
if($this.data("autoDraggerLength")){
var draggerW=Math.round(mCustomScrollBoxW/mCSB_containerW*mCSB_draggerContainerW),
minDraggerW=mCSB_dragger.data("minDraggerWidth");
if(draggerW<=minDraggerW){ /*min dragger height*/
mCSB_dragger.css({"width":minDraggerW});
}else if(draggerW>=mCSB_draggerContainerW-10){ /*max dragger height*/
var mCSB_draggerContainerMaxW=mCSB_draggerContainerW-10;
mCSB_dragger.css({"width":mCSB_draggerContainerMaxW});
}else{
mCSB_dragger.css({"width":draggerW});
}
}
var mCSB_draggerW=mCSB_dragger.width(),
/*calculate and store scroll amount, add scrolling*/
scrollAmount=(mCSB_containerW-mCustomScrollBoxW)/(mCSB_draggerContainerW-mCSB_draggerW);
$this.data("scrollAmount",scrollAmount).mCustomScrollbar("scrolling",mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight);
/*scroll*/
var mCSB_containerP=Math.abs(mCSB_container.position().left);
$this.mCustomScrollbar("scrollTo",mCSB_containerP,{scrollInertia:0,trigger:"internal"});
}else{ /*content does not need scrolling*/
/*unbind events, reset content position, hide scrollbars, remove classes*/
mCustomScrollBox.unbind("mousewheel focusin");
if($this.data("horizontalScroll")){
mCSB_dragger.add(mCSB_container).css("left",0);
}else{
mCSB_dragger.add(mCSB_container).css("top",0);
}
if ($this.data("alwaysShowScrollbar")) {
if(!$this.data("horizontalScroll")){ /*vertical scrolling*/
mCSB_dragger.css({"height":mCSB_draggerContainer.height()});
}else if($this.data("horizontalScroll")){ /*horizontal scrolling*/
mCSB_dragger.css({"width":mCSB_draggerContainer.width()});
}
} else {
mCSB_scrollTools.css("display","none");
mCSB_container.addClass("mCS_no_scrollbar");
}
$this.data({"bindEvent_mousewheel":false,"bindEvent_focusin":false});
}
},
scrolling:function(mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight){
var $this=$(this);
/*scrollbar drag scrolling*/
if(!$this.data("bindEvent_scrollbar_drag")){
var mCSB_draggerDragY,mCSB_draggerDragX,
mCSB_dragger_downEvent,mCSB_dragger_moveEvent,mCSB_dragger_upEvent;
if($.support.pointer){ /*pointer*/
mCSB_dragger_downEvent="pointerdown";
mCSB_dragger_moveEvent="pointermove";
mCSB_dragger_upEvent="pointerup";
}else if($.support.msPointer){ /*MSPointer*/
mCSB_dragger_downEvent="MSPointerDown";
mCSB_dragger_moveEvent="MSPointerMove";
mCSB_dragger_upEvent="MSPointerUp";
}
if($.support.pointer || $.support.msPointer){ /*pointer, MSPointer*/
mCSB_dragger.bind(mCSB_dragger_downEvent,function(e){
e.preventDefault();
$this.data({"on_drag":true}); mCSB_dragger.addClass("mCSB_dragger_onDrag");
var elem=$(this),
elemOffset=elem.offset(),
x=e.originalEvent.pageX-elemOffset.left,
y=e.originalEvent.pageY-elemOffset.top;
if(x<elem.width() && x>0 && y<elem.height() && y>0){
mCSB_draggerDragY=y;
mCSB_draggerDragX=x;
}
});
$(document).bind(mCSB_dragger_moveEvent+"."+$this.data("mCustomScrollbarIndex"),function(e){
e.preventDefault();
if($this.data("on_drag")){
var elem=mCSB_dragger,
elemOffset=elem.offset(),
x=e.originalEvent.pageX-elemOffset.left,
y=e.originalEvent.pageY-elemOffset.top;
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
}
}).bind(mCSB_dragger_upEvent+"."+$this.data("mCustomScrollbarIndex"),function(e){
$this.data({"on_drag":false}); mCSB_dragger.removeClass("mCSB_dragger_onDrag");
});
}else{ /*mouse/touch*/
mCSB_dragger.bind("mousedown touchstart",function(e){
e.preventDefault(); e.stopImmediatePropagation();
var elem=$(this),elemOffset=elem.offset(),x,y;
if(e.type==="touchstart"){
var touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
x=touch.pageX-elemOffset.left; y=touch.pageY-elemOffset.top;
}else{
$this.data({"on_drag":true}); mCSB_dragger.addClass("mCSB_dragger_onDrag");
x=e.pageX-elemOffset.left; y=e.pageY-elemOffset.top;
}
if(x<elem.width() && x>0 && y<elem.height() && y>0){
mCSB_draggerDragY=y; mCSB_draggerDragX=x;
}
}).bind("touchmove",function(e){
e.preventDefault(); e.stopImmediatePropagation();
var touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0],
elem=$(this),
elemOffset=elem.offset(),
x=touch.pageX-elemOffset.left,
y=touch.pageY-elemOffset.top;
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
});
$(document).bind("mousemove."+$this.data("mCustomScrollbarIndex"),function(e){
if($this.data("on_drag")){
var elem=mCSB_dragger,
elemOffset=elem.offset(),
x=e.pageX-elemOffset.left,
y=e.pageY-elemOffset.top;
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
}
}).bind("mouseup."+$this.data("mCustomScrollbarIndex"),function(e){
$this.data({"on_drag":false}); mCSB_dragger.removeClass("mCSB_dragger_onDrag");
});
}
$this.data({"bindEvent_scrollbar_drag":true});
}
function scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x){
if($this.data("horizontalScroll")){
$this.mCustomScrollbar("scrollTo",(mCSB_dragger.position().left-(mCSB_draggerDragX))+x,{moveDragger:true,trigger:"internal"});
}else{
$this.mCustomScrollbar("scrollTo",(mCSB_dragger.position().top-(mCSB_draggerDragY))+y,{moveDragger:true,trigger:"internal"});
}
}
/*content touch-drag*/
if($.support.touch && $this.data("contentTouchScroll")){
if(!$this.data("bindEvent_content_touch")){
var touch,
elem,elemOffset,y,x,mCSB_containerTouchY,mCSB_containerTouchX;
mCSB_container.bind("touchstart",function(e){
e.stopImmediatePropagation();
touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
elem=$(this);
elemOffset=elem.offset();
x=touch.pageX-elemOffset.left;
y=touch.pageY-elemOffset.top;
mCSB_containerTouchY=y;
mCSB_containerTouchX=x;
});
mCSB_container.bind("touchmove",function(e){
e.preventDefault(); e.stopImmediatePropagation();
touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
elem=$(this).parent();
elemOffset=elem.offset();
x=touch.pageX-elemOffset.left;
y=touch.pageY-elemOffset.top;
if($this.data("horizontalScroll")){
$this.mCustomScrollbar("scrollTo",mCSB_containerTouchX-x,{trigger:"internal"});
}else{
$this.mCustomScrollbar("scrollTo",mCSB_containerTouchY-y,{trigger:"internal"});
}
});
}
}
/*dragger rail click scrolling*/
if(!$this.data("bindEvent_scrollbar_click")){
mCSB_draggerContainer.bind("click",function(e){
var scrollToPos=(e.pageY-mCSB_draggerContainer.offset().top)*$this.data("scrollAmount"),target=$(e.target);
if($this.data("horizontalScroll")){
scrollToPos=(e.pageX-mCSB_draggerContainer.offset().left)*$this.data("scrollAmount");
}
if(target.hasClass("mCSB_draggerContainer") || target.hasClass("mCSB_draggerRail")){
$this.mCustomScrollbar("scrollTo",scrollToPos,{trigger:"internal",scrollEasing:"draggerRailEase"});
}
});
$this.data({"bindEvent_scrollbar_click":true});
}
/*mousewheel scrolling*/
if($this.data("mouseWheel")){
if(!$this.data("bindEvent_mousewheel")){
mCustomScrollBox.bind("mousewheel",function(e,delta){
var scrollTo,mouseWheelPixels=$this.data("mouseWheelPixels"),absPos=Math.abs(mCSB_container.position().top),
draggerPos=mCSB_dragger.position().top,limit=mCSB_draggerContainer.height()-mCSB_dragger.height();
if($this.data("normalizeMouseWheelDelta")){
if(delta<0){delta=-1;}else{delta=1;}
}
if(mouseWheelPixels==="auto"){
mouseWheelPixels=100+Math.round($this.data("scrollAmount")/2);
}
if($this.data("horizontalScroll")){
draggerPos=mCSB_dragger.position().left;
limit=mCSB_draggerContainer.width()-mCSB_dragger.width();
absPos=Math.abs(mCSB_container.position().left);
}
if((delta>0 && draggerPos!==0) || (delta<0 && draggerPos!==limit)){e.preventDefault(); e.stopImmediatePropagation();}
scrollTo=absPos-(delta*mouseWheelPixels);
$this.mCustomScrollbar("scrollTo",scrollTo,{trigger:"internal"});
});
$this.data({"bindEvent_mousewheel":true});
}
}
/*buttons scrolling*/
if($this.data("scrollButtons_enable")){
if($this.data("scrollButtons_scrollType")==="pixels"){ /*scroll by pixels*/
if($this.data("horizontalScroll")){
mCSB_buttonRight.add(mCSB_buttonLeft).unbind("mousedown touchstart MSPointerDown pointerdown mouseup MSPointerUp pointerup mouseout MSPointerOut pointerout touchend",mCSB_buttonRight_stop,mCSB_buttonLeft_stop);
$this.data({"bindEvent_buttonsContinuous_x":false});
if(!$this.data("bindEvent_buttonsPixels_x")){
/*scroll right*/
mCSB_buttonRight.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().left)+$this.data("scrollButtons_scrollAmount"));
});
/*scroll left*/
mCSB_buttonLeft.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().left)-$this.data("scrollButtons_scrollAmount"));
});
$this.data({"bindEvent_buttonsPixels_x":true});
}
}else{
mCSB_buttonDown.add(mCSB_buttonUp).unbind("mousedown touchstart MSPointerDown pointerdown mouseup MSPointerUp pointerup mouseout MSPointerOut pointerout touchend",mCSB_buttonRight_stop,mCSB_buttonLeft_stop);
$this.data({"bindEvent_buttonsContinuous_y":false});
if(!$this.data("bindEvent_buttonsPixels_y")){
/*scroll down*/
mCSB_buttonDown.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().top)+$this.data("scrollButtons_scrollAmount"));
});
/*scroll up*/
mCSB_buttonUp.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().top)-$this.data("scrollButtons_scrollAmount"));
});
$this.data({"bindEvent_buttonsPixels_y":true});
}
}
function PixelsScrollTo(to){
if(!mCSB_dragger.data("preventAction")){
mCSB_dragger.data("preventAction",true);
$this.mCustomScrollbar("scrollTo",to,{trigger:"internal"});
}
}
}else{ /*continuous scrolling*/
if($this.data("horizontalScroll")){
mCSB_buttonRight.add(mCSB_buttonLeft).unbind("click");
$this.data({"bindEvent_buttonsPixels_x":false});
if(!$this.data("bindEvent_buttonsContinuous_x")){
/*scroll right*/
mCSB_buttonRight.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollRight":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().left)+scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonRight_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollRight"));
}
mCSB_buttonRight.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonRight_stop);
/*scroll left*/
mCSB_buttonLeft.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollLeft":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().left)-scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonLeft_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollLeft"));
}
mCSB_buttonLeft.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonLeft_stop);
$this.data({"bindEvent_buttonsContinuous_x":true});
}
}else{
mCSB_buttonDown.add(mCSB_buttonUp).unbind("click");
$this.data({"bindEvent_buttonsPixels_y":false});
if(!$this.data("bindEvent_buttonsContinuous_y")){
/*scroll down*/
mCSB_buttonDown.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollDown":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().top)+scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonDown_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollDown"));
}
mCSB_buttonDown.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonDown_stop);
/*scroll up*/
mCSB_buttonUp.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollUp":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().top)-scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonUp_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollUp"));
}
mCSB_buttonUp.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonUp_stop);
$this.data({"bindEvent_buttonsContinuous_y":true});
}
}
function ScrollButtonsSpeed(){
var speed=$this.data("scrollButtons_scrollSpeed");
if($this.data("scrollButtons_scrollSpeed")==="auto"){
speed=Math.round(($this.data("scrollInertia")+100)/40);
}
return speed;
}
}
}
/*scrolling on element focus (e.g. via TAB key)*/
if($this.data("autoScrollOnFocus")){
if(!$this.data("bindEvent_focusin")){
mCustomScrollBox.bind("focusin",function(){
mCustomScrollBox.scrollTop(0).scrollLeft(0);
var focusedElem=$(document.activeElement);
if(focusedElem.is("input,textarea,select,button,a[tabindex],area,object")){
var mCSB_containerPos=mCSB_container.position().top,
focusedElemPos=focusedElem.position().top,
visibleLimit=mCustomScrollBox.height()-focusedElem.outerHeight();
if($this.data("horizontalScroll")){
mCSB_containerPos=mCSB_container.position().left;
focusedElemPos=focusedElem.position().left;
visibleLimit=mCustomScrollBox.width()-focusedElem.outerWidth();
}
if(mCSB_containerPos+focusedElemPos<0 || mCSB_containerPos+focusedElemPos>visibleLimit){
$this.mCustomScrollbar("scrollTo",focusedElemPos,{trigger:"internal"});
}
}
});
$this.data({"bindEvent_focusin":true});
}
}
/*auto-hide scrollbar*/
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){
if(!$this.data("bindEvent_autoHideScrollbar")){
mCustomScrollBox.bind("mouseenter",function(e){
mCustomScrollBox.addClass("mCS-mouse-over");
functions.showScrollbar.call(mCustomScrollBox.children(".mCSB_scrollTools"));
}).bind("mouseleave touchend",function(e){
mCustomScrollBox.removeClass("mCS-mouse-over");
if(e.type==="mouseleave"){functions.hideScrollbar.call(mCustomScrollBox.children(".mCSB_scrollTools"));}
});
$this.data({"bindEvent_autoHideScrollbar":true});
}
}
},
scrollTo:function(scrollTo,options){
var $this=$(this),
defaults={
moveDragger:false,
trigger:"external",
callbacks:true,
scrollInertia:$this.data("scrollInertia"),
scrollEasing:$this.data("scrollEasing")
},
options=$.extend(defaults,options),
draggerScrollTo,
mCustomScrollBox=$this.children(".mCustomScrollBox"),
mCSB_container=mCustomScrollBox.children(".mCSB_container"),
mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger"),
contentSpeed=draggerSpeed=options.scrollInertia,
scrollBeginning,scrollBeginningOffset,totalScroll,totalScrollOffset;
if(!mCSB_container.hasClass("mCS_no_scrollbar")){
$this.data({"mCS_trigger":options.trigger});
if($this.data("mCS_Init")){options.callbacks=false;}
if(scrollTo || scrollTo===0){
if(typeof(scrollTo)==="number"){ /*if integer, scroll by number of pixels*/
if(options.moveDragger){ /*scroll dragger*/
draggerScrollTo=scrollTo;
if($this.data("horizontalScroll")){
scrollTo=mCSB_dragger.position().left*$this.data("scrollAmount");
}else{
scrollTo=mCSB_dragger.position().top*$this.data("scrollAmount");
}
draggerSpeed=0;
}else{ /*scroll content by default*/
draggerScrollTo=scrollTo/$this.data("scrollAmount");
}
}else if(typeof(scrollTo)==="string"){ /*if string, scroll by element position*/
var target;
if(scrollTo==="top"){ /*scroll to top*/
target=0;
}else if(scrollTo==="bottom" && !$this.data("horizontalScroll")){ /*scroll to bottom*/
target=mCSB_container.outerHeight()-mCustomScrollBox.height();
}else if(scrollTo==="left"){ /*scroll to left*/
target=0;
}else if(scrollTo==="right" && $this.data("horizontalScroll")){ /*scroll to right*/
target=mCSB_container.outerWidth()-mCustomScrollBox.width();
}else if(scrollTo==="first"){ /*scroll to first element position*/
target=$this.find(".mCSB_container").find(":first");
}else if(scrollTo==="last"){ /*scroll to last element position*/
target=$this.find(".mCSB_container").find(":last");
}else{ /*scroll to element position*/
target=$this.find(scrollTo);
}
if(target.length===1){ /*if such unique element exists, scroll to it*/
if($this.data("horizontalScroll")){
scrollTo=target.position().left;
}else{
scrollTo=target.position().top;
}
draggerScrollTo=scrollTo/$this.data("scrollAmount");
}else{
draggerScrollTo=scrollTo=target;
}
}
/*scroll to*/
if($this.data("horizontalScroll")){
if($this.data("onTotalScrollBack_Offset")){ /*scroll beginning offset*/
scrollBeginningOffset=-$this.data("onTotalScrollBack_Offset");
}
if($this.data("onTotalScroll_Offset")){ /*total scroll offset*/
totalScrollOffset=mCustomScrollBox.width()-mCSB_container.outerWidth()+$this.data("onTotalScroll_Offset");
}
if(draggerScrollTo<0){ /*scroll start position*/
draggerScrollTo=scrollTo=0; clearInterval($this.data("mCSB_buttonScrollLeft"));
if(!scrollBeginningOffset){scrollBeginning=true;}
}else if(draggerScrollTo>=mCSB_draggerContainer.width()-mCSB_dragger.width()){ /*scroll end position*/
draggerScrollTo=mCSB_draggerContainer.width()-mCSB_dragger.width();
scrollTo=mCustomScrollBox.width()-mCSB_container.outerWidth(); clearInterval($this.data("mCSB_buttonScrollRight"));
if(!totalScrollOffset){totalScroll=true;}
}else{scrollTo=-scrollTo;}
var snapAmount = $this.data("snapAmount");
if (snapAmount) {
scrollTo = Math.round(scrollTo / snapAmount) * snapAmount - $this.data("snapOffset");
}
/*scrolling animation*/
functions.mTweenAxis.call(this,mCSB_dragger[0],"left",Math.round(draggerScrollTo),draggerSpeed,options.scrollEasing);
functions.mTweenAxis.call(this,mCSB_container[0],"left",Math.round(scrollTo),contentSpeed,options.scrollEasing,{
onStart:function(){
if(options.callbacks && !$this.data("mCS_tweenRunning")){callbacks("onScrollStart");}
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){functions.showScrollbar.call(mCSB_scrollTools);}
},
onUpdate:function(){
if(options.callbacks){callbacks("whileScrolling");}
},
onComplete:function(){
if(options.callbacks){
callbacks("onScroll");
if(scrollBeginning || (scrollBeginningOffset && mCSB_container.position().left>=scrollBeginningOffset)){callbacks("onTotalScrollBack");}
if(totalScroll || (totalScrollOffset && mCSB_container.position().left<=totalScrollOffset)){callbacks("onTotalScroll");}
}
mCSB_dragger.data("preventAction",false); $this.data("mCS_tweenRunning",false);
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){if(!mCustomScrollBox.hasClass("mCS-mouse-over")){functions.hideScrollbar.call(mCSB_scrollTools);}}
}
});
}else{
if($this.data("onTotalScrollBack_Offset")){ /*scroll beginning offset*/
scrollBeginningOffset=-$this.data("onTotalScrollBack_Offset");
}
if($this.data("onTotalScroll_Offset")){ /*total scroll offset*/
totalScrollOffset=mCustomScrollBox.height()-mCSB_container.outerHeight()+$this.data("onTotalScroll_Offset");
}
if(draggerScrollTo<0){ /*scroll start position*/
draggerScrollTo=scrollTo=0; clearInterval($this.data("mCSB_buttonScrollUp"));
if(!scrollBeginningOffset){scrollBeginning=true;}
}else if(draggerScrollTo>=mCSB_draggerContainer.height()-mCSB_dragger.height()){ /*scroll end position*/
draggerScrollTo=mCSB_draggerContainer.height()-mCSB_dragger.height();
scrollTo=mCustomScrollBox.height()-mCSB_container.outerHeight(); clearInterval($this.data("mCSB_buttonScrollDown"));
if(!totalScrollOffset){totalScroll=true;}
}else{scrollTo=-scrollTo;}
var snapAmount = $this.data("snapAmount");
if (snapAmount) {
scrollTo = Math.round(scrollTo / snapAmount) * snapAmount - $this.data("snapOffset");
}
/*scrolling animation*/
functions.mTweenAxis.call(this,mCSB_dragger[0],"top",Math.round(draggerScrollTo),draggerSpeed,options.scrollEasing);
functions.mTweenAxis.call(this,mCSB_container[0],"top",Math.round(scrollTo),contentSpeed,options.scrollEasing,{
onStart:function(){
if(options.callbacks && !$this.data("mCS_tweenRunning")){callbacks("onScrollStart");}
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){functions.showScrollbar.call(mCSB_scrollTools);}
},
onUpdate:function(){
if(options.callbacks){callbacks("whileScrolling");}
},
onComplete:function(){
if(options.callbacks){
callbacks("onScroll");
if(scrollBeginning || (scrollBeginningOffset && mCSB_container.position().top>=scrollBeginningOffset)){callbacks("onTotalScrollBack");}
if(totalScroll || (totalScrollOffset && mCSB_container.position().top<=totalScrollOffset)){callbacks("onTotalScroll");}
}
mCSB_dragger.data("preventAction",false); $this.data("mCS_tweenRunning",false);
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){if(!mCustomScrollBox.hasClass("mCS-mouse-over")){functions.hideScrollbar.call(mCSB_scrollTools);}}
}
});
}
if($this.data("mCS_Init")){$this.data({"mCS_Init":false});}
}
}
/*callbacks*/
function callbacks(cb){
if ($this.data("mCustomScrollbarIndex")) {
this.mcs = {
top: mCSB_container.position().top, left: mCSB_container.position().left,
draggerTop: mCSB_dragger.position().top, draggerLeft: mCSB_dragger.position().left,
topPct: Math.round((100 * Math.abs(mCSB_container.position().top)) / Math.abs(mCSB_container.outerHeight() - mCustomScrollBox.height())),
leftPct: Math.round((100 * Math.abs(mCSB_container.position().left)) / Math.abs(mCSB_container.outerWidth() - mCustomScrollBox.width()))
};
switch (cb) {
/*start scrolling callback*/
case "onScrollStart":
$this.data("mCS_tweenRunning", true).data("onScrollStart_Callback").call($this, this.mcs);
break;
case "whileScrolling":
$this.data("whileScrolling_Callback").call($this, this.mcs);
break;
case "onScroll":
$this.data("onScroll_Callback").call($this, this.mcs);
break;
case "onTotalScrollBack":
$this.data("onTotalScrollBack_Callback").call($this, this.mcs);
break;
case "onTotalScroll":
$this.data("onTotalScroll_Callback").call($this, this.mcs);
break;
}
}
}
},
stop:function(){
var $this=$(this),
mCSB_container=$this.children().children(".mCSB_container"),
mCSB_dragger=$this.children().children().children().children(".mCSB_dragger");
functions.mTweenAxisStop.call(this,mCSB_container[0]);
functions.mTweenAxisStop.call(this,mCSB_dragger[0]);
},
disable:function(resetScroll){
var $this=$(this),
mCustomScrollBox=$this.children(".mCustomScrollBox"),
mCSB_container=mCustomScrollBox.children(".mCSB_container"),
mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_dragger=mCSB_scrollTools.children().children(".mCSB_dragger");
mCustomScrollBox.unbind("mousewheel focusin mouseenter mouseleave touchend");
mCSB_container.unbind("touchstart touchmove")
if(resetScroll){
if($this.data("horizontalScroll")){
mCSB_dragger.add(mCSB_container).css("left",0);
}else{
mCSB_dragger.add(mCSB_container).css("top",0);
}
}
mCSB_scrollTools.css("display","none");
mCSB_container.addClass("mCS_no_scrollbar");
$this.data({"bindEvent_mousewheel":false,"bindEvent_focusin":false,"bindEvent_content_touch":false,"bindEvent_autoHideScrollbar":false}).addClass("mCS_disabled");
},
destroy:function(){
var $this=$(this);
$this.removeClass("mCustomScrollbar _mCS_"+$this.data("mCustomScrollbarIndex")).addClass("mCS_destroyed").children().children(".mCSB_container").unwrap().children().unwrap().siblings(".mCSB_scrollTools").remove();
$(document).unbind("mousemove."+$this.data("mCustomScrollbarIndex")+" mouseup."+$this.data("mCustomScrollbarIndex")+" MSPointerMove."+$this.data("mCustomScrollbarIndex")+" MSPointerUp."+$this.data("mCustomScrollbarIndex"));
$(window).unbind("resize."+$this.data("mCustomScrollbarIndex"));
}
},
functions={
/*hide/show scrollbar*/
showScrollbar:function(){
this.stop().animate({opacity:1},"fast");
},
hideScrollbar:function(){
this.stop().animate({opacity:0},"fast");
},
/*js animation tween*/
mTweenAxis:function(el,prop,to,duration,easing,callbacks){
var callbacks=callbacks || {},
onStart=callbacks.onStart || function(){},onUpdate=callbacks.onUpdate || function(){},onComplete=callbacks.onComplete || function(){};
var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style;
if(prop==="left"){from=el.offsetLeft;}
var diff=to-from;
_cancelTween();
_startTween();
function _getTime(){
if(window.performance && window.performance.now){
return window.performance.now();
}else{
if(window.performance && window.performance.webkitNow){
return window.performance.webkitNow();
}else{
if(Date.now){return Date.now();}else{return new Date().getTime();}
}
}
}
function _step(){
if(!progress){onStart.call();}
progress=_getTime()-startTime;
_tween();
if(progress>=el._time){
el._time=(progress>el._time) ? progress+_delay-(progress- el._time) : progress+_delay-1;
if(el._time<progress+1){el._time=progress+1;}
}
if(el._time<duration){el._id=_request(_step);}else{onComplete.call();}
}
function _tween(){
if(duration>0){
el.currVal=_ease(el._time,from,diff,duration,easing);
elStyle[prop]=Math.round(el.currVal)+"px";
}else{
elStyle[prop]=to+"px";
}
onUpdate.call();
}
function _startTween(){
_delay=1000/60;
el._time=progress+_delay;
_request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame;
el._id=_request(_step);
}
function _cancelTween(){
if(el._id==null){return;}
if(!window.requestAnimationFrame){clearTimeout(el._id);
}else{window.cancelAnimationFrame(el._id);}
el._id=null;
}
function _ease(t,b,c,d,type){
switch(type){
case "linear":
return c*t/d + b;
break;
case "easeOutQuad":
t /= d; return -c * t*(t-2) + b;
break;
case "easeInOutQuad":
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
break;
case "easeOutCubic":
t /= d; t--; return c*(t*t*t + 1) + b;
break;
case "easeOutQuart":
t /= d; t--; return -c * (t*t*t*t - 1) + b;
break;
case "easeOutQuint":
t /= d; t--; return c*(t*t*t*t*t + 1) + b;
break;
case "easeOutCirc":
t /= d; t--; return c * Math.sqrt(1 - t*t) + b;
break;
case "easeOutSine":
return c * Math.sin(t/d * (Math.PI/2)) + b;
break;
case "easeOutExpo":
return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
break;
case "mcsEaseOut":
var ts=(t/=d)*t,tc=ts*t;
return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t);
break;
case "draggerRailEase":
t /= d/2;
if (t < 1) return c/2*t*t*t + b;
t -= 2;
return c/2*(t*t*t + 2) + b;
break;
}
}
},
/*stop js animation tweens*/
mTweenAxisStop:function(el){
if(el._id==null){return;}
if(!window.requestAnimationFrame){clearTimeout(el._id);
}else{window.cancelAnimationFrame(el._id);}
el._id=null;
},
/*detect requestAnimationFrame and polyfill*/
rafPolyfill:function(){
var pfx=["ms","moz","webkit","o"],i=pfx.length;
while(--i > -1 && !window.requestAnimationFrame){
window.requestAnimationFrame=window[pfx[i]+"RequestAnimationFrame"];
window.cancelAnimationFrame=window[pfx[i]+"CancelAnimationFrame"] || window[pfx[i]+"CancelRequestAnimationFrame"];
}
}
}
/*detect features*/
functions.rafPolyfill.call(); /*requestAnimationFrame*/
$.support.touch=!!('ontouchstart' in window); /*touch*/
$.support.pointer=window.navigator.pointerEnabled; /*pointer support*/
$.support.msPointer=window.navigator.msPointerEnabled; /*MSPointer support*/
/*plugin dependencies*/
var _dlp=("https:"==document.location.protocol) ? "https:" : "http:";
$.event.special.mousewheel || document.write('<script src="'+_dlp+'//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"><\/script>');
/*plugin fn*/
$.fn.mCustomScrollbar=function(method){
if(methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof method==="object" || !method){
return methods.init.apply(this,arguments);
}else{
$.error("Method "+method+" does not exist");
}
};
})(jQuery);

131
web/App_Script/custom-scrollbar-plugin/jquery_ui_sortable_example.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
#sortable{margin:0 0 20px 0; padding:0; list-style-type:none;}
#sortable li{background:#444; padding:5px 10px; margin:5px 0; border-radius:3px;}
#sortable li:active{background:#cc3300;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>jQuery ui sortable example</h1>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p><strong>Sortable list</strong></p>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- Google CDN jQuery ui -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
$("#sortable").sortable({
scroll:false,
axis:"y",
opacity:0.5,
change:function(event,ui){
var p=ui.position.top,
h=ui.helper.outerHeight(true),
s=ui.placeholder.position().top,
elem=$("#content_1 .mCustomScrollBox")[0],
elemHeight=$("#content_1 .mCustomScrollBox").height();
pos=findPos(elem),
mouseCoordsY=event.pageY-pos[0];
if(mouseCoordsY<h || mouseCoordsY>elemHeight-h){
$("#content_1").mCustomScrollbar("scrollTo",p-(elemHeight/2));
}
}
});
function findPos(obj){
var curleft=curtop=0;
if (obj.offsetParent){
curleft=obj.offsetLeft
curtop=obj.offsetTop
while(obj=obj.offsetParent){
curleft+=obj.offsetLeft
curtop+=obj.offsetTop
}
}
return [curtop,curleft];
}
});
})(jQuery);
</script>
</body>
</html>

5
web/App_Script/custom-scrollbar-plugin/js/minified/jquery-1.9.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
web/App_Script/custom-scrollbar-plugin/js/minified/jquery.mCustomScrollbar.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
web/App_Script/custom-scrollbar-plugin/js/minified/jquery.mCustomScrollbar.min.js.gz Normal file
View File

Binary file not shown.

12
web/App_Script/custom-scrollbar-plugin/js/minified/jquery.mousewheel.min.js vendored Normal file
View File

@@ -0,0 +1,12 @@
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);

9597
web/App_Script/custom-scrollbar-plugin/js/uncompressed/jquery-1.9.1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

969
web/App_Script/custom-scrollbar-plugin/js/uncompressed/jquery.mCustomScrollbar.js Normal file
View File

@@ -0,0 +1,969 @@
/*
== malihu jquery custom scrollbars plugin ==
version: 2.8.3
author: malihu (http://manos.malihu.gr)
plugin home: http://manos.malihu.gr/jquery-custom-content-scroller
*/
/*
Copyright 2010-2013 Manos Malihutsakis
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program. If not, see http://www.gnu.org/licenses/lgpl.html.
*/
(function($){
/*plugin script*/
var methods={
init:function(options){
var defaults={
set_width:false, /*optional element width: boolean, pixels, percentage*/
set_height:false, /*optional element height: boolean, pixels, percentage*/
horizontalScroll:false, /*scroll horizontally: boolean*/
scrollInertia:950, /*scrolling inertia: integer (milliseconds)*/
mouseWheel:true, /*mousewheel support: boolean*/
mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
alwaysShowScrollbar:false, /*always show scrollbar even when there's nothing to scroll (disables autoHideScrollbar): boolean*/
snapAmount:null, /* optional element always snaps to a multiple of this number in pixels */
snapOffset:0, /* when snapping, snap with this number in pixels as an offset */
scrollButtons:{ /*scroll buttons*/
enable:false, /*scroll buttons support: boolean*/
scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
},
advanced:{
updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
updateOnContentResize:false, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
autoExpandHorizontalScroll:false, /*auto-expand width for horizontal scrolling: boolean*/
autoScrollOnFocus:true, /*auto-scroll on focused elements: boolean*/
normalizeMouseWheelDelta:false /*normalize mouse-wheel delta (-1/1)*/
},
contentTouchScroll:true, /*scrolling by touch-swipe content: boolean*/
callbacks:{
onScrollStart:function(){}, /*user custom callback function on scroll start event*/
onScroll:function(){}, /*user custom callback function on scroll event*/
onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
onTotalScrollBack:function(){}, /*user custom callback function on scroll begin reached event*/
onTotalScrollOffset:0, /*scroll end reached offset: integer (pixels)*/
onTotalScrollBackOffset:0, /*scroll begin reached offset: integer (pixels)*/
whileScrolling:function(){} /*user custom callback function on scrolling event*/
},
theme:"light" /*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
},
options=$.extend(true,defaults,options);
return this.each(function(){
var $this=$(this);
/*set element width/height, create markup for custom scrollbars, add classes*/
if(options.set_width){
$this.css("width",options.set_width);
}
if(options.set_height){
$this.css("height",options.set_height);
}
if(!$(document).data("mCustomScrollbar-index")){
$(document).data("mCustomScrollbar-index","1");
}else{
var mCustomScrollbarIndex=parseInt($(document).data("mCustomScrollbar-index"));
$(document).data("mCustomScrollbar-index",mCustomScrollbarIndex+1);
}
$this.wrapInner("<div class='mCustomScrollBox"+" mCS-"+options.theme+"' id='mCSB_"+$(document).data("mCustomScrollbar-index")+"' style='position:relative; height:100%; overflow:hidden; max-width:100%;' />").addClass("mCustomScrollbar _mCS_"+$(document).data("mCustomScrollbar-index"));
var mCustomScrollBox=$this.children(".mCustomScrollBox");
if(options.horizontalScroll){
mCustomScrollBox.addClass("mCSB_horizontal").wrapInner("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />");
var mCSB_h_wrapper=mCustomScrollBox.children(".mCSB_h_wrapper");
mCSB_h_wrapper.wrapInner("<div class='mCSB_container' style='position:absolute; left:0;' />").children(".mCSB_container").css({"width":mCSB_h_wrapper.children().outerWidth(),"position":"relative"}).unwrap();
}else{
mCustomScrollBox.wrapInner("<div class='mCSB_container' style='position:relative; top:0;' />");
}
var mCSB_container=mCustomScrollBox.children(".mCSB_container");
if($.support.touch){
mCSB_container.addClass("mCS_touch");
}
mCSB_container.after("<div class='mCSB_scrollTools' style='position:absolute;'><div class='mCSB_draggerContainer'><div class='mCSB_dragger' style='position:absolute;' oncontextmenu='return false;'><div class='mCSB_dragger_bar' style='position:relative;'></div></div><div class='mCSB_draggerRail'></div></div></div>");
var mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger");
if(options.horizontalScroll){
mCSB_dragger.data("minDraggerWidth",mCSB_dragger.width());
}else{
mCSB_dragger.data("minDraggerHeight",mCSB_dragger.height());
}
if(options.scrollButtons.enable){
if(options.horizontalScroll){
mCSB_scrollTools.prepend("<a class='mCSB_buttonLeft' oncontextmenu='return false;'></a>").append("<a class='mCSB_buttonRight' oncontextmenu='return false;'></a>");
}else{
mCSB_scrollTools.prepend("<a class='mCSB_buttonUp' oncontextmenu='return false;'></a>").append("<a class='mCSB_buttonDown' oncontextmenu='return false;'></a>");
}
}
/*mCustomScrollBox scrollTop and scrollLeft is always 0 to prevent browser focus scrolling*/
mCustomScrollBox.bind("scroll",function(){
if(!$this.is(".mCS_disabled")){ /*native focus scrolling for disabled scrollbars*/
mCustomScrollBox.scrollTop(0).scrollLeft(0);
}
});
/*store options, global vars/states, intervals*/
$this.data({
/*init state*/
"mCS_Init":true,
/*instance index*/
"mCustomScrollbarIndex":$(document).data("mCustomScrollbar-index"),
/*option parameters*/
"horizontalScroll":options.horizontalScroll,
"scrollInertia":options.scrollInertia,
"scrollEasing":"mcsEaseOut",
"mouseWheel":options.mouseWheel,
"mouseWheelPixels":options.mouseWheelPixels,
"autoDraggerLength":options.autoDraggerLength,
"autoHideScrollbar":options.autoHideScrollbar,
"alwaysShowScrollbar":options.alwaysShowScrollbar,
"snapAmount":options.snapAmount,
"snapOffset":options.snapOffset,
"scrollButtons_enable":options.scrollButtons.enable,
"scrollButtons_scrollType":options.scrollButtons.scrollType,
"scrollButtons_scrollSpeed":options.scrollButtons.scrollSpeed,
"scrollButtons_scrollAmount":options.scrollButtons.scrollAmount,
"autoExpandHorizontalScroll":options.advanced.autoExpandHorizontalScroll,
"autoScrollOnFocus":options.advanced.autoScrollOnFocus,
"normalizeMouseWheelDelta":options.advanced.normalizeMouseWheelDelta,
"contentTouchScroll":options.contentTouchScroll,
"onScrollStart_Callback":options.callbacks.onScrollStart,
"onScroll_Callback":options.callbacks.onScroll,
"onTotalScroll_Callback":options.callbacks.onTotalScroll,
"onTotalScrollBack_Callback":options.callbacks.onTotalScrollBack,
"onTotalScroll_Offset":options.callbacks.onTotalScrollOffset,
"onTotalScrollBack_Offset":options.callbacks.onTotalScrollBackOffset,
"whileScrolling_Callback":options.callbacks.whileScrolling,
/*events binding state*/
"bindEvent_scrollbar_drag":false,
"bindEvent_content_touch":false,
"bindEvent_scrollbar_click":false,
"bindEvent_mousewheel":false,
"bindEvent_buttonsContinuous_y":false,
"bindEvent_buttonsContinuous_x":false,
"bindEvent_buttonsPixels_y":false,
"bindEvent_buttonsPixels_x":false,
"bindEvent_focusin":false,
"bindEvent_autoHideScrollbar":false,
/*buttons intervals*/
"mCSB_buttonScrollRight":false,
"mCSB_buttonScrollLeft":false,
"mCSB_buttonScrollDown":false,
"mCSB_buttonScrollUp":false
});
/*max-width/max-height*/
if(options.horizontalScroll){
if($this.css("max-width")!=="none"){
if(!options.advanced.updateOnContentResize){ /*needs updateOnContentResize*/
options.advanced.updateOnContentResize=true;
}
}
}else{
if($this.css("max-height")!=="none"){
var percentage=false,maxHeight=parseInt($this.css("max-height"));
if($this.css("max-height").indexOf("%")>=0){
percentage=maxHeight,
maxHeight=$this.parent().height()*percentage/100;
}
$this.css("overflow","hidden");
mCustomScrollBox.css("max-height",maxHeight);
}
}
$this.mCustomScrollbar("update");
/*window resize fn (for layouts based on percentages)*/
if(options.advanced.updateOnBrowserResize){
var mCSB_resizeTimeout,currWinWidth=$(window).width(),currWinHeight=$(window).height();
$(window).bind("resize."+$this.data("mCustomScrollbarIndex"),function(){
if(mCSB_resizeTimeout){
clearTimeout(mCSB_resizeTimeout);
}
mCSB_resizeTimeout=setTimeout(function(){
if(!$this.is(".mCS_disabled") && !$this.is(".mCS_destroyed")){
var winWidth=$(window).width(),winHeight=$(window).height();
if(currWinWidth!==winWidth || currWinHeight!==winHeight){ /*ie8 fix*/
if($this.css("max-height")!=="none" && percentage){
mCustomScrollBox.css("max-height",$this.parent().height()*percentage/100);
}
$this.mCustomScrollbar("update");
currWinWidth=winWidth; currWinHeight=winHeight;
}
}
},150);
});
}
/*content resize fn (for dynamically generated content)*/
if(options.advanced.updateOnContentResize){
var mCSB_onContentResize;
if(options.horizontalScroll){
var mCSB_containerOldSize=mCSB_container.outerWidth();
}else{
var mCSB_containerOldSize=mCSB_container.outerHeight();
}
mCSB_onContentResize=setInterval(function(){
if(options.horizontalScroll){
if(options.advanced.autoExpandHorizontalScroll){
mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();
}
var mCSB_containerNewSize=mCSB_container.outerWidth();
}else{
var mCSB_containerNewSize=mCSB_container.outerHeight();
}
if(mCSB_containerNewSize!=mCSB_containerOldSize){
$this.mCustomScrollbar("update");
mCSB_containerOldSize=mCSB_containerNewSize;
}
},300);
}
});
},
update:function(){
var $this=$(this),
mCustomScrollBox=$this.children(".mCustomScrollBox"),
mCSB_container=mCustomScrollBox.children(".mCSB_container");
mCSB_container.removeClass("mCS_no_scrollbar");
$this.removeClass("mCS_disabled mCS_destroyed");
mCustomScrollBox.scrollTop(0).scrollLeft(0); /*reset scrollTop/scrollLeft to prevent browser focus scrolling*/
var mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger");
if($this.data("horizontalScroll")){
var mCSB_buttonLeft=mCSB_scrollTools.children(".mCSB_buttonLeft"),
mCSB_buttonRight=mCSB_scrollTools.children(".mCSB_buttonRight"),
mCustomScrollBoxW=mCustomScrollBox.width();
if($this.data("autoExpandHorizontalScroll")){
mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();
}
var mCSB_containerW=mCSB_container.outerWidth();
}else{
var mCSB_buttonUp=mCSB_scrollTools.children(".mCSB_buttonUp"),
mCSB_buttonDown=mCSB_scrollTools.children(".mCSB_buttonDown"),
mCustomScrollBoxH=mCustomScrollBox.height(),
mCSB_containerH=mCSB_container.outerHeight();
}
if(mCSB_containerH>mCustomScrollBoxH && !$this.data("horizontalScroll")){ /*content needs vertical scrolling*/
mCSB_scrollTools.css("display","block");
var mCSB_draggerContainerH=mCSB_draggerContainer.height();
/*auto adjust scrollbar dragger length analogous to content*/
if($this.data("autoDraggerLength")){
var draggerH=Math.round(mCustomScrollBoxH/mCSB_containerH*mCSB_draggerContainerH),
minDraggerH=mCSB_dragger.data("minDraggerHeight");
if(draggerH<=minDraggerH){ /*min dragger height*/
mCSB_dragger.css({"height":minDraggerH});
}else if(draggerH>=mCSB_draggerContainerH-10){ /*max dragger height*/
var mCSB_draggerContainerMaxH=mCSB_draggerContainerH-10;
mCSB_dragger.css({"height":mCSB_draggerContainerMaxH});
}else{
mCSB_dragger.css({"height":draggerH});
}
mCSB_dragger.children(".mCSB_dragger_bar").css({"line-height":mCSB_dragger.height()+"px"});
}
var mCSB_draggerH=mCSB_dragger.height(),
/*calculate and store scroll amount, add scrolling*/
scrollAmount=(mCSB_containerH-mCustomScrollBoxH)/(mCSB_draggerContainerH-mCSB_draggerH);
$this.data("scrollAmount",scrollAmount).mCustomScrollbar("scrolling",mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight);
/*scroll*/
var mCSB_containerP=Math.abs(mCSB_container.position().top);
$this.mCustomScrollbar("scrollTo",mCSB_containerP,{scrollInertia:0,trigger:"internal"});
}else if(mCSB_containerW>mCustomScrollBoxW && $this.data("horizontalScroll")){ /*content needs horizontal scrolling*/
mCSB_scrollTools.css("display","block");
var mCSB_draggerContainerW=mCSB_draggerContainer.width();
/*auto adjust scrollbar dragger length analogous to content*/
if($this.data("autoDraggerLength")){
var draggerW=Math.round(mCustomScrollBoxW/mCSB_containerW*mCSB_draggerContainerW),
minDraggerW=mCSB_dragger.data("minDraggerWidth");
if(draggerW<=minDraggerW){ /*min dragger height*/
mCSB_dragger.css({"width":minDraggerW});
}else if(draggerW>=mCSB_draggerContainerW-10){ /*max dragger height*/
var mCSB_draggerContainerMaxW=mCSB_draggerContainerW-10;
mCSB_dragger.css({"width":mCSB_draggerContainerMaxW});
}else{
mCSB_dragger.css({"width":draggerW});
}
}
var mCSB_draggerW=mCSB_dragger.width(),
/*calculate and store scroll amount, add scrolling*/
scrollAmount=(mCSB_containerW-mCustomScrollBoxW)/(mCSB_draggerContainerW-mCSB_draggerW);
$this.data("scrollAmount",scrollAmount).mCustomScrollbar("scrolling",mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight);
/*scroll*/
var mCSB_containerP=Math.abs(mCSB_container.position().left);
$this.mCustomScrollbar("scrollTo",mCSB_containerP,{scrollInertia:0,trigger:"internal"});
}else{ /*content does not need scrolling*/
/*unbind events, reset content position, hide scrollbars, remove classes*/
mCustomScrollBox.unbind("mousewheel focusin");
if($this.data("horizontalScroll")){
mCSB_dragger.add(mCSB_container).css("left",0);
}else{
mCSB_dragger.add(mCSB_container).css("top",0);
}
if ($this.data("alwaysShowScrollbar")) {
if(!$this.data("horizontalScroll")){ /*vertical scrolling*/
mCSB_dragger.css({"height":mCSB_draggerContainer.height()});
}else if($this.data("horizontalScroll")){ /*horizontal scrolling*/
mCSB_dragger.css({"width":mCSB_draggerContainer.width()});
}
} else {
mCSB_scrollTools.css("display","none");
mCSB_container.addClass("mCS_no_scrollbar");
}
$this.data({"bindEvent_mousewheel":false,"bindEvent_focusin":false});
}
},
scrolling:function(mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight){
var $this=$(this);
/*scrollbar drag scrolling*/
if(!$this.data("bindEvent_scrollbar_drag")){
var mCSB_draggerDragY,mCSB_draggerDragX,
mCSB_dragger_downEvent,mCSB_dragger_moveEvent,mCSB_dragger_upEvent;
if($.support.pointer){ /*pointer*/
mCSB_dragger_downEvent="pointerdown";
mCSB_dragger_moveEvent="pointermove";
mCSB_dragger_upEvent="pointerup";
}else if($.support.msPointer){ /*MSPointer*/
mCSB_dragger_downEvent="MSPointerDown";
mCSB_dragger_moveEvent="MSPointerMove";
mCSB_dragger_upEvent="MSPointerUp";
}
if($.support.pointer || $.support.msPointer){ /*pointer, MSPointer*/
mCSB_dragger.bind(mCSB_dragger_downEvent,function(e){
e.preventDefault();
$this.data({"on_drag":true}); mCSB_dragger.addClass("mCSB_dragger_onDrag");
var elem=$(this),
elemOffset=elem.offset(),
x=e.originalEvent.pageX-elemOffset.left,
y=e.originalEvent.pageY-elemOffset.top;
if(x<elem.width() && x>0 && y<elem.height() && y>0){
mCSB_draggerDragY=y;
mCSB_draggerDragX=x;
}
});
$(document).bind(mCSB_dragger_moveEvent+"."+$this.data("mCustomScrollbarIndex"),function(e){
e.preventDefault();
if($this.data("on_drag")){
var elem=mCSB_dragger,
elemOffset=elem.offset(),
x=e.originalEvent.pageX-elemOffset.left,
y=e.originalEvent.pageY-elemOffset.top;
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
}
}).bind(mCSB_dragger_upEvent+"."+$this.data("mCustomScrollbarIndex"),function(e){
$this.data({"on_drag":false}); mCSB_dragger.removeClass("mCSB_dragger_onDrag");
});
}else{ /*mouse/touch*/
mCSB_dragger.bind("mousedown touchstart",function(e){
e.preventDefault(); e.stopImmediatePropagation();
var elem=$(this),elemOffset=elem.offset(),x,y;
if(e.type==="touchstart"){
var touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
x=touch.pageX-elemOffset.left; y=touch.pageY-elemOffset.top;
}else{
$this.data({"on_drag":true}); mCSB_dragger.addClass("mCSB_dragger_onDrag");
x=e.pageX-elemOffset.left; y=e.pageY-elemOffset.top;
}
if(x<elem.width() && x>0 && y<elem.height() && y>0){
mCSB_draggerDragY=y; mCSB_draggerDragX=x;
}
}).bind("touchmove",function(e){
e.preventDefault(); e.stopImmediatePropagation();
var touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0],
elem=$(this),
elemOffset=elem.offset(),
x=touch.pageX-elemOffset.left,
y=touch.pageY-elemOffset.top;
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
});
$(document).bind("mousemove."+$this.data("mCustomScrollbarIndex"),function(e){
if($this.data("on_drag")){
var elem=mCSB_dragger,
elemOffset=elem.offset(),
x=e.pageX-elemOffset.left,
y=e.pageY-elemOffset.top;
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
}
}).bind("mouseup."+$this.data("mCustomScrollbarIndex"),function(e){
$this.data({"on_drag":false}); mCSB_dragger.removeClass("mCSB_dragger_onDrag");
});
}
$this.data({"bindEvent_scrollbar_drag":true});
}
function scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x){
if($this.data("horizontalScroll")){
$this.mCustomScrollbar("scrollTo",(mCSB_dragger.position().left-(mCSB_draggerDragX))+x,{moveDragger:true,trigger:"internal"});
}else{
$this.mCustomScrollbar("scrollTo",(mCSB_dragger.position().top-(mCSB_draggerDragY))+y,{moveDragger:true,trigger:"internal"});
}
}
/*content touch-drag*/
if($.support.touch && $this.data("contentTouchScroll")){
if(!$this.data("bindEvent_content_touch")){
var touch,
elem,elemOffset,y,x,mCSB_containerTouchY,mCSB_containerTouchX;
mCSB_container.bind("touchstart",function(e){
e.stopImmediatePropagation();
touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
elem=$(this);
elemOffset=elem.offset();
x=touch.pageX-elemOffset.left;
y=touch.pageY-elemOffset.top;
mCSB_containerTouchY=y;
mCSB_containerTouchX=x;
});
mCSB_container.bind("touchmove",function(e){
e.preventDefault(); e.stopImmediatePropagation();
touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
elem=$(this).parent();
elemOffset=elem.offset();
x=touch.pageX-elemOffset.left;
y=touch.pageY-elemOffset.top;
if($this.data("horizontalScroll")){
$this.mCustomScrollbar("scrollTo",mCSB_containerTouchX-x,{trigger:"internal"});
}else{
$this.mCustomScrollbar("scrollTo",mCSB_containerTouchY-y,{trigger:"internal"});
}
});
}
}
/*dragger rail click scrolling*/
if(!$this.data("bindEvent_scrollbar_click")){
mCSB_draggerContainer.bind("click",function(e){
var scrollToPos=(e.pageY-mCSB_draggerContainer.offset().top)*$this.data("scrollAmount"),target=$(e.target);
if($this.data("horizontalScroll")){
scrollToPos=(e.pageX-mCSB_draggerContainer.offset().left)*$this.data("scrollAmount");
}
if(target.hasClass("mCSB_draggerContainer") || target.hasClass("mCSB_draggerRail")){
$this.mCustomScrollbar("scrollTo",scrollToPos,{trigger:"internal",scrollEasing:"draggerRailEase"});
}
});
$this.data({"bindEvent_scrollbar_click":true});
}
/*mousewheel scrolling*/
if($this.data("mouseWheel")){
if(!$this.data("bindEvent_mousewheel")){
mCustomScrollBox.bind("mousewheel",function(e,delta){
var scrollTo,mouseWheelPixels=$this.data("mouseWheelPixels"),absPos=Math.abs(mCSB_container.position().top),
draggerPos=mCSB_dragger.position().top,limit=mCSB_draggerContainer.height()-mCSB_dragger.height();
if($this.data("normalizeMouseWheelDelta")){
if(delta<0){delta=-1;}else{delta=1;}
}
if(mouseWheelPixels==="auto"){
mouseWheelPixels=100+Math.round($this.data("scrollAmount")/2);
}
if($this.data("horizontalScroll")){
draggerPos=mCSB_dragger.position().left;
limit=mCSB_draggerContainer.width()-mCSB_dragger.width();
absPos=Math.abs(mCSB_container.position().left);
}
if((delta>0 && draggerPos!==0) || (delta<0 && draggerPos!==limit)){e.preventDefault(); e.stopImmediatePropagation();}
scrollTo=absPos-(delta*mouseWheelPixels);
$this.mCustomScrollbar("scrollTo",scrollTo,{trigger:"internal"});
});
$this.data({"bindEvent_mousewheel":true});
}
}
/*buttons scrolling*/
if($this.data("scrollButtons_enable")){
if($this.data("scrollButtons_scrollType")==="pixels"){ /*scroll by pixels*/
if($this.data("horizontalScroll")){
mCSB_buttonRight.add(mCSB_buttonLeft).unbind("mousedown touchstart MSPointerDown pointerdown mouseup MSPointerUp pointerup mouseout MSPointerOut pointerout touchend",mCSB_buttonRight_stop,mCSB_buttonLeft_stop);
$this.data({"bindEvent_buttonsContinuous_x":false});
if(!$this.data("bindEvent_buttonsPixels_x")){
/*scroll right*/
mCSB_buttonRight.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().left)+$this.data("scrollButtons_scrollAmount"));
});
/*scroll left*/
mCSB_buttonLeft.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().left)-$this.data("scrollButtons_scrollAmount"));
});
$this.data({"bindEvent_buttonsPixels_x":true});
}
}else{
mCSB_buttonDown.add(mCSB_buttonUp).unbind("mousedown touchstart MSPointerDown pointerdown mouseup MSPointerUp pointerup mouseout MSPointerOut pointerout touchend",mCSB_buttonRight_stop,mCSB_buttonLeft_stop);
$this.data({"bindEvent_buttonsContinuous_y":false});
if(!$this.data("bindEvent_buttonsPixels_y")){
/*scroll down*/
mCSB_buttonDown.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().top)+$this.data("scrollButtons_scrollAmount"));
});
/*scroll up*/
mCSB_buttonUp.bind("click",function(e){
e.preventDefault();
PixelsScrollTo(Math.abs(mCSB_container.position().top)-$this.data("scrollButtons_scrollAmount"));
});
$this.data({"bindEvent_buttonsPixels_y":true});
}
}
function PixelsScrollTo(to){
if(!mCSB_dragger.data("preventAction")){
mCSB_dragger.data("preventAction",true);
$this.mCustomScrollbar("scrollTo",to,{trigger:"internal"});
}
}
}else{ /*continuous scrolling*/
if($this.data("horizontalScroll")){
mCSB_buttonRight.add(mCSB_buttonLeft).unbind("click");
$this.data({"bindEvent_buttonsPixels_x":false});
if(!$this.data("bindEvent_buttonsContinuous_x")){
/*scroll right*/
mCSB_buttonRight.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollRight":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().left)+scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonRight_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollRight"));
}
mCSB_buttonRight.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonRight_stop);
/*scroll left*/
mCSB_buttonLeft.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollLeft":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().left)-scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonLeft_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollLeft"));
}
mCSB_buttonLeft.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonLeft_stop);
$this.data({"bindEvent_buttonsContinuous_x":true});
}
}else{
mCSB_buttonDown.add(mCSB_buttonUp).unbind("click");
$this.data({"bindEvent_buttonsPixels_y":false});
if(!$this.data("bindEvent_buttonsContinuous_y")){
/*scroll down*/
mCSB_buttonDown.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollDown":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().top)+scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonDown_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollDown"));
}
mCSB_buttonDown.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonDown_stop);
/*scroll up*/
mCSB_buttonUp.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
e.preventDefault();
var scrollButtonsSpeed=ScrollButtonsSpeed();
$this.data({"mCSB_buttonScrollUp":setInterval(function(){
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().top)-scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
},17)});
});
var mCSB_buttonUp_stop=function(e){
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollUp"));
}
mCSB_buttonUp.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonUp_stop);
$this.data({"bindEvent_buttonsContinuous_y":true});
}
}
function ScrollButtonsSpeed(){
var speed=$this.data("scrollButtons_scrollSpeed");
if($this.data("scrollButtons_scrollSpeed")==="auto"){
speed=Math.round(($this.data("scrollInertia")+100)/40);
}
return speed;
}
}
}
/*scrolling on element focus (e.g. via TAB key)*/
if($this.data("autoScrollOnFocus")){
if(!$this.data("bindEvent_focusin")){
mCustomScrollBox.bind("focusin",function(){
mCustomScrollBox.scrollTop(0).scrollLeft(0);
var focusedElem=$(document.activeElement);
if(focusedElem.is("input,textarea,select,button,a[tabindex],area,object")){
var mCSB_containerPos=mCSB_container.position().top,
focusedElemPos=focusedElem.position().top,
visibleLimit=mCustomScrollBox.height()-focusedElem.outerHeight();
if($this.data("horizontalScroll")){
mCSB_containerPos=mCSB_container.position().left;
focusedElemPos=focusedElem.position().left;
visibleLimit=mCustomScrollBox.width()-focusedElem.outerWidth();
}
if(mCSB_containerPos+focusedElemPos<0 || mCSB_containerPos+focusedElemPos>visibleLimit){
$this.mCustomScrollbar("scrollTo",focusedElemPos,{trigger:"internal"});
}
}
});
$this.data({"bindEvent_focusin":true});
}
}
/*auto-hide scrollbar*/
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){
if(!$this.data("bindEvent_autoHideScrollbar")){
mCustomScrollBox.bind("mouseenter",function(e){
mCustomScrollBox.addClass("mCS-mouse-over");
functions.showScrollbar.call(mCustomScrollBox.children(".mCSB_scrollTools"));
}).bind("mouseleave touchend",function(e){
mCustomScrollBox.removeClass("mCS-mouse-over");
if(e.type==="mouseleave"){functions.hideScrollbar.call(mCustomScrollBox.children(".mCSB_scrollTools"));}
});
$this.data({"bindEvent_autoHideScrollbar":true});
}
}
},
scrollTo:function(scrollTo,options){
var $this=$(this),
defaults={
moveDragger:false,
trigger:"external",
callbacks:true,
scrollInertia:$this.data("scrollInertia"),
scrollEasing:$this.data("scrollEasing")
},
options=$.extend(defaults,options),
draggerScrollTo,
mCustomScrollBox=$this.children(".mCustomScrollBox"),
mCSB_container=mCustomScrollBox.children(".mCSB_container"),
mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger"),
contentSpeed=draggerSpeed=options.scrollInertia,
scrollBeginning,scrollBeginningOffset,totalScroll,totalScrollOffset;
if(!mCSB_container.hasClass("mCS_no_scrollbar")){
$this.data({"mCS_trigger":options.trigger});
if($this.data("mCS_Init")){options.callbacks=false;}
if(scrollTo || scrollTo===0){
if(typeof(scrollTo)==="number"){ /*if integer, scroll by number of pixels*/
if(options.moveDragger){ /*scroll dragger*/
draggerScrollTo=scrollTo;
if($this.data("horizontalScroll")){
scrollTo=mCSB_dragger.position().left*$this.data("scrollAmount");
}else{
scrollTo=mCSB_dragger.position().top*$this.data("scrollAmount");
}
draggerSpeed=0;
}else{ /*scroll content by default*/
draggerScrollTo=scrollTo/$this.data("scrollAmount");
}
}else if(typeof(scrollTo)==="string"){ /*if string, scroll by element position*/
var target;
if(scrollTo==="top"){ /*scroll to top*/
target=0;
}else if(scrollTo==="bottom" && !$this.data("horizontalScroll")){ /*scroll to bottom*/
target=mCSB_container.outerHeight()-mCustomScrollBox.height();
}else if(scrollTo==="left"){ /*scroll to left*/
target=0;
}else if(scrollTo==="right" && $this.data("horizontalScroll")){ /*scroll to right*/
target=mCSB_container.outerWidth()-mCustomScrollBox.width();
}else if(scrollTo==="first"){ /*scroll to first element position*/
target=$this.find(".mCSB_container").find(":first");
}else if(scrollTo==="last"){ /*scroll to last element position*/
target=$this.find(".mCSB_container").find(":last");
}else{ /*scroll to element position*/
target=$this.find(scrollTo);
}
if(target.length===1){ /*if such unique element exists, scroll to it*/
if($this.data("horizontalScroll")){
scrollTo=target.position().left;
}else{
scrollTo=target.position().top;
}
draggerScrollTo=scrollTo/$this.data("scrollAmount");
}else{
draggerScrollTo=scrollTo=target;
}
}
/*scroll to*/
if($this.data("horizontalScroll")){
if($this.data("onTotalScrollBack_Offset")){ /*scroll beginning offset*/
scrollBeginningOffset=-$this.data("onTotalScrollBack_Offset");
}
if($this.data("onTotalScroll_Offset")){ /*total scroll offset*/
totalScrollOffset=mCustomScrollBox.width()-mCSB_container.outerWidth()+$this.data("onTotalScroll_Offset");
}
if(draggerScrollTo<0){ /*scroll start position*/
draggerScrollTo=scrollTo=0; clearInterval($this.data("mCSB_buttonScrollLeft"));
if(!scrollBeginningOffset){scrollBeginning=true;}
}else if(draggerScrollTo>=mCSB_draggerContainer.width()-mCSB_dragger.width()){ /*scroll end position*/
draggerScrollTo=mCSB_draggerContainer.width()-mCSB_dragger.width();
scrollTo=mCustomScrollBox.width()-mCSB_container.outerWidth(); clearInterval($this.data("mCSB_buttonScrollRight"));
if(!totalScrollOffset){totalScroll=true;}
}else{scrollTo=-scrollTo;}
var snapAmount = $this.data("snapAmount");
if (snapAmount) {
scrollTo = Math.round(scrollTo / snapAmount) * snapAmount - $this.data("snapOffset");
}
/*scrolling animation*/
functions.mTweenAxis.call(this,mCSB_dragger[0],"left",Math.round(draggerScrollTo),draggerSpeed,options.scrollEasing);
functions.mTweenAxis.call(this,mCSB_container[0],"left",Math.round(scrollTo),contentSpeed,options.scrollEasing,{
onStart:function(){
if(options.callbacks && !$this.data("mCS_tweenRunning")){callbacks("onScrollStart");}
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){functions.showScrollbar.call(mCSB_scrollTools);}
},
onUpdate:function(){
if(options.callbacks){callbacks("whileScrolling");}
},
onComplete:function(){
if(options.callbacks){
callbacks("onScroll");
if(scrollBeginning || (scrollBeginningOffset && mCSB_container.position().left>=scrollBeginningOffset)){callbacks("onTotalScrollBack");}
if(totalScroll || (totalScrollOffset && mCSB_container.position().left<=totalScrollOffset)){callbacks("onTotalScroll");}
}
mCSB_dragger.data("preventAction",false); $this.data("mCS_tweenRunning",false);
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){if(!mCustomScrollBox.hasClass("mCS-mouse-over")){functions.hideScrollbar.call(mCSB_scrollTools);}}
}
});
}else{
if($this.data("onTotalScrollBack_Offset")){ /*scroll beginning offset*/
scrollBeginningOffset=-$this.data("onTotalScrollBack_Offset");
}
if($this.data("onTotalScroll_Offset")){ /*total scroll offset*/
totalScrollOffset=mCustomScrollBox.height()-mCSB_container.outerHeight()+$this.data("onTotalScroll_Offset");
}
if(draggerScrollTo<0){ /*scroll start position*/
draggerScrollTo=scrollTo=0; clearInterval($this.data("mCSB_buttonScrollUp"));
if(!scrollBeginningOffset){scrollBeginning=true;}
}else if(draggerScrollTo>=mCSB_draggerContainer.height()-mCSB_dragger.height()){ /*scroll end position*/
draggerScrollTo=mCSB_draggerContainer.height()-mCSB_dragger.height();
scrollTo=mCustomScrollBox.height()-mCSB_container.outerHeight(); clearInterval($this.data("mCSB_buttonScrollDown"));
if(!totalScrollOffset){totalScroll=true;}
}else{scrollTo=-scrollTo;}
var snapAmount = $this.data("snapAmount");
if (snapAmount) {
scrollTo = Math.round(scrollTo / snapAmount) * snapAmount - $this.data("snapOffset");
}
/*scrolling animation*/
functions.mTweenAxis.call(this,mCSB_dragger[0],"top",Math.round(draggerScrollTo),draggerSpeed,options.scrollEasing);
functions.mTweenAxis.call(this,mCSB_container[0],"top",Math.round(scrollTo),contentSpeed,options.scrollEasing,{
onStart:function(){
if(options.callbacks && !$this.data("mCS_tweenRunning")){callbacks("onScrollStart");}
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){functions.showScrollbar.call(mCSB_scrollTools);}
},
onUpdate:function(){
if(options.callbacks){callbacks("whileScrolling");}
},
onComplete:function(){
if(options.callbacks){
callbacks("onScroll");
if(scrollBeginning || (scrollBeginningOffset && mCSB_container.position().top>=scrollBeginningOffset)){callbacks("onTotalScrollBack");}
if(totalScroll || (totalScrollOffset && mCSB_container.position().top<=totalScrollOffset)){callbacks("onTotalScroll");}
}
mCSB_dragger.data("preventAction",false); $this.data("mCS_tweenRunning",false);
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){if(!mCustomScrollBox.hasClass("mCS-mouse-over")){functions.hideScrollbar.call(mCSB_scrollTools);}}
}
});
}
if($this.data("mCS_Init")){$this.data({"mCS_Init":false});}
}
}
/*callbacks*/
function callbacks(cb){
if ($this.data("mCustomScrollbarIndex")) {
this.mcs = {
top: mCSB_container.position().top, left: mCSB_container.position().left,
draggerTop: mCSB_dragger.position().top, draggerLeft: mCSB_dragger.position().left,
topPct: Math.round((100 * Math.abs(mCSB_container.position().top)) / Math.abs(mCSB_container.outerHeight() - mCustomScrollBox.height())),
leftPct: Math.round((100 * Math.abs(mCSB_container.position().left)) / Math.abs(mCSB_container.outerWidth() - mCustomScrollBox.width()))
};
switch (cb) {
/*start scrolling callback*/
case "onScrollStart":
$this.data("mCS_tweenRunning", true).data("onScrollStart_Callback").call($this, this.mcs);
break;
case "whileScrolling":
$this.data("whileScrolling_Callback").call($this, this.mcs);
break;
case "onScroll":
$this.data("onScroll_Callback").call($this, this.mcs);
break;
case "onTotalScrollBack":
$this.data("onTotalScrollBack_Callback").call($this, this.mcs);
break;
case "onTotalScroll":
$this.data("onTotalScroll_Callback").call($this, this.mcs);
break;
}
}
}
},
stop:function(){
var $this=$(this),
mCSB_container=$this.children().children(".mCSB_container"),
mCSB_dragger=$this.children().children().children().children(".mCSB_dragger");
functions.mTweenAxisStop.call(this,mCSB_container[0]);
functions.mTweenAxisStop.call(this,mCSB_dragger[0]);
},
disable:function(resetScroll){
var $this=$(this),
mCustomScrollBox=$this.children(".mCustomScrollBox"),
mCSB_container=mCustomScrollBox.children(".mCSB_container"),
mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
mCSB_dragger=mCSB_scrollTools.children().children(".mCSB_dragger");
mCustomScrollBox.unbind("mousewheel focusin mouseenter mouseleave touchend");
mCSB_container.unbind("touchstart touchmove")
if(resetScroll){
if($this.data("horizontalScroll")){
mCSB_dragger.add(mCSB_container).css("left",0);
}else{
mCSB_dragger.add(mCSB_container).css("top",0);
}
}
mCSB_scrollTools.css("display","none");
mCSB_container.addClass("mCS_no_scrollbar");
$this.data({"bindEvent_mousewheel":false,"bindEvent_focusin":false,"bindEvent_content_touch":false,"bindEvent_autoHideScrollbar":false}).addClass("mCS_disabled");
},
destroy:function(){
var $this=$(this);
$this.removeClass("mCustomScrollbar _mCS_"+$this.data("mCustomScrollbarIndex")).addClass("mCS_destroyed").children().children(".mCSB_container").unwrap().children().unwrap().siblings(".mCSB_scrollTools").remove();
$(document).unbind("mousemove."+$this.data("mCustomScrollbarIndex")+" mouseup."+$this.data("mCustomScrollbarIndex")+" MSPointerMove."+$this.data("mCustomScrollbarIndex")+" MSPointerUp."+$this.data("mCustomScrollbarIndex"));
$(window).unbind("resize."+$this.data("mCustomScrollbarIndex"));
}
},
functions={
/*hide/show scrollbar*/
showScrollbar:function(){
this.stop().animate({opacity:1},"fast");
},
hideScrollbar:function(){
this.stop().animate({opacity:0},"fast");
},
/*js animation tween*/
mTweenAxis:function(el,prop,to,duration,easing,callbacks){
var callbacks=callbacks || {},
onStart=callbacks.onStart || function(){},onUpdate=callbacks.onUpdate || function(){},onComplete=callbacks.onComplete || function(){};
var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style;
if(prop==="left"){from=el.offsetLeft;}
var diff=to-from;
_cancelTween();
_startTween();
function _getTime(){
if(window.performance && window.performance.now){
return window.performance.now();
}else{
if(window.performance && window.performance.webkitNow){
return window.performance.webkitNow();
}else{
if(Date.now){return Date.now();}else{return new Date().getTime();}
}
}
}
function _step(){
if(!progress){onStart.call();}
progress=_getTime()-startTime;
_tween();
if(progress>=el._time){
el._time=(progress>el._time) ? progress+_delay-(progress- el._time) : progress+_delay-1;
if(el._time<progress+1){el._time=progress+1;}
}
if(el._time<duration){el._id=_request(_step);}else{onComplete.call();}
}
function _tween(){
if(duration>0){
el.currVal=_ease(el._time,from,diff,duration,easing);
elStyle[prop]=Math.round(el.currVal)+"px";
}else{
elStyle[prop]=to+"px";
}
onUpdate.call();
}
function _startTween(){
_delay=1000/60;
el._time=progress+_delay;
_request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame;
el._id=_request(_step);
}
function _cancelTween(){
if(el._id==null){return;}
if(!window.requestAnimationFrame){clearTimeout(el._id);
}else{window.cancelAnimationFrame(el._id);}
el._id=null;
}
function _ease(t,b,c,d,type){
switch(type){
case "linear":
return c*t/d + b;
break;
case "easeOutQuad":
t /= d; return -c * t*(t-2) + b;
break;
case "easeInOutQuad":
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
break;
case "easeOutCubic":
t /= d; t--; return c*(t*t*t + 1) + b;
break;
case "easeOutQuart":
t /= d; t--; return -c * (t*t*t*t - 1) + b;
break;
case "easeOutQuint":
t /= d; t--; return c*(t*t*t*t*t + 1) + b;
break;
case "easeOutCirc":
t /= d; t--; return c * Math.sqrt(1 - t*t) + b;
break;
case "easeOutSine":
return c * Math.sin(t/d * (Math.PI/2)) + b;
break;
case "easeOutExpo":
return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
break;
case "mcsEaseOut":
var ts=(t/=d)*t,tc=ts*t;
return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t);
break;
case "draggerRailEase":
t /= d/2;
if (t < 1) return c/2*t*t*t + b;
t -= 2;
return c/2*(t*t*t + 2) + b;
break;
}
}
},
/*stop js animation tweens*/
mTweenAxisStop:function(el){
if(el._id==null){return;}
if(!window.requestAnimationFrame){clearTimeout(el._id);
}else{window.cancelAnimationFrame(el._id);}
el._id=null;
},
/*detect requestAnimationFrame and polyfill*/
rafPolyfill:function(){
var pfx=["ms","moz","webkit","o"],i=pfx.length;
while(--i > -1 && !window.requestAnimationFrame){
window.requestAnimationFrame=window[pfx[i]+"RequestAnimationFrame"];
window.cancelAnimationFrame=window[pfx[i]+"CancelAnimationFrame"] || window[pfx[i]+"CancelRequestAnimationFrame"];
}
}
}
/*detect features*/
functions.rafPolyfill.call(); /*requestAnimationFrame*/
$.support.touch=!!('ontouchstart' in window); /*touch*/
$.support.pointer=window.navigator.pointerEnabled; /*pointer support*/
$.support.msPointer=window.navigator.msPointerEnabled; /*MSPointer support*/
/*plugin dependencies*/
var _dlp=("https:"==document.location.protocol) ? "https:" : "http:";
$.event.special.mousewheel || document.write('<script src="'+_dlp+'//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"><\/script>');
/*plugin fn*/
$.fn.mCustomScrollbar=function(method){
if(methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof method==="object" || !method){
return methods.init.apply(this,arguments);
}else{
$.error("Method "+method+" does not exist");
}
};
})(jQuery);

84
web/App_Script/custom-scrollbar-plugin/js/uncompressed/jquery.mousewheel.js Normal file
View File

@@ -0,0 +1,84 @@
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);

89
web/App_Script/custom-scrollbar-plugin/keyboard_nav_example.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Keyboard navigation (up/down arrows) example</h1>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
$("#content_1").hover(function(){
$(document).data({"keyboard-input":"enabled"});
$(this).addClass("keyboard-input");
},function(){
$(document).data({"keyboard-input":"disabled"});
$(this).removeClass("keyboard-input");
});
$(document).keydown(function(e){
if($(this).data("keyboard-input")==="enabled"){
var activeElem=$(".keyboard-input"),
activeElemPos=Math.abs($(".keyboard-input .mCSB_container").position().top),
pixelsToScroll=60;
if(e.which===38){ //scroll up
e.preventDefault();
if(pixelsToScroll>activeElemPos){
activeElem.mCustomScrollbar("scrollTo","top");
}else{
activeElem.mCustomScrollbar("scrollTo",(activeElemPos-pixelsToScroll),{scrollInertia:400,scrollEasing:"easeOutCirc"});
}
}else if(e.which===40){ //scroll down
e.preventDefault();
activeElem.mCustomScrollbar("scrollTo",(activeElemPos+pixelsToScroll),{scrollInertia:400,scrollEasing:"easeOutCirc"});
}
}
});
});
})(jQuery);
</script>
</body>
</html>

66
web/App_Script/custom-scrollbar-plugin/loading_each_script_separately.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Default scrollbar with scroll buttons</h1>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- CloudFlare CDN mousewheel plugin with fallback to local -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script>$.event.special.mousewheel || document.write('<script src="js/minified/jquery.mousewheel.min.js"><\/script>')</script>
<!-- custom scrollbars plugin -->
<script src="js/minified/jquery.mCustomScrollbar.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</body>
</html>

BIN
web/App_Script/custom-scrollbar-plugin/mCSB_buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

67
web/App_Script/custom-scrollbar-plugin/max-height_example.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:260px; max-height:380px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>CSS max-height example</h1>
<p class="output"><a href="#" id="add-content">Add content</a> <a href="#" id="remove-content">Remove content</a></p>
<!-- content block -->
<div id="content_1" class="content">
<p><code>max-height</code> set to <code>380px</code>.</p>
<p>Lorem ipsum dolor sit amet. Nullam felis tellus, tristique nec egestas in suspendisse potenti. Cras venenatis condimentum nibh a mollis.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar();
/*demo fn*/
$("#add-content").click(function(e){
e.preventDefault();
$("#content_1 .mCSB_container").append("<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Fusce adipiscing dui eu metus gravida.</p>");
$("#content_1").mCustomScrollbar("update");
});
$("#remove-content").click(function(e){
e.preventDefault();
$("#content_1 .mCSB_container p:last").remove();
$("#content_1").mCustomScrollbar("update");
});
});
})(jQuery);
</script>
</body>
</html>

76
web/App_Script/custom-scrollbar-plugin/max-width_example.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; max-width:30%; height:140px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content .content-wrapper{overflow:hidden;}
.content p{width:180px; height:100px; float:left; margin:0 20px; padding:5px 10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; background: #404040;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>CSS max-width example</h1>
<p class="output"><a href="#" id="add-content">Add content</a> <a href="#" id="remove-content">Remove content</a></p>
<!-- content block -->
<div id="content_1" class="content">
<div class="content-wrapper">
<p><code>max-width</code> set to <code>30%</code>. <br />Lorem ipsum dolor sit amet. Aliquam erat volutpat.</p>
</div>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
},
horizontalScroll:true,
advanced:{autoExpandHorizontalScroll:true,updateOnContentResize:false}
});
/*demo fn*/
$("#add-content").click(function(e){
e.preventDefault();
$("#content_1 .content-wrapper").append("<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Donec egestas mi turpis. </p>");
$("#content_1").mCustomScrollbar("update");
});
$("#remove-content").click(function(e){
e.preventDefault();
$("#content_1 .content-wrapper p:last").remove();
$("#content_1").mCustomScrollbar("update");
});
});
})(jQuery);
</script>
</body>
</html>

75
web/App_Script/custom-scrollbar-plugin/multiple_scrollbars_example.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff; clear:both;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:0 0 40px 40px; width:260px; height:600px; padding:10px; overflow:auto; float:left; background:#282828; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content:hover{background:#333;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Multiple default scrollbars</h1>
<!-- content block -->
<div class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam.</p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis.</p>
<p>In hac habitasse platea dictumst. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas. Etiam sed massa felis, aliquam pellentesque est. Quisque quis ante tortor, sed egestas risus. Maecenas varius adipiscing nulla, nec rhoncus est mattis id. Aenean blandit convallis nisi at fringilla. Nunc id massa eu sapien fringilla posuere.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
</body>
</html>

129
web/App_Script/custom-scrollbar-plugin/nested_scrollbars_demo.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{margin:40px; width:50%; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
.content .content{width:100%; margin:20px 0; background:#252525; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.content .content .content{background:#191919;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Nested custom scrollbars</h1>
<p class="output">
<a href="#c1" rel="_mCS_1_scrollTo">Scroll to 3rd paragraph</a>
<a href="bottom" rel="_mCS_1_scrollTo">Scroll to bottom</a><br />
<a href="#c2" rel="_mCS_2_scrollTo">Scroll to first inner content, 3rd paragraph</a>
<a href="top" rel="_mCS_2_scrollTo">Scroll inner content to top</a><br />
<a href="#c3" rel="_mCS_3_scrollTo">Scroll to first inner content, second inner content, 4th paragraph</a>
</p>
<p class="output">
<code>#content-1</code> top position (<code>mcs.top</code>): <span class="content-1-pos">&nbsp;</span><br />
<code>#content-2</code> top position (<code>mcs.top</code>): <span class="content-2-pos">&nbsp;</span><br />
<code>#content-3</code> top position (<code>mcs.top</code>): <span class="content-3-pos">&nbsp;</span>
</p>
<!-- content block -->
<div id="content-1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p id="c1">Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<!-- content block -->
<div id="content-2" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p id="c2">Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<!-- content block -->
<div id="content-3" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p id="c3">Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor.</p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar({
scrollButtons:{
enable:true
},
callbacks:{
onScroll:function(){
$("."+this.attr("id")+"-pos").text(mcs.top);
}
}
});
/*demo fn*/
$(".output a[rel~='_mCS_1_scrollTo']").click(function(e){
e.preventDefault();
$("#content-1").mCustomScrollbar("scrollTo",$(this).attr("href"));
});
$(".output a[rel~='_mCS_2_scrollTo']").click(function(e){
e.preventDefault();
$("#content-1").mCustomScrollbar("scrollTo","#content-2");
$("#content-2").mCustomScrollbar("scrollTo",$(this).attr("href"));
});
$(".output a[rel~='_mCS_3_scrollTo']").click(function(e){
e.preventDefault();
$("#content-1").mCustomScrollbar("scrollTo","#content-2");
$("#content-2").mCustomScrollbar("scrollTo","#content-3");
$("#content-3").mCustomScrollbar("scrollTo",$(this).attr("href"));
});
});
})(jQuery);
</script>
</body>
</html>

116
web/App_Script/custom-scrollbar-plugin/nested_scrollbars_demo_alt.html Normal file
View File

@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
#content-1{margin:40px; width:50%; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
.content .content{width:100%; margin:20px 0; background:#252525; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.content .content .content{background:#191919;}
#content-2{overflow:hidden; height:210px; padding:20px;}
#content-2 p{float:left; width:300px; min-width:100px; margin-right:10px; background:rgba(0,0,0,0.3); padding:10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
#content-2 p:last-child{width:auto; margin-right:0;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Nested custom scrollbars</h1>
<p class="output">
<a href="#c1" rel="_mCS_1_scrollTo">Scroll to 3rd paragraph</a>
<a href="bottom" rel="_mCS_1_scrollTo">Scroll to bottom</a><br />
<a href="#c2" rel="_mCS_2_scrollTo">Scroll to first inner content, 5th paragraph</a>
<a href="left" rel="_mCS_2_scrollTo">Scroll inner content to left</a>
</p>
<p class="output">
<code>#content-1</code> top position (<code>mcs.top</code>): <span class="content-1-pos">&nbsp;</span><br />
<code>#content-2</code> left position (<code>mcs.left</code>): <span class="content-2-pos">&nbsp;</span><br />
</p>
<!-- content block -->
<div id="content-1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p id="c1">Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<!-- content block -->
<div id="content-2" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl.</p>
<p id="c2">Etiam sed massa felis, aliquam pellentesque est. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor.</p>
<p>the end.</p>
</div>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor.</p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content-1").mCustomScrollbar({
scrollButtons:{
enable:true
},
callbacks:{
onScroll:function(){
$("."+this.attr("id")+"-pos").text(mcs.top);
}
}
});
$("#content-2").mCustomScrollbar({
horizontalScroll:true,
callbacks:{
onScroll:function(){
$("."+this.attr("id")+"-pos").text(mcs.left);
}
}
});
/*demo fn*/
$(".output a[rel~='_mCS_1_scrollTo']").click(function(e){
e.preventDefault();
$("#content-1").mCustomScrollbar("scrollTo",$(this).attr("href"));
});
$(".output a[rel~='_mCS_2_scrollTo']").click(function(e){
e.preventDefault();
$("#content-1").mCustomScrollbar("scrollTo","#content-2");
$("#content-2").mCustomScrollbar("scrollTo",$(this).attr("href"));
});
});
})(jQuery);
</script>
</body>
</html>

109
web/App_Script/custom-scrollbar-plugin/nested_scrollbars_demo_alt_2.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.content p{min-height:320px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
#content-1{overflow:hidden; height:410px; padding:20px; width:100%;}
#content-1 p{float:left; width:300px; min-width:100px; margin-right:10px; background:rgba(0,0,0,0.3); padding:10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
#content-1 p:last-child{width:auto; margin-right:0;}
#content-1 .content{background:#252525; width:300px; height:340px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left; margin-right:10px;}
#content-1 .content p{float:none; width:auto; margin-right:0; min-height:auto;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Nested custom scrollbars</h1>
<!-- content block -->
<div id="content-1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam sed massa felis, aliquam pellentesque est.</p>
<!-- nested content block -->
<div class="content inner">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl.</p>
<p>Etiam sed massa felis, aliquam pellentesque est. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor.</p>
<p>the end.</p>
</div>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<!-- nested content block -->
<div class="content inner">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl.</p>
<p>Etiam sed massa felis, aliquam pellentesque est. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor.</p>
<p>the end.</p>
</div>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<!-- nested content block -->
<div class="content inner">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl.</p>
<p>Etiam sed massa felis, aliquam pellentesque est. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor.</p>
<p>the end.</p>
</div>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo.</p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content-1").mCustomScrollbar({
horizontalScroll:true
});
$(".content.inner").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</body>
</html>

66
web/App_Script/custom-scrollbar-plugin/readme.txt Normal file
View File

@@ -0,0 +1,66 @@
=== malihu custom scrollbar plugin ===
== Description ==
Custom scrollbar jQuery plugin that's fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support, scroll easing, adjustable scrollbar height/width, nested scrollbars, user defined callbacks etc.
== info ==
Plugin author: malihu (http://manos.malihu.gr)
Plugin home: http://manos.malihu.gr/jquery-custom-content-scroller
For implementation guides and tutorials please visit plugin home.
== Browser compatibility ==
Plugin tested successfully under the following browsers/OS:
Internet Explorer 11 (Win 7/8)
Internet Explorer 10 (Win 8)
Internet Explorer 9 (Win 7)
Internet Explorer 8 (Win 7)
Firefox 13 (Win 7)
Firefox 5 (Ubuntu 11.04)
Firefox 4 (OSX 10.6)
Firefox 3.6 (Win 7)
Chrome 20 (Win 7)
Chrome 5 (Win 7)
Opera 12 (Win 7)
Safari 5.1 (Win 7)
Safari 4 (OSX 10.6)
iOS 5.x (iPad)
iOS 6.x (iPad)
Android 2.x
Android 3.x
Android 4.x
== Versions ==
= Version 2.8.3 (NOV 19, 2013) =
= Version 2.8.2 (MAY 9, 2013) =
= Version 2.8.1 (MAR 13, 2013) =
= Version 2.8 (MAR 7, 2013) =
= Version 2.7 (FEB 19, 2013) =
= Version 2.3.2 (DEC 19, 2012) =
= Version 2.3.1 (NOV 28, 2012) =
= Version 2.3 (NOV 25, 2012) =
= Version 2.1 (JUL 27, 2012) =
= Version 2.0 (JUL 12, 2012) =
= Version 1.0 (AUG 1, 2010) =
== Changelog ==
http://manos.malihu.gr/jquery-custom-content-scroller/2/
== License ==
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
any later version.
http://www.gnu.org/licenses/lgpl.html
== Donate ==
If you feel like it, you can make a donation by visiting http://manos.malihu.gr. I greatly appreciate your support to continue updating, developing and sharing cool stuff.

120
web/App_Script/custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
code{color:#5b70ff;}
.content{margin:40px; width:580px; height:90px; padding:10px; overflow:auto; background:#444; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
.content .images_container{overflow:hidden;}
.content .images_container img{display:block; float:left; margin:0 5px; border:5px solid #777;}
a[rel='toggle-buttons-scroll-type']{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Example of snap scrolling to images</h1>
<p class="output"><a href="#" rel="toggle-buttons-scroll-type"></a></p>
<!-- content block -->
<div id="content_1" class="content">
<div class="images_container">
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
<img src="demo_files/mcsThumb5.jpg" />
<img src="demo_files/mcsThumb6.jpg" />
<img src="demo_files/mcsThumb7.jpg" />
<img src="demo_files/mcsThumb8.jpg" />
<img src="demo_files/mcsThumb1.jpg" />
<img src="demo_files/mcsThumb2.jpg" />
<img src="demo_files/mcsThumb3.jpg" />
<img src="demo_files/mcsThumb4.jpg" />
<img src="demo_files/mcsThumb5.jpg" />
<img src="demo_files/mcsThumb6.jpg" />
<img src="demo_files/mcsThumb7.jpg" />
<img src="demo_files/mcsThumb8.jpg" />
</div>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollInertia:550,
horizontalScroll:true,
mouseWheelPixels:116,
scrollButtons:{
enable:true,
scrollType:"pixels",
scrollAmount:116
},
callbacks:{
onScroll:function(){ snapScrollbar(); }
}
});
/* toggle buttons scroll type */
var content=$("#content_1");
$("a[rel='toggle-buttons-scroll-type']").html("<code>scrollType: \""+content.data("scrollButtons_scrollType")+"\"</code>");
$("a[rel='toggle-buttons-scroll-type']").click(function(e){
e.preventDefault();
var scrollType;
if(content.data("scrollButtons_scrollType")==="pixels"){
scrollType="continuous";
}else{
scrollType="pixels";
}
content.data({"scrollButtons_scrollType":scrollType}).mCustomScrollbar("update");
$(this).html("<code>scrollType: \""+content.data("scrollButtons_scrollType")+"\"</code>");
});
/* snap scrollbar fn */
var snapTo=[];
$("#content_1 .images_container img").each(function(){
var $this=$(this),thisX=$this.position().left;
snapTo.push(thisX);
});
function snapScrollbar(){
var posX=$("#content_1 .mCSB_container").position().left,closestX=findClosest(Math.abs(posX),snapTo);
$("#content_1").mCustomScrollbar("scrollTo",closestX,{scrollInertia:350,callbacks:false});
}
function findClosest(num,arr){
var curr=arr[0];
var diff=Math.abs(num-curr);
for(var val=0; val<arr.length; val++){
var newdiff=Math.abs(num-arr[val]);
if(newdiff<diff){
diff=newdiff;
curr=arr[val];
}
}
return curr;
}
});
})(jQuery);
</script>
</body>
</html>

213
web/App_Script/custom-scrollbar-plugin/scrollbar_themes_demo.html Normal file
View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:18px; font-style:italic;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:0 0 40px 40px; width:260px; height:480px; padding:20px; overflow:auto; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left;}
.content p:nth-child(even){font-family:Georgia,serif; font-size:17px; font-style:italic;}
#content_1{background:#333;}
#content_1 p:nth-child(even){color:#999;}
#content_2{color:#333; background:#eee;}
#content_2 p:nth-child(even){color:#666;}
#content_3{background:#555;}
#content_3 p:nth-child(even){color:#ccc;}
#content_4{color:#222; background:#eadc8e;}
#content_4 p:nth-child(even){color:#444;}
#content_5{background:#eb3755;}
#content_5 p:nth-child(even){color:#ddd;}
#content_6{color:#333; background:#fff;}
#content_6 p:nth-child(even){color:#666;}
#content_7{background:#000;}
#content_7 p:nth-child(even){color:#ccc;}
#content_8{color:#222; background:#26beff;}
#content_8 p:nth-child(even){color:#444;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Scrollbar themes</h1>
<!-- content block -->
<div id="content_1" class="content">
<h2>Theme: light (default)</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_2" class="content">
<h2>Theme: dark</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_3" class="content">
<h2>Theme: light-2</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_4" class="content">
<h2>Theme: dark-2</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_5" class="content">
<h2>Theme: light-thick</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_6" class="content">
<h2>Theme: dark-thick</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_7" class="content">
<h2>Theme: light-thin</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<!-- content block -->
<div id="content_8" class="content">
<h2>Theme: dark-thin</h2>
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
$("#content_2").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"dark"
});
$("#content_3").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"light-2"
});
$("#content_4").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"dark-2"
});
$("#content_5").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"light-thick"
});
$("#content_6").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"dark-thick"
});
$("#content_7").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"light-thin"
});
$("#content_8").mCustomScrollbar({
scrollButtons:{
enable:true
},
theme:"dark-thin"
});
});
})(jQuery);
</script>
</body>
</html>

63
web/App_Script/custom-scrollbar-plugin/simple_example.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Default scrollbar with scroll buttons</h1>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</body>
</html>

92
web/App_Script/custom-scrollbar-plugin/simple_example_all_params.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Default scrollbar</h1>
<!-- content block -->
<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
set_width:false, /*optional element width: boolean, pixels, percentage*/
set_height:false, /*optional element height: boolean, pixels, percentage*/
horizontalScroll:false, /*scroll horizontally: boolean*/
scrollInertia:950, /*scrolling inertia: integer (milliseconds)*/
mouseWheel:true, /*mousewheel support: boolean*/
mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
scrollButtons:{ /*scroll buttons*/
enable:false, /*scroll buttons support: boolean*/
scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
},
advanced:{
updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
updateOnContentResize:false, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
autoExpandHorizontalScroll:false, /*auto-expand width for horizontal scrolling: boolean*/
autoScrollOnFocus:true, /*auto-scroll on focused elements: boolean*/
normalizeMouseWheelDelta:false /*normalize mouse-wheel delta (-1/1)*/
},
contentTouchScroll:true, /*scrolling by touch-swipe content: boolean*/
callbacks:{
onScrollStart:function(){}, /*user custom callback function on scroll start event*/
onScroll:function(){}, /*user custom callback function on scroll event*/
onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
onTotalScrollBack:function(){}, /*user custom callback function on scroll begin reached event*/
onTotalScrollOffset:0, /*scroll end reached offset: integer (pixels)*/
onTotalScrollBackOffset:0, /*scroll begin reached offset: integer (pixels)*/
whileScrolling:function(){} /*user custom callback function on scrolling event*/
},
theme:"light" /*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
});
});
})(jQuery);
</script>
</body>
</html>

BIN
web/App_Script/custom-scrollbar-plugin/source_files/mCSB_buttons.psd Normal file
View File

Binary file not shown.

103
web/App_Script/custom-scrollbar-plugin/textarea_example.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
h2{font-family:Georgia,serif; font-size:16px; font-style:italic; color:#eee;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.content{margin:40px; width:260px; padding:20px; background:#333;}
.content textarea{width:210px; height:140px; border:none; background:transparent; resize:none; margin:0; padding:0 0 0 10px; overflow:hidden; line-height:20px; font-family: Arial, sans-serif; font-size: 13px; margin:5px 0; outline:none; color:#ccc;}
.content .textarea-wrapper{height:162px; overflow:hidden; border:1px solid #666; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 0 40px rgba(0,0,0,0.5); -moz-box-shadow:inset 0 0 40px rgba(0,0,0,0.5); box-shadow:inset 0 0 40px rgba(0,0,0,0.5);}
.hiddendiv{position:absolute; top:-9999px; left:-9999px; visibility:hidden; white-space: pre-wrap; width: 210px; min-height: 140px; font-family: Arial, sans-serif; font-size: 13px; padding:0 0 0 10px; word-wrap: break-word;}
.mCSB_scrollTools{box-sizing:border-box; padding:5px 0;}
.mCSB_scrollTools .mCSB_draggerContainer{margin:5px 0;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<p class="links">
<a href="http://manos.malihu.gr">malihu</a>
<a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
<a href="complete_examples.html">Plugin demo</a>
</p>
<hr />
<h1>Textarea with custom scrollbar</h1>
<!-- content block -->
<div class="content">
<form>
<textarea></textarea>
</form>
</div>
<hr />
<p>&nbsp;</p>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
var textArea=$(".content textarea");
textArea.wrap("<div class='textarea-wrapper' />");
var textAreaWrapper=textArea.parent(".textarea-wrapper");
textAreaWrapper.mCustomScrollbar({
scrollInertia:0,
advanced:{autoScrollOnFocus:false}
});
var hiddenDiv=$(document.createElement("div")),
content=null;
hiddenDiv.addClass("hiddendiv");
$("body").prepend(hiddenDiv);
textArea.bind("keyup",function(e){
content=$(this).val();
var clength=content.length;
var cursorPosition=textArea.getCursorPosition();
content="<span>"+content.substr(0,cursorPosition)+"</span>"+content.substr(cursorPosition,content.length);
content=content.replace(/\n/g,"<br />");
hiddenDiv.html(content+"<br />");
$(this).css("height",hiddenDiv.height());
textAreaWrapper.mCustomScrollbar("update");
var hiddenDivSpan=hiddenDiv.children("span"),
hiddenDivSpanOffset=0,
viewLimitBottom=(parseInt(hiddenDiv.css("min-height")))-hiddenDivSpanOffset,
viewLimitTop=hiddenDivSpanOffset,
viewRatio=Math.round(hiddenDivSpan.height()+textAreaWrapper.find(".mCSB_container").position().top);
if(viewRatio>viewLimitBottom || viewRatio<viewLimitTop){
if((hiddenDivSpan.height()-hiddenDivSpanOffset)>0){
textAreaWrapper.mCustomScrollbar("scrollTo",hiddenDivSpan.height()-hiddenDivSpanOffset);
}else{
textAreaWrapper.mCustomScrollbar("scrollTo","top");
}
}
});
$.fn.getCursorPosition=function(){
var el=$(this).get(0),
pos=0;
if("selectionStart" in el){
pos=el.selectionStart;
}else if("selection" in document){
el.focus();
var sel=document.selection.createRange(),
selLength=document.selection.createRange().text.length;
sel.moveStart("character",-el.value.length);
pos=sel.text.length-selLength;
}
return pos;
}
});
})(jQuery);
</script>
</body>
</html>