Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added deliteful/ScrollableContainer #20

Closed
wants to merge 1 commit into from
Closed

Added deliteful/ScrollableContainer #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions ScrollableContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
define([
"delite/register",
"delite/Container",
"delite/Scrollable"
], function (register, Container, Scrollable) {

// module:
// deliteful/ScrollableContainer

return register("d-scrollable-container", [HTMLElement, Container, Scrollable], {
// summary:
// A container widget with scrolling capabilities.
// description:
// A container widget which can scroll its content
// horizontally and/or vertically. Its scrolling capabilities
// and API are provided by the mixin delite/Scrollable.
// example:
// | <d-scrollable-container>
// | <div>...</div>
// | <div>...</div>
// | <div>...</div>
// | </d-scrollable-container>

// baseClass: String
// The name of the CSS class of this widget.
baseClass: "d-scrollable-container"
});
});
141 changes: 141 additions & 0 deletions tests/functional/ScrollableContainer-full-screen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>ScrollableContainer (full-screen)</title>

<link rel="stylesheet" href="../../../delite/themes/defaultapp.css">

<!-- For testing purposes. Real applications should load the AMD loader directly -->
<script type="text/javascript" src="../../../delite/tests/boilerplate.js"></script>

<script type="text/javascript">
require([
"delite/register",
"deliteful/ScrollableContainer",
"deliteful/LinearLayout",
"dojo/domReady!"
], function(register, ListItem){
register.parse();
});
</script>

<style type="text/css">
ul {
padding: 0;
margin: 0;
}
li {
padding: 0 0.5em;
height: 2em;
list-style-type: none;
line-height: 2em;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
border-bottom: 1px solid #222222;
font-size: 2em;
cursor: pointer;
}
li:hover {
background-color: #61C6EB;
}
li:active {
background-color: #007fea;
}
</style>
</head>
<body>
<d-linear-layout style="height: 100%">
<div style="background-color: blue">Header</div>

<d-scrollable-container style="background-color: green" class="fill">
<ul>
<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>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
<li>Item 41</li>
<li>Item 42</li>
<li>Item 43</li>
<li>Item 44</li>
<li>Item 45</li>
<li>Item 46</li>
<li>Item 47</li>
<li>Item 48</li>
<li>Item 49</li>
<li>Item 50</li>
<li>Item 61</li>
<li>Item 62</li>
<li>Item 63</li>
<li>Item 64</li>
<li>Item 65</li>
<li>Item 66</li>
<li>Item 67</li>
<li>Item 68</li>
<li>Item 69</li>
<li>Item 70</li>
<li>Item 81</li>
<li>Item 82</li>
<li>Item 83</li>
<li>Item 84</li>
<li>Item 85</li>
<li>Item 86</li>
<li>Item 87</li>
<li>Item 88</li>
<li>Item 89</li>
<li>Item 90</li>
<li>Item 91</li>
<li>Item 92</li>
<li>Item 93</li>
<li>Item 94</li>
<li>Item 95</li>
<li>Item 96</li>
<li>Item 97</li>
<li>Item 98</li>
<li>Item 99</li>
<li>Item 100</li>
</ul>
</d-scrollable-container>

<div style="background-color: yellow">Footer</div>
</d-linear-layout>
</body>
</html>
Loading