码迷,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
迷上了代码!