Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Instant Kendo UI Mobile

You're reading from   Instant Kendo UI Mobile Practical recipes to learn the Kendo UI Mobile library and its various components for building mobile applications effectively

Arrow left icon
Product type Paperback
Published in Jul 2013
Publisher Packt
ISBN-13 9781849699112
Length 60 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Sagar Ganatra Sagar Ganatra
Author Profile Icon Sagar Ganatra
Sagar Ganatra
Arrow right icon
View More author details
Toc

Using the ScrollView widget to navigate through the application (Intermediate)


A ScrollView widget is used in Picture-Gallery-like applications, where you would like to scroll to the next page to see the next picture in the gallery. The widget allows you to move to the next page or to the previous page by swiping from right to left or left to right.

How to do it...

  1. A ScrollView widget is created by setting the value scrollview to the data-role attribute on the target element.

  2. Each widget inside the ScrollView widget is defined as a page widget by setting the data-role attribute to page.

Let's use the ScrollView widget to create a photo gallery application. This application will show one image at a time, and on swiping from right to left or vice versa, the image defined in the next or the previous page will be shown.

<div data-role="view"
  id="scrollviewContainer">

  <div data-role="scrollview">

    <div data-role="page">
      <img src="images/image1.jpg"/>
    </div><div data-role="page">
      <img src="images/image2.jpg"/>
    </div><div data-role="page">
      <img src="images/image3.jpg"/>
    </div><div data-role="page">
      <img src="images/image4.jpg"/>
    </div><div data-role="page">
      <img src="images/image5.jpg"/>
    </div><div data-role="page">
      <img src="images/image6.jpg"/>
    </div><div data-role="page">
      <img src="images/image7.jpg"/>
    </div>

  </div>

</div>

The previous code snippet defines a view that contains the ScrollView widget. The ScrollView widget contains seven page widgets (data-role='page'), each of which has an image tag specified in it.

Note

Notice that the markup contains no whitespaces between the page widgets. This is intentional, because when an extra space is specified, an additional page is added to the view.

How it works...

When the page loads, it initializes the ScrollView widget and displays the first image in the set. It also displays seven buttons corresponding to the seven images on the screen. By default, the first button in the set is selected since the first page is shown when the application is viewed.

On swiping from right to left, the next page containing the image is shown. This will also update the selected button in the ScrollView widget, as shown in the following screenshot:

There's more...

You can also specify a JavaScript callback function when the page widget has changed. To do that, define the data-change attribute on the ScrollView widget.

<div data-role="scrollview"
  data-change="pageChange">
  ......
</div>

The JavaScript callback function would be as follows:

function pageChange() {
  console.log('New Page');
}

The pageChange function is executed when you swipe on the device to see the next page.

Here we will see how an application created with Kendo UI Mobile is rendered on different platforms, namely iOS, Android, and Blackberry. Also, how the framework handles different orientations, portrait and landscape.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime