JavascriptベースのモバイルCMSの構築——スライドの追加

モバイルCMSに興味のあるいくつかのパートナーと議論した後、現在重要なのはRESTful APIを統一することだと思います.しかし、最近は断網が続いており、停電に見舞われ、APIへの思考を一時停止した.週末の退屈な時間に『人間失格』を見て、また『一人で放浪して、遠くに行く必要はありません』を見ました.いわゆる技術以外のことを考え始めると、次の議論の話題になるかもしれません.
私がこのモバイルCMSの機能に困っている間に、パートナーが画像をスライドさせるのを手伝っている間に、この機能を追加しようと思って、順調にライブラリを見つけました.

移動CMSスライド

必要な2つの機能は簡単です
ユーザが右にスライドするとき、メニューはを展開すべきである.
ユーザが左にスライドするとき、メニューはを閉じるべきである.
公式サイトで簡単な例を見ましたが、このメニューではありません.完成してから、なぜメニューに使わないのか分かりました.
このような機能に合ったライブラリを見つけて、この機能を書くのも難しくないことを知っていますが.自分でこのライブラリを書くよりも、他の人でメンテナンスしたときのライブラリを使うほうが簡単で安定しています.
jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
しかし、他のデバイスでは動作しません.

jQuery Touchwipeの追加

requirejsの構成に追加:

require.config({
    baseUrl: 'lib/',
    paths: {
        jquery: 'jquery-2.1.1.min',
        router: '../router',
        touchwipe: 'jquery.touchwipe.min'
    },
    shim: {
        touchwipe: ["jquery"],
        underscore: {
            exports: '_'
        }
    }
});

require(['../app'], function(App){
    App.initialize();
});

(注:上記のコードでは、簡単に説明するために、本明細書に関係のない一部を一時的に削除しました.)
次に、appに次のコードを追加する.jsの初期化方法では

$(window).touchwipe({
        wipeLeft: function() {
            $.sidr('close');
        },
        wipeRight: function() {
            $.sidr('open');
        },
        preventDefaultEvents: false
    });

私たちに必要なコードになりました.の

define([
    'jquery',
    'underscore',
    'backbone',
    'router',
    'jquerySidr',
    'touchwipe'
], function($, _, Backbone, Router){

    var initialize = function(){
        $(window).touchwipe({
            wipeLeft: function() {
                $.sidr('close');
            },
            wipeRight: function() {
                $.sidr('open');
            },
            preventDefaultEvents: false
        });
        $(document).ready(function() {
            $('#sidr').show();
            $('#menu').sidr();
            $("#sidr li a" ).bind('touchstart click', function() {
                if(null != Backbone.history.fragment){
                    _.each($("#sidr li"),function(li){
                        $(li).removeClass()
                    });

                    $('a[href$="#/'+Backbone.history.fragment+'"]').parent().addClass("active");
                    $.sidr('close');
                    window.scrollTo(0,0);
                }
            });
        });
        Router.initialize();
    };

    return {
        initialize: initialize
    };
});

私たちが必要とする
ユーザが右にスライドするとき、メニューはを展開すべきである.
ユーザが左にスライドするとき、メニューはを閉じるべきである.

その他

しかし、Windows PhoneのIEブラウザでは、左スライドと右スライドはそれぞれ前進と後退である.
CMS効果:インク高さCMS
QQ討論群:344271543
アイテム:https://github.com/gmszone/moqi.mobi