actionsheet
actionsheet方法:t.popupAction(popup_id, function(obj){})
参数1:要弹出的div的id。
参数2:处理弹出后点击按钮的事件,其中obj.action
为按钮的名称,用来判断用户点击了哪个按钮。
样式1
<a id="action1" href="" class="btn bg_teal">action1</a>
<div id="action-modal1" class="popup-action">
<div class="action-title">
<div class="center" style="width: 100%">tui framework</div>
</div>
<div class="action-btn middle modal-btn">alert</div>
<div class="action-btn middle modal-btn">cancel</div>
<div class="action-btn middle modal-btn">config</div>
</div>
<script>
t("#action1").click(function(){
t.popupAction("action-modal1");
return false;
});
</script>
样式2
<a id="action2" href="" class="btn bg_blue">action2</a>
<div id="action-modal2" class="popup-action">
<div class="action-title">
<div class="blue title-btn action-btn middle">取消</div>
<div class="center">tui framework</div>
<div class="title-btn blue action-btn middle">完成</div>
</div>
<div class="action-content">
<p>
fdsajfdsafkjlsdalfkslafjdfdjaslkfd;safdlasjfdsafdsalkfdsafj;dsafjdls;afkdslafdasklf;dsjafjklsafjldsa;jfkldsa;fjdksla;fds123123</p>
<p>
fdsajfdsafkjlsdalfkslafjd
fdjaslkfd;safdlasjfdsa
fdsalkfdsafj;dsafjdls;afkdsla
fdasklf;dsjafjklsafjldsa;
jfkldsa;fjdksla;fds
</p>
<p>
fdsajfdsafkjlsdalfkslafjd
fdjaslkfd;safdlasjfdsa
fdsalkfdsafj;dsafjdls;afkdsla
fdasklf;dsjafjklsafjldsa;
jfkldsa;fjdksla;fds
</p>
</div>
</div>
<script>
t("#action2").click(function(){
t.popupAction("action-modal2");
return false;
});
</script>
样式3
<a id="action3" href="" class="btn bg_cyan">action3</a>
<div id="action-modal3" class="popup-action">
<div class="action-title">
<div class="blue title-btn action-btn middle">取消</div>
<div class="center">tui framework</div>
<div class="title-btn blue action-btn middle">完成</div>
</div>
<div class="action-select">
<div class="select-item">
<ul id="u1">
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
</ul>
</div>
<div class="select-item">
<ul id="u2">
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
</ul>
</div>
<div class="select-item">
<ul id="u3">
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
<li>fdsafsa</li>
</ul>
</div>
</div>
</div>
<script>
t("#action3").click(function(){
t.popupAction("action-modal3");
return false;
});
</script>
样式4
<a id="action4" href="" class="btn bg_cyan">透明</a>
<div id="action-4" class="popup-action popup-action-op">
<div class="action-btn middle modal-btn">alert</div>
<div class="action-btn middle modal-btn">cancel</div>
<div class="action-btn middle modal-btn">config</div>
</div>
<script>
t("#action4").click(function(){
t.popupAction("action-4");
return false;
});
</script>