Hi today let us learn about some interesting of about how to create address book using bootstrap and jquery. We have already learn many tutorial about bootstrap like Gmail style login, Responsive Date range filtering, Bootstrap pretty cool and awesome modal etc. This is really different of creating a address book with bootstrap framework and jQuery slider navigation. Bootstrap is the powerful free open source framework and one of the most widely used for creating websites and web applications. jQuery responsive slide navigation is smooth and smart navigation when user scrolls on one pages websites. Here we used this navigation to point out the particular alphabet to get the list of name that starting with pointing alphabet.

HTML to create UI of address book

   
   

      

         
Address Book
      
      

         

            

               

                  

                     

                        

                           A
                           

                              
Adam
                              
Alex
                              
Ali
                              
Apple
                              
Arthur
                              
Ashley
                           
                        
                        

                           B
                           

                              
Barry
                              
Becky
                              
Biff
                              
Billy
                              
Bozarking
                              
Bryan
                           
                        
                     
                  
               
            
            

               

                  

                     
John Doe
                  
                  

                     

                        

                           
                        
                        

                           

                              

                                 

                                    
 Name
                                    
John Doe
                                 
                                 

                                    
 Address
                                    
795 Folsom Ave, Suite 600
                                       San Francisco, CA 94107
                                       P: (123) 456-7890 
                                    
                                 
                                 

                                    
 Phone
                                    
+001 8753-3648-002
                                 
                                 

                                    
 Email
                                    
sampleemail@gmail.com
                                 
                              
                           
                        
                     
                  
               
            
         
      
   
   

Script to handle slider navigation

jQuery(document).ready(function() {	
		handleSliderNav();	
		
		});
			var handleSliderNav = function () {
		$('#address-book').sliderNav();
		
		$('#address-book .slider-content ul li ul li a').click(function(e){
			e.preventDefault();
			var contact_card = $('#contact-card');
			//Get the name clicked on
			var name = $(this).text();
			//Set the name
			$('#contact-card .panel-title').html(name);
			$('#contact-card #card-name').html(name);
			//Randomize the image
			var img_id = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
			//Set the image
			$('#contact-card .headshot img').attr('src', 'img/addressbook/'+img_id+'.jpg');
			contact_card.removeClass('animated fadeInUp').addClass('animated fadeInUp');
			var wait = window.setTimeout( function(){
				contact_card.removeClass('animated fadeInUp')},
				1300
			);
		});
	}

By Thirumani Raj posted on - 31st May 2016

Live Demo Download Script