Framework7學習筆記之側邊欄

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

pen 滑動遮蓋 body style nbsp 筆記 con reveal

一：舊版

1:定義側邊欄並指定側邊欄滑出效果

側邊欄有兩個：左側、右側。

側邊欄在body標簽間定義。

<body>
    <!-- 1:添加側邊欄遮蓋物 -->
    <div class="panel-overlay"></div>
 
    <!-- 2:定義左邊欄，reval效果 -->
    <div class="panel panel-left panel-reveal">
        ... panel content goes here ...
    </div 
>
 
    <!-- 3:定義右邊欄，cover效果-->
    <div class="panel panel-right panel-cover">
        ... panel content goes here ...
    </div>
 
    ...
</body>

2:控制側邊欄滑出與關閉：通過<a>標簽，data-panel屬性指定哪邊欄，class指定打開/關閉。

<div class="page-content">
    <div class="content-block" 
>
      
      <!--1:打開右邊欄 -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
      <!--2:關閉右邊欄 -->
      <p><a href="#" data-panel="right" class="close-panel">Close me</a></p>
    </div>
  </div>

二：新版

1:定義側邊欄，並指定滑動效果

新版中，去除了遮蓋物。

<body>
  <div id="#app">
    <!--1:定義左邊欄 -->
    <div class="panel panel-left panel-reveal">
        ... panel content goes here ...
    </div>

    <!--2:定義右邊欄 -->
    <div class="panel panel-right panel-cover">
        ... panel content goes here ...
    </div>

    ...
  </div>
</body>

2:控制邊欄

同舊版。

Framework7學習筆記之側邊欄

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

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

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

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

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

Framework7學習筆記之導航欄

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

Framework7學習筆記之初始化App

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

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學習筆記之列表視圖

frame style 點擊 tle color 第一個顯示。。簡單一：列表視圖列表區用來以列表的風格來組織元素，級別上與內容區(Content Block)同級，因此不能將list-block包含在content-block中！ <div c

Framework7學習筆記之加載指示器

學習 pre fun ide 指示 framework width 學習筆記預加載一：圖標型加載指示器這種指示器作為一個圖標內嵌到頁面中，用於顯示耗時到加載操作。  <span

Framework7學習筆記之手風琴效果(折疊、展開效果)

元素表視圖 href 升級 block lin strong 而是 color 一：手風琴效果手風琴效果類似於列表視圖，不同的地方在於：點擊列表元素時，會展開列表元素，展示詳細的元素信息，而不是跳轉到詳情頁；再次點擊，就折疊起來。二：手風琴布局(lis

Framework7學習筆記之卡片式效果

head body 學習 pan 學習筆記 footer nbsp gpo class 一：卡片效果卡片效果是一種更好的內容展示風格，有標題、信紙背景、底部標註等。二：定義卡片布局 <div class="card"> <di

Framework7學習筆記之表單

選項 href docs action put password ide tor XML 一：表單布局基本格式表單布局是通過列表來實現的。 <div class="list-block"> <ul> <!--一個表單

Framework7學習筆記之無限滾動(滾動到底部時加載新內容)

blog distance tin work detach lastindex init div lock 一：為頁面添加無限滾動控件在可滾動的容器上(一般為page-content）添加“infinite-scroll”類；在頁面底部定義加載指示器。 &

Framework7學習筆記之設備檢測庫

meta標簽 num 包含 oid minimal fin 需要 cep app 一：設備檢測庫 F7提供了API，用於檢測app所運行的設備平臺的相關信息。【註意：不是調用設備原生功能！】 myApp.device.os string. 包含"andro

微信小程式之側邊欄滑動實現（附完整原始碼）

目錄一、效果圖二、原理解析三、原始碼四、專案下載同類文章推薦：更多幹貨關注公眾號：一、效果圖講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。 &nb

Android學習筆記（四）之碎片化Fragment實現仿人人客戶端的側邊欄

其實一種好的UI佈局，可以使使用者感到更加的親切與方便。最近非常流行的莫過於側邊欄了，其實我也做過很多側邊欄的應用，但是那些側邊欄的使用我都不是很滿意，現在重新整理，重新寫了一個相對來說我比較滿意的側邊欄，其中運用的就是android3.0版本之後新加的Fragme

Django學習筆記三：頁面側邊欄最新文章，文章歸檔，分類,標籤雲的實現

前言執行效果（箭頭 == 點選）根據效果圖可以知道我們要實現的功能：將內容填充到各個側邊欄對應的內容下面，並實現對應的跳轉功能。下面我們一項一項的實現下列的功能：首先在blog應用下建立一個templatetags資料夾，資料夾下

Framework7學習筆記之 側邊欄

相關推薦

Framework7學習筆記之側邊欄