Added key/value pair display to listview.

[twss]

Displays information in a similar format to iOS Preference Settings screens.

List style is changed with data-list-style="keyvalue" being set against the ul tag.

The default is to "ellipsis" overflowing text. This can be overridden on a per item basis with data-wrap="true" against the li tag.

See example below.

<ul data-role="listview" data-inset="true" data-list-style="keyvalue">
    <li>
        <div>
            <div>Description of Changes</div>
            <div>Introdution of Key/Value (iOS-style) table cell view.</div>
        </div>
    </li>
    <li data-wrap="true">
        <div>
            <div>Description of Changes</div>
            <div>Introdution of Key/Value (iOS-style) table cell view.</div>
        </div>
    </li>
    <li>
        <div>
            <div>Key</div>
            <div>Value</div>
        </div>
    </li>
</ul>

[toddparker]

I like this idea, but I have some feedback on the markup. To date, we haven't used a data- attribute for the type. Instead, we've just used markup conventions and I'd rather keep going in that direction. Instead of ul with 3 divs, maybe this should be a definition list where the label is the DT and the value is the DD? That seems more semantic and much cleaner. Just an idea.

[twss]

dl, dt, dd was my first thought too. But to make it work, as far as I could get it to work (with dt and dd being max width 49% and allow for possible wrapping rather than ellipsis) I found I needed to rewrite the markup so that it would end up as I've specified above. Would that be acceptable still. The first div is needed for the "clear: both", unless I'm missing something?

Any tips would be greatly appreciated and I'll gladly rewrite it as dl, dt, dd. to be honest, that's how I wanted it anyway.

[twss]

What would you recommend for the "data-wrap", or is that acceptable as is?

[toddparker]

Could you post a live demo somewhere? jsBin or JSFiddle would be ideal.

[twss]

Todd,

I'm working on it and will post to one of these.

If I use the markup as follows:

<dl data-role="listview">
    <dt id="rec-32">Key</dt>
    <dd>Value</dd>
</dl>

I would need to re-write the markup as:

<ul data-role="listview">
    <li id="rec-32">
        <div>
            <div>Key</div>
            <div>Value</div>
        </div>
    </li>
</ul>

This will make adding/removing elements more complicated as any DOM manipulation would need to be intercepted, wouldn't it?

I have noticed also that some CSS is missing from my commit, should I close this pull request off and submit a new one later?

[twss]

Todd,

Here's my proposed solution, JS/CSS are inline here. What are your thoughts?

http://jsbin.com/ocoyon/27/

I will submit a new pull request once this everything is completed, as I've deleted the old branch.

[toddparker]

I like the way this looks, nice work. I wonder if this would be more consistent, markup-wise, if this was just a data-role="listview" on a DL instead of introducing a new data-role="keyvalueview". The styles should work on both inset and normal lists.

[twss]

Snap! Now I've discovered the .not() function I think I'll get on do that. Expect an update shortly.

[twss]

What about now?

http://jsbin.com/ocoyon/29/

[twss]

If I want to add a dt/dd pair to this, have any suggestions on how I could handle this, as obviously, the markup is no longer dt/dd anymore.

This was my main concern with it really, as I don't want the end users of the key/value list to have to hack at it. If they start off with dt/dd then they should carry on using dt/dd. Would I need to add a wrapper function to add new elements? What are your thoughts?

[toddparker]

We've been discussing this and after some deliberation, it seems much simpler to just use the standard UL structure and have a markup convention inside each li - say, a H3 for the label and a

for the value. You can then just add a line or two of css to style and float these as needed, no need for new markup and scripts. The issue with DLs is that these need to be stuffed into our LI structure for styling and corners which wipes out any advantage.

[scottjehl]

This is a really crafty piece of code, but I agree with ToddParker here.

Starting with a DL and changing it to something else, just to fit within the LI structure of listviews, isn't really valuable to the user, and seems like a long way around the problem. You might as well mark up your key/value pairs with headings and paragraphs, or something similar, from the start. With that in place, I'm not sure whether this pattern should be part of the listview plugin itself, or just an example we could reference for how to customize the inner elements in a listview.

Thanks for your time though! I'll add this to the feature requests page for post -1.0 consideration.

[scottjehl]

added https://github.com/jquery/jquery-mobile/wiki/Feature-Requests