cmp.footerAuto 类

自适应页面底部组件

定义于: doc\doc\cmp_doc_all\cmp-footerAuto-doc.js:21
模块: Footer

构造函数

cmp.footerAuto

cmp.footerAuto
(
  • id
)

定义于 doc\doc\cmp_doc_all\cmp-footerAuto-doc.js:21

参数:

名称类型标识描述
id Object 必选

被适配的页面footer的id

示例:

<html>
<body class="cmp-fullscreen">
<header class="cmp-bar cmp-bar-nav">
    <a  id="backIndex" class="cmp-action-back cmp-icon cmp-icon-left-nav cmp-pull-left"></a>
    <h1 id="title" class="cmp-title">footer auto</h1>
</header>
<div class="cmp-content position_relative ">
    <div class="cmp-control-content cmp-active">
        <div id="pullrefresh" class="cmp-scroll-wrapper">
            <div class="cmp-scroll">
                <ul id="list_datas" class="cmp-table-view">
                </ul>
            </div>
        </div>
    </div>

</div>

<footer class="cmp-bar cmp-bar-footer cmp-comment-footer " id="footer" >
    <div class="but_custom speedy">
        <span class="cmp-icon iconfont see-icon-v5-common-expression expression "  ></span>
    </div>
    <div class="but_custom keyboard">
        <input class="cmp-input-comment"  type="text" placeholder="说点什么...">
    </div>
    <div class="send">
        <span>发送</span>
    </div>
    <!--   表情包容器 -->
    <div class="expression-container cmp-hidden">
        <div class="addIcon_face hideDialog" >
            <ul id="" class="faces_list_hot clearfix">
                <li action-type="select" _title="微笑" ><span class="show-emoji-5-1"></span></li>
                <li action-type="select" _title="呲牙" ><span class="show-emoji-5-2"></span></li>
                <li action-type="select" _title="坏笑" ><span class="show-emoji-5-3"></span></li>
                <li action-type="select" _title="偷笑" ><span class="show-emoji-5-4"></span></li>
                <li action-type="select" _title="可爱" ><span class="show-emoji-5-5"></span></li>
                <li action-type="select" _title="调皮" ><span class="show-emoji-5-6"></span></li><li action-type="select" _title="爱心" ><span class="show-emoji-5-7"></span></li><li action-type="select" _title="鼓掌" ><span class="show-emoji-5-8"></span></li><li action-type="select" _title="疑问" ><span class="show-emoji-5-9"></span></li><li action-type="select" _title="晕" ><span class="show-emoji-5-10"></span></li><li action-type="select" _title="再见" ><span class="show-emoji-5-11"></span></li><li action-type="select" _title="抓狂" ><span class="show-emoji-5-12"></span></li><li action-type="select" _title="难过" ><span class="show-emoji-5-13"></span></li><li action-type="select" _title="流汗" ><span class="show-emoji-5-14"></span></li><li action-type="select" _title="流泪" ><span class="show-emoji-5-15"></span></li><li action-type="select" _title="得意" ><span class="show-emoji-5-16"></span></li><li action-type="select" _title="发怒" ><span class="show-emoji-5-17"></span></li><li action-type="select" _title="嘘" ><span class="show-emoji-5-18"></span></li><li action-type="select" _title="惊恐" ><span class="show-emoji-5-19"></span></li><li action-type="select" _title="鸭梨" ><span class="show-emoji-5-20"></span></li><li action-type="select" _title="赞" ><span class="show-emoji-5-21"></span></li><li action-type="select" _title="奖状" ><span class="show-emoji-5-22"></span></li><li action-type="select" _title="握手" ><span class="show-emoji-5-23"></span></li><li action-type="select" _title="胜利" ><span class="show-emoji-5-24"></span></li><li action-type="select" _title="祈祷" ><span class="show-emoji-5-25"></span></li><li action-type="select" _title="强" ><span class="show-emoji-5-26"></span></li><li action-type="select" _title="蛋糕" ><span class="show-emoji-5-27"></span></li><li action-type="select" _title="礼物" ><span class="show-emoji-5-28"></span></li><li action-type="select" _title="OK" ><span class="show-emoji-5-29"></span></li><li action-type="select" _title="饭" ><span class="show-emoji-5-30"></span></li><li action-type="select" _title="咖啡" ><span class="show-emoji-5-31"></span></li><li action-type="select" _title="玫瑰" ><span class="show-emoji-5-32"></span></li>
            </ul>
        </div>
    </div>
</footer>

<script>
    function footerEvent(){
        var footer=document.querySelector('.cmp-comment-footer');
        var expression=footer.querySelector('.expression');
        var input=footer.querySelector('.cmp-input-comment');
        var expression_container=footer.querySelector('.expression-container');
        var mark=1;
        expression.addEventListener('click',function(){
            if(mark%2==1){   //弹出表情
                this.classList.remove('see-icon-v5-common-expression');
                this.classList.add('see-icon-v5-common-keyboard');
                expression_container.classList.remove('cmp-hidden');
                mark++;
            }else{      //弹出键盘
                this.classList.add('see-icon-v5-common-expression');
                this.classList.remove('see-icon-v5-common-keyboard');
                expression_container.classList.add('cmp-hidden');
                input.focus();
                mark--;
            }

        },false);

    }
    //        footer的操作
    cmp.footerAuto('#footer');
    footerEvent();


</script>
</body>
</html>
Top