Facebook tabs with AngularJS

Developer
Charlie Walter
Size
3,539 Kb
Views
6,072
  1. Facebook tabs with AngularJS Previews
  2. Facebook tabs with AngularJS HTML Codes
  3. Facebook tabs with AngularJS CSS Codes
  4. Facebook tabs with AngularJS JS Codes

How do I make an facebook tabs with angularjs?

Facebook tab replication with AngularJS. What is a facebook tabs with angularjs? How do you make a facebook tabs with angularjs? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.

Facebook tabs with AngularJS Previews
IQ Test

Facebook tabs with AngularJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook tabs with AngularJS</title> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app>
<div class="fb-mob" ng-controller="TabController"> <div class="bar"> <button class="tab-btn friend-requests" ng-click="tab = 'friend-requests'"></button> <button class="tab-btn messages" ng-click="tab = 'messages'"></button> <button class="tab-btn notifications" ng-click="tab = 'notifications'"></button> </div> <h1>tabs with <img src="https://lh6.googleusercontent.com/-DtPuPzooNEY/AAAAAAAAAAI/AAAAAAAAAC4/6Y1jxzshd4g/photo.jpg?sz=48"> AngularJS</h1> <div ng-show="tab == 'friend-requests'" class="tab friend-requests"> <ul class="list-unstyled"> <li> <h4>Brienne of Tarth</h4> <button class="btn accept">Accept</button> <button class="btn decline">Decline</button> </li> <li> <h4>Shae</h4> <button class="btn accept">Accept</button> <button class="btn decline">Decline</button> </li> <li> <h4>Robb Stark</h4> <button class="btn accept">Accept</button> <button class="btn decline">Decline</button> </li> </ul> </div> <div ng-show="tab == 'messages'" class="tab messages"> <ul class="list-unstyled"> <li> <h4>Daenerys 'Khaleesi' Targaryen</h4> <span>My Dragons...</span> <small>about an hour ago</small> </li> <li> <h4>Tyrion Lannister</h4> <span>I'm getting short with you...</span> <small>1 Apr 09:32</small> </li> <li> <h4>Jon Snow</h4> <span>It's cold on this side of the wall...</span> <small>23 Mar 15:26</small> </li> </ul> </div> <div ng-show="tab == 'notifications'" class="tab notifications"> <ul class="list-unstyled"> <li> <h4>Jon Snow<small> likes your post</small></h4> </li> <li> <h4>Jamie Lannister<small> poked you (haha)</small></h4> </li> </ul> </div>
</div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Facebook tabs with AngularJS - Script Codes CSS Codes

.fb-mob { width: 100%;
}
h1 { position: absolute; z-index: -1; bottom: 0; left: 20px; font-size: 16px; opacity: 0.25;
}
.bar { text-align: center; padding: 5px 0; background: #6c83b6; /* Old browsers */ background: -moz-linear-gradient(top, #6c83b6 0%, #2f4c89 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6c83b6), color-stop(100%, #2f4c89)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #6c83b6 0%, #2f4c89 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #6c83b6 0%, #2f4c89 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #6c83b6 0%, #2f4c89 100%); /* IE10+ */ background: linear-gradient(to bottom, #6c83b6 0%, #2f4c89 100%); /* W3C */ margin-bottom: 20px;
}
.tab-btn { height: 32px; width: 32px; background-color: transparent; background-size: 100% auto; background-position: center; background-repeat: no-repeat; border: 0;
}
.tab-btn.friend-requests { background-image: url("http://cjonasw.files.wordpress.com/2014/04/friend-requests.png");
}
.tab-btn.messages { background-image: url("http://cjonasw.files.wordpress.com/2014/04/messages.png");
}
.tab-btn.notifications { background-image: url("http://cjonasw.files.wordpress.com/2014/04/notifications.png");
}
.tab { width: 320px; margin: 0 auto; background: rgba(255,255,255,0.75);
}
.btn { border-radius: 0 !important;
}
.accept { background-color: #2f4c89; color: #fff;
}
.accept:hover { color: #aaa;
}
.decline { color: #808080;
}

Facebook tabs with AngularJS - Script Codes JS Codes

function TabController($scope){ $scope.tab='friend-requests';
}
Facebook tabs with AngularJS - Script Codes
Facebook tabs with AngularJS - Script Codes
Home Page Home
Developer Charlie Walter
Username cjonasw
Uploaded January 11, 2023
Rating 3
Size 3,539 Kb
Views 6,072
Do you need developer help for Facebook tabs with AngularJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Walter (cjonasw) Script Codes
Name
Gamepad API - DOM Element Demo
Growing Root - Scroll control - CANVAS
Collision with walls
MMORPG UI
Three.js half circle health bar
Spotify Discover Panel
Slanty goodness
JQuery countdown
Login form
Ninja Flash CC Animation Canvas
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!