Framework7学习笔记之View的定义与View的初始化

一:View与Views

View:在应用中是一个独立的部分,她有自己的设置、页面切换和历史。每一个视图都可以有不同的导航栏、工具栏布局和不同的样式

所以View就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。

Views:是所有可见View的容器(不包括Modal和Panel)。Views 是你的应用主容器。一个应用中只能有一个 Views。

   辨析:app>views>view>page。

   关系:一个app只能有一个views标签,用于容纳view组件。

            view组件是page页面的容器,page定义了页面的内容,但是界面的样式、导航栏、工具栏等是由page所在等view来定义的。

            一个app的不同页面可以有不同的导航栏、工具栏甚至不同的样式,这些不同的页面就是由 不同的view+view中的page 共同组成的。

            因此我们开发视图界面时,主要就是对  不同窗口风格的view的定义、对各页面具体内容的page  的定义。

二:格式

<body>
  ...
  <!-- 1:Views  用于容纳不同的view-->
  <div class="views">
    <!-- 2:Your main view 应用的主view,app首页视图 -->
    <div class="view view-main">
      <!-- 1)Navbar 导航栏-->
      <!-- 2)Pages 页面内容 -->
      <!-- 3)Toolbar 工具栏-->
    </div>
    <!-- 3:Another view 其他view视图定义 -->
    <div class="view another-view">
      <!-- 1)Navbar 导航栏-->
      <!-- 2)Pages  页面内容-->
      <!-- 3)Toolbar 工具栏-->
    </div>
  </div>
  ...
</body>

三:View的初始化

原文地址:https://www.cnblogs.com/ygj0930/p/8444005.html

时间: 2024-10-29 02:33:22

Framework7学习笔记之View的定义与View的初始化的相关文章

Framework7学习笔记之Page的定义与Page初始化

一:Page 一个page文件定义了一个app页面,它可以定义该页面的导航栏.底部工具栏.中间详细内容等等.  page通过加载到view容器中运行,而view在index.html中定义. index.html定义了app的基本结构:引入样式文件.引入js文件.创建app标签.创建view标签. 因此,page的定义文件 XX.html 不需要在定义head.body等等部分,只需要使用 div 搭建出页面的 状态栏.侧边栏.页面内容(导航栏.主体部分.底部工具栏).(不是每部分都要有,按需搭

C++ Primer 学习笔记_66_面向对象编程 --定义基类和派生类[续]

算法旨在用尽可能简单的思路解决问题,理解算法也应该是一个越看越简单的过程,当你看到算法里的一串概念,或者一大坨代码,第一感觉是复杂,此时不妨从例子入手,通过一个简单的例子,并编程实现,这个过程其实就可以理解清楚算法里的最重要的思想,之后扩展,对算法的引理或者更复杂的情况,对算法进行改进.最后,再考虑时间和空间复杂度的问题. 了解这个算法是源于在Network Alignment问题中,图论算法用得比较多,而对于alignment,特别是pairwise alignment, 又经常遇到maxim

mysql学习笔记之六(数据定义语言DDL)

SQL语言包括四类种主要程序设计语言类别的语句:数据定义语言(DDL),数据操作语言(DML)及数据控制语言(DCL)还有事务控制语言(TCL). ※  数据定义语言(DDL),例如:CREATE.DROP.ALTER等语句. ※  数据操作语言(DML),例如:INSERT(插入).UPDATE(修改).DELETE(删除)语句. ※  数据查询语言(DQL),例如:SELECT语句.(一般不会单独归于一类,因为只有一个语句). ※  数据控制语言(DCL),例如:GRANT.REVOKE等语

Framework7学习笔记之App基本布局

一:App基本布局 用Framework7搭建的app,一般在index.html中引入所需的样式文件与js文件,并且搭建起整体的基本视图框架. 二:跨平台.通用型布局 <!DOCTYPE html> <html> <head> <!--1:4个meta标签,指定编码格式.界面宽高.app性质.状态栏颜色等参数--> <meta charset="utf-8"> <meta name="viewport&quo

Python学习笔记__2.2章 定义函数

# 这是学习廖雪峰老师python教程的学习笔记 1.定义函数 定义一个函数需要有函数名.参数.函数体.函数体中最好还有 传入的参数判断 1.1.函数创建 定义一个函数用def,数据类型检查用isinstance.例子如下: def my_abs(x): if not isinstance(x, (int, float)):    # 判断传入的参数,是否是 ××× 或 浮点形 raise TypeError('bad operand type')  #  抛出错误 if x >= 0: ret

Android开发学习笔记--给一个按钮定义事件

学习Android的第一天,了解了各种布局,然后自己动手画出了一个按钮,然后给按钮定义了一个事件是弹出一条消息显示“我成功了!”字样,具体过程如下: 1.修改布局文件activity_main.xml加入如下语句(我把原来的那个文本框删掉了) <Button android:id="@+id/button1" android:onClick="button_click" android:layout_width="wrap_content"

Framework7学习笔记之页面路由(旧版)

一:页面路由 Framework7的页面之间跳转有4种方法: 异步加载:从一个指定的URL加载页面,通常是另外一个页面的文件地址(默认行为)[常用] JS:创建和加载动态页面(html字符串拼接成的页面内容)[不常用] 内联页面:在index.html中将所有的page加载进来,在view中直接通过名字进行跳转.[常用] 使用模版:Framework7可以定义文件模版,可以通过调用模版并传值生成页面并且加载进来.[高阶用法] 二:异步加载 1)页面跳转 用<a>标签创建一个链接指向页面文件,当

framework7学习笔记二:基础知识

一:DOM7 framework7有自己的 DOM7 - 一个集成了大部分常用DOM操作的高性能库.它的用法和jQuery几乎是一样的,包括大部分常用的方法和jquery风格的链式调用. 在开发时,为了避免命名冲突以及方便开发,我们把dom7定义为一个变量: var $$ = Dom7; 之后,就可以在页面中使用 $$ 了. DOM7可以调用的方法,请查阅官方文档:http://docs.framework7.cn/Index/dom.html 二:

Framework7学习笔记之初始化App

一:初始化应用对象 我们想要在js文件中操作app,就需要初始化一个app对象来存储应用本身. 在初始化app时,还可以传递一些参数,对app进行一些个性化定制,如:主题.缓存设置.工具栏.导航栏.通知栏等等对app整体的特性设置. 二:格式实例 var app = new Framework7({ // App root element root: '#app', // App Name name: 'My App', // App id id: 'com.myapp.test', // En