Can anyone give me the low-down on the prescribed protocol to manipulate the html (add attributes like 'data-role="listview"')? Should I just be editing the .tpl files, add it with javascript, or using a hook in the template.php file?

In other words, I want to be able to use jquery mobile to theme more then just the menus, header, and footer.

Thanks for any thoughts on the subject. I'm extremely excited about this module and all the work that's gone into it.

Scott

Comments

skhot’s picture

skhot CreditAttribution: skhot commented

Well so far I've tried creating a custom views-view-list.tpl.php file and added the 'data-role="listview"' like this:
<<?php print $options['type']; ?> data-role="listview" data-filter="true" >

No dice.

I also tried using this hook:

function mobile_jquery_preprocess_item_list

No dice.

Anyone?

skhot’s picture

skhot CreditAttribution: skhot commented

I at least get a response from the output with the jQuery method, though the results do not match what I was expecting (or how jqm docs work. I put this in sites/all/themes/mobile_jquery/scripts/script.js. It seems to be getting out of control. I would still appreciate if someone could point me in the right direction.

var $ls = jQuery.noConflict();

$ls(document).ready(function() {

$ls('div.item-list ul').attr('data-theme', 'a');
$ls('div.item-list ul').attr('data-split-icon', 'arrow-r');
$ls('div.item-list ul').attr('data-split-theme', 'a');
$ls('div.item-list ul').attr('data-count-theme', 'a');
$ls('div.item-list ul').attr('data-insert', 'true');
$ls('div.item-list ul').attr('data-role', 'listview');
$ls('div.item-list ul').attr('data-filter', 'true');
$ls('div.item-list ul li a').addClass('ui-link-inherit');

});
jasonsavino’s picture

jasonsavino CreditAttribution: jasonsavino commented
Assigned: Unassigned » jasonsavino
Status: Active » Needs review

I was able to make a view of articles and have them display in jquerymobile listview.
To do this I did the following:
1. Create a view of article type content using full nodes but in teaser display mode
2. modified the views-view-list.tpl.php

<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <<?php print $options['type']; ?> data-role="listview">
    <?php foreach ($rows as $id => $row): ?>
      <li class="<?php print $classes_array[$id]; ?>"><?php print $row; ?></li>
    <?php endforeach; ?>
  </<?php print $options['type']; ?>>
<?php print $wrapper_suffix; ?>

3. changed the teaser display mode for the article content type to show only the body (hiding everything else)
4. duplicated the node.tpl.php file and named it node--article.tpl.php
5. modified the node--article.tpl.php file by changing the line 81 from:

<?php if (module_exists('jquerymobile_ui') && variable_get('jquerymobile_ui_front', TRUE) && $is_front): ?>

TO:

<?php if ((module_exists('jquerymobile_ui') && variable_get('jquerymobile_ui_front', TRUE) && $is_front) || !$page): ?>

6. Cleared cache

From there I was able to display the new view page and click through to the nodes without issue.

If this works for you please let me know so I can close the ticket.

Cheers,
Jason

skhot’s picture

skhot CreditAttribution: skhot commented

Thanks! This worked great. I'm theming all over the place. Also, I appreciate the hide contextual menus/comments tip in 3-5.

jasonsavino’s picture

jasonsavino CreditAttribution: jasonsavino commented
Status: Needs review » Closed (fixed)
ideafarm’s picture

ideafarm CreditAttribution: ideafarm commented

Check out http://drupal.org/project/views_jqm