Карусель в jQuery мобильный

Question

http://andrebrov.net/dev/carousel/

приведенная выше ссылка показывает пример слайда с использованием карусели.

 var carousel = new $.widgets.Carousel({ 

      uuid : "carousel", 

      args : { "scrollInterval" : 600,"itemWidth":290 
      }, 
       value : [ 
         { "title" : "Tron.Legacy", 
          "image" : "images/1.jpg" 
         }, 
         { "title" : "Yogi Bear", 
          "image" : "images/2.jpg" 
         }, 
         { "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader", 
          "image" : "images/3.jpg" 
         }, 
         { "title" : "The Fighter", 
          "image" : "images/4.jpg" 
         }, 
         { "title" : "Tangled", 
          "image" : "images/5.jpg" 
         } 
       ] 
      });     
    </script >  

В приведенном выше коде для значения собственности мы даем титул & картинку атрибуты. Есть ли какая-то возможность, что мы можем предоставить раздел 10 div> в качестве входных данных вместо изображения, чтобы мы могли добавить текстовое сообщение к изображению или что-то еще. Пожалуйста помоги.

Answer 1

В шаблоне карусельного написать

<div style="height:100%;font-size:1.5em;width:500px">@{div}</div> 

и в значениях карусельных написать

"title" : "Tron.Legacy", 
"image" : "images/1.jpg", 
"div": '<div id="page1">first</div>' 

Я столкнулся с той же проблемой, что и у, но смог добавить divs в карусели. :)

Answer 2

Проект Twitter Bootstrap имеет карусель, который принимает divs и любую разметку, которую вы хотите использовать.

http://twitter.github.com/bootstrap/javascript.html#carousel

Answer 3

Если вы хотите изменить его, я посмотрел в код виджета, и если вы смотрите в этом разделе carousel.js:

this.applyTemplate = function(obj, _t) { 
    for (var i in obj) { 
     var token = "@{" + i + "}"; 
     while (_t.indexOf(token) != -1) { 
      _t = _t.replace(token, obj[i]); 
     } 
    } 
    return _t; 
}; 

уведомление конкретно var token = "@{" + i + "}";

потому что в html-коде есть этот раздел:

<div class="carousel-item"> 
    <div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div> 
    <div id="carousel_item_@{id}" > 
     <div style="float:left;width:100%"><img src="@{image}" /></div>             
    </div> 
</div> 

Если вы заметили, что @ {image} и @ {title} являются атрибутами заголовка и изображения. Поэтому, просто просматривая код, я бы предположил, что ваш текст заменит «@ {something}» в html. Так довольно много вы можете добавить «@ {то}», а затем добавить свойство к объекту происходит:

{"something":"caption to add", 
"title":"blah", 
"img":"blah.jpg"}