javascript - 如何使用Backbone来做简单的动画?

标签 javascript backbone.js

我的 Web 应用程序中有 3 个简单的动画,我不需要访问服务器,也不需要保存页面状态。

它们是一个简单的下拉菜单、一个翻页器和一个 Pane 翻转器,基本上是一个包含在页面中的小页面。

我可以在 Backbone 中对这些进行建模吗?相反,我应该在主干中对它们进行建模吗?

这是我的翻页器的示例:

/***************************************************************************************************
*/
    var Page = $A.Class.create('public', {
        Name: 'Page',

        // (P)roperties
        P: {
            page_previous:  null,
            head_previous:  null
        },

        // (Css) Classes
        C: {
            visible:        'inline',
            invisible:      'none'
        },

        // (E)lements
        E: {

            // body types
            body_splash:     '#body_splash',
            body_main:       '#body_main',
            body_settings:   '#body_settings',

            // heading types
            heading_splash:  '#heading_splash',
            heading_main:    '#heading_main'
        },

        // main, splash, settings
        flip : function (input) {
            var page_current,
                head_current;

            if (!input) {
                input = 'splash';
            }
            if (input === 'main') {
                $A.Event.trigger('main_flipped');
            }

            // set page and header based on input - update this later
            page_current =  this.E['body_' + input];

            if (input === 'settings') {
                head_current =  this.E.heading_main;
            } else {
                head_current = this.E['heading_' + input];
            }

            $A(page_current).fade();
            head_current.style.display = 'inline';

            // Turn off previous page / header
            if (this.P.page_previous !== null && this.P.page_previous !== page_current) {
                this.P.page_previous.style.display = 'none';
            }
            if (this.P.head_previous !== null && this.P.head_previous !== head_current) {
                this.P.head_previous.style.display = 'none';
            }

            // Update previous page / header
            this.P.page_previous = page_current;
            this.P.head_previous = head_current;
        }
    });

最佳答案

你可以通过使用backbone来完成这些事情。 marionette 。在此github repo您可以找到一些下拉菜单和翻页器的示例。

关于javascript - 如何使用Backbone来做简单的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24481208/

相关文章:

javascript - Jquery 选择 tbody 但不是从嵌套表中

javascript - 主干 : render this collection

javascript - PHP页面: Dropdown always selects the first value

javascript - 过滤 Backbone 集合时内存泄漏

javascript - Backbone : Render function fires for each instance of model

javascript - 如何将 Node 模块导入我的 backbone.js 应用程序?

javascript - 我应该如何声明我的自调用函数?

javascript - (CSS) 如何根据浏览器大小将 Div 定位在浏览器右下角附近?

javascript - 如何使用 JavaScript 将页面的特定部分保存为图像

javascript - 使用类验证器验证嵌套的 DTO 对象