<div id="pageNavigator">
<input type="button" id="firstPageButton" value="<<" />
<input type="button" id="previousPageButton" value="<" />
<span id="pageIndexLabel"></span>
<span id="pageCountLabel"></span>
<input type="button" id="nextPageButton" value=">" />
<input type="button" id="lastPageButton" value=">>" />
</div>
I need to use image buttons for navigation and that works fine, but my question is how can I make certain image to change the src (to a disabled image) when it reaches either the very first page or very last page!
Please advice!
Hi,supposed you've declared an image like:
<img id="myImage" src="http://pics.10026.com/?src=enabledImage.gif" alt="" />
then you can do it using pure Javascript:
if(firstPageReached || lastPageReached) {
document.getElementById('myImage').src = 'disabledImage.gif';
}
or Atlas:
if(firstPageReached || lastPageReached) {var myImage = new Sys.UI.Control($('myImage'));
myImage.initialize();
myImage.set_imageURL('disabledImage.gif');
}
all understood, but how can I attach the event that it has reached the end of page or last of page?
Hi,
this really depends on how you have designed your PageNavigator (are you using server controls? Did you implement a client control?). If you need some info about how to raise events in the Atlas framework, please checkthis article.
below you will find my xml script. Please help me if you can!
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<listView id="CustomersResults" itemTemplateParentElementId="CustomersResults_itemTemplateParent" >
<layoutTemplate>
<template layoutElement="CustomersResults_layoutTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="CustomersResults_itemTemplate">
<label id="CustomersResults_Name">
<bindings>
<binding dataPath="Name" property="text" />
</bindings>
</label>
<label id="CustomersResults_CustomerId">
<bindings>
<binding dataPath="CustomerId" property="text" />
</bindings>
</label>
<label id="CustomersResults_Description">
<bindings>
<binding dataPath="Description" property="text" />
</bindings>
</label>
<image id="CustomersResultsImageThumbPath">
<bindings>
<binding dataPath="CustomerID" property="imageURL" transform="DoAdditionalImageHandling" />
<binding dataPath="CustomerName" property="alternateText" />
</bindings>
<behaviors>
<hoverBehavior hover="ImageHandler" />
</behaviors>
</image>
</template>
</itemTemplate>
<bindings>
<binding dataContext="CustomersResultsview" dataPath="filteredData" property="data" />
</bindings>
</listView>
<dataView id="CustomersResultsview" pageSize="6">
</dataView>
<dataNavigator id="CustomersResultspageNavigator" dataView="CustomersResultsview"/>
<button id="CustomersResultspreviousPageButton" parent="CustomersResultspageNavigator" command="previousPage">
<bindings>
<binding property="enabled" dataPath="hasPreviousPage"/>
</bindings>
</button>
<label id="CustomersResultspageIndexLabel" parent="CustomersResultspageNavigator">
<bindings>
<binding property="text" dataPath="pageIndex" transform="Add"/>
</bindings>
</label>
<label id="CustomersResultspageCountLabel" parent="CustomersResultspageNavigator">
<bindings>
<binding property="text" dataPath="pageCount"/>
</bindings>
</label>
<button id="CustomersResultsnextPageButton" parent="CustomersResultspageNavigator" command="nextPAGE">
<bindings>
<binding property="enabled" dataPath="hasNextPage"/>
</bindings>
</button>
<button id="CustomersResultsfirstPageButton" parent="CustomersResultspageNavigator" command="FIRSTPage">
</button>
<button id="CustomersResultslastPageButton" parent="CustomersResultspageNavigator" command="lastpage">
</button>
</components>
<references>
</references>
</page>
</script>
