Framework7新版學習筆記之碎片

阿新 • • 發佈：2018-02-23

color 新版 span blog img 文本 media delete src

一：碎片

碎片是一種類似於便利貼一樣的微型控件。

常用於 各種標簽 的顯示。如：興趣標簽：聽歌、電影、跳舞......

二：定義標簽

<div class="chip">
    <div class="chip-media">
        <img src="標簽圖片">
    </div>
    <div class="chip-label">標簽文本</div>
    <a href="#" class="chip-delete"></a>//刪除標簽按鈕
</ 
div>

Framework7新版學習筆記之碎片

color 新版 span blog img 文本 media delete src 一：碎片碎片是一種類似於便利貼一樣的微型控件。常用於各種標簽的顯示。如：興趣標簽：聽歌、電影、跳舞...... 二：定義標簽 <div clas

Framework7新版學習筆記之自動補全輸入框(AutoComplete)

學習筆記 function i++ 效果可選值 type ray text work 一：自動補全輸入框我們可以定義一種具有自動補全功能的輸入框，預先設定一些可選值作為自動補全內容。當用戶輸入可選值的部分內容時，就會在下面自動列出匹配的選項，點擊即可自動填充

Framework7新版學習筆記之角標

點餐 post pre 內容常用包含 body style 添加一：角標 F7提供了一種微型控件——角標，常用語消息條數顯示、點餐數量顯示等。二：使用角標在需要添加角標的標簽之間包含： ...<span class="badge c

Framework7新版學習筆記之升級版懸浮按鈕

ios blog -i 位置通過筆記 href 顏色樣式一：懸浮按鈕懸浮按鈕是一種有著特殊UI效果的按鈕，它看起來就像懸浮在界面之上一樣。懸浮按鈕點擊時通常會展開一系列的選項按鈕，十分酷炫。新版F7中的懸浮按鈕不僅僅是Materia

Framework7新版學習筆記之數據表格

案例 div class 列名表格 text tab lan html 一：數據表格 F7舊版中還沒有table布局，類似於表格的布局是通過row類、col-xx類模擬出來的。在新版的F7中，推出了table布局，用於展示數據表格。二：定義表格

Framework7新版學習筆記之進度條

pan ini div 進度條 data bsp nbsp res bar 一：定義進度條 <span data-progress="進度值" class="progressbar" id="進度條id" color-xx></span>

Framework7新版學習筆記之時間軸

class 學習日歷 nbsp div 效果 body log 三種一：時間軸新版F7提供了時間線組件，用於創建一種時間軸效果到UI控件。二：分類時間軸有三種樣式：垂直時間軸、水平時間軸、日歷時間軸。三：Framework7新版學習筆

Framework7新版學習筆記之滑動進度條

滑動 left data- val 滑塊改變進度條筆記 spa 一：滑動進度條滑動進度條是指：可以拖動來改變進度值的控件，例如：音量設置、亮度設置等。二：定義滑動進度條 1:單邊滑塊進度條滑塊從0～max進行滑動，滑塊所處位置就是

Framework7新版學習筆記之 Toast提醒

消息提醒 var 運行顯示 class oid pan frame open 一：Toast 在Android中，Toast是用來進行一些短暫的消息提醒的。 F7把這個效果進行了封裝，用F7開發的app無論在ios還是android運行都可以使用toa

Framework7新版學習筆記之開關控件

按鈕 app bsp 開關 div body check work 學習筆記一：開關控件新版F7增加了開關控件，在界面中提供一個開關按鈕，點擊它進行打開/關閉。二：定義開關控件並自動初始化 <label class="toggle color

Framework7學習筆記之初始化App

筆記需要默認通知欄 default 周期 routes path 定義一：初始化應用對象我們想要在js文件中操作app，就需要初始化一個app對象來存儲應用本身。在初始化app時，還可以傳遞一些參數，對app進行一些個性化定制，如：主題、

Framework7學習筆記之導航欄與工具欄的布局類型

class 文件中 div 工具 gpo 導航 log 不同的布局一：布局類型導航欄、工具欄有多種布局類型，他們分別有不同的表現效果，主要有：靜態布局、固定布局、穿透布局。二：靜態布局（少用）靜態布局的導航欄、工具欄，是寫死在頁面文件中的，

Framework7學習筆記之導航欄

link lock pos strong ont 設定 ref data- body 一：導航欄的布局導航欄按“左中右”用三個div進行布局，中部寬度優先級最低，兩邊內容較多時會把中部用 ... 縮起來。 <div class="navbar"&g

Framework7學習筆記之搜索欄（舊版）

spa 結果 ... 視圖 nbsp str -i type bar 一：搜索欄應用場景：一般用於在含有列表的頁面中進行內容檢索。二：定義搜索欄搜索欄應該放到“.page”內，“.page-content”前；在page-conten

Framework7學習筆記之側邊欄

pen 滑動遮蓋 body style nbsp 筆記 con reveal 一：舊版 1:定義側邊欄並指定側邊欄滑出效果側邊欄有兩個：左側、右側。側邊欄在body標簽間定義。 <body> <!-- 1:添加側

Framework7學習筆記之塊/內容區

col 內容 table -h 段落添加 pre tro 標簽一：舊版內容區用於按一定排版格式添加需要文本內容。舊版中，內容區用 content-block 類表示，位於內容區內外的文本其排版格式不同；位於內容區內的文本也可以用title、in

Framework7學習筆記之柵格布局/網格布局

布局學習 blog frame row color gpo 單元 -- 一：柵格布局我們可以使用行、列的形式來排布界面上的div，這就是網格化布局。柵格布局只需要：用一個row類div來組織一個行；行中各個元素用col-XX指定占據行寬百分比。

Framework7學習筆記之彈出層(Popover)

-a pan work open body ron ram 信息筆記一：彈出層或者說，稱呼為“懸浮層”更合適。用 popover 臨時彈出一小塊懸浮層顯示一些信息，用戶點擊popover窗口外面區域時會關閉它。二：定義Popover

Framework7學習筆記之常用彈窗(Modal)

最簡 clas 信息提示信息函數 cli ... cal text 一：彈窗 Modal 是從App的主要內容區域上彈出的一小塊內容塊，經常被用來向用戶詢問信息，通知或警告用戶。彈窗一般在js中定義，通過api，設定彈窗的標題、內容、點擊回調函數。

Framework7學習筆記之操作表(動作組)

nbsp 顯示 span gpo dial 頁面 red text body 一：操作表操作表其實是一組按鈕，從屏幕底部彈出，點擊不同按鈕執行不同響應函數。二：舊版：在js文件中定義並顯示操作表 $$(‘選擇器‘).on(‘click‘, functi

Framework7新版學習筆記之 碎片

相關推薦

Framework7新版學習筆記之碎片