1. 程式人生 > >移動端安卓和 IOS 開發框架 Framework7 布局

移動端安卓和 IOS 開發框架 Framework7 布局

plus size ont open active image style ner 彈出

對應的各種效果,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 布局