use kendo framework FX in mobile

2 posts, 0 answers
  1. ai
    ai avatar
    6 posts
    Member since:
    Jun 2013

    Posted 03 Jul 2013 Link to this post

    hi ,
           I  use  kendo framework FX flip and pageTurn effect in kendoui mobile  ,  make transiton between two views,
    <div data-role="view" id="loginpage" data-layout="loginLayout">
            <div id="testpanel"></div>
            <center><a data-click="gotoListPage1" data-role="button" id="appBtn">1:flip</a></center>
    </div>
    <div data-role="layout" data-id="loginLayout">
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title">test</span>
            </div>
        </div>
    </div>
     
    <div data-role="view" id="listpage" data-layout="listLayout" data-show="testInit">
        <div class="wrapper">
            <div class="headwrapper">
                <div class="appheader">test</div>
            </div>
             
            <div id="testcontent">
                    <div id="testA" style="width=100px;height:100px;">1111111111111111111111</div>
                    <div id="testB" style="display:none;width=100px;height:100px;">2222222222222222222222</div>
            </div>
            <center><a data-click="testButton" data-role="button" id="appBtn">test</a></center>
        </div>
    </div>
    <div data-role="layout" data-id="listLayout">
        <div data-role="header">
            <div data-role="navbar"><span data-role="view-title">Demo</span></div>
        </div>
    </div>
    function gotoListPage1(){
        //MYAPP.app.navigate("#listpage",'slide:left');
        var effect = kendo.fx("#body").flipHorizontal($("#loginpage"), $("#listpage")).duration(1000);
        effect.play();
        kendo.mobile.init("#listpage");
    }
     
    function testButton(){
        kendo.fx("#testcontent").pageturnVertical($("#testA"), $("#testB")).play();
    }
    my code above,  
    (1) after transitions , data-show="testInit" function  not run as usual,  how to make it take action 

    (2) in kendo mobile ,  append data to widget via ajax or other way, the right to render  widget is ?    
    kendo.mobile.init("#listpage")   is the universal method?

    (3) navbar in mobile not show in new view after transition  , why ? how to fix it 



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 04 Jul 2013 Link to this post

    Hi Ai,

    As you are flipping the whole body using the flipHorizontal() effect, the data-show event is not being fired, therefore the testInit() function is never called. Flipping the whole page is also the reason why the NavBar is not shown after the transition. Please check our examples, to find out how to implement the Kenod UI Fx.

    Details about kendo init and its usage can be found in this article
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top