Response title
This is preview!
Move this topic
Multiple links in listview item - turn off auto-linking
in jQuery Mobile
•
2 years ago
I have a listview with some links inside an <li>. How do I turn off the auto-link-function (generate a button, onclick on complete <li>) to have an unclickable list entry with clickable links inside? Can I force a read-only-list with links inside?
5
Replies(8)
You can add the links after the list has been created by using jQuery.
Leave a comment on basvdijk's reply
I'm trying to do this too. Any ideas on how to accomplish this?
Leave a comment on epsd.jquery's reply
I have this issue as well. I am using the list layout for a profile and one of the list items in my list (biography) could have p tags (which get a class added to them that turns off wrapping) as well as links (which turns the li into one big link). Is there any way to turn off the auto-formatting of everything inside of the li?
Thanks,
Rob
Leave a comment on rockwild's reply
There doesn't seem to be any native way to do this. For now, I am hacking in my behavior via the following:
1. give the listview li item that i want to override a data-role of nolinks and a class of nolinks
2. Edit the jqm .js listview code (around line 4172).
var a = item.find( "a" );
var itemrolej = item.data( "role" );
//above checks for data-role. then, if it finds the nolinks one, it does not do the full conversion in the listview plugin.
if ( a.length && itemrolej != "nolinks") {
3. Override the clickable. Now all the links display normally, but the first item is the click event for the who li. So, in my pagebeforecreate custom js
$('li.nolinks').click(function() {
//alert('test 12');
return false;
});
$('li.nolinks').click(function() {
window.open(this.href);
return false;
});
Thanks for the response. I was hoping to come up with something that didn't involve customizing the jQuery code, but it looks like it might be my only option at this point.
Why do that create a new listview with different name?? with the changes of course?
Leave a comment on epsd.jquery's reply
Has there really been no native way to do this? I think forcing users to add elements once the jquery has finished loading is a little absurd. Anyone know?
Thanks!
Leave a comment on dannyhertz's reply
Generally, when needs get too far from the JQM conventions, I abandon using the JQM widget. In the case of listviews, this has the additional advantage of significantly speeding-up your app, since the listview is such a slug.
I just wouldn't use a listview.
An easy alternative in this case, though, is to not use an <a> tag. Just use a plain <div> or <span> give it a class, and write a bit of Javascript code to register an event callback. This also allows you to speed-up the reaction time on touchscreen devices by using vclick instead of click.
This has the disadvantage of not being semantic, and breaking accessibility.
I just wouldn't use a listview.
An easy alternative in this case, though, is to not use an <a> tag. Just use a plain <div> or <span> give it a class, and write a bit of Javascript code to register an event callback. This also allows you to speed-up the reaction time on touchscreen devices by using vclick instead of click.
This has the disadvantage of not being semantic, and breaking accessibility.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to tententen's question
Statistics
- 8 Replies
- 1129 Views
- 7 Followers
