add files
This commit is contained in:
Andrey Kuvshinov
175
assets/js/vendor/jquery.scrollbar/demo/angular.html
vendored
Normal file
175
assets/js/vendor/jquery.scrollbar/demo/angular.html
vendored
Normal file
@@ -0,0 +1,175 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user