Ionic基礎——側邊欄ion-side-menus 以及ion-tap結合側邊欄詳解

阿新 • • 發佈：2019-01-13

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../../lib/js/ionic.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
    <script>
        angular.module("myApp",["ionic"])
                .controller("myCtrl",function($scope,$ionicSideMenuDelegate){
                    $scope.toggle = function(){
                        $ionicSideMenuDelegate.toggleLeft();
                    };
                });

    </script>
</head>
<body ng-controller="myCtrl">
	<ion-side-menus>
		<ion-side-menu-content>
			<ion-header-bar class="bar-positive">
				<a class="button" ng-click="toggle();">切換</a>
				<h1 class="title">ion-side-menu-content</h1>
			</ion-header-bar>
			<ion-content class="calm-bg">
			</ion-content>
		</ion-side-menu-content>
		<ion-side-menu side="left" width="120">
			<ion-content class="balanced-bg">
			</ion-content>
		</ion-side-menu>
		<ion-side-menu side="right" width="120" >
			<ion-content class="energized-bg">
			</ion-content>
		</ion-side-menu>
	</ion-side-menus>
</body>
</html>

六．指令碼ion-tap結合 ion-side-menus一起使用：

Ionic基礎——側邊欄ion-side-menus 以及ion-tap結合側邊欄詳解

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-

微信小程式之基礎內容之icon(圖示)+text(文字)+progress(進度條)+rich-text(富文字)詳解

一.icon icon 即圖示。 1.屬性 2.程式碼 2.1.WXML程式碼 <view class="group"> <block wx:f

【React Native 安卓開發】----側邊欄的實現DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

前言做過安卓原生開發的童鞋們應該都做過側邊欄這個東西，而且對於開源框架SlidingMenu和android官方側滑選單DrawerLayout應該都不陌生。那麼今天也在這裡給大家介紹一下React-Native中的側滑選單DrawerLayoutAnd

Ionic基礎——表單輸入ion-checkbox ion-radio ion-toggle ion-spinner

一.複選按鈕 : ion-checkbox ionic的複選按鈕脫胎於HTML標準的checkbox元素，可以在一組選項中同時選中多個。使用ion-checkbox指令聲明覆選按鈕元素：<ion-checkbox>...</ion-checkbo

Ionic基礎——ion-tap選項卡及路由結合ion-tap詳解

<!DOCTYPE html> <html ng-app="ezApp"> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=de

IONIC 頁面下拉載入新的資料（ion-infinite-scroll的使用）

類似於淘寶，瀏覽商品時，每次下拉都會刷新出新的資料（需要配合分頁使用，分頁在我部落格中有介紹：https://mp.csdn.net/postedit/83584133） html頁面 <ion-heade

ionic基礎知識

1.Ionic介紹 ionic是一款基於Angualr，Cordova的強大的HTML5移動應用框架，可以快速建立一個跨平臺的移動應用。可以快速開發移動App,移動端WEB頁面，微信公眾平臺應用，混合App，WEB頁面 2.Ionic和Cordova，Angualr關係 Ioni

Ionic基礎——ionic路由及內聯模板

<any ui-sref=".." nav-transition="..">...</any>目前支援的轉場方式有三種： android - android模擬ios - ios模擬none - 取消轉場動畫<!DOCTYPE html> <html ng-app="

Ionic基礎——CSS佈局

1)頭部/Header、內容/Content、底部/Footer: .bar .bar-header——宣告元素為頭部； .bar .footer——宣告元素為底部； .content/.scroll-content——宣告元素為內容區； .bar .bar

AngularJS語法基礎及數據綁定——詳解各種數據綁定指令、屬性應用

har 用戶添加雙向技巧 title 程序詳細 allow 　　AngularJS簡單易學，但是功能強大。特別是在構建單頁面應用方面效果顯著。而數據綁定可以說是他被廣泛使用的最主要的優點。他舍棄了對DOM的操作方式，一切都由AngularJS來自動更新視圖，我們

虛擬化技術基礎原理詳解

虛擬化技術基礎原理詳解DISK : IO調度模式 CFQ deadline anticipatory NOOP/sys/block/<device>/queue/schedulerMemory: MMU TLB vm.swappiness={0..100},使用交換分區的

Vue.js 運行環境搭建詳解（基於windows的手把手安裝教學）及vue、node基礎知識普及

頁面沒有全能服務器程序重載帶來 size 耐心編程　　Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。在與相關工具和支持庫一起使用時，Vue.j

python基礎（三）----字符編碼以及文件處理

odin mod window 存儲空間表示一行內存數據 rec 錯誤字符編碼與文件處理一.字符編碼由字符翻譯成二進制數字的過程字符--------（翻譯過程）------->數字這個過程實際就是一個字符如何對應一個特定數字的標準，這個標準

Linux基礎命令（之一)詳解

linux 基礎命令 Linux基礎命令(之一)詳解學習linux的朋友都知道，系統大多數操作都是命令行的操作方式，當然如今也有圖形化界面的操作方式，但是多數情況下仍然使用命令的操作模式，所以命令的作用與用法是成為學好、學會Linux系統的必備前提，也是重點之一，所以今天來聊一聊一些基礎命令的用法與其

android官方側滑菜單DrawerLayout詳解

lns 不同 earch 復雜 splay 第三方控件 ado sent fragment DrawerLayout是Support Library包中實現了側滑菜單效果的控件，可以說drawerLayout是因為第三方控件如MenuDrawer等的出現之後，google借

java基礎回顧（五）線程詳解以及synchronized關鍵字

dom com stack 相互 ++ 關於而是。。 str 本文將從線程的使用方式、源碼、synchronized關鍵字的使用方式和陷阱以及一些例子展開java線程和synchronized關鍵字的內容。一、線程的概念線程就是程序中單獨順序的流控制。線程本身不能

Linux基礎進程命令詳解

linux運維學習進程有關基礎命令一、進程定義1、進程就是CPU未完成的工作，而且它是其中運行著一個或多個線程的地址空間和這些線程所需要的系統資源。二、Linux系統進程和一些有關進程的命令1、ps命令 ps [options] 1》ps - report a snapshot of the c

oracle DDL,DML,DCL, 基礎概念詳解

aud ase class con ani 概念 ddl 數據庫狀態修改一、SQL語言，有兩個組成部分：　　DML（data manipulation language）：它們是SELECT、UPDATE、INSERT、DELETE，命令是用來對數據庫裏的數據進行操作

Android零基礎入門第19節：Button使用詳解

用戶界面 ket 派生觸發 eat c99 list 一個 blank Button（按鈕）是Android開發中使用非常頻繁的組件，主要是在UI界面上生成一個按鈕，該按鈕可以供用戶單擊，當用戶單擊按鈕時，按鈕會觸發一個onClick點擊事件。一、Button

CSS3 基礎(1)——選擇器詳解

hover 代碼 -o this site 特征 child ack ble CSS3選擇器詳解一、屬性選擇器　　在CSS3中，追加了三個屬性選擇器分別為：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了通配符的概念。選

Ionic基礎——側邊欄ion-side-menus 以及ion-tap結合側邊欄詳解

相關推薦