Skip to content

Commit fb59edc

Browse files
mankindsoftwaremankindsoftware
committed
Create menu.html
1 parent 1682caa commit fb59edc

File tree

1 file changed

+271
-0
lines changed

1 file changed

+271
-0
lines changed

‎menu.html

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8"/>
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
9+
<title>Angular Isotope</title>
10+
<meta name="description" content=""/>
11+
<meta name="viewport" content="width=device-width"/>
12+
<link rel="stylesheet" href="styles/main.css"/>
13+
<link rel="stylesheet" href="styles/style.css"/>
14+
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
15+
<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/github.min.css">
16+
</head>
17+
<body ng-app="angular-isotope-demo">
18+
19+
<!--[if lt IE 7]>
20+
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
21+
<![endif]-->
22+
23+
<!--[if lt IE 9]>
24+
<script src="scripts/vendor/es5-shim.min.js"></script>
25+
<script src="scripts/vendor/json3.min.js"></script>
26+
<![endif]-->
27+
28+
<div class="container">
29+
<div ng-init=
30+
"xList=[
31+
{name:'a', number:'1', date:'1360413309421', class:'purple'}
32+
,{name:'b', number:'5', date:'1360213309421', class:'orange'}
33+
,{name:'c', number:'10', date:'1360113309421', class:'blue'}
34+
,{name:'d', number:'2', date:'1360113309421', class:'green'}
35+
,{name:'e', number:'6', date:'1350613309421', class:'green'}
36+
,{name:'f', number:'21', date:'1350613309421', class:'orange'}
37+
,{name:'g', number:'3', date:'1340613309421', class:'blue'}
38+
,{name:'h', number:'7', date:'1330613309001', class:'purple'}
39+
,{name:'i', number:'22', date:'1360412309421', class:'blue'}
40+
] ">
41+
</div>
42+
<div class="row">
43+
<div class="col-md-6">
44+
<div class="row">
45+
<h1>Angular-Isotope Example <small>Basic</small></h1>
46+
<h4>
47+
<a href="https://github.com/mankindsoftware" target="_blank">Mark Allen Hall - Mankind Software</a>
48+
</h4>
49+
</div>
50+
51+
<div class="row">
52+
<div class="col-md-12">
53+
<h4>Selector-Based Filter</h4>
54+
<div class="btn-group" opt-kind ok-key="filter" >
55+
<button type='button' class='btn btn-default active' ok-sel="*">Show All</button>
56+
<button type='button' class='btn btn-default' ok-sel=".purple">Purple</button>
57+
<button type='button' class='btn btn-default' ok-sel=".orange">Orange</button>
58+
<button type='button' class='btn btn-default' ok-sel=".blue">Blue</button>
59+
<button type='button' class='btn btn-default' ok-sel=".green">Green</button>
60+
<button type='button' class='btn btn-default' ok-sel=":not(.blue)">Not Blue</button>
61+
<button type='button' class='btn btn-default' ok-sel="#extra">Extra Only</button>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="row">
67+
<div class="col-md-6">
68+
<h4>Selector and Value-Based Sort</h4>
69+
<div class="btn-group" opt-kind ok-key="sortBy">
70+
<button type="button" class="btn btn-default" ok-sel=".name">Name</button>
71+
<button type="button" class="btn btn-default active" ok-sel="[number]" ok-type="integer">Number</button>
72+
<button type="button" class="btn btn-default" ok-sel="[date]" ok-type="integer">Date</button>
73+
</div>
74+
</div>
75+
<div class="col-md-6">
76+
<h4>Click an Item to Remove</small></h4>
77+
<button type='button' class='btn btn-default' onClick="addToList()">Add item to array</button>
78+
</div>
79+
</div>
80+
81+
<p></p>
82+
<div class="row">
83+
<div class="col-md-12">
84+
<h4>Basic ng-repeat</h4>
85+
<div hljs><li ng-repeat="x in xList" isotope-item>...</li></div>
86+
</div>
87+
</div>
88+
89+
<!-- ISOTOPECONTAINER -->
90+
<div class="row">
91+
<ul id="isotopeContainer" isotope-container ng-cloak class="ng-cloak">
92+
<li ng-repeat="x in xList" isotope-item class="kindling {{x.class}}" onClick="removeItem(this)">
93+
<div class="symbol">{{x.name}}</div>
94+
<div class="weight" date="{{x.date}}">{{x.date | date}}</div>
95+
<div class="number" number="{{x.number}}">{{x.number}}</div>
96+
</li>
97+
98+
<li id="extra" isotope-item class="kindling green">
99+
<div class="symbol">extra</div>
100+
<div class="weight" date="1360313309421">{{'1360313309421' | date}}</div>
101+
<div class="number" number="20">Twenty</div>
102+
</li>
103+
</div>
104+
105+
<div class="row">
106+
<div class="col-md-12">
107+
<div class="well">
108+
<h4>xList</h4>
109+
<div>Live view of this demo's array.</div>
110+
<p></p>
111+
{{xList}}
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<!-- COLUMN 2 -->
118+
119+
<div class="col-md-6">
120+
121+
<div class="row">
122+
<h4><a href="index.html" >Basic</a> | <a href="advanced.html"> ng-repeat with orderBy filter </a> | <a href="advancedplus.html">Best Practice</a></h4>
123+
</div>
124+
125+
<div class="row">
126+
<div class="col-md-12 well">
127+
<h3>ng-repeat</h3>
128+
<body>
129+
<p>Angular-Isotope is focussed on AngularJS's "ng-repeat" iteration directive to mass-produce Isotope tiles.
130+
</p>
131+
<p>For each item in the given Angular array, an Isotope tile is stamped from the element block specified by "isotope-item".
132+
</p>
133+
</body>
134+
<p></p>
135+
<!-- CODE -->
136+
<div hljs>
137+
<ul isotope-container="isotope-container">
138+
<li ng-repeat="x in xList" isotope-item="isotope-item" onClick="removeItem(this)">
139+
<div class="symbol">{{x.name}}</div>
140+
<div class="weight" date="{{x.date}}">{{x.date|date}}</div>
141+
<div class="number" number="{{x.number}}">{{x.number}}</div>
142+
</li>
143+
144+
<li id="extra" isotope-item class="kindling green">
145+
<div class="symbol">extra</div>
146+
<div class="weight" date="1360313309421">{{'1360313309421' | date}}</div>
147+
<div class="number" number="20">Twenty</div>
148+
</li>
149+
</ul>
150+
</div>
151+
<!-- /CODE -->
152+
<p>
153+
The "isotope-container" directive defines the bounds of the Isotope wrapper.
154+
</p>
155+
<p>The "isotope-item" directive uses its element block as the template for the Isotope tile.
156+
</p>
157+
<p>Note that the "extra" tile is created independant of the example xList array.
158+
</p>
159+
</div>
160+
</div>
161+
162+
<div class="row">
163+
<div class="col-md-12 well">
164+
<h3>Angular-Isotope Events</h3>
165+
<div>Angular-Isotope listens for the following events and passes the data to Isotope's corresponding option or method command.</div>
166+
<p></p>
167+
<div hljs>
168+
$scope.$emit('iso-option', {options};
169+
$scope.$emit('iso-method', {name:methodName, params:optionalParameters}; </div>
170+
<p>
171+
<div>Metafizzy Isotope APIs <a href="http://isotope.metafizzy.co/docs/options.html" target="_blank">options</a> |
172+
<a href="http://isotope.metafizzy.co/docs/methods.html" target="_blank">methods</a>
173+
</div>
174+
<p>
175+
<h3>Example</h3>
176+
<div hljs>$emit('iso-method', {name:'shuffle', params:null})</div>
177+
<button class="btn btn-danger" ng-click="$emit('iso-method', {name:'shuffle', params:null})">Shuffle</button>
178+
</div>
179+
</div>
180+
181+
<div class="row">
182+
<div class="col-md-12 well">
183+
<h3>opt-kind directive for sortBy and filters</h3>
184+
A filter uses a JQuery selector (attribute, class, or id) to reduce by category. A sortBy uses the JQuery selector to get a value for comparison.
185+
<p></p>
186+
The "opt-kind" directive specifies a "filter" or "sortBy" key for an element group. For each element in that group, "ok-sel" specifies the selector, and makes that element clickable to invoke the sort or filter.
187+
<p></p>
188+
<hljs>
189+
<h4>Selector-Based Filter</h4>
190+
<div class="btn-group" opt-kind ok-key="filter" >
191+
<button type='button' class='btn btn-default active' ok-sel="*">Show All</button>
192+
<button type='button' class='btn btn-default' ok-sel=".purple">Purple</button>
193+
<button type='button' class='btn btn-default' ok-sel=".orange">Orange</button>
194+
<button type='button' class='btn btn-default' ok-sel=".blue">Blue</button>
195+
<button type='button' class='btn btn-default' ok-sel=".green">Green</button>
196+
<button type='button' class='btn btn-default' ok-sel=":not(.blue)">Not Blue</button>
197+
<button type='button' class='btn btn-default' ok-sel="#extra">Extra Only</button>
198+
</div>
199+
<h4>Selector and Value-Based Sort</h4>
200+
<div class="btn-group" opt-kind ok-key="sortBy">
201+
<button type="button" class="btn btn-default" ok-sel=".name">Name</button>
202+
<button type="button" class="btn btn-default active" ok-sel="[number]" ok-type="integer">Number</button>
203+
<button type="button" class="btn btn-default" ok-sel="[date]" ok-type="integer">Date</button>
204+
</div>
205+
</hljs>
206+
The "opt-kind" directive is either "sortBy" or "filter", which corresponds to the same-named Isotope configuration keys.
207+
<p></p>
208+
The element becomes clickable and emits a message to the isotope-container when clicked.
209+
. <p></p>
210+
Each element uses the "ok-sel" attribute for indicating a JQuery selector, and additionally for "sortBy, an "ok-type" attribute (e.g. Integer) to indicate the type-casting for the element's string value in the sort's comparisons.
211+
<p></p>
212+
</div>
213+
</div>
214+
215+
<div class="row">
216+
<div class="col-md-12 well">
217+
<h3>Removing an element</h3>
218+
<div>Deleting an item from the Angular array automatically removes it from the Isotope container.</div>
219+
<p></p>
220+
<div hljs>
221+
<script>
222+
var removeItem = function(elem) {
223+
if (!Array.prototype.filter) return;
224+
var s=angular.element('#isotopeContainer').scope();
225+
var number = $(elem).find(".number").attr("number");
226+
var items = s.xList.filter(function( obj ) {
227+
return +obj.number != +number;
228+
});
229+
s.$apply(s.xList = items);
230+
};
231+
</script>
232+
</div>
233+
<div>Note that the "extra" item is added to the Isotope container directly and cannot be removed this way.</div>
234+
</div>
235+
</div>
236+
</div>
237+
</div>
238+
</div>
239+
240+
<script src="scripts/vendor/jquery-2.1.0.min.js"></script>
241+
<script>
242+
var addToList = function(number) {
243+
var s=angular.element('#isotopeContainer').scope();
244+
s.count = s.count || 0;
245+
var newItem={name:'add', number:number || s.count--, date: Date.now(), class:'purple'};
246+
s.$apply(s.xList.push(newItem));
247+
};
248+
var addLastItem = function() {
249+
s.lastNumber = s.lastNumber || [];
250+
addToList(s.lastNumber.shift());
251+
};
252+
var removeItem = function(elem) {
253+
if (!Array.prototype.filter) return;
254+
var s=angular.element('#isotopeContainer').scope();
255+
var number = $(elem).find(".number").attr("number");
256+
var items = s.xList.filter(function( obj ) {
257+
return +obj.number != +number;
258+
});
259+
s.lastNumber = s.lastNumber || [];
260+
s.lastNumber.unshift(number);
261+
s.$apply(s.xList = items);
262+
};
263+
</script>
264+
<script src="scripts/vendor/angular.min.js"></script>
265+
<script src="scripts/vendor/jquery.isotope.js"></script>
266+
<script src="scripts/angular-isotope.js"></script>
267+
<script src="scripts/app.js"></script>
268+
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
269+
<script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
270+
</body>
271+
</html>

0 commit comments

Comments
 (0)