HTML5 Mobile web App Reader-4 (page infrastructure development) __html

Source: Internet
Author: User

Task:
Up and down Sidebar: absolute positioning or fixed. Relatively independent, so it can be placed in a relatively independent process.
Then there is the content area: Title, content, action Bar.
Referencing Normailze.css,zepto.min.js,jquery.base64.js,jquery.jsonp.js
Zepto is a JavaScript framework for modern smartphone browsers, with a syntax similar to jquery's, but smaller

<meta name= "viewport" content= "Width=device-width,initial-scale=1,user-scalable=no,minimal-ui" >
width–//Viewport width (range from 200 to 10,000, default to 980 pixels) height–//Viewport height (range from 223 to 10,000) initial-scale–//initial indent Scale (range from > 0 to Ten) minimum-scale–//allows the user to zoom to the minimum scale maximum-scale–//allows the user to zoom to the maximum proportion user-scalable–//whether the user can manually scale (No,ye S
<meta name= "format-detection" content= "Telephone=no" >
format recognition

Ignore numbers in a page as phone numbers
-enable devices to browse a Web page with no phone-enabled numbers (different device interpretations, ITouch clicks numbers for contacts, IPhone for phone calls), ignoring numbers on the page as phone numbers.
-If you need to enable the phone feature to be telephone=yes, if you have Google Maps on the page, ITunes and YouTube links will open the appropriate program components on the iOS device.
- structure and style are all started from the view, and then the details
-if you want to look good, still need to rely on their own 1.1 points (position, color)

<! DOCTYPE html>  

CSS
text layout, spacing, button style, container (background) The logic of CSS usually starts with 1. CSS in the "Overflow:scroll" default is left and right, scroll up and down, if there is no excess content, with Overflow:auto;
If there is anything beyond the content, use overflow-x: hidden; Set the picture path First, then set the size before it takes effect background-size:contain; adaptive
theme Structure

html{width:100%;
    height:100%;

Overflow-x:hidden;
    } body{Text-align:left;
    width:100%;
    Overflow:hidden;
    Background-color: #e9dfc7;
margin:0;
    }. m-read-content{font-size:14px;
    Color: #555;
    line-height:31px;
    padding:15px; margin:0
0 1em 0; 
    }. m-read-content h4{margin:0;
    font-size:20px;
    Color: #736357;
    border-bottom:1px solid #736357;

letter-spacing:2px;
    }. m-read-content p{text-indent:2em;
    Margin:0.5em 0;
line-height:24px;
    }. m-button-bar{width:70%;
    max-width:800px;
    padding:5px;
margin:0 Auto;
    }. u-tab{height:34px;
    margin-top:0;
    margin-bottom:20px;
    line-height:34px;
    border-radius:8px;
    border:1px solid #858382;
    font-size:12px;
    Background: #000;
    opacity:0.9;
padding:0;
    }. U-tab li{display:inline-block;
    width:49%;
    Text-align:center;
Color: #fff; }. U-tab Li:nth-child (1) {border-right:1px solid #858382; }

The specific CSS will not say.
Interaction
-Return action
-set the font size and background, and remember what's set up
-paging, getting data from the server
first declare a closure, and define things in it that don't affect the overall Some things.
First Step Interaction: Event binding, data storage, generic method encapsulation Localstorage is the form of key:value, so key can easily overlap and overwrite, so we could prefix the key with one.

Window.jquery = $;



Encapsulates Localstorage storage
(function () {
    var Util = (function () {
        var prefix = ' html5_reader_ ';
        var storagegetter = function (key) {return
            localstorage.getitem (prefix + key);
        }
        var storagesetter = function (key,val) {return
            localstorage.setitem (prefix + key,val);
        }
        return {
            storagegetter:storagegetter,
            storagesetter:storagesetter
        }
    }) ();
    function Main () {
        //todo entry functions for entire project
    }
    //Data layer
    function Readermodel () {
        //todo implementation and reader-related data interaction methods
    }

    Initialize
    function Readerbaseframe () {
        //todo render Basic UI structure
    }

    function Eventhanlder () {
        //todo Interactive event binding
    }

    main ();
}) ();
Tests are tested at call time; question: Why do we use click events without touch or zepto tap events.
A: The Click event has a 300 millisecond delay before Android 4.0, but it's too old. And on the PC side click event is supported, but TAP is not supported, need to turn on the simulator Oh. It's a bit of a hassle to judge whether it's moving or PC-side. Class naming rules, with-to manipulate the CSS, with _ used to manipulate JS, you can add a prefix, or to see a person's preferences. Pay attention to performance, performance difference is cumulative step by step, and is exponential growth

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.