码迷,mamicode.com
首页 > 其他好文 > 详细

ionic中自定义底部弹出框

时间:2016-08-17 16:48:17      阅读:1545      评论:0      收藏:0      [点我收藏+]

标签:

通用部分:
<script>
     MY_FUNCTION = (function() {
        var upSheet = document.createElement(‘div‘);
        upSheet.setAttribute(‘style‘, ‘display:none;position:absolute;left:0px;top:0px;z-index: 9999;‘);
        upSheet.style.width = document.documentElement.clientWidth + ‘px‘;
        upSheet.style.height = document.documentElement.clientHeight + ‘px‘;

        var sheet = document.createElement(‘div‘);
        sheet.setAttribute(‘style‘, ‘display:block;width:100%;min-height:0px;position:absolute;left:0px;bottom:0px;z-index:10000;‘);
        upSheet.appendChild(sheet);
        document.body.appendChild(upSheet);
       return {
         scope : null,
         showUpSheet : function(o) {
           this.scope = o.scope;
           this.item=o.item;        
           sheet.innerHTML = o.template;
           upSheet.style.display = ‘block‘;
         },
         hideUpSheet : function() {
           sheet.innerHTML = ‘‘;
           upSheet.style.display = ‘none‘;
         }
       };
    })();
  </script>


调用部分:
$scope.showUpSheet = function() {
      MY_FUNCTION.showUpSheet({
        template: document.getElementById(‘templates/sheet.html‘).innerHTML
      });
    }

html部分:
<script id="templates/sheet.html" type="text/html">
  <div class="tabs-tanchu">
    11111111111
  </div>
</script>

ionic中自定义底部弹出框

标签:

原文地址:http://www.cnblogs.com/cutone/p/5780595.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!