Construct Javascript-based mobile CMS-add slide, javascriptcms

Construct Javascript-based mobile CMS-add slide, javascriptcms

Be interested inMobile CMSAfter some discussions, we think it is important to unify the RESTful API. However, in the recent continuous network disconnection, another power failure occurred, and the API thinking was suspended. During the boring weekend, I read "out of the box" and read "one person wandering without going to a distant place". Start thinking about things other than technology. Maybe this will be the topic of the next article.

While I was not doing anything about the features of this mobile CMS, I thought about adding this feature when I made a picture slide for my friends and found a library smoothly.

Move CMS slide

The two functions we need are simple.

I saw a simple example on the official website, but it was not used for this menu. After I finished it, I realized: Why is it not used for the menu?

I found such a functional library, although it is not difficult to write this function. Compared with writing this database by yourself, it is better to use others to maintain the database in some cases to be simple and stable.

JQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, shoshould also work with Android mobile phones (not tested yet !)

However, it does not work on other devices.

Add jQuery Touchwipe

Add to requirejs Configuration:

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();});

(Note: Some Irrelevant articles are temporarily removed from the above Code for simple description .)

Next, add the following code to the app. js initialization method.

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

It becomes the code we need ..

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    };});

We can achieve what we need

Others

However, in Windows Phone's IE browser, the left and right slides are forward and backward respectively.

CMS effect: moji CMS

QQ group: 344271543

Project: https://github.com/gmszone/moqi.mobi

How can I use javascript to move images? I only need to move a short distance from an image to the left.

Create a DIV and put the image inside it. For example, <div> </div> and add position: absolute to the DIV attribute, specifically, <div style = "position: absolute"> <div>

If HTML is used before, var pic = getElementById ("Your div id, you must write it yourself ")
Or var pic = getElementsByTagName ("div") [the picture in your page is written in the n div]

Then call setInterval
SetInterval ("pic. style. left-= 3", 300); // execute pic. style. left-= 3 every 300 milliseconds
Call clearInterval ();
You only want to move the value once: setTimeout ("pic. style. left-= 3", 300 );

Full JS Representation
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"; // here you need it
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;
Createeimg. width = 111;
CreateDiv. appendChild (createImg );

SetInterval ("createDiv. style. left-= 3", 300 );

How does empire CMS add javascript code to the template?

I have added it to the template and can write <script type = "text/javascript" src = "xx. js"> </script> anywhere on the page.