cmp.HeaderFixed 类
自适应页面头部组件
构造函数
cmp.HeaderFixed
cmp.HeaderFixed
(
-
id
)
参数:
| 名称 | 类型 | 标识 | 描述 |
|---|---|---|---|
id
| Object | 必选 | 被适配的页面footer的id |
示例:
<html lang="en">
<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 class="cmp-title">header fixed</h1>
</header>
<div class="cmp-content position_relative ">
<div class="cmp-control-content cmp-active">
<div id="scroll" class="cmp-scroll-wrapper">
<div class="cmp-scroll background_eee">
<button class="cmp-btn cmp-btn-block">header固定</button>
<button class="cmp-btn cmp-btn-block" id="open">新打开的dom中header固定</button>
</div>
</div>
</div>
</div>
<div class="Animated-Container right-go " id="container" >
<div id="header">
</div>
<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" id="footer_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>
</div>
<script>
var headerOpts=' <header class="cmp-bar cmp-bar-nav"> <a class="cmp-action-back cmp-icon cmp-icon-left-nav '
+ 'cmp-pull-left"></a> <h1 id="title" class="cmp-title">header fixed</h1> </header> ';
cmp.ready(function () {
var open=document.querySelector('#open');
var container=document.querySelector("#container");
var back;
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);
}
open.addEventListener('click',function(){
var header=container.querySelector('#header');
header.innerHTML=cmp.tpl(headerOpts,{});
container.classList.add('cmp-active');
cmp.footerAuto('#footer');
cmp.RefreshHeader();
back=container.querySelector('.cmp-icon-left-nav');
back.addEventListener('click',function(){
container.classList.remove('cmp-active');
},false);
var footer=document.querySelector('.cmp-comment-footer');
var headerNav =document.querySelector('#header').querySelector('header.cmp-bar-nav');
var footer_comment=footer.querySelector('#footer_comment');
if(headerNav && footer_comment){
cmp.HeaderFixed(headerNav,footer_comment); //footer_comment只接收文本框的ID
}
footerEvent();
},false);
var style='<style>#footer{visibility: hidden;}' +
' @media screen and (min-height: '+(window.innerHeight-10 )+'px){' +
'#footer{visibility:visible}} </style>';
});
</script>
</body>
</html>