溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹HTML中實現通訊錄界面切換的示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用ionic(選項卡欄tab) icon(圖標) ionic上拉菜單(ActionSheet) 實現通訊錄界面切換操作</title>
<link rel="stylesheet" href="../ionic/css/ionic.css" rel="external nofollow" >
<script src="../ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('myApp', ['ionic'])
.controller('RootCtrl', function($scope) {
$scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
console.log('Controller changed', oldController, oldIndex, newController, newIndex);
console.log(arguments);
};
})
.controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
$scope.items = [];
$ionicModal.fromTemplateUrl('newTask.html', function(modal) {
$scope.settingsModal = modal;
});
//ionic 上拉菜單(ActionSheet)
var removeItem = function(item, button) {
$ionicActionSheet.show({
buttons: [],
destructiveText: 'Delete Task',
cancelText: 'Cancel',
cancel: function() {
return true;
},
destructiveButtonClicked: function() {
$scope.items.splice($scope.items.indexOf(item), 1);
return true;
}
});
};
var completeItem = function(item, button) {
item.isCompleted = true;
};
$scope.onReorder = function(el, start, end) {
ionic.Utils.arrayMove($scope.items, start, end);
};
$scope.onRefresh = function() {
console.log('ON REFRESH');
$timeout(function() {
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
}
$scope.removeItem = function(item) {
removeItem(item);
};
$scope.newTask = function() {
$scope.settingsModal.show();
};
// Create the items
$scope.user = [
{
name:"Ben Sparrow",
words:"You on your way?"
},
{
name:"Max Lynx",
words:"Hey,it's me."
},
{
name:"Adam Bradleyson",
words:"I should buy a boat."
},
{
name:"Perry Governor",
words:"Look at my mukluks!"
},
{
name:"Mike Harrinqton",
words:"This is wicked good ice cream."
},
];
})
</script>
</head>
<body ng-app="myApp" ng-controller="RootCtrl">
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="Home"
icon-on="ion-ios-filing"
icon-off="ion-ios-filing-outline"
ng-controller="HomeCtrl">
<ion-header-bar class="bar-stable">
<h2 class="title">Chats</h2>
</ion-header-bar>
<ion-content has-tabs="true" on-refresh="onRefresh()">
<ion-refresher></ion-refresher>
<ion-list scroll="false" on-refresh="onRefresh()"
s-editing="isEditingItems"
animation="fade-out"
delete-icon="icon ion-minus-circled">
<ion-item ng-repeat="item in user"
item="item"
buttons="item.buttons"
can-delete="true"
can-swipe="true"
on-delete="deleteItem(item)"
ng-class="{completed: item.isCompleted}">
<span>
<img src="../img/y.jpg" height="56" width="56"/>
<p ><b>{{item.name}}</b></p>
<p >{{item.words}}</p>
<i class="ion-chevron-right" "></i>
</span>
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
<header class="bar bar-header bar-stable">
<h2 class="title">Deadlines</h2>
</header>
<ion-content has-header="true">
<center>
<img src="../img/q.jpg" height="462" width="427"/>
</center>
</ion-content>
</ion-tab>
<ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
<header class="bar bar-header bar-stable">
<h2 class="title">Settings</h2>
</header>
<ion-content has-header="true">
<center>
<img src="../img/y.jpg" height="462" width="427"/>
</center>
</ion-content>
</ion-tab>
</ion-tabs>
</body>
</html>html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
以上是“HTML中實現通訊錄界面切換的示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
