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

对应的各种效果,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>
         

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

时间: 2024-11-03 02:05:43

移动端安卓和 IOS 开发框架 Framework7 布局的相关文章

长按复制功能 -- 移动端安卓跟ios

html: <p class="codeAnd">3024</p> <input class="codeIos" type="text" value="3024" readonly /> script: <script> var codeAnd=$(".codeAnd"); var codeIos=$(".codeIos"); if(/(i

分布式技术 webapi 路由追加html、aspx、shtml 适用于 对接 安卓、IOS

首先是这样,在对接安卓和IOS或者是第三方调用的接口,我需要在服务端返回一个带.html/.aspx这样后缀的接口. 例子如下图:http://localhost:64131/api/UsersInfo/GetAllUsersInfo.html 当然,我们用的肯定是webapi 来做这件事情.不需要建aspx/html/do/shtml...这样的文件,只需要配置一下路由就可以了. 首先要打开:WebApiConfig 这个配置文件.需要将 routeTemplate: "api/{contro

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的坑.主要分UI展示,键盘,输入框等等.解决bug最苦恼的问题不是没有解决方案,而是你没有找到真正的原因.再就是现象难以重现,每次都要发布代码,然后到手机app中去测试,模拟.这些地方会耗费大量的精力. 一.UI相关 1.安卓4.4以下不支持fixed布局. fixed布局的作用之一就是在手机键盘弹起

驰骋工作流引擎-CCMobile与安卓、IOS集成过程中的问题与解决方案

CCMobile与安卓.IOS集成过程中的问题与解决方案 前言: CCMobile(2019版本)是CCFlow&JFlow 的一款移动端审批的产品.系统基于mui框架开发,是一款可以兼容Android与IOS的移动端工作流审批系统.由于CCMobile仅仅局限于移动端的流程审批,所以在其他办公功能方面很少,这时可能就需要在源码上开发或者与其他APP进行集成. 由于Mui是一款h5的框架,并不是原生的,所以在与原生APP集成时,会出现一些问题,主要集中在附件上传下载.屏幕兼容等.本文章,将具体描

仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5)

仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5) 运行条件 HBuilder X 2.2.2 安装后,从插件市场导入,即可真机运行 vue 项目地址 github https://github.com/15157757001/scroll-video uniapp插件市场 https://ext.dcloud.net.cn/plugin?id=664 说明 插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app),可自行切换. 插件在uni-app编译模式下编写(已切

Cocos2d-JS: 2.编译到安卓和iOS

上面介绍了项目的创建,这一节记录如何编译成安卓和iOS的app,这里先记录如何编译成iOS的. 1.首先在终端中进入到项目的目录下,先看下编译命令有哪些功能,运行cocos compile -h: 1 bogon:HelloC1 dn9x$ cocos compile -h 2 usage: cocos compile [-h] [-s SRC_DIR] [-q] [-p PLATFORM] [-m MODE] [-j JOBS] 3 [--ap ANDROID_PLATFORM] [--ndk

vue中的方法如何暴露给webview,使安卓和iOS可以调用

新建一个外部公共的js文件app.js,定义一个对象并输出,如下: var hybrid = { } window.Hybrid = hybrid if (window.Vue) { // 自动绑定 window.Vue.use(hybrid) } export { hybrid } 在需要的文件中引入app.js,将需要暴露的方法赋给hybrid对象,如下: 在安卓或者iOS上可调用hybrid.clickMusic来执行函数

一元云购完整源码 云购CMS系统 带安卓和ios手机客户端

看起来不错的一套一元云购CMS源码,源码包里面带了安卓和ios手机客户端,手机客户端需要自己反编译.    这里不做功能和其它更多的介绍,可以自己下载后慢慢测试了解.    下面演示图为亲测截图<ignore_js_op> <ignore_js_op> <ignore_js_op> 源码安装说明:服务器空间需要支持PHP + MySQL1.源码完整上传至服务器空间2.通过phpmyadmin将根目录下面的sql数据库导入到你自己的MySQL数据库里面,不会导数据库的童鞋

安卓开发-使用XML菜单布局简单介绍

使用xml布局菜单 目前为止我们都是通过硬编码来增加菜单项的,android为此提供了一种更便利的方式,就是把menu也定义为应用程序的资源,通过android对资源的本地支持,使我们可以更方便地实现菜单的创建与响应.这一篇就介绍如何使用XML文件来加载和响应菜单,我们需要做这几步:  一般我们都是通过硬编码来增加菜单项的,例如我们之前介绍的.google为此提供了一种更便利的方式,就是 在/res目录下创建menu文件夹 在menu目录下使用与menu相关的元素定义xml文件,文件名任意,an