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

jqm popup模板

时间:2016-05-15 00:29:07      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:

所有模板都可以添加data-transition=‘flow‘ 属性

动画列表:http://demos.jquerymobile.com/1.4.5/transitions/

 

alert美化模板

 <div data-role=‘popup‘ id=‘Cy-Tp-Alert‘ data-overlay-theme=‘b‘ data-theme=‘b‘ data-dismissible=‘false‘ style=‘min-width:300px;‘>
                <a href=‘#‘ id=‘A1‘ data-rel=‘back‘ class=‘ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right‘>Close</a>
                    <div data-role=‘header‘ data-theme=‘b‘>
                    <h1 id=‘H1‘  style=‘margin:0px; padding: 0.7em 0;‘>温馨提示</h1>
                    </div>
                    <div role=‘main‘ class=‘ui-content‘>
                            <div id=‘Cy-Tp-Alert-Content‘ style=‘text-align:center;margin:15px;font-size:16px;‘></div>                              
                        <p style=‘margin:0px auto;text-align:center;‘>
                            <a href=‘#‘ id=‘A2‘ data-rel=‘back‘  class=‘ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-delete ui-btn-icon-left‘  data-transition=‘flow‘>确定</a>  
                        </p>
                    </div>
                </div>

表单美化模板

 <div data-role="popup" id="cy-tp-dialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="min-width:300px;">
                <a href="#" id="Cy-tp-CloseDialogBtn" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                    <div data-role="header" data-theme="b">
                    <h1 id="Cy-tp-PopupTitle"  style="margin:0px; padding: 0.7em 0;">请确认转出信息</h1>
                    </div>
                    <div role="main" class="ui-content">
                            <div id="Cy-tp-DialogInfo" style="margin:0px 15px;font-size:16px;">
                               
                                            <div class="ui-field-contain">
                                                <label for="textinput-1">红包金额:</label>
                                                <input name="HongBaoJinE" id="HongBaoJinE" placeholder="请输入红包金额" value="" type="text">
                                            </div>
                                            
                                            <div class="ui-field-contain">
                                                <label for="textinput-1">红包个数:</label>
                                                <input name="HongBaoCount" id="HongBaoCount" placeholder="请输入红包个数" value="" type="text">
                                            </div>
                                            
                                            <div class="ui-field-contain">
                                                <label for="textinput-1">道具金额:</label>
                                                <input name="DaoJuJinE" id="DaoJuJinE" placeholder="请输入道具金额" value="" type="text">
                                            </div>
                                            <!-- 
                                                 <a href="#" class="ui-btn  ui-corner-all ui-shadow  ui-icon-check ui-btn-icon-right " style="text-indent: 30px;">提交/分享</a>
                                             -->
                            </div>                              
                        <p style="margin:0px auto;text-align:center;">
                            <a href="#" id="Cy-tp-DialogYes" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-check ui-btn-icon-left">确认</a> 
                            <a href="#" id="Cy-tp-DialogNo"  class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-delete ui-btn-icon-left" data-rel="back" data-transition="flow">取消</a>
                        </p>
                    </div>
            </div>      
                    

表格美化模板

  <% /* 这是一段Dialog(popup) 作用是让用户确认划扣信息  */ %>
            <div data-role="popup" id="cy-tp-dialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="min-width:300px;">
                <a href="#" id="Cy-tp-CloseDialogBtn" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                    <div data-role="header" data-theme="b">
                    <h1 id="Cy-tp-PopupTitle"  style="margin:0px; padding: 0.7em 0;">请确认转出信息</h1>
                    </div>
                    <div role="main" class="ui-content">
                            <div id="Cy-tp-DialogInfo" style="text-align:center;margin:15px;font-size:16px;">
                                <table width="100%" id="pop_table">
                                    <tr>
                                        <td align="right" width="55%">门店号 : </td>
                                        <td align="left" width="45%" id="cy-tp-openid"></td>
                                    </tr>
                                    <tr>
                                        <td align="right" width="55%">转出金额 :</td>
                                        <td align="left" width="45%" id="cy-tp-money"></td>
                                    </tr>
                                    <tr>
                                        <td align="right" width="55%">手续费 :</td>
                                        <td align="left" width="45%" id="cy-tp-servicemoney"></td>
                                    </tr>
                                </table>
                            </div>                              
                        <p style="margin:0px auto;text-align:center;">
                            <a href="#" id="Cy-tp-DialogYes" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-check ui-btn-icon-left">确认</a> 
                            
                            <a href="#" id="Cy-tp-DialogNo"  class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-delete ui-btn-icon-left" data-rel="back" data-transition="flow">取消</a>
                        </p>
                    </div>
            </div>

 

jqm popup模板

标签:

原文地址:http://www.cnblogs.com/CyLee/p/5493872.html

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