構建基於Javascript的移動CMS——添加滑動，javascriptcms

構建基於Javascript的移動CMS——添加滑動，javascriptcms

在和幾個有興趣做移動CMS的小夥伴討論了一番之後，我們覺得當前比較重要的便是統一一下RESTful API。然而最近持續斷網中，又遭遇了一次停電，暫停了對API的思考。在周末無聊的時光了看了《人間失格》，又看了會《一個人流浪，不必去遠方》。開始思考所謂的技術以外的事情，或許這將是下一篇討論的話題。

正在我對這個移動CMS的功能一籌莫展的時候，幫小夥伴在做一個圖片滑動的時候，便想著將這個功能加進去，很順利地找到了一個庫。

移動CMS滑動

我們所需要的兩個功能很簡單

在官網看到了一個簡單的樣本，然而並不是用於這個菜單，等到我完成之後我才知道：為什麼不用於菜單？

找到了這樣一個符合功能的庫，雖然知道要寫這個功能也不難。相比於自己寫這個庫，還不如用別人維護了一些時候的庫來得簡單、穩定。

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

怎使用javascript實現圖片移動？我只要一張圖片向左移動一小段距離就好

建立個DIV，把圖片當裡面，比如這樣<div><img href = "asd"></div>然後在DIV屬性裡加上position : absolute，具體是這樣<div style = "position:absolute"><div>

你要是前面都用HTML做了那直接var pic = getElementById("你的DIV的ID號，要自己先前寫好")
或者var pic = getElementsByTagName("div")[你的頁面裡圖片在第N個DIV裡就寫N-1]

然後調用setInterval
setInterval( " pic.style.left -= 3", 300);//每300毫秒 執行pic.style.left -= 3 一次
想停掉它調用clearInterval();
只想移動一次這樣：setTimeout( " pic.style.left -= 3", 300);

全JS表示
var createDiv = document.createElement("div");
createDiv.style.height = "111px";
createDiv.style.width = "111px";
document.body.appendChild(createDiv);
createDiv.style.position = "absolute";
createDiv.style.overflow = "visible";//這裡看你具體需要吧
createDiv.style.top = "111px";
createDiv.style.left = "111px";

var createImg = document.createElement("img");
createImg.setAttribute("src","img.baidu.com/img/logo-zhidao.gif");
createImg.height = 111;
createImg.width = 111;
createDiv.appendChild(createImg);

setInterval( " createDiv.style.left -= 3", 300);
 
帝國CMS 怎把javascript代碼增加到模版中？

我加過 在模板裡直接加是可以的 在頁面任何地方寫<script type="text/javascript" src="xx.js"></script>