码迷,mamicode.com
首页 > 移动开发 > 详细

移动端安卓和 IOS 开发框架 Framework7 布局

时间:2018-05-16 19:48:42      阅读:419      评论:0      收藏:0      [点我收藏+]

标签:round   技术   links   dia   inpu   开发框架   ...   inner   lin   

对应的各种效果,Framework7 里面实现的方式比较多,这里我就只写我用的一种,样式有的自己修改了的,想看官方详细的参见 http://framework7.cn

一、手风琴布局Accordion Layout

<div class="content-block accordion-list custom-accordion">
     <div class="accordion-item">
          <div class="accordion-item-toggle">
               <i class="icon icon-plus">+</i>
               <i class="icon icon-minus">-</i>                           
               <span>
                  <span class="accordion-item-toggle-span"></span>
               </span>
               <span class="accordion-item-toggle-s">
                  <i class="icon ion-navicon"></i>
               </span>
           </div>
           <div class="accordion-item-content">
               <p>这里是详细描述....这里是详细描述....这里是详细描述....这里是详细描述....这里是详细描述....这里是详细描述....这里是详细描述....</p>
           </div>
      </div>
</div>

 

var $$ = Dom7;

$$(‘.accordion-item‘).on(‘opened‘, function () {
       app.myApp.alert(‘Accordion item opened‘);
});

$$(‘.accordion-item‘).on(‘closed‘, function (e) {
       app.myApp.alert(‘Accordion item closed‘);
});

技术分享图片       技术分享图片

二、复选框

<label class="label-checkbox item-content"> </label> 
要包含
<input type="checkbox" name="ks-checkbox">
<div class="item-media">
   <i class="icon icon-form-checkbox"></i>
</div>
<div class="list-block">
                    <ul>
                        <li>
                            <label class="label-checkbox item-content">
                                <input type="checkbox" name="ks-checkbox">
                                <div class="item-media">
                                    <i class="icon icon-form-checkbox"></i>&nbsp;<i class="icon icon-zi ion-tihuo"></i>
                                </div>

                                <a href="javascript:void(0)" class="item-link item-content" ng-click="goDisCharge();">
                                    <div class="item-inner">
                                        <div class="item-title">810-597889</div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">艾青</div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title">09:00</div>
                                    </div>
                                </a>
                            </label>

                        </li>
                    </ul>
                </div>

 

 技术分享图片               技术分享图片

三、弹出框 Popover 

data-popover = .弹出框的类名
<div class="right" id="right">
                <a href="" data-popover=".popover-links" class="link open-popover"><i class="glyphicon glyphicon-th-large"></i></a>
            </div>
<div class="popover popover-links">
    <div class="popover-angle"></div>
    <div class="popover-inner">
        <div class="list-block">
            <ul>
                <li><a href="" class="list-button item-link statisticsList-title active">正常订单</a></li>
                <li><a href="" class="list-button item-link statisticsList-title">异常订单</a></li>
            </ul>
        </div>
    </div>
</div>
技术分享图片         技术分享图片

 

移动端安卓和 IOS 开发框架 Framework7 布局

标签:round   技术   links   dia   inpu   开发框架   ...   inner   lin   

原文地址:https://www.cnblogs.com/lyr1213/p/9047565.html

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