開発環境：Monaca + Onsen UI + AngularJS
AngularJSにはngClassというビルドインがあり、条件により適用するCSSを変更することができます。
CSSのz-indexを組み合わせて表示、非表示を実現します。
■JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; }); }); |
■CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
#nend_wrapper { position: absolute; bottom: 0px; width: 100%; } .showNendAd { z-index: 99; } .hideNendAd { z-index: -1; } |
■HTML
|
1 2 3 |
<body var="index" ng-controller="indexController"> <div id="nend_wrapper" ng-class="nendAd ? 'showNendAd' : 'hideNendAd'"><script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script></div> </body> |
