十、附录 A
A-1 清单
`var app = app || {};
app.model = app.model || {};
/* * A movie model used for all movies within the application * * @alias app.model.movie * @constructor * @param {String} title * @param {String} rtid * @param {String} posterframe * @param {String} synopsis / app.model.movie = function appModelMovie(title, rtid, posterframe, synopsis) {
/
* The video's instance variables
*/
var _title,
_rtid,
_posterframe,
_synopsis,
_releaseDate,
_videos = [],
_actors = [],
_rating,
_favorite = false,
_self = this;/
* Getters and setters
*/
this.init = function(){ /* * Set the instance variables using the constructor's arguments / this.setTitle(title); this.setRtid(rtid); this.setPosterframe(posterframe); this.setSynopsis(synopsis); }
/* * Returns the movie title * @return {String} / this.getTitle = function(){ return _title; }
/* * Sets the movie title * @param {String} title / this.setTitle = function(title){ _title = title; }
/* * Returns the Rotten Tomatoes reference ID * @return {String} / this.getRtid = function(){ return _rtid; }
/* * Sets the Rotten Tomatoes reference ID * @param {String} rtid / this.setRtid = function(rtid){ _rtid = rtid; }
/*
* Gets the posterframe URL/Path
* @return {String}
/this.getPosterframe = function(){
return _posterframe;
}
/* * Sets the posterframe URN/Path * @param {String} posterframe / this.setPosterframe = function(posterframe){ _posterframe = posterframe; }
/* * Gets the synopsis as a string with no HTML formatting * @return {String} / this.getSynopsis = function(){ return _synopsis; }
/* * Sets the synopsis, a string with no HTML must be passed * @param {String} synopsis / this.setSynopsis = function(synopsis){ _synopsis = synopsis; }
/* * Gets all videos associated with the movie * @return {Array} / this.getVideos = function(){ return _videos; }
/* * Sets all videos associated with the movie * @param {Array} / this.setVideos = function(videos){
_videos.length = 0;
/*
* Rather than setting the videos all in one go,
* you use the addVideo method, which can handle
* any validation for each video before it's
* added to the object
/for(var i = 0; i < videos.length; i++){
_self.addVideo(videos[i]);
}
}
/ * Adds a video to the movie * @param {app.model.video} video */ this.addVideo = function(video){ / * You can add any video validation here * before it's added to the movie */ _videos.push(video); }
/* * Gets all actors associated with the movie * @return {Array} / this.getActors = function(){ return _actors; }
/* * Gets an actor at a specific index * @param {Integer} index * @return {app.model.actor} / this.getActor = function(index){ return _actors[index]; }
/* * Sets all actors associated with the movie * @param {Array} / this.setActors = function(actors){
_actors.length = 0;
/*
* Rather than setting the actors all in one go,
* you use the addActor method, which can handle
* any validation for each actor before it's
* added to the object
/
for(var i = 0; i < actors.length; i++){
_self.addActor(actors[i]);}
}
/ * Adds an actor to the movie * @param {app.model.actor} actor */ this.addActor = function(actor){ / * You can add any actor validation here * before it's added to the movie */ _actors.push(actor); }
/* * Sets the release date / this.setReleaseDate = function(releaseDate){ _releaseDate = releaseDate; }
/* * Gets the release date * @return {app.type.releaseDate} / this.getReleaseDate = function(){ return _releaseDate; }
/* * Gets the movie rating * @return {String} / this.getRating = function(){ return _rating; }
/* * Sets the movie rating * @param {String} rating / this.setRating = function(rating){ _rating = rating; }
/*
* Checks to see whether the movie
* is in the user's favorites list
* @return {Bool} /
this.isFavorite = function(){
return _favorite;
}
/* * Sets whether the movie is in the * user's favorites list * @param {Bool} value / this.setFavorite = function(value){ _favorite = value; }
this.init();
}`
清单 A-2
`.footer { height: 40px; width: 100%; text-align: center; position: absolute; bottom: 0;
.back { height: 100%; display: block; background: url('../img/back.png') no-repeat 10px 50%; text-indent: -10000px; }
}`
最终的 SASS 文件应该类似于下面的代码。
`body, html, #shoe, .deck { height: 100%; width: 100%; overflow: hidden; margin: 0px; }
/*
* Individual Card Styles
/#card-movie_search_results {
z-index: 50;
}
/* * Deck styles /
.deck {
position: relative;
.card { height: 100%; width: 100%; left: -100%; position: absolute; }
.card.active { left: 0px; }
}
/* * List styles /
/* * Standard list /
.list {
margin: 0; padding: 0;
li {
padding: 10px; overflow: hidden; height: 82px; display: block; border-bottom: 1px solid #CCCCCC;
.preview-image {
float: left;width: 60px;
height: 82px;
text-align: center;
margin-right: 10px;
}
}
}
/* * Movie list /
.movie-list {
li {
background: #A5CCEB; border-bottom-color: #FFFFFF;
.more {
display: block; height: 100%; overflow: hidden; text-decoration: none;
h2 { margin: 0 0 10px; color: #BF2628; }
p { margin: 0; color: #000000; }
}
}
li:nth-child(odd) { background: #97B2D9; }
}
/ Header taskbar styles
/
.screenbar { @include gradient(#7D9DCE, #ABC1E1, 90deg); }
header#taskbar { color: #FFFFFF; overflow: hidden; padding: 10px; border-bottom: 1px solid #BF2628;
h1.branding { margin: 0px; float: left; width: 73px; height: 32px; text-indent: -10000px; overflow: hidden; background: url('../img/momemo.png') no-repeat top left; }
.clear-search { float: right; width: 35px; height: 35px; display: none; overflow: hidden; text-indent: -10000px; background: url('../img/clear.png') 50% 50% no-repeat; }
}
header#taskbar.searchactive {
.clear-search { display: block; }
form#add-movie { margin-right: 40px; }
}
/
* Movie view
*//
* Animations for the poster header
*/
@keyframes posteranimation {
0% { top: 0%; }
100% { top: -80%; }
}
@-moz-keyframes posteranimation { 0% { top: 0%; } 100% { top: -80%; } }
@-webkit-keyframes posteranimation { 0% { top: 0%; } 100% { top: -80%; } }
.movie-header {
position: relative; overflow: hidden; height: 20%;
.poster { position: absolute; top: 0%; @include animation(posteranimation 10s ease 0 infinite alternate); }
.movie-title { position: absolute; bottom: 0px; background: rgba(255, 255, 255, 0.75); padding: 5px; bottom: 0; left: 0; width: 100%; @include box-sizing(border-box);
.btn-favorite {
float: right;
padding: 10px;
color: #FFFFFF;
background: #7D9DCE;
font-weight: bold;border-radius: 5px;
text-decoration: none;
border: 1px solid #A5CCEB;
}
.movie-release-date { text-transform: uppercase; font-weight: bold; }
}
}
.movie-content { height: 80%; width: 100%; padding-bottom: 40px; @include box-sizing(border-box);
.block-container {
width: 280%; height: 100%;
.block { width: 33%; float: left; height: 100%;
font-size: 1.3em; line-height: 2em;
.content { @include box-sizing(border-box); }
h3 { padding: 10px 10px 0 10px; }
.content { padding: 10px; }
}
}
}.footer {
height: 40px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
.back { height: 100%; display: block; background: url('../img/back.png') no-repeat 10px 50%; text-indent: -10000px; }
}`
版权属于：月萌API www.moonapi.com，转载请注明出处
