Search code examples
androidjqueryiphonejquery-mobilecordova

jQuery Mobile issu on data-rel="back". And how to highlight the coresponding list item in left panel of split view when returns back to previous page

I have implemented an application using jQuery on PhoneGap.

In that I'm using a split view with two panels left& right.

in left panel when I select a list item for page 1 it shows the page1 in Right panel.

enter image description here

in page 1 I have a button "page1 info==>" that moves page1 to the detailed information of page1 in next page.

enter image description here

in detailed page I have a back "xPage1" button which returns to the previous page i.e. page1.

in back button implementation I have a condition that I couldn't used id of page to return to page 1

as href="#page1"

<a href="#page1" id="" data-role="button" data-icon="delete" class="ui-btn-left" data-theme="c">Page1</a>

So I used data-rel="back"

<a href="#" data-rel="back" data-role="button" data-icon="delete" class="ui-btn-left"  data-theme="c">Page1</a>

yes it return to the previous page fine.

enter image description here

but when we returns the selected button on page1 its stay highlighted so longer. it is due to data-rel="back" .

I need two requirements here

  1. Button s'd not highlighted so longer as shown above.
  2. The highlight active focus on selected item on left panel but not on the button of right panel as shown below.

enter image description here

Solution

  • Instead of giving data-rel="back", just give in the href link of Go to Pg-1 in xPage1. And make the Button highlight in default.