Framework7
关注
分享
扫一扫
文章平均质量分 88
手册网
Hi,我也是一名程序猿我建立这个手册网（shouce.ren）是为了和同行的朋友一起成长。
展开
-
移动端安卓和IOS开发框架Framework7简介及DEMO演示
Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。 Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。 Framework7 并不能兼容所有的设备。...2016-05-03 15:14:54 · 855 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Popup
Popup 是一种可以包含任何Html内容的弹出窗口，从App的主内容区域上弹出。 Popup 和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。Popup 布局Popup 布局相当简单. 你所需要做的就是将 <div class="popup"> 任何需要展示的内容 </div> 放到 body 里正确的位置上:<body> ....2016-06-02 08:51:59 · 779 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Popover 布局
Popover 组件是用来管理popover里的内容展示。你可以用 popovers 临时显示一些信息. popover 保持可见直到用户点击popover窗口外面或者你明确地移除它。注意，不推荐在小屏幕(iPhone)上使用 Popover 。 在小屏幕上你应该使用 操作表 来代替。或者使用 操作表转换为Popover。Popover 布局首先让我们来看看 Popov...2016-06-03 09:12:48 · 330 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Popover 布局
操作表是一个上滑面板，用来向用户展示进行一个任务所需的选项。你也可以使用它来提示用户，确认潜在的危险操作。操作表包含一个可选的标题和至少一个按钮，每个按钮都对应一个操作。注意，不建议在大屏幕（iPad）上使用操作表。在大屏幕上，你应该使用弹出框。创建并弹出操作表操作表是动态元素，只能使用Javascript来创建并弹出它。让我们看一下创建操作表相关的App方法：...2016-06-04 09:09:52 · 230 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Picker Modal
Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom contentPicker Modal HTML LayoutPicker Modal la...2016-06-06 09:01:14 · 283 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-登陆屏
Framework7支持登陆屏布局，它可以用在页面内部，或者用在弹出框中（嵌入），或者用作单独的遮罩。登陆屏布局首先，我们看一下单独的登录屏布局，它和弹出框很像：<body> ... <!-- Should be a direct child of BODY --> <div class="login-screen">...2016-06-07 09:34:13 · 243 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-列表（表格）
常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。列表有以下用途：让用户可以浏览结构化的多级数据展现一个索引列表在可视化的不同分组中，显示详细信息和控件展现一个可以选择的列表列表布局现在让我们看一下常见的列表布局列表区（List block）...2016-06-12 08:54:40 · 376 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-多媒体列表（Media List View）
多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。当然，它的布局更为复杂：<!-- 多媒体列表有额外的“media-list”类 --><div class="list-block media-list"> <ul> <li> ...2016-06-13 08:33:56 · 213 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-滑动操作列表（可滑动列表）
滑动操作列表是列表的扩展，它提供滑动操作的功能，滑动列表元素可以展现隐藏的功能菜单，就像滑动删除一样。让我们来看一下滑动列表元素的布局结构：<div class="list-block"> <ul> <!-- li上额外的“swipeout”类 --> <li class="swipeout">...2016-06-14 08:55:04 · 909 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-可排序列表（Sortable List）
可排序列表是列表的扩展，可以对列表进行排序.让我们来看一下可排序列表元素的布局结构：<!-- 加在列表区上额外的“sortable”类 --><div class="list-block sortable"> <li> <div class="item-content"> ...2016-06-15 08:59:18 · 323 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-表单布局
使用表单布局创建响应式的精美的表单布局。表单布局就是 列表，但是会有一些拓展。简单的表单布局让我们看一种最简单的表单布局：<div class="list-block"> <ul> ... <li> <div class="item-content"> <2016-06-16 09:01:48 · 259 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-单选和复选按钮
这是一个 列表 拓展，可以用来创建单选和复选按钮组。复选按钮组<div class="list-block"> <ul> <!-- Single chekbox item --> <li> <label class="label-checkbox item-conte...2016-06-17 08:54:45 · 644 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Smart Select
Smart Select 可以自动帮你把原生的select变成一个由 分组单选按钮 构成的动态页面。在很多iOs native应用中你可以看到这种特性。Smart Select 布局Smart Select 布局非常简单，只需要在 列表 中插入 <select>，并且给 item-link 加上 "smart-select" class即可。<div c...2016-06-20 09:15:20 · 1176 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-表单数据
Framework7 有一些方法可以让读取和填写表单数据变得非常方便：Form 转化成 JSON使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象:myApp.formToJSON(form) - 把表单转换成JSON对象form - HTML元素 or 字符串 (CSS选择器)返回一个JSON对象<form id="my...2016-06-21 08:41:10 · 183 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-表单数据
Framework7 有一些方法可以让读取和填写表单数据变得非常方便：Form 转化成 JSON使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象:myApp.formToJSON(form) - 把表单转换成JSON对象form - HTML元素 or 字符串 (CSS选择器)返回一个JSON对象<form id="my...2016-06-22 08:53:25 · 132 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-表单存储(form storage)
Framework7 可以很方便存储和解析表单的数据，特别是在 Ajax 加载的页面。并且，当你再次加载相同的页面之后，Framework7 可以自动帮你填充上次的内容!启用表单自动存储要启用表单自动存储功能，只需要：在表单上增加一个 "store-data" class在表单上增加一个 id 属性。如果没有 id, 无法正常工作的。确保你的input都有 "nam...2016-06-23 08:53:37 · 440 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Color Themes
iOS Theme Colors实例预览Framework7 comes with 10 ready to use default iOS color themes. But first of all, you need to include additional stylesheet to be able to use all these color themes:<hea...2016-06-24 09:02:59 · 300 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-动态导航栏
Modal 是从App的主要内容区域上弹出的一小块内容块. Modals经常被用来向用户询问信息，或通知或警告用户。 Modal和其他所有的遮罩图层一样，是所谓的“临时视图”的一部分。Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法预定义的 Modals注意，如果你没有指定预定义的modal标题，它讲使用默认的标题("Fr...2016-06-01 09:19:18 · 228 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-动态导航栏
iOS7的好评特性之一是动态导航栏。当页面过渡时，导航栏元素会滑动渐变。它只对穿透类型的布局有效它应该在视图初始化时通过传递dynamicNavbar: true参数来启用动态导航栏布局动态导航栏和一般的导航栏是一样的，区别只在于，你可以对导航栏的组成部分（左、中、右）加入额外的类，来说明使用哪个过渡特效。默认情况下（如果没有额外的类...2016-05-31 08:24:27 · 156 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-导航栏&工具栏布局
在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。静态布局静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏：<body> ... <div class="v...2016-05-30 08:27:53 · 275 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7使用及打包
基本布局 在这个基本APP中我们使用iOS主题。 我们首选需要创建一个 index.html 文件。这是一个 iOS 单页应用，有一个 view, left panel 和 动态穿透布局的navbar 和 toolbar:<!DOCTYPE html><html> <head> <!-- Requi...2016-05-05 16:24:47 · 860 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-搜索栏
搜索栏允许用户在列表元素中搜索，或者它可以用来作为UI组件，放到你自己的搜索实现中。搜索栏布局搜索栏应该放到“.page”内，“.page-content”前：<div class="page"> <!-- Search bar --> <form class="searchbar"> &l...2016-05-06 16:21:40 · 492 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-侧栏
让我们看看如何添加侧栏。我们的APP可能包含两种侧栏,一个在左边,另一个在右边。我们应该在body的开始处添加侧栏的htmlbody:<body> <!-- First, we need to add Panel's overlay that will overlays app while panel is opened --> <...2016-05-09 08:44:24 · 229 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-下拉刷新
下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。下拉刷新的HTML布局结构让我们来看一下如何把下拉刷新组件集成到页面中：<div class="page"> <!-- Page content应该拥有"pull-to-refresh-content"类 --> <div class="page-content pull...2016-05-10 08:35:57 · 260 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-无限滚动
无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。无限滚动HTML结构你只需在可滚动的容器上添加“infinite-scroll”类，一般是页面滚动区域 - <div class="page-content">:<div class="page"> <div class="page-content infinite-scr...2016-05-11 08:40:51 · 265 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-消息通知
使用通知组件，你可以让消息看起来像iOS的推送通知一样。通知组件JavaScript API要想创建/关闭通知，我们需要调用相关的App方法myApp.addNotification(parameters) - 通过指定的参数来创建/显示通知parameters - 包含通知相关的参数的对象。必选。方法返回一个动态创建的通知体的HTML元素myApp....2016-05-12 08:25:59 · 305 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-聊天消息
消息组件为你的App提供了可视评论和消息系统。消息组件布局... <div class="page"> <div class="page-content messages-content"> <div class="messages"> <!-- 时间戳 -->2016-05-13 08:31:06 · 310 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-进度条Progress Bar
In addition to Preloader Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate activity.By default, Preloader available in two colors: the def...2016-05-16 16:58:57 · 233 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Buttons 按钮
Framework7 comes with a bunch of ready to use buttons. All you need is to just add appropriate classes to your links or submit/button inputs:iOS Theme ButtonsUsual ButtonsJust add button class ...2016-05-17 20:35:29 · 514 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-图片浏览器
图片浏览器是一个像iOS图片浏览器一样用来展示图片的组件。图片可以被缩放或者平移 (可选)。图片浏览器使用 幻灯片组件来展现图片。创建一个图片浏览器实例图片浏览器只需通过javaScript就可以被创建和初始化。我们需要使用App封装好的方法：myApp.photoBrowser(parameters) - 带参初始化图片浏览器parameters - objec...2016-05-20 08:39:25 · 633 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-标签页(Tabs)
标签用于控制不同内容区的切换显示。Tabs标签布局我们来看一下标签页的布局<!-- Tabs容器, 需要带有"tabs"类。必需元素 --><div class="tabs"> <!-- 第一个tab, 需要带有"tab"类和唯一的id --> <!-- 第一个tab默认是激活显示状态，通过添加"2016-05-21 08:17:14 · 816 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-手风琴布局／可折叠布局
手风琴布局Accordion Layout通常，手风琴布局可以这样实现:<div class="accordion-list"> <div class="accordion-item"> <div class="accordion-item-toggle">...</div>2016-05-23 08:15:20 · 467 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-幻灯片
Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features.Swiper Slider HTML LayoutSwiper HTML layout is pretty...2016-05-24 08:12:49 · 226 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Picker控件
Picker is a powerful component that allows you to create custom overlay pickers which looks like iOS native picker.Picker could be used as inline component or as overlay. Overlay Picker will be ...2016-05-25 08:23:01 · 432 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Calendar / Datepicker
Calendar is a touch optimized component that provides an easy way to handle dates.Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Pop...2016-05-26 08:30:20 · 819 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Images Lazy Load
Lazy Load delays loading of images on page while they are outside of viewport until user scrolls to them.It will make the page load faster, improve scrolling performance and also save traffic....2016-05-27 08:23:29 · 208 阅读 · 0 评论 -
移动端安卓和IOS开发框架Framework7教程-Template7 示例
{{#each}}...{{else}}...{{/each}}{{#each}} is a block expression, that iterates through items of passed Array or through properties of passed Object.The following additional variables are availabl...2016-06-28 13:49:42 · 474 阅读 · 0 评论