<%@ Page %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container">
<div class="buttonContainer">
<telerik:RadButton RenderMode="Lightweight" ID="PreviousDestination" Skin="Default" ToolTip="Click to see previous destination" Height="300px"
runat="server" Enabled="false" ButtonType="LinkButton" AutoPostBack="false" OnClientClicked="PrevClicked">
<Icon PrimaryIconUrl="images/Left.png" PrimaryIconTop="130px" PrimaryIconLeft="-3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px" />
</telerik:RadButton>
</div>
<telerik:RadMultiPage ID="RadMultiPage1" CssClass="multipage qsf-ib" runat="server" SelectedIndex="0">
<telerik:RadPageView ID="RadPageView1" runat="server">
<img src="../../../images/Destinations/Barcelona.png" alt="barcelona" />
<div class="textContainer qsf-ib">
<span>Barcelona
</span>
<p>
Barcelona is the capital of Catalonia and the second largest city in Spain, after Madrid. Barcelona is today one of the world's leading tourist, economic, trade fair/exhibitions and cultural-sports centers, and its influence in commerce, education, entertainment, media, fashion, science, and the arts all contribute to its status as one of the world's major global cities.
</p>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server">
<img src="../../../images/Destinations/London.png" alt="london" />
<div class="textContainer qsf-ib">
<span>London
</span>
<p>
London is the capital city of England and the United Kingdom, and the largest city, urban zone and metropolitan area in the United Kingdom, and the European Union by most measures. London is a leading global city, with strengths in the arts, commerce, education, entertainment, fashion, finance, healthcare, media, professional services, research and development, tourism and transport all contributing to its prominence. London has been described as a world cultural capital. It is the world's most-visited city as measured by international arrivals. In 2012, London became the first city to host the modern Summer Olympic Games three times.
</p>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server">
<img src="../../../images/Destinations/Maui.png" alt="maui" />
<div class="textContainer qsf-ib">
<span>Maui
</span>
<p>
The island of Maui is the second-largest of the Hawaiian Islands and is the 17th largest island in the United States.Thanks to combination of its climate, geology and topography it has diverse and unique landscape. The climate is mild with two-season year.
</p>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server">
<img src="../../../images/Destinations/NY.png" alt="newyork" />
<div class="textContainer qsf-ib">
<span>New York City
</span>
<p>
New York City is the center of the New York Metropolitan Area and the most populous city in the United States. It's located on one of the world's largest natural harbors and consists of five boroughs - Brooklyn, Manhattan, Bronx, Queens and State Island. New York traces its roots way back to 1624 year, when founded as a trading post by colonists of the Dutch Republic.
</p>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView5" runat="server">
<img src="../../../images/Destinations/paris.png" alt="paris" />
<div class="textContainer qsf-ib">
<span>Paris
</span>
<p>
Paris is the capital and most populous city of France. It is situated on the river Seine, in the north of the country, at the heart of the Оle-de-France region. An important settlement for more than two millennia, Paris had become, by the 12th century, one of Europe's foremost centers of learning and the arts and was the largest city in the Western world until the turn of the 18th century. Paris is today one of the world's leading business and cultural centers and its influences in politics, education, entertainment, media, science, and the arts all contribute to its status as one of the world's major global cities.
</p>
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView6" runat="server">
<img src="../../../images/Destinations/San_Francisco.png" alt="francisco" />
<div class="textContainer qsf-ib">
<span>San Francisco
</span>
<p>
San Francisco is the leading financial and cultural center of Northern California and the San Francisco Bay Area. Today, San Francisco is ranked 44th of the top tourist destinations in the world, and is the sixth most visited one in the United States. The city is renowned for its cool summers, fog, steep rolling hills, eclectic mix of architecture, and landmarks including the Golden Gate Bridge, cable cars, the former prison on Alcatraz Island, and its Chinatown district.
</p>
</div>
</telerik:RadPageView>
</telerik:RadMultiPage>
<div class="buttonContainer">
<telerik:RadButton RenderMode="Lightweight" ID="NextDestination" Skin="Default" ToolTip="Click to see next destination" Height="300px"
runat="server" ButtonType="LinkButton" AutoPostBack="false" OnClientClicked="NextClicked">
<Icon PrimaryIconUrl="images/Right.png" PrimaryIconTop="130px" PrimaryIconLeft="-3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px" />
</telerik:RadButton>
</div>
</div>
<script type="text/javascript">
var minIndex = 0,
maxIndex = 5,
globalSelectedIndex,
multiPage,
NextDestination,
PreviousDestination;
function pageLoad() {
multiPage = $find("<%= RadMultiPage1.ClientID %>");
PreviousDestination = $find("<%= PreviousDestination.ClientID %>");
NextDestination = $find("<%= NextDestination.ClientID %>");
//Initialization of the global selected index of the RadMultiPage control
globalSelectedIndex = multiPage.get_selectedIndex();
}
function PrevClicked(sender, args) {
globalSelectedIndex--;
multiPage.set_selectedIndex(globalSelectedIndex);
if (globalSelectedIndex == minIndex) {
sender.set_enabled(false);
sender.removeCssClass('rbHovered');
}
if (!NextDestination.get_enabled()) {
NextDestination.set_enabled(true);
}
}
function NextClicked(sender, args) {
globalSelectedIndex++;
multiPage.set_selectedIndex(globalSelectedIndex);
if (globalSelectedIndex == maxIndex) {
sender.set_enabled(false);
sender.removeCssClass('rbHovered');
}
if (!PreviousDestination.get_enabled()) {
PreviousDestination.set_enabled(true);
}
}
</script>
</form>
</body>
</html>