Ionic Alphabetical List

Developer
Dzulfikar Adi Putra
Size
3,136 Kb
Views
66,792
  1. Ionic Alphabetical List Previews
  2. Ionic Alphabetical List HTML Codes
  3. Ionic Alphabetical List CSS Codes
  4. Ionic Alphabetical List JS Codes

How do I make an ionic alphabetical list?

[WIP] Ionic Alphabetical List Test. What is a ionic alphabetical list? How do you make a ionic alphabetical list? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.

Ionic Alphabetical List Previews
IQ Test

Ionic Alphabetical List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ionic Alphabetical List</title> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/1.1.1/css/ionic.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
</head>
<body ng-app="starter" no-scroll> <ion-pane ng-controller="HomeController"> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ul id="alphabets"> <li ng-repeat="letter in alphabets"><a ng-click="goTo('{{letter}}')" href="#{{letter}}">{{ letter }}</a></li> </ul> <ion-content class="has-header content" delegate-handle="content"> <ion-list> <ion-item ng-repeat="person in persons"> <span ng-if="person.index" id="{{person.index}}">{{ person.name }} - {{person.age}} - {{person.index}}</span> <span ng-if="!person.index">{{ person.name }} - {{person.age}}</span> </ion-item> </ion-list> </ion-content> </ion-pane>
</body> <script src='https://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ionic Alphabetical List - Script Codes CSS Codes

#alphabets{ position: fixed; top:0; right:0; height:100%; z-index:11; width: 50px; background: #eaeaea; padding: 10px 20px; line-height:24px;
}
/* ------------------------------- */
.ion_alpha_list_outer .list{	padding-right: 15px;
}
.ion_alpha_list_outer .item{	border-right: none;
}
.ion_alpha_sidebar{	position: fixed;	right: 0;	top: 0;	height: 100%;
}
.ion_alpha_sidebar li{	line-height: 1.1;
}

Ionic Alphabetical List - Script Codes JS Codes

// Ionic Starter App
// credit : http://www.saintsatplay.com/blog/2015/02/scrolling-to-a-page-anchor-in-ionic-framework#.Vmf-RbiGRBc
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.controller('HomeController', function($scope, $location, $anchorScroll, $ionicScrollDelegate){ $scope.alphabets = []; $scope.persons = []; for(var i=65; i<=90; i++){ $scope.alphabets.push(String.fromCharCode(i)); } for(var i=0; i<100; i++){ $scope.persons.push({ name: chance.name(), age: chance.age() }); } $scope.persons = _.sortBy($scope.persons, 'name'); var temp = null; var oldTemp = null; $scope.persons.forEach(function(val, key){ temp = val.name.substring(0,1); if(oldTemp != temp){ oldTemp = temp; val.index = temp; } }); $scope.goTo = function(letter){ window.location.hash = letter; //$ionicScrollDelegate.anchorScroll(true); var handle = $ionicScrollDelegate.$getByHandle('content'); handle.anchorScroll(); window.location.hash = 'a'; }
})
.run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs). // The reason we default this to hidden is that native apps don't usually show an accessory bar, at // least on iOS. It's a dead giveaway that an app is using a Web View. However, it's sometimes // useful especially with forms, though we would prefer giving the user a little more room // to interact with the app. if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { // Set the statusbar to use the default style, tweak this to // remove the status bar on iOS or change it to use white instead of dark colors. StatusBar.styleDefault(); } });
});
Ionic Alphabetical List - Script Codes
Ionic Alphabetical List - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded September 06, 2022
Rating 3
Size 3,136 Kb
Views 66,792
Do you need developer help for Ionic Alphabetical List?

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!

Dzulfikar Adi Putra (superpikar) Script Codes
Name
D3JS Simple JSON SVG barchart vertical
Ionic - Wordpress REST API starter
JS Tree Example JSON Data
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON
Bulma breadcrumbs
D3JS Simple JSON SVG barchart vertical with Axis
SVG Animation Follow Path - d3js
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object
Play and Pause Bootstrap 3 Button
Ionic tabs in the middle of the screen
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!