2015081701

開発環境:Monaca + Onsen UI + AngularJS

AngularJSにはngClassというビルドインがあり、条件により適用するCSSを変更することができます。
CSSのz-indexを組み合わせて表示、非表示を実現します。

■JavaScript
[javascript]
var nend_params = null;
if (monaca.isIOS) {
nend_params = { “media”:xxxxx,”site”:xxxxxx,”spot”:xxxxxx,”type”:x,”oriented”:x };
} else {
nend_params = { “media”:xxxxx,”site”:xxxxxx,”spot”:xxxxxx,”type”:x,”oriented”:x };
}
var app = ons.bootstrap(“myApp”, [“onsen”]);
app.controller(“indexController”, function($scope) {
ons.ready(function() {
// nend表示
$scope.nendAd = true;
});
});
[/javascript]
■CSS
[css]
#nend_wrapper {
position: absolute;
bottom: 0px;
width: 100%;
}
.showNendAd {
z-index: 99;
}
.hideNendAd {
z-index: -1;
}
[/css]
■HTML
[html]


[/html]

Recommended Posts