176 lines
10 KiB
HTML
176 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>jQuery Scrollbar as AngularJS directive</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
<link rel="stylesheet" href="../includes/style.css" />
|
||
|
|
<link rel="stylesheet" href="../includes/prettify/prettify.css" />
|
||
|
|
<link rel="stylesheet" href="../jquery.scrollbar.css" />
|
||
|
|
<style type="text/css">
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.content .demo > div {
|
||
|
|
max-height: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="../includes/prettify/prettify.js"></script>
|
||
|
|
<script src="../includes/jquery.js"></script>
|
||
|
|
<script src="../includes/angular.js"></script>
|
||
|
|
<script src="../jquery.scrollbar.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
if(window.location.href.match(/gromo.github.io/i)){
|
||
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
|
|
||
|
|
ga('create', 'UA-52878040-1', 'auto');
|
||
|
|
ga('send', 'pageview');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="wrapper scrollbar-dynamic">
|
||
|
|
<div class="page-content">
|
||
|
|
|
||
|
|
<h1>jQuery Scrollbar as AngularJS directive</h1>
|
||
|
|
|
||
|
|
<a href="basic.html">Basic Scrollbars Demo</a><br/>
|
||
|
|
<a href="advanced.html">Advanced Scrollbars Demo</a><br/>
|
||
|
|
<a href="../">« Back to home</a>
|
||
|
|
|
||
|
|
<p id="lorem-ipsum">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
||
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
||
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
||
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
||
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
||
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
||
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
||
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
||
|
|
viverra nisi, in interdum massa nibh nec erat.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h2></h2>
|
||
|
|
<div class="controls">
|
||
|
|
<span class="demo">DEMO</span>
|
||
|
|
<span class="html">HTML</span>
|
||
|
|
<span class="css">CSS</span>
|
||
|
|
<span class="js">JS</span>
|
||
|
|
<button class="add-content">Add Content</button>
|
||
|
|
<button class="remove-content">Remove Content</button>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<style type="text/css">
|
||
|
|
.scrollbar-dynamic {
|
||
|
|
max-height: 300px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var demoApp = angular.module('demoApp', ['jQueryScrollbar']);
|
||
|
|
demoApp.controller('SimpleController', function($scope){
|
||
|
|
$scope.jqueryScrollbarOptions = {
|
||
|
|
"onScroll":function(y, x){
|
||
|
|
if(y.scroll == y.maxScroll){
|
||
|
|
alert('Scrolled to bottom');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<div class="demo">
|
||
|
|
<div data-ng-app="demoApp">
|
||
|
|
<div data-ng-controller="SimpleController">
|
||
|
|
<div class="scrollbar-dynamic" data-jquery-scrollbar="jqueryScrollbarOptions">
|
||
|
|
<p class="permanent">
|
||
|
|
Using jQuery scrollbar as Angular.JS directive is simple. Just include jquery.scrollbar.js
|
||
|
|
file after jQuery and Angular. jQuery Scrollbar automatically creates Angular.JS module
|
||
|
|
<em>jQueryScrollbar</em> with directive <em>jqueryScrollbar</em>.<br/>
|
||
|
|
<i>* Please note that Angular.JS does not work with IE 7.</i>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
||
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
||
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
||
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
||
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
||
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
||
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
||
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
||
|
|
viverra nisi, in interdum massa nibh nec erat.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
|
||
|
|
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
|
||
|
|
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
|
||
|
|
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
|
||
|
|
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
|
||
|
|
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
|
||
|
|
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
|
||
|
|
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
|
||
|
|
viverra nisi, in interdum massa nibh nec erat.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="html"></div>
|
||
|
|
<div class="css"></div>
|
||
|
|
<div class="js"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function getAlignedText(text){
|
||
|
|
text = (text || '').split('\n');
|
||
|
|
while(text.length > 0 && $.trim(text[0]) == ''){
|
||
|
|
text.shift();
|
||
|
|
}
|
||
|
|
var tabs = (text[0] || '').replace(/^(\s+).+$/, '$1');
|
||
|
|
for(var i=0; i<text.length; i++){
|
||
|
|
text[i] = text[i].replace(tabs, '');
|
||
|
|
}
|
||
|
|
if(text.length > 0 && text[text.length - 1].match(/^\s*$/)){
|
||
|
|
text.pop();
|
||
|
|
}
|
||
|
|
return text.join('\n');
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.container').each(function(){
|
||
|
|
|
||
|
|
var content = $(this).find('.content');
|
||
|
|
var controls = $(this).find('.controls');
|
||
|
|
|
||
|
|
$('<pre></pre>').addClass('prettyprint linenums lang-html').text(getAlignedText(content.find('.demo').html())).appendTo(content.find('.html'));
|
||
|
|
$('<pre></pre>').addClass('prettyprint linenums lang-css').text(getAlignedText($('#css-common').html()) + "\n" + getAlignedText(content.find('style').html())).appendTo(content.find('.css'));
|
||
|
|
$('<pre></pre>').addClass('prettyprint linenums lang-js').text(getAlignedText(content.find('script').html())).appendTo(content.find('.js'));
|
||
|
|
|
||
|
|
controls.on('click', 'span', function(){
|
||
|
|
content.find('.' + $(this).removeClass('active').attr('class')).show().siblings('div').hide();
|
||
|
|
$(this).addClass('active').siblings('span').removeClass('active');
|
||
|
|
});
|
||
|
|
controls.find('.demo').click();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.container').on('click', '.add-content', function(){
|
||
|
|
$('#lorem-ipsum').clone().removeAttr('id').appendTo($(this).closest('.container').find('.scroll-content'));
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
$('.container').on('click', '.remove-content', function(){
|
||
|
|
$(this).closest('.container').find('.scroll-content').find('p').not('.permanent').last().remove();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
window.prettyPrint && prettyPrint();
|
||
|
|
$('.wrapper').scrollbar();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|