Tab Bar App

Developer
Robert Biggs
Size
7,112 Kb
Views
28,336
  1. Tab Bar App Previews
  2. Tab Bar App HTML Codes
  3. Tab Bar App CSS Codes
  4. Tab Bar App JS Codes

How do I make an tab bar app?

This pen illustrates how to put together a tab bar app using ChocolateChip-UI. It uses the iOS7 theme. For Android or Windows Phone 8 you'd need to use their respective themes. Because this is for iOS, you it requires desktop Safari 6-7 or iOS version 6 or 7 to display correctly.. What is a tab bar app? How do you make a tab bar app? This script and codes were developed by Robert Biggs on 24 August 2022, Wednesday.

Tab Bar App Previews
IQ Test

Tab Bar App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tab Bar App</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.ios-3.0.4.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="current">	<h1>Music</h1>	</nav>
<article id="main" class="current">	<section>	<ul class='list'>	<li class='comp'>	<aside>	<img title='Imagine Dragons' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Imagine_Dragons.png" height="80px">	</aside>	<div>	<h3>Imagine Dragons</h3>	<h4>Radioactive</h4>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>	</div>	<aside>	<span class='show-detail'></span>	</aside>	</li>	<li class='comp'>	<aside>	<img title='Hurry and Harm' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Hurry_and_Harm.png" height="80px">	</aside>	<div>	<h3>The Hurry and the Harm</h3>	<h4>Hurt</h4>	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>	</div>	<aside>	<span class='show-detail'></span>	</aside>	</li>	<li class='comp'>	<aside>	<img title='Permanent' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Permanent.png" height="80px">	</aside>	<div>	<h3>David Cook</h3>	<h4>Permanent</h4>	<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p>	</div>	<aside>	<span class='show-detail'></span>	</aside>	</li>	<li class='comp'>	<aside>	<img title='Kiss' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Kiss.png" height="80px">	</aside>	<div>	<h3>Kiss</h3>	<h4>This Kiss</h4>	<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>	</div>	<aside>	<span class='show-detail'></span>	</aside>	</li>	<li class='comp'>	<aside>	<img title='Willy Moon' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Willy_Moon.png" height="80px">	</aside>	<div>	<h3>Willy Moon</h3>	<h4>Yeah Yeah</h4>	<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non.</p>	</div>	<aside>	<span class='show-detail'></span>	</aside>	</li>	</ul>	</section>	</article>	<nav class='next'>	<h1>Pictures</h1>	</nav>	<article id='article2' class='next'>	<section> <ul class="list"> <li>Picture 1</li> <li>Picture 2</li> <li>Picture 3</li> <li>Picture 4</li> <li>Picture 5</li> </ul> </section>
</article>
<nav class='next'>	<h1>Documents</h1>	</nav>	<article id='article3' class='next'>	<section> <ul class='list'>	<li class='comp'>	<div>	<h3>Receipts</h3>	</div>	<aside>	<h4>Lunch</h4>	<span class='counter'>24</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Receipts</h3>	</div>	<aside>	<h4>Gas</h4>	<span class='counter'>12</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Receipts</h3>	</div>	<aside>	<h4>Groceries</h4>	<span class='counter'>6</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Utilities</h3>	</div>	<aside>	<h4>Electiricity</h4>	<span class='counter'>1</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Rent</h3>	</div>	<aside>	<h4>Receipt</h4>	<span class='counter'>10</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Legal</h3>	</div>	<aside>	<h4>Car</h4>	<span class='counter'>5</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Family</h3>	</div>	<aside>	<h4>Legal</h4>	<span class='counter'>3</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Personal</h3>	</div>	<aside>	<h4>Will</h4>	<span class='counter'>1</span>	<span class='nav'></span>	</aside>	</li>	<li class='comp'>	<div>	<h3>Personal</h3>	</div>	<aside>	<h4>Health Care</h4>	<span class='counter'>16</span>	<span class='nav'></span>	</aside>	</li> </ul>	</section>	</article>	<nav class='next'>	<h1>Recipes</h1>	</nav>	<article id='article4' class='next'>	<section>	<h2> Special Dishes	</h2>	<ul class='list'>	<li>	<h3>	Italian Style Meatloaf	</h3>	<h4>Ingredients</h4>	<ul>	<li>	1 1/2 pounds ground beef	</li>	<li>	2 eggs, beaten	</li>	<li>	3/4 cup dry bread crumbs	</li>	<li>	1/4 cup ketchup	</li>	<li>	1 teaspoon Italian-style seasoning	</li>	<li>	1 teaspoon garlic salt	</li>	<li>	1 (14.5 ounce) can diced tomatoes, drained	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Preheat oven to 350 degrees F (175 degrees C).	</li>	<li>	In a large bowl, mix together ground beef, eggs, bread crumbs and ketchup. Season with Italian-style seasoning, oregano, basil, garlic salt, diced tomatoes and cheese. Press into a 9x5 inch loaf pan, and cover loosely with foil.	</li>	<li>	Bake in the preheated oven approximately 1 hour, or until internal temperature reaches 160 degrees F (70 degrees C).	</li>	</ol>	</li>	<li>	<h3>	Chicken Marsala	</h3>	<h4>Ingredients</h4>	<ul>	<li>	1/4 cup all-purpose flour for coating	</li>	<li>	1/2 teaspoon salt	</li>	<li>	1/4 teaspoon ground black pepper	</li>	<li>	1/2 teaspoon dried oregano	</li>	<li>	4 skinless, boneless chicken breast halves - pounded 1/4 inch thick	</li>	<li>	4 tablespoons butter	</li>	<li>	4 tablespoons olive oil	</li>	<li>	1 cup sliced mushrooms	</li>	<li>	1/2 cup Marsala wine	</li>	<li>	1/4 cup cooking sherry	</li>	</ul>	<p>Directions</p>	<ol>	<li>	In a shallow dish or bowl, mix together the flour, salt, pepper and oregano. Coat chicken pieces in flour mixture.	</li>	<li>	In a large skillet, melt butter in oil over medium heat. Place chicken in the pan, and lightly brown. Turn over chicken pieces, and add mushrooms. Pour in wine and sherry. Cover skillet; simmer chicken 10 minutes, turning once, until no longer pink and juices run clear.	</li>	</ol>	</li>	<li>	<h3>Chicken Breasts with Lime Sauce</h3>	<h4>Ingredients</h4>	<ul>	<li>	4 skinless, boneless chicken breast halves - pounded to 1/4 inch thickness	</li>	<li>	1 egg, beaten	</li>	<li>	2/3 cup dry bread crumbs	</li>	<li>	2 tablespoons olive oil	</li>	<li>	1 lime, juiced	</li>	<li>	6 tablespoons butter	</li>	<li>	1 teaspoon minced fresh chives	</li>	<li>	1/2 teaspoon dried dill weed	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Coat chicken breasts with egg, and dip in bread crumbs. Place on a wire rack, and allow to dry for about 10 minutes.	</li>	<li>	Heat olive oil in a large skillet over medium heat. Place chicken into the skillet, and fry for 3 to 5 minutes on each side. Remove to a platter, and keep warm.	</li>	<li>	Drain grease from the skillet, and squeeze in lime juice. Cook over low heat until it boils. Add butter, and stir until melted. Season with chives and dill. Spoon sauce over chicken, and serve immediately.	</li>	</ol>	</li>	<li>	<h3>Lemon Rosemary Salmon</h3>	<h4>Ingredients</h4>	<ul>	<li>	1 lemon, thinly sliced	</li>	<li>	4 sprigs fresh rosemary	</li>	<li>	2 salmon fillets, bones and skin removed coarse salt to taste	</li>	<li>	1 tablespoon olive oil, or as needed	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Preheat oven to 400 degrees F (200 degrees C).	</li>	<li>	Arrange half the lemon slices in a single layer in a baking dish. Layer with 2 sprigs rosemary, and top with salmon fillets. Sprinkle salmon with salt, layer with remaining rosemary sprigs, and top with remaining lemon slices. Drizzle with olive oil.	</li>	<li>	Bake 20 minutes in the preheated oven, or until fish is easily flaked with a fork.	</li>	</ol>	</li>	<li>	<h3>Strawberry Angel Food Dessert</h3>	<h4>Ingredients</h4>	<ul>	<li>	1 (10 inch) angel food cake	</li>	<li>	2 (8 ounce) packages cream cheese, softened	</li>	<li>	1 cup white sugar	</li>	<li>	1 (8 ounce) container frozen whipped topping, thawed	</li>	<li>	1 quart fresh strawberries, sliced	</li>	<li>	1 (18 ounce) jar strawberry glaze	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Crumble the cake into a 9x13 inch dish.	</li>	<li>	Beat the cream cheese and sugar in a medium bowl until light and fluffy. Fold in whipped topping. Mash the cake down with your hands and spread the cream cheese mixture over the cake.	</li>	<li>	In a bowl, combine strawberries and glaze until strawberries are evenly coated. Spread over cream cheese layer. Chill until serving.	</li>	</ol>	</li>	</ul>	</section>	</article>	<nav class='next'>	<h1>More</h1>	</nav>	<article id='article5' class='next'>	<section>	<h2>Fruits</h2>	<ul class='list'>	<li class='comp' class="nav" data-goto="apples">	<div> <h3>Apples</h3>	</div> <aside> <span class="nav"></span> </aside>	</li>	<li class='comp' class="nav" data-goto="oranges"> <div> <h3>Oranges</h3> </div> <aside> <span class="nav"></span> </aside>	</li>	<li class='comp' class="nav" data-goto="bananas"> <div> <h3>Bananas</h3> </div> <aside> <span class="nav"></span> </aside>	</li>	<li class='comp' class="nav" data-goto="peaches"> <div> <h3>Peaches</h3> </div> <aside> <span class="nav"></span> </aside>	</li>	<li class='comp' class="nav" data-goto="strawberries"> <div> <h3>Strawberries</h3> </div> <aside> <span class="nav"></span> </aside>	</li>	<li class='comp' class="nav" data-goto="cherries"> <div> <h3>Cherries</h3> </div> <aside> <span class="nav"></span> </aside>	</li> </ul>	</section>	</article>	<nav class="next">	<a href="#" class="button back">Back</a>	<h1>Apples</h1>	</nav>	<article class="next" id="apples">	<section>	<h2>Uses</h2>	<ul class="list">	<li>	<h3>Juice</h3>	</li>	<li>	<h3>Pastries</h3>	</li>	<li>	<h3>Cider</h3>	</li>	</ul>	</section>	</article>	<nav class="next">	<a href="#" class="button back">Back</a>	<h1>Oranges</h1>	</nav>	<article class="next" id="oranges">	<section>	<h2>Uses</h2>	<ul class="list">	<li>	<h3>Juice</h3>	</li>	<li>	<h3>Smoothies</h3>	</li>	<li>	<h3>Fruit Salad</h3>	</li>	</ul>	</section>	</article>	<nav class="next">	<a href="#" class="button back">Back</a>	<h1>Bananas</h1>	</nav>	<article class="next" id="bananas">	<section>	<h2>Uses</h2>	<ul class="list">	<li>	<h3>Smoothies</h3>	</li>	<li>	<h3>Pudding</h3>	</li>	<li>	<h3>Fruit Salad</h3>	</li>	</ul>	</section>	</article>	<nav class="next">	<a href="#" class="button back">Back</a>	<h1>Peaches</h1>	</nav>	<article class="next" id="peaches">	<section>	<h2>Uses</h2>	<ul class="list">	<li>	<h3>Cobbler</h3>	</li>	<li>	<h3>Pie</h3>	</li>	<li>	<h3>Smoothies</h3>	</li>	</ul>	</section>	</article>	<nav class="next">	<a href="#" class="button back">Back</a>	<h1>Strawberries</h1>	</nav>	<article class="next" id="strawberries">	<section>	<h2>Uses</h2>	<ul class="list">	<li>	<h3>Cereal</h3>	</li>	<li>	<h3>Smoothies</h3>	</li>	<li>	<h3>Fruit Salad</h3>	</li>	</ul>	</section>	</article>	<nav class="next">	<a href="#" class="button back">Back</a>	<h1>Cherries</h1>	</nav>	<article class="next" id="cherries">	<section>	<h2>Uses</h2>	<ul class="list">	<li>	<h3>Pies</h3>	</li>	<li>	<h3>Pastries</h3>	</li>	<li>	<h3>Fruit Salad</h3>	</li>	</ul>	</section>	</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.0.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tab Bar App - Script Codes CSS Codes

 .tabbar > .button > .icon {	content: '';	display: block;	height: 30px;	width: 30px;	background-color: #929292;	-webkit-mask-position: center center;	-webkit-mask-size: 100%;	-webkit-mask-repeat: no-repeat;	}	.tabbar > .button.selected > .icon,	.tabbar > .button:hover > .icon {	background-color: #007aff;	}	.tabbar > .button.music > .icon {	-webkit-mask-image: url('data:image/svg+xml;utf8,');	}	.tabbar > .button.pictures > .icon {	-webkit-mask-image: url('data:image/svg+xml;utf8,');	}	.tabbar > .button.docs > .icon {	-webkit-mask-image: url('data:image/svg+xml;utf8, ');	}	.tabbar > .button.recipes > .icon {	-webkit-mask-image: url('data:image/svg+xml;utf8,  ');	}

Tab Bar App - Script Codes JS Codes

$(function() { var opts = { tabs : 5, imagePath : "../icons-ios/", icons : ["music", "pictures", "docs", "recipes", "more"], labels : ["Music", "Pictures", "Docs", "Recipes", "More"], selected : 1 }; $.UITabbar(opts);
});
Tab Bar App - Script Codes
Tab Bar App - Script Codes
Home Page Home
Developer Robert Biggs
Username rbiggs
Uploaded August 24, 2022
Rating 3.5
Size 7,112 Kb
Views 28,336
Do you need developer help for Tab Bar App?

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!

Robert Biggs (rbiggs) Script Codes
Name
IOS 7 Selection List
IOS 7 Horizontal Paging
Navigation List
Simple List
TypeScript d.ts Test
Select List for Android
Slide out Menu
Dynamic List
Popover for Android
A Pen by Robert Biggs
Create amazing art & images 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!