Как правильно использовать полосу прокрутки в приложении Caph Tizen Smart TV?

Я пытаюсь добавить полосу прокрутки к нескольким компонентам в приложении Tizen TV, созданном с помощью Caph. Я понятия не имею, как выглядит полоса прокрутки в Tizen или как ее правильно добавить.

Вот пример из справочника по API. Документы мало что говорят.

var Scrollbar = caph.ui.base.component.Scrollbar;

 var horizontal = new Scrollbar({
   direction: Scrollbar.HORIZONTAL,
   currentThumbPosition: 300,
   maxThumbPosition: 600,
   sizeValue: 600,
   position: [50, 50, 0],
   on: {
       change: function(message) {
           console.log(message.detail);
       }
   }
});

Нужен ли мне компонент элемента большого пальца или что-нибудь может быть назначено в качестве большого пальца? Как полоса прокрутки узнает, добавляю ли я «большой палец» в детстве? Или добавить полосу прокрутки как дочернюю для другого компонента? Я пробовал почти все, что мог придумать, но безрезультатно.

Спасибо за любую помощь.


person NewbieOnRails    schedule 27.07.2015    source источник


Ответы (1)


Вы можете использовать приведенный ниже код и не забудьте включить следующие файлы css и js перед этим кодом.

  • капх-2.1.1-150302.min.css
  • капх-2.1.1-150302.мин.js
  • caph.theme.stripe-2.1.1-150302.min.css
  • caph.theme.stripe-2.1.1-150302.min.js

Вышеуказанные файлы можно найти в Полный пакет Caph, который можно загрузить здесь.

<!DOCTYPE html>
<html>
<head>
    <title>Caph Scrollbar</title>
    <meta charset="UTF-8"/>
<!--Kindly keep an eye on how to include below css and js files.-->
    <link rel="stylesheet" type="text/stylesheet" href="$CAPH/2.1.1/caph-2.1.1-150302.min.css"/>
    <script type="text/javascript" src="$CAPH/2.1.1/caph-2.1.1-150302.min.js"></script>
    <link rel="stylesheet" type="text/stylesheet" href="$CAPH/2.1.1/caph.theme.stripe-2.1.1-150302.min.css"/>
    <script type="text/javascript" src="$CAPH/2.1.1/caph.theme.stripe-2.1.1-150302.min.js"></script>
</head>
<body>
    <script>
        var Scrollbar = caph.require('stripe.ui.component.Scrollbar');

        caph.app.addScene('scrollScene', $class({
            $extends : caph.require('ui.base.Scene'),

            oncreate: function() {
                this.addChild(new Scrollbar({
                    direction: caph.ui.base.component.Scrollbar.HORIZONTAL,
                    currentThumbPosition: 150,
                    maxThumbPosition: 400,
                    sizeValue: 400,
                    step: 10,
                    position: [50, 30]
                }));

                this.addChild(new Scrollbar({
                    sizeValue: 300,
                    currentThumbPosition: 150,
                    maxThumbPosition: 300,
                    position: [50, 110]
                }));
            }
        })).run();
    </script>
</body>
</html>
person Shreeram K    schedule 31.07.2015
comment
Да, я сделал это. Наконец, он показывает полосу прокрутки, но я не могу добавить к ней какие-либо элементы. Это на самом деле часть, это немного неясно. - person NewbieOnRails; 01.08.2015
comment
Что вы имеете в виду, добавляя в него элементы? Можешь подробно рассказать. - person Shreeram K; 02.08.2015
comment
Допустим, у меня есть список предметов, помещенных в коробку посередине экрана. И я хочу добавить к нему полосу прокрутки. Список не обязательно будет списком Caph, просто 20-30 элементов, помещенных в небольшой контейнер. - person NewbieOnRails; 02.08.2015
comment
Ok. Вы хотите сказать, что у вас есть некоторый контент/список, для которого вам нужна полоса прокрутки. Верно? - person Shreeram K; 02.08.2015
comment
Да. Например, контейнер размером 400x400 имеет более длинный список, и я хочу прокручивать элементы списка внутри него. - person NewbieOnRails; 02.08.2015
comment
Насколько мне известно, полоса прокрутки CAPH может использоваться только для основного представления, а не для любого подпредставления, которое находится внутри основного представления. - person Shreeram K; 02.08.2015
comment
Ха, я так и подумал сначала. Итак, как обойти это? - person NewbieOnRails; 02.08.2015
comment
Давайте продолжим обсуждение в чате. - person Shreeram K; 02.08.2015