Nautilus Maceraları

Kişisel laboratuvar

PhoneJs SlideOut Control

Phonejs SlideOut kontrolünü inceliyor olacağız. Buna ek olarak navigasyon işlemi yapacağız.

 HomePage View:
<div data-options="dxView : { name: 'home', title: 'Home' } " >
    <div class="home-view"  data-options="dxContent : { targetPlaceholder: 'content' } " >


        <div data-bind="dxSlideOut:{dataSource: slideOutData, selectedIndex: currentIndex,menuVisible: showMenu,onItemClick: goToPage
    }">
            <div data-options="dxTemplate : { name: 'item' } ">
                <div data-bind="dxButton: {text: '',onClick:$root.changeMenuVisibility,icon: 'menu'}"></div>

            </div>
        </div>


    </div>
</div>
HomePage.js:
PhJsSlideOutControl.home = function (params) {

    var viewModel = {
        currentIndex: ko.observable(0),
        showMenu: ko.observable(false),
        slideOutData: [
        { text: 'Diğer Sayfa 1', icon: 'plus',url:"otherPage" },
        { text: 'Diğer Sayfa 2', icon: 'plus',url:"anotherPage" },
        { text: 'Main', icon: 'plus',url:"home" }
        ],
        changeMenuVisibility: function () {
            viewModel.showMenu(!viewModel.showMenu());
        },
        goToPage: function () {
            PhJsSlideOutControl.app.navigate(viewModel.slideOutData[viewModel.currentIndex()].url);
        }
    }

    return viewModel;
};
Loading