├── demo ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── lite │ ├── oschina.css │ ├── index.html │ ├── index_custom.html │ ├── index_oschina.html │ └── index_oschina_left.html ├── default.html ├── position_top.html ├── is_expand_all.html ├── auto_number.html ├── documment_selector.html ├── is_highlight_selected_line.html ├── scoll.html ├── custom_style.html ├── index.html └── use_head_anchor.html ├── History.md ├── src ├── .jshintrc └── markdown_toc.js ├── bower.json ├── package.json ├── test ├── index.html ├── test.js └── qunit.css ├── .gitignore ├── markdown_toc.jquery.json ├── CONTRIBUTING.md ├── Gruntfile.js ├── README.md └── LICENSE /demo/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i5ting/markdown_toc/HEAD/demo/1.png -------------------------------------------------------------------------------- /demo/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i5ting/markdown_toc/HEAD/demo/2.png -------------------------------------------------------------------------------- /demo/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i5ting/markdown_toc/HEAD/demo/3.png -------------------------------------------------------------------------------- /demo/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i5ting/markdown_toc/HEAD/demo/4.png -------------------------------------------------------------------------------- /demo/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i5ting/markdown_toc/HEAD/demo/5.png -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 0.1.1 / 2014-11-26 4 | ================== 5 | 6 | * 增加中间件，为基础ztree_toc做准备 7 | 8 | 9 | 0.1.0 / 2014-11-25 10 | ================== 11 | 12 | * updated docs/site 13 | * added readme 14 | * got everything working 15 | * initial commit 16 | 17 | -------------------------------------------------------------------------------- /src/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "node": true 14 | } 15 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markdown_toc", 3 | "description": "jquery tree plugin to create Table of content,and render with ztree(another jq plugin)", 4 | "version": "0.4.1", 5 | "homepage": "http://www.no320.com/", 6 | "license": "MIT", 7 | "copyright": "alfred sang", 8 | "main": "src/ztree_toc_lite.js", 9 | "dependencies": { 10 | "jquery": ">=1.4.4" 11 | }, 12 | "devDependencies": { 13 | "css": "*", 14 | "js": "*" 15 | }, 16 | "ignore": [ 17 | "build", 18 | "demo" 19 | ] 20 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markdown_toc", 3 | "version": "0.4.1", 4 | "engines": { 5 | "node": ">= 0.8.0" 6 | }, 7 | "scripts": { 8 | "test": "grunt qunit" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git@github.com:i5ting/markdown_toc_lite.git" 13 | }, 14 | "devDependencies": { 15 | "grunt-contrib-jshint": "~0.7.0", 16 | "grunt-contrib-qunit": "~0.3.0", 17 | "grunt-contrib-concat": "~0.3.0", 18 | "grunt-contrib-uglify": "~0.2.4", 19 | "grunt-contrib-watch": "~0.5.3", 20 | "grunt-contrib-clean": "~0.5.0", 21 | "grunt": "~0.4.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Toc with zTree Test Suite 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Toc with zTree Test Suite

14 |

15 |
16 |

17 |
    18 |
    test markup, will be hidden
    19 | 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | -------------------------------------------------------------------------------- /markdown_toc.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markdown_toc", 3 | "title": "markdown_toc", 4 | "description": "a jQuery plugin for preview markdown table of content jQuery.zTree_Toc.js toc ztree and online demo site v0.3.0", 5 | "version": "0.4.1", 6 | "homepage": "http://i5ting.github.io/i5ting_ztree_toc/", 7 | "author": { 8 | "name": "alfred.sang", 9 | "email": "shiren1118@126.com" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git@github.com:i5ting/i5ting_ztree_toc.git" 14 | }, 15 | "bugs": "https://github.com/i5ting/i5ting_ztree_toc/issues", 16 | "licenses": [ 17 | { 18 | "type": "MIT", 19 | "url": "https://github.com/i5ting/i5ting_ztree_toc/blob/master/LICENSE-MIT" 20 | } 21 | ], 22 | "dependencies": { 23 | "jquery": "*" 24 | }, 25 | "keywords": ["table of content","markdown","ztree","toc","i5ting","alfred.sang"] 26 | } -------------------------------------------------------------------------------- /demo/lite/oschina.css: -------------------------------------------------------------------------------- 1 | .BlogAnchor { 2 | background: #f4f7f9; 3 | padding: 10px; 4 | } 5 | .BlogAnchor p { 6 | font-size: 12px; 7 | } 8 | .BlogAnchor .AnchorContent { 9 | padding: 5px 0px; 10 | } 11 | .BlogAnchor li { 12 | list-style: none; 13 | padding: 1px 0; 14 | } 15 | .BlogAnchor a { 16 | text-decoration: none; 17 | } 18 | .BlogAnchor a:hover { 19 | color: #ad4a23; 20 | } 21 | .BlogAnchor .osc_h1 { 22 | text-indent: 20px; 23 | font-size: 14px; 24 | } 25 | .BlogAnchor .osc_h2 { 26 | text-indent: 35px; 27 | font-size: 13px; 28 | } 29 | .BlogAnchor .osc_h3 { 30 | text-indent: 50px; 31 | font-size: 12px; 32 | } 33 | .BlogAnchor .osc_h4 { 34 | text-indent: 65px; 35 | font-size: 11px; 36 | } 37 | .BlogAnchor .osc_h5 { 38 | text-indent: 80px; 39 | font-size: 10px; 40 | } 41 | .BlogAnchor .osc_h6 { 42 | text-indent: 95px; 43 | font-size: 9px; 44 | } 45 | em.corner { 46 | font-size: 13px; 47 | font-weight: normal; 48 | color: #FFF; 49 | display: inline-block; 50 | line-height: 20px; 51 | background: #5cc26f; 52 | font-style: normal; 53 | padding: 1px 8px; 54 | margin-right: 10px; 55 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Important notes 4 | Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory! 5 | 6 | ### Code style 7 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** 8 | 9 | ### PhantomJS 10 | While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers. 11 | 12 | ## Modifying the code 13 | First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. 14 | 15 | Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started). 16 | 17 | 1. Fork and clone the repo. 18 | 1. Run `npm install` to install all dependencies (including Grunt). 19 | 1. Run `grunt` to grunt this project. 20 | 21 | Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. 22 | 23 | ## Submitting pull requests 24 | 25 | 1. Create a new branch, please don't work in your `master` branch directly. 26 | 1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. 27 | 1. Fix stuff. 28 | 1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. 29 | 1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere. 30 | 1. Update the documentation to reflect any changes. 31 | 1. Push to your fork and submit a pull request. 32 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var undef; 2 | 3 | // Some shims for IE 4 | if (!Object.keys) { 5 | Object.keys = function(obj) { 6 | var arr = []; 7 | for (var key in obj) { 8 | arr.push(key); 9 | } 10 | 11 | return arr; 12 | }; 13 | } 14 | 15 | 16 | var opts = { 17 | step: 100 18 | } 19 | 20 | test("encode_id_with_array ", function() { 21 | var r1 = encode_id_with_array(opts,[1 ]); 22 | ok( r1 == 1, "[1] = 1 = 1 = 1"); 23 | 24 | var r1_2 = encode_id_with_array(opts,[2 ]); 25 | ok( r1_2 == 2, "[2] = 2 = 2 = 2"); 26 | 27 | var r2 = encode_id_with_array(opts,[1 ,1]); 28 | ok( r2 == 101, "[1 ,1 ] = 1.1 = 1*100 + 1 = 101"); 29 | 30 | var r2_2 = encode_id_with_array(opts,[1 ,2]); 31 | ok( r2_2 == 102, "[1 ,2] = 1.2 = 1*100 + 2 = 102"); 32 | 33 | var r2_3 = encode_id_with_array(opts,[2 ,3]); 34 | ok( r2_3 == 203, "[2 ,3] = 2.3 = 2*100 + 3 = 203"); 35 | 36 | var r3 = encode_id_with_array(opts,[1 ,1 ,1]); 37 | ok( r3 == 10101, "[1 ,1 ,1] = 1.1.1 = 1*100*100 + 1*100 + 1 = 10101"); 38 | 39 | var r3_2_3 = encode_id_with_array(opts,[1 ,2 ,3]); 40 | ok( r3_2_3 == 10203, "[1 ,2, 3] = 1.2.3 = 1*100*100 + 2*100 + 3= 10203"); 41 | }); 42 | 43 | 44 | test("get_parent_id_with_array ", function() { 45 | var r1 = get_parent_id_with_array(opts,[1]); 46 | ok( r1 == 0, "[1] pid = 0"); 47 | 48 | var r1_2 = get_parent_id_with_array(opts,[2 ]); 49 | ok( r1_2 == 0, "[2] pid = 0"); 50 | 51 | var r2 = get_parent_id_with_array(opts,[1 ,1]); 52 | ok( r2 == 1, "[1 ,1] pid = 1"); 53 | 54 | var r2_2 = get_parent_id_with_array(opts,[1 ,2]); 55 | ok( r2_2 == 1, "[1 ,2] pid = 1"); 56 | 57 | var r3 = get_parent_id_with_array(opts,[1 ,1 ,1]); 58 | ok( r3 == 101, "[1 ,1 ,1] pid = 101"); 59 | 60 | var r3_2_3 = get_parent_id_with_array(opts,[1 ,2 ,3]); 61 | ok( r3_2_3 == 102, "[1 ,2, 3] pid = 102"); 62 | 63 | var r3_2_3_1 = get_parent_id_with_array(opts,[2 ,3 ,1]); 64 | ok( r3_2_3_1 == 203, "[2, 3, 1] pid = 203"); 65 | }); 66 | 67 | test("factor util method", function() { 68 | var r3 = factor(opts,3,1); 69 | var r2 = factor(opts,2,1); 70 | 71 | ok( r3 == 100*100, "m(opts,3) = 100*100"); 72 | ok( r2 == 100, "m(opts,2) = 100"); 73 | }); 74 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | 5 | // Project configuration. 6 | grunt.initConfig({ 7 | // Metadata. 8 | pkg: grunt.file.readJSON('ztree_toc.jquery.json'), 9 | banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + 10 | '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 11 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 12 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 13 | ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', 14 | // Task configuration. 15 | clean: { 16 | files: ['dist'] 17 | }, 18 | concat: { 19 | options: { 20 | banner: '<%= banner %>', 21 | stripBanners: true 22 | }, 23 | dist: { 24 | src: ['src/<%= pkg.name %>.js'], 25 | dest: 'dist/<%= pkg.name %>.js' 26 | }, 27 | }, 28 | uglify: { 29 | options: { 30 | banner: '<%= banner %>' 31 | }, 32 | dist: { 33 | src: '<%= concat.dist.dest %>', 34 | dest: 'dist/<%= pkg.name %>.min.js' 35 | }, 36 | }, 37 | qunit: { 38 | files: ['test/**/*.html'] 39 | }, 40 | jshint: { 41 | gruntfile: { 42 | options: { 43 | jshintrc: '.jshintrc' 44 | }, 45 | src: 'Gruntfile.js' 46 | }, 47 | src: { 48 | options: { 49 | jshintrc: 'src/.jshintrc' 50 | }, 51 | src: ['src/**/*.js'] 52 | }, 53 | test: { 54 | options: { 55 | jshintrc: 'test/.jshintrc' 56 | }, 57 | src: ['test/**/*.js'] 58 | }, 59 | }, 60 | watch: { 61 | gruntfile: { 62 | files: '<%= jshint.gruntfile.src %>', 63 | tasks: ['jshint:gruntfile'] 64 | }, 65 | src: { 66 | files: '<%= jshint.src.src %>', 67 | tasks: ['jshint:src', 'qunit'] 68 | }, 69 | test: { 70 | files: '<%= jshint.test.src %>', 71 | tasks: ['jshint:test', 'qunit'] 72 | }, 73 | }, 74 | }); 75 | 76 | // These plugins provide necessary tasks. 77 | grunt.loadNpmTasks('grunt-contrib-clean'); 78 | grunt.loadNpmTasks('grunt-contrib-concat'); 79 | grunt.loadNpmTasks('grunt-contrib-uglify'); 80 | grunt.loadNpmTasks('grunt-contrib-qunit'); 81 | grunt.loadNpmTasks('grunt-contrib-jshint'); 82 | grunt.loadNpmTasks('grunt-contrib-watch'); 83 | 84 | // Default task. 85 | // grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']); 86 | grunt.registerTask('default', ['qunit', 'clean', 'concat', 'uglify']); 87 | 88 | }; 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | markdown_toc 2 | ============ 3 | 4 | a flexible markdown toc with more custom style && freedom 5 | 6 | ## 用法 7 | 8 | see demo/lite/index.html 9 | 10 | ```javascript 11 | 12 | 13 | 20 | ``` 21 | 22 | ## 依赖 23 | 24 | 目前只有1个依赖库 25 | 26 | - jquery-1.4+ 27 | 28 | ## 定制 29 | 30 | ### 定制步骤 31 | 32 | 1. 修改markdown_toc里的compile_headers_with_item函数 33 | 1. 按照自己的需求修改返回的html结构，参数item是节点对象 34 | 35 | ### 定制方法 36 | 37 | ```javascript 38 | 39 | 40 | 50 | ``` 51 | 52 | ### item对象 53 | 54 | ```javascript 55 | item = { 56 | "id": 2105, 57 | "level": 1, 58 | "orderd_title": "21.5. 三部分的关系", 59 | "origin_title": "三部分的关系", 60 | "open": true, 61 | "pId": 21, 62 | "target": "_self", 63 | "url": "#2105" 64 | } 65 | ``` 66 | 67 | ### item对象属性说明 68 | 69 | - id是唯一编号，可以作为锚点id 70 | - level是标题层级 71 | - orderd_title是带有序号的标题 72 | - origin_title是没有序号的原始标题 73 | - open是十分可以展开，如果是，说明它由子节点 74 | - pId是当前节点的父亲节点id 75 | - target是打开方式 76 | - url是锚点的url地址 77 | 78 | 79 | ## Contributing 80 | 81 | 1. Fork it 82 | 2. Create your feature branch (`git checkout -b my-new-feature`) 83 | 3. Commit your changes (`git commit -am 'Add some feature'`) 84 | 4. Push to the branch (`git push origin my-new-feature`) 85 | 5. Create new Pull Request 86 | 87 | ## 推荐 88 | 89 | - [i5ting_ztree_toc](https://github.com/i5ting/i5ting_ztree_toc) 带有树形结构 90 | - 生成器 [ruby版本tocmd](https://github.com/i5ting/tocmd.gem) 91 | - 生成器 [node版本i5ting_toc](https://github.com/i5ting/tocmd.npm) 92 | - [gulp task for i5ting-toc](https://github.com/i5ting/gulp-i5ting-toc) 93 | 94 | 95 | ## 版本历史 96 | 97 | - v0.1.0 初始化版本 98 | 99 | ## 欢迎fork和反馈 100 | 101 | - write by `i5ting` shiren1118@126.com 102 | 103 | 如有建议或意见，请在issue提问或邮件 104 | 105 | ## License 106 | 107 | this repo is released under the [MIT 108 | License](http://www.opensource.org/licenses/MIT). -------------------------------------------------------------------------------- /demo/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 27 | 28 | 29 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 47 | 122 | 123 |
    43 |
      44 | 45 |
    46 |     		48 | 49 |
    50 |

    移动web app

    51 |
    52 |
    53 |

    HTML5

    54 |
    55 |
    56 |

    CSS

    57 |
    58 |
    59 |

    JavaScript

    60 |
    61 |
    62 |

    基本语法

    63 |

    dsds

    64 |

    高级用法

    65 |

    dsds

    66 |
    67 |

    第二部分

    68 | 69 |

    hello world

    70 | 71 |

    第三部分

    72 | 73 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    74 | 75 |

    解释一下什么是移动web应用开发

    76 | 77 |

    为什么要用Hybird（混搭）呢？

    78 | 79 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    80 | 81 |
      82 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 83 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 84 |
    • 开发效率高，易于掌握
      • 85 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 86 |
    87 | 88 |

    整体架构

    89 | 90 |

    Webview 和 native代码如何交互

    91 | 92 | 93 |

    三部分的关系

    94 | 95 |

    你一定要清楚【技术栈】

    96 | 97 |

    界面UI展现

    98 | 
    - html5 + css3 （界面UI展现）
 99 |
    100 |

    界面上的各种动态效果

    101 | 
    - js           （各种动态效果）
102 |
    103 |

    与服务器通信

    104 | 
    - ajax         （与服务器通信）
105 |
    106 |

    移动webapp和OS之间的桥梁：phonegap

    107 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
108 |
    109 |

    移动端特点

    110 | 111 |
      112 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 113 |
    • viewport？
      • 114 |
    • 真的不用兼容浏览器么？
      • 115 |
    • 适配屏幕（？响应式布局）
      • 116 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 117 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 118 |
    119 | 120 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    121 |
    124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /demo/position_top.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 27 | 28 | 29 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 49 | 124 | 125 |
    45 |
      46 | 47 |
    48 |     		50 | 51 |
    52 |

    移动web app

    53 |
    54 |
    55 |

    HTML5

    56 |
    57 |
    58 |

    CSS

    59 |
    60 |
    61 |

    JavaScript

    62 |
    63 |
    64 |

    基本语法

    65 |

    dsds

    66 |

    高级用法

    67 |

    dsds

    68 |
    69 |

    第二部分

    70 | 71 |

    hello world

    72 | 73 |

    第三部分

    74 | 75 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    76 | 77 |

    解释一下什么是移动web应用开发

    78 | 79 |

    为什么要用Hybird（混搭）呢？

    80 | 81 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    82 | 83 |
      84 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 85 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 86 |
    • 开发效率高，易于掌握
      • 87 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 88 |
    89 | 90 |

    整体架构

    91 | 92 |

    Webview 和 native代码如何交互

    93 | 94 | 95 |

    三部分的关系

    96 | 97 |

    你一定要清楚【技术栈】

    98 | 99 |

    界面UI展现

    100 | 
    - html5 + css3 （界面UI展现）
101 |
    102 |

    界面上的各种动态效果

    103 | 
    - js           （各种动态效果）
104 |
    105 |

    与服务器通信

    106 | 
    - ajax         （与服务器通信）
107 |
    108 |

    移动webapp和OS之间的桥梁：phonegap

    109 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
110 |
    111 |

    移动端特点

    112 | 113 |
      114 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 115 |
    • viewport？
      • 116 |
    • 真的不用兼容浏览器么？
      • 117 |
    • 适配屏幕（？响应式布局）
      • 118 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 119 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 120 |
    121 | 122 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    123 |
    126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /demo/is_expand_all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 27 | 28 | 29 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 49 | 124 | 125 |
    45 |
      46 | 47 |
    48 |     		50 | 51 |
    52 |

    移动web app

    53 |
    54 |
    55 |

    HTML5

    56 |
    57 |
    58 |

    CSS

    59 |
    60 |
    61 |

    JavaScript

    62 |
    63 |
    64 |

    基本语法

    65 |

    dsds

    66 |

    高级用法

    67 |

    dsds

    68 |
    69 |

    第二部分

    70 | 71 |

    hello world

    72 | 73 |

    第三部分

    74 | 75 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    76 | 77 |

    解释一下什么是移动web应用开发

    78 | 79 |

    为什么要用Hybird（混搭）呢？

    80 | 81 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    82 | 83 |
      84 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 85 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 86 |
    • 开发效率高，易于掌握
      • 87 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 88 |
    89 | 90 |

    整体架构

    91 | 92 |

    Webview 和 native代码如何交互

    93 | 94 | 95 |

    三部分的关系

    96 | 97 |

    你一定要清楚【技术栈】

    98 | 99 |

    界面UI展现

    100 | 
    - html5 + css3 （界面UI展现）
101 |
    102 |

    界面上的各种动态效果

    103 | 
    - js           （各种动态效果）
104 |
    105 |

    与服务器通信

    106 | 
    - ajax         （与服务器通信）
107 |
    108 |

    移动webapp和OS之间的桥梁：phonegap

    109 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
110 |
    111 |

    移动端特点

    112 | 113 |
      114 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 115 |
    • viewport？
      • 116 |
    • 真的不用兼容浏览器么？
      • 117 |
    • 适配屏幕（？响应式布局）
      • 118 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 119 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 120 |
    121 | 122 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    123 |
    126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /demo/auto_number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 27 | 28 | 29 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 48 | 123 | 124 |
    44 |
      45 | 46 |
    47 |     		49 | 50 |
    51 |

    移动web app

    52 |
    53 |
    54 |

    HTML5

    55 |
    56 |
    57 |

    CSS

    58 |
    59 |
    60 |

    JavaScript

    61 |
    62 |
    63 |

    基本语法

    64 |

    dsds

    65 |

    高级用法

    66 |

    dsds

    67 |
    68 |

    第二部分

    69 | 70 |

    hello world

    71 | 72 |

    第三部分

    73 | 74 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    75 | 76 |

    解释一下什么是移动web应用开发

    77 | 78 |

    为什么要用Hybird（混搭）呢？

    79 | 80 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    81 | 82 |
      83 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 84 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 85 |
    • 开发效率高，易于掌握
      • 86 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 87 |
    88 | 89 |

    整体架构

    90 | 91 |

    Webview 和 native代码如何交互

    92 | 93 | 94 |

    三部分的关系

    95 | 96 |

    你一定要清楚【技术栈】

    97 | 98 |

    界面UI展现

    99 | 
    - html5 + css3 （界面UI展现）
100 |
    101 |

    界面上的各种动态效果

    102 | 
    - js           （各种动态效果）
103 |
    104 |

    与服务器通信

    105 | 
    - ajax         （与服务器通信）
106 |
    107 |

    移动webapp和OS之间的桥梁：phonegap

    108 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
109 |
    110 |

    移动端特点

    111 | 112 |
      113 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 114 |
    • viewport？
      • 115 |
    • 真的不用兼容浏览器么？
      • 116 |
    • 适配屏幕（？响应式布局）
      • 117 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 118 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 119 |
    120 | 121 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    122 |
    125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /demo/documment_selector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 28 | 29 | 30 | 31 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 51 | 126 | 127 |
    47 |
      48 | 49 |
    50 |     		52 | 53 |
    54 |

    移动web app

    55 |
    56 |
    57 |

    HTML5

    58 |
    59 |
    60 |

    CSS

    61 |
    62 |
    63 |

    JavaScript

    64 |
    65 |
    66 |

    基本语法

    67 |

    dsds

    68 |

    高级用法

    69 |

    dsds

    70 |
    71 |

    第二部分

    72 | 73 |

    hello world

    74 | 75 |

    第三部分

    76 | 77 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    78 | 79 |

    解释一下什么是移动web应用开发

    80 | 81 |

    为什么要用Hybird（混搭）呢？

    82 | 83 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    84 | 85 |
      86 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 87 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 88 |
    • 开发效率高，易于掌握
      • 89 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 90 |
    91 | 92 |

    整体架构

    93 | 94 |

    Webview 和 native代码如何交互

    95 | 96 | 97 |

    三部分的关系

    98 | 99 |

    你一定要清楚【技术栈】

    100 | 101 |

    界面UI展现

    102 | 
    - html5 + css3 （界面UI展现）
103 |
    104 |

    界面上的各种动态效果

    105 | 
    - js           （各种动态效果）
106 |
    107 |

    与服务器通信

    108 | 
    - ajax         （与服务器通信）
109 |
    110 |

    移动webapp和OS之间的桥梁：phonegap

    111 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
112 |
    113 |

    移动端特点

    114 | 115 |
      116 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 117 |
    • viewport？
      • 118 |
    • 真的不用兼容浏览器么？
      • 119 |
    • 适配屏幕（？响应式布局）
      • 120 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 121 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 122 |
    123 | 124 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    125 |
    128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /demo/is_highlight_selected_line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 28 | 29 | 30 | 31 | 40 | 41 | 42 | 43 | 44 | 未完成 45 | 46 | 47 | 48 | 53 | 128 | 129 |
    49 |
      50 | 51 |
    52 |     		54 | 55 |
    56 |

    移动web app

    57 |
    58 |
    59 |

    HTML5

    60 |
    61 |
    62 |

    CSS

    63 |
    64 |
    65 |

    JavaScript

    66 |
    67 |
    68 |

    基本语法

    69 |

    dsds

    70 |

    高级用法

    71 |

    dsds

    72 |
    73 |

    第二部分

    74 | 75 |

    hello world

    76 | 77 |

    第三部分

    78 | 79 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    80 | 81 |

    解释一下什么是移动web应用开发

    82 | 83 |

    为什么要用Hybird（混搭）呢？

    84 | 85 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    86 | 87 |
      88 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 89 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 90 |
    • 开发效率高，易于掌握
      • 91 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 92 |
    93 | 94 |

    整体架构

    95 | 96 |

    Webview 和 native代码如何交互

    97 | 98 | 99 |

    三部分的关系

    100 | 101 |

    你一定要清楚【技术栈】

    102 | 103 |

    界面UI展现

    104 | 
    - html5 + css3 （界面UI展现）
105 |
    106 |

    界面上的各种动态效果

    107 | 
    - js           （各种动态效果）
108 |
    109 |

    与服务器通信

    110 | 
    - ajax         （与服务器通信）
111 |
    112 |

    移动webapp和OS之间的桥梁：phonegap

    113 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
114 |
    115 |

    移动端特点

    116 | 117 |
      118 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 119 |
    • viewport？
      • 120 |
    • 真的不用兼容浏览器么？
      • 121 |
    • 适配屏幕（？响应式布局）
      • 122 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 123 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 124 |
    125 | 126 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    127 |
    130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /demo/scoll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 28 | 29 | 30 | 31 | 40 | 41 | 42 | 43 | 44 | 45 |
    46 |
    47 | 48 | 49 | 50 | 51 | 56 | 131 | 132 |
    52 |
      53 | 54 |
    55 |     		57 | 58 |
    59 |

    移动web app

    60 |
    61 |
    62 |

    HTML5

    63 |
    64 |
    65 |

    CSS

    66 |
    67 |
    68 |

    JavaScript

    69 |
    70 |
    71 |

    基本语法

    72 |

    dsds

    73 |

    高级用法

    74 |

    dsds

    75 |
    76 |

    第二部分

    77 | 78 |

    hello world

    79 | 80 |

    第三部分

    81 | 82 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    83 | 84 |

    解释一下什么是移动web应用开发

    85 | 86 |

    为什么要用Hybird（混搭）呢？

    87 | 88 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    89 | 90 |
      91 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 92 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 93 |
    • 开发效率高，易于掌握
      • 94 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 95 |
    96 | 97 |

    整体架构

    98 | 99 |

    Webview 和 native代码如何交互

    100 | 101 | 102 |

    三部分的关系

    103 | 104 |

    你一定要清楚【技术栈】

    105 | 106 |

    界面UI展现

    107 | 
    - html5 + css3 （界面UI展现）
108 |
    109 |

    界面上的各种动态效果

    110 | 
    - js           （各种动态效果）
111 |
    112 |

    与服务器通信

    113 | 
    - ajax         （与服务器通信）
114 |
    115 |

    移动webapp和OS之间的桥梁：phonegap

    116 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
117 |
    118 |

    移动端特点

    119 | 120 |
      121 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 122 |
    • viewport？
      • 123 |
    • 真的不用兼容浏览器么？
      • 124 |
    • 适配屏幕（？响应式布局）
      • 125 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 126 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 127 |
    128 | 129 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    130 |
    133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /demo/custom_style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 28 | 29 | 30 | 31 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 59 | 134 | 135 |
    55 |
      56 | 57 |
    58 |     		60 | 61 |
    62 |

    移动web app

    63 |
    64 |
    65 |

    HTML5

    66 |
    67 |
    68 |

    CSS

    69 |
    70 |
    71 |

    JavaScript

    72 |
    73 |
    74 |

    基本语法

    75 |

    dsds

    76 |

    高级用法

    77 |

    dsds

    78 |
    79 |

    第二部分

    80 | 81 |

    hello world

    82 | 83 |

    第三部分

    84 | 85 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    86 | 87 |

    解释一下什么是移动web应用开发

    88 | 89 |

    为什么要用Hybird（混搭）呢？

    90 | 91 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    92 | 93 |
      94 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 95 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 96 |
    • 开发效率高，易于掌握
      • 97 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 98 |
    99 | 100 |

    整体架构

    101 | 102 |

    Webview 和 native代码如何交互

    103 | 104 | 105 |

    三部分的关系

    106 | 107 |

    你一定要清楚【技术栈】

    108 | 109 |

    界面UI展现

    110 | 
    - html5 + css3 （界面UI展现）
111 |
    112 |

    界面上的各种动态效果

    113 | 
    - js           （各种动态效果）
114 |
    115 |

    与服务器通信

    116 | 
    - ajax         （与服务器通信）
117 |
    118 |

    移动webapp和OS之间的桥梁：phonegap

    119 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
120 |
    121 |

    移动端特点

    122 | 123 |
      124 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 125 |
    • viewport？
      • 126 |
    • 真的不用兼容浏览器么？
      • 127 |
    • 适配屏幕（？响应式布局）
      • 128 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 129 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 130 |
    131 | 132 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    133 |
    136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /test/qunit.css: -------------------------------------------------------------------------------- 1 | /** 2 | * QUnit v1.4.0 - A JavaScript Unit Testing Framework 3 | * 4 | * http://docs.jquery.com/QUnit 5 | * 6 | * Copyright (c) 2012 John Resig, Jörn Zaefferer 7 | * Dual licensed under the MIT (MIT-LICENSE.txt) 8 | * or GPL (GPL-LICENSE.txt) licenses. 9 | */ 10 | 11 | /** Font Family and Sizes */ 12 | 13 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { 14 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; 15 | } 16 | 17 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } 18 | #qunit-tests { font-size: smaller; } 19 | 20 | 21 | /** Resets */ 22 | 23 | #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | 29 | /** Header */ 30 | 31 | #qunit-header { 32 | padding: 0.5em 0 0.5em 1em; 33 | 34 | color: #8699a4; 35 | background-color: #0d3349; 36 | 37 | font-size: 1.5em; 38 | line-height: 1em; 39 | font-weight: normal; 40 | 41 | border-radius: 15px 15px 0 0; 42 | -moz-border-radius: 15px 15px 0 0; 43 | -webkit-border-top-right-radius: 15px; 44 | -webkit-border-top-left-radius: 15px; 45 | } 46 | 47 | #qunit-header a { 48 | text-decoration: none; 49 | color: #c2ccd1; 50 | } 51 | 52 | #qunit-header a:hover, 53 | #qunit-header a:focus { 54 | color: #fff; 55 | } 56 | 57 | #qunit-header label { 58 | display: inline-block; 59 | } 60 | 61 | #qunit-banner { 62 | height: 5px; 63 | } 64 | 65 | #qunit-testrunner-toolbar { 66 | padding: 0.5em 0 0.5em 2em; 67 | color: #5E740B; 68 | background-color: #eee; 69 | } 70 | 71 | #qunit-userAgent { 72 | padding: 0.5em 0 0.5em 2.5em; 73 | background-color: #2b81af; 74 | color: #fff; 75 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; 76 | } 77 | 78 | 79 | /** Tests: Pass/Fail */ 80 | 81 | #qunit-tests { 82 | list-style-position: inside; 83 | } 84 | 85 | #qunit-tests li { 86 | padding: 0.4em 0.5em 0.4em 2.5em; 87 | border-bottom: 1px solid #fff; 88 | list-style-position: inside; 89 | } 90 | 91 | #qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running { 92 | display: none; 93 | } 94 | 95 | #qunit-tests li strong { 96 | cursor: pointer; 97 | } 98 | 99 | #qunit-tests li a { 100 | padding: 0.5em; 101 | color: #c2ccd1; 102 | text-decoration: none; 103 | } 104 | #qunit-tests li a:hover, 105 | #qunit-tests li a:focus { 106 | color: #000; 107 | } 108 | 109 | #qunit-tests ol { 110 | margin-top: 0.5em; 111 | padding: 0.5em; 112 | 113 | background-color: #fff; 114 | 115 | border-radius: 15px; 116 | -moz-border-radius: 15px; 117 | -webkit-border-radius: 15px; 118 | 119 | box-shadow: inset 0px 2px 13px #999; 120 | -moz-box-shadow: inset 0px 2px 13px #999; 121 | -webkit-box-shadow: inset 0px 2px 13px #999; 122 | } 123 | 124 | #qunit-tests table { 125 | border-collapse: collapse; 126 | margin-top: .2em; 127 | } 128 | 129 | #qunit-tests th { 130 | text-align: right; 131 | vertical-align: top; 132 | padding: 0 .5em 0 0; 133 | } 134 | 135 | #qunit-tests td { 136 | vertical-align: top; 137 | } 138 | 139 | #qunit-tests pre { 140 | margin: 0; 141 | white-space: pre-wrap; 142 | word-wrap: break-word; 143 | } 144 | 145 | #qunit-tests del { 146 | background-color: #e0f2be; 147 | color: #374e0c; 148 | text-decoration: none; 149 | } 150 | 151 | #qunit-tests ins { 152 | background-color: #ffcaca; 153 | color: #500; 154 | text-decoration: none; 155 | } 156 | 157 | /*** Test Counts */ 158 | 159 | #qunit-tests b.counts { color: black; } 160 | #qunit-tests b.passed { color: #5E740B; } 161 | #qunit-tests b.failed { color: #710909; } 162 | 163 | #qunit-tests li li { 164 | margin: 0.5em; 165 | padding: 0.4em 0.5em 0.4em 0.5em; 166 | background-color: #fff; 167 | border-bottom: none; 168 | list-style-position: inside; 169 | } 170 | 171 | /*** Passing Styles */ 172 | 173 | #qunit-tests li li.pass { 174 | color: #5E740B; 175 | background-color: #fff; 176 | border-left: 26px solid #C6E746; 177 | } 178 | 179 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } 180 | #qunit-tests .pass .test-name { color: #366097; } 181 | 182 | #qunit-tests .pass .test-actual, 183 | #qunit-tests .pass .test-expected { color: #999999; } 184 | 185 | #qunit-banner.qunit-pass { background-color: #C6E746; } 186 | 187 | /*** Failing Styles */ 188 | 189 | #qunit-tests li li.fail { 190 | color: #710909; 191 | background-color: #fff; 192 | border-left: 26px solid #EE5757; 193 | white-space: pre; 194 | } 195 | 196 | #qunit-tests > li:last-child { 197 | border-radius: 0 0 15px 15px; 198 | -moz-border-radius: 0 0 15px 15px; 199 | -webkit-border-bottom-right-radius: 15px; 200 | -webkit-border-bottom-left-radius: 15px; 201 | } 202 | 203 | #qunit-tests .fail { color: #000000; background-color: #EE5757; } 204 | #qunit-tests .fail .test-name, 205 | #qunit-tests .fail .module-name { color: #000000; } 206 | 207 | #qunit-tests .fail .test-actual { color: #EE5757; } 208 | #qunit-tests .fail .test-expected { color: green; } 209 | 210 | #qunit-banner.qunit-fail { background-color: #EE5757; } 211 | 212 | 213 | /** Result */ 214 | 215 | #qunit-testresult { 216 | padding: 0.5em 0.5em 0.5em 2.5em; 217 | 218 | color: #2b81af; 219 | background-color: #D2E0E6; 220 | 221 | border-bottom: 1px solid white; 222 | } 223 | 224 | /** Fixture */ 225 | 226 | #qunit-fixture { 227 | position: absolute; 228 | top: -10000px; 229 | left: -10000px; 230 | width: 1000px; 231 | height: 1000px; 232 | } 233 | -------------------------------------------------------------------------------- /src/markdown_toc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 1.1.1 = 1*100*100 + 1*100 + 1 3 | * 1.2.2 = 1*100*100 + 2*100 + 3 4 | * 5 | * 1 = 0*100 +1 6 | */ 7 | function encode_id_with_array(opts,arr) { 8 | var result = 0; 9 | for(var z = 0; z < arr.length; z++ ) { 10 | result += factor(opts, arr.length - z ,arr[z]); 11 | } 12 | 13 | return result; 14 | } 15 | 16 | 17 | /** 18 | * 1.1.1 = 1*100*100 + 1*100 + 1 19 | * 1.2.2 = 1*100*100 + 2*100 + 3 20 | * 21 | * 1 = 0*100 +1 22 | 23 | 1,1 = 100 24 | 25 | */ 26 | function get_parent_id_with_array(opts,arr) { 27 | var result_arr = []; 28 | 29 | for(var z = 0; z < arr.length; z++ ) { 30 | result_arr.push(arr[z]); 31 | } 32 | 33 | result_arr.pop(); 34 | 35 | var result = 0; 36 | for(var z = 0; z < result_arr.length; z++ ) { 37 | result += factor(opts,result_arr.length - z,result_arr[z]); 38 | } 39 | 40 | return result; 41 | } 42 | 43 | function factor(opts ,count,current) { 44 | if(1 == count) { 45 | return current; 46 | } 47 | 48 | var str = ''; 49 | for(var i = count - 1;i > 0; i-- ) { 50 | str += current * opts.step+'*'; 51 | } 52 | 53 | return eval( str + '1' ); 54 | } 55 | 56 | ;(function($) { 57 | /* 58 | * 根据header创建目录内容 59 | */ 60 | function create_toc(opts) { 61 | $(opts.documment_selector).find(':header').each(function() { 62 | var level = parseInt(this.nodeName.substring(1), 10); 63 | var origin_title = $.trim($(this).text()); 64 | 65 | _rename_header_content(opts,this,level); 66 | 67 | _add_header_node(opts,$(this),level,origin_title); 68 | });//end each 69 | } 70 | 71 | /* 72 | * 渲染header 73 | */ 74 | function render_with_headers(opts) { 75 | opts.render_before(opts); 76 | return compile_headers(opts); 77 | } 78 | 79 | /* 80 | * 渲染header 81 | */ 82 | function compile_headers(opts) { 83 | var result = opts._header_nodes; 84 | var html = ''; 85 | 86 | for(var i in result){ 87 | var item = result[i]; 88 | // compile with template 89 | html += opts.compile_headers_with_item(item); 90 | } 91 | 92 | opts.render_after(opts, html); 93 | return html; 94 | } 95 | 96 | 97 | /* 98 | * 将已有header编号，并重命名 99 | */ 100 | function _rename_header_content(opts ,header_obj ,level) { 101 | if(opts._headers.length == level) { 102 | opts._headers[level - 1]++; 103 | } else if(opts._headers.length > level) { 104 | opts._headers = opts._headers.slice(0, level); 105 | opts._headers[level - 1] ++; 106 | } else if(opts._headers.length < level) { 107 | for(var i = 0; i < (level - opts._headers.length); i++) { 108 | // console.log('push 1'); 109 | opts._headers.push(1); 110 | } 111 | } 112 | 113 | if(opts.is_auto_number == true) { 114 | //另存为的文件里会有编号，所以有编号的就不再重新替换 115 | if($(header_obj).text().indexOf( opts._headers.join('.') ) != -1){ 116 | 117 | }else{ 118 | $(header_obj).text(opts._headers.join('.') + '. ' + $(header_obj).text()); 119 | } 120 | } 121 | } 122 | 123 | /* 124 | * create table with head for anchor for example:

    Linux基础

    125 | * this method can get a headable anchor 126 | * add by https://github.com/chanble 127 | */ 128 | function _get_anchor_from_head(header_obj){ 129 | var name = header_obj.html(); 130 | var aname = name.split('.'); 131 | var anchor = aname.pop().trim(); 132 | return anchor; 133 | } 134 | 135 | /* 136 | * 给ztree用的header_nodes增加数据 137 | */ 138 | function _add_header_node(opts ,header_obj, level, origin_title) { 139 | var id = encode_id_with_array(opts,opts._headers);//for ztree 140 | var pid = get_parent_id_with_array(opts,opts._headers);//for ztree 141 | var anchor = id;//use_head_anchor.html#第二部分 142 | 143 | // 默认使用标题作为anchor 144 | if(opts.use_head_anchor == true){ 145 | anchor = _get_anchor_from_head(header_obj); 146 | } 147 | 148 | // 设置锚点id 149 | $(header_obj).attr('id',anchor); 150 | 151 | log($(header_obj).text()); 152 | 153 | opts._header_offsets.push($(header_obj).offset().top - opts.highlight_offset); 154 | 155 | log('h offset ='+( $(header_obj).offset().top - opts.highlight_offset ) ); 156 | 157 | opts._header_nodes.push({ 158 | id : id, 159 | level : level, 160 | pId : pid , 161 | orderd_title : $(header_obj).text()||'null', 162 | origin_title: origin_title, 163 | open : true, 164 | url : '#'+ anchor, 165 | target : '_self' 166 | }); 167 | } 168 | 169 | /* 170 | * 根据滚动确定当前位置，并更新ztree 171 | */ 172 | function bind_scroll_event_and_update_postion(opts) { 173 | var timeout; 174 | var highlight_on_scroll = function(e) { 175 | if (timeout) { 176 | clearTimeout(timeout); 177 | } 178 | 179 | timeout = setTimeout(function() { 180 | var top = $(opts.scroll_selector).scrollTop(),highlighted; 181 | 182 | if(opts.debug) console.log('top='+top); 183 | 184 | for (var i = 0, c = opts._header_offsets.length; i < c; i++) { 185 | // fixed: top+5防止点击ztree的时候，出现向上抖动的情况 186 | if (opts._header_offsets[i] >= (top + 5) ) { 187 | console.log('opts._header_offsets['+ i +'] = '+opts._header_offsets[i]); 188 | $('a').removeClass('curSelectedNode'); 189 | 190 | // 由于有root节点，所以i应该从1开始 191 | var obj = $('#tree_' + (i+1) + '_a').addClass('curSelectedNode'); 192 | break; 193 | } 194 | } 195 | }, opts.refresh_scroll_time); 196 | }; 197 | 198 | if (opts.highlight_on_scroll) { 199 | $(opts.scroll_selector).bind('scroll', highlight_on_scroll); 200 | highlight_on_scroll(); 201 | } 202 | } 203 | /* 204 | * 初始化中间件 205 | */ 206 | function init_with_middlewares(opts){ 207 | var middlewares = opts.middlewares; 208 | for(o in middlewares){ 209 | middlewares[o](opts); 210 | } 211 | } 212 | 213 | /* 214 | * 初始化 215 | */ 216 | function init_with_config(opts) { 217 | opts.highlight_offset = $(opts.documment_selector).offset().top; 218 | } 219 | 220 | /* 221 | * 日志 222 | */ 223 | function log(str) { 224 | if($.fn.markdown_toc.defaults.debug == true) { 225 | console.log(str); 226 | } 227 | } 228 | 229 | $.fn.markdown_toc = function(options) { 230 | // 将defaults 和 options 参数合并到{} 231 | var opts = $.extend({},$.fn.markdown_toc.defaults,options); 232 | 233 | return this.each(function() { 234 | opts._zTree = $(this); 235 | 236 | // 初始化 237 | init_with_config(opts); 238 | 239 | // 初始化middlewares 240 | init_with_middlewares(opts); 241 | 242 | // 创建table of content，获取元数据_headers 243 | create_toc(opts); 244 | 245 | // 根据_headers生成ztree 246 | render_with_headers(opts); 247 | 248 | // 根据滚动确定当前位置，并更新ztree 249 | // bind_scroll_event_and_update_postion(opts); 250 | }); 251 | // each end 252 | } 253 | 254 | //定义默认 255 | $.fn.markdown_toc.defaults = { 256 | _zTree: null, 257 | _headers: [], 258 | _header_offsets: [], 259 | _header_nodes: [{ id:1, pId:0, orderd_title:"Table of Content",open:true}], 260 | debug: false, 261 | /* 262 | * 使用标题作为anchor 263 | * create table with head for anchor for example:

    Linux基础

    264 | * 如果标题是唯一的，建议开启此选项，如果标题不唯一，还是使用数字吧 265 | * 此选项默认是false，不开启 266 | */ 267 | use_head_anchor: false, 268 | scroll_selector: 'window', 269 | highlight_offset: 0, 270 | highlight_on_scroll: true, 271 | /* 272 | * 计算滚动判断当前位置的时间，默认是50毫秒 273 | */ 274 | refresh_scroll_time: 50, 275 | documment_selector: 'body', 276 | render_before:function(opts){ 277 | 278 | }, 279 | render_after:function(opts,compiled_html){ 280 | $(opts._zTree).html(""); 281 | }, 282 | /* 283 | * 中间件 284 | */ 285 | middlewares:[ 286 | function(opts){ 287 | console.log('aaaaaa'); 288 | }, 289 | function(opts){ 290 | console.log('bbbbbb'); 291 | } 292 | ], 293 | /** 294 | {id: 2105 ,level:1,orderd_title: "21.5. 三部分的关系",origin_title:"三部分的关系", open: true, pId: 21 ,target: "_self", url: "#2105"} 295 | 296 | function compile_headers_with_item(item) { 297 | return "
  1. " + item.name + "
  2. " 298 | } 299 | **/ 300 | compile_headers_with_item:function(item){ 301 | return " " + item.orderd_title + "" 302 | }, 303 | /* 304 | * ztree的位置，默认是在上部 305 | */ 306 | is_posion_top: true, 307 | /* 308 | * 默认是否显示header编号 309 | */ 310 | is_auto_number: false, 311 | /* 312 | * 默认是否展开全部 313 | */ 314 | is_expand_all: true, 315 | /* 316 | * 是否对选中行，显示高亮效果 317 | */ 318 | is_highlight_selected_line: true, 319 | step: 100 320 | }; 321 | 322 | })(jQuery); 323 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /demo/lite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 29 | 30 | 31 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 49 | 588 | 589 |
    45 |
      46 | 47 |
    48 |     		50 | 51 |
    52 |

    移动web app

    53 | 54 |

    HTML5

    55 | 56 |

    CSS

    57 | 58 |

    JavaScript

    59 | 60 |

    基本语法

    61 |

    dsds

    62 |

    高级用法

    63 |

    dsds

    64 |
    65 |

    第二部分

    66 | 67 |

    hello world

    68 | 69 |

    第三部分

    70 | 71 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    72 | 73 |

    解释一下什么是移动web应用开发

    74 | 75 |

    为什么要用Hybird（混搭）呢？

    76 | 77 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    78 | 79 |
      80 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 81 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 82 |
    • 开发效率高，易于掌握
      • 83 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 84 |
    85 | 86 |

    整体架构

    87 | 88 |

    Webview 和 native代码如何交互

    89 | 90 | 91 |

    三部分的关系

    92 | 93 |

    你一定要清楚【技术栈】

    94 | 95 |

    界面UI展现

    96 | 
    - html5 + css3 （界面UI展现）
 97 |
    98 |

    界面上的各种动态效果

    99 | 
    - js           （各种动态效果）
100 |
    101 |

    与服务器通信

    102 | 
    - ajax         （与服务器通信）
103 |
    104 |

    移动webapp和OS之间的桥梁：phonegap

    105 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
106 |
    107 |

    移动端特点

    108 | 109 |
      110 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 111 |
    • viewport？
      • 112 |
    • 真的不用兼容浏览器么？
      • 113 |
    • 适配屏幕（？响应式布局）
      • 114 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 115 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 116 |
    117 | 118 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    119 |

    移动web app

    120 | 121 |

    HTML5

    122 | 123 |

    CSS

    124 | 125 |

    JavaScript

    126 | 127 |

    基本语法

    128 |

    dsds

    129 |

    高级用法

    130 |

    dsds

    131 | 132 |

    第二部分

    133 | 134 |

    hello world

    135 | 136 |

    第三部分

    137 | 138 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    139 | 140 |

    解释一下什么是移动web应用开发

    141 | 142 |

    为什么要用Hybird（混搭）呢？

    143 | 144 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    145 | 146 |
      147 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 148 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 149 |
    • 开发效率高，易于掌握
      • 150 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 151 |
    152 | 153 |

    整体架构

    154 | 155 |

    Webview 和 native代码如何交互

    156 | 157 | 158 |

    三部分的关系

    159 | 160 |

    你一定要清楚【技术栈】

    161 | 162 |

    界面UI展现

    163 | 
    - html5 + css3 （界面UI展现）
164 |
    165 |

    界面上的各种动态效果

    166 | 
    - js           （各种动态效果）
167 |
    168 |

    与服务器通信

    169 | 
    - ajax         （与服务器通信）
170 |
    171 |

    移动webapp和OS之间的桥梁：phonegap

    172 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
173 |
    174 |

    移动端特点

    175 | 176 |
      177 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 178 |
    • viewport？
      • 179 |
    • 真的不用兼容浏览器么？
      • 180 |
    • 适配屏幕（？响应式布局）
      • 181 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 182 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 183 |
    184 | 185 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    186 |

    移动web app

    187 | 188 |

    HTML5

    189 | 190 |

    CSS

    191 | 192 |

    JavaScript

    193 | 194 |

    基本语法

    195 |

    dsds

    196 |

    高级用法

    197 |

    dsds

    198 | 199 |

    第二部分

    200 | 201 |

    hello world

    202 | 203 |

    第三部分

    204 | 205 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    206 | 207 |

    解释一下什么是移动web应用开发

    208 | 209 |

    为什么要用Hybird（混搭）呢？

    210 | 211 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    212 | 213 |
      214 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 215 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 216 |
    • 开发效率高，易于掌握
      • 217 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 218 |
    219 | 220 |

    整体架构

    221 | 222 |

    Webview 和 native代码如何交互

    223 | 224 | 225 |

    三部分的关系

    226 | 227 |

    你一定要清楚【技术栈】

    228 | 229 |

    界面UI展现

    230 | 
    - html5 + css3 （界面UI展现）
231 |
    232 |

    界面上的各种动态效果

    233 | 
    - js           （各种动态效果）
234 |
    235 |

    与服务器通信

    236 | 
    - ajax         （与服务器通信）
237 |
    238 |

    移动webapp和OS之间的桥梁：phonegap

    239 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
240 |
    241 |

    移动端特点

    242 | 243 |
      244 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 245 |
    • viewport？
      • 246 |
    • 真的不用兼容浏览器么？
      • 247 |
    • 适配屏幕（？响应式布局）
      • 248 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 249 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 250 |
    251 | 252 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    253 |

    移动web app

    254 | 255 |

    HTML5

    256 | 257 |

    CSS

    258 | 259 |

    JavaScript

    260 | 261 |

    基本语法

    262 |

    dsds

    263 |

    高级用法

    264 |

    dsds

    265 | 266 |

    第二部分

    267 | 268 |

    hello world

    269 | 270 |

    第三部分

    271 | 272 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    273 | 274 |

    解释一下什么是移动web应用开发

    275 | 276 |

    为什么要用Hybird（混搭）呢？

    277 | 278 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    279 | 280 |
      281 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 282 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 283 |
    • 开发效率高，易于掌握
      • 284 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 285 |
    286 | 287 |

    整体架构

    288 | 289 |

    Webview 和 native代码如何交互

    290 | 291 | 292 |

    三部分的关系

    293 | 294 |

    你一定要清楚【技术栈】

    295 | 296 |

    界面UI展现

    297 | 
    - html5 + css3 （界面UI展现）
298 |
    299 |

    界面上的各种动态效果

    300 | 
    - js           （各种动态效果）
301 |
    302 |

    与服务器通信

    303 | 
    - ajax         （与服务器通信）
304 |
    305 |

    移动webapp和OS之间的桥梁：phonegap

    306 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
307 |
    308 |

    移动端特点

    309 | 310 |
      311 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 312 |
    • viewport？
      • 313 |
    • 真的不用兼容浏览器么？
      • 314 |
    • 适配屏幕（？响应式布局）
      • 315 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 316 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 317 |
    318 | 319 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    320 |

    移动web app

    321 |

    HTML5

    322 | 323 |

    CSS

    324 | 325 |

    JavaScript

    326 | 327 |

    基本语法

    328 |

    dsds

    329 |

    高级用法

    330 |

    dsds

    331 | 332 |

    第二部分

    333 | 334 |

    hello world

    335 | 336 |

    第三部分

    337 | 338 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    339 | 340 |

    解释一下什么是移动web应用开发

    341 | 342 |

    为什么要用Hybird（混搭）呢？

    343 | 344 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    345 | 346 |
      347 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 348 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 349 |
    • 开发效率高，易于掌握
      • 350 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 351 |
    352 | 353 |

    整体架构

    354 | 355 |

    Webview 和 native代码如何交互

    356 | 357 | 358 |

    三部分的关系

    359 | 360 |

    你一定要清楚【技术栈】

    361 | 362 |

    界面UI展现

    363 | 
    - html5 + css3 （界面UI展现）
364 |
    365 |

    界面上的各种动态效果

    366 | 
    - js           （各种动态效果）
367 |
    368 |

    与服务器通信

    369 | 
    - ajax         （与服务器通信）
370 |
    371 |

    移动webapp和OS之间的桥梁：phonegap

    372 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
373 |
    374 |

    移动端特点

    375 | 376 |
      377 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 378 |
    • viewport？
      • 379 |
    • 真的不用兼容浏览器么？
      • 380 |
    • 适配屏幕（？响应式布局）
      • 381 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 382 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 383 |
    384 | 385 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    386 |

    移动web app

    387 | 388 |

    HTML5

    389 | 390 |

    CSS

    391 | 392 |

    JavaScript

    393 | 394 |

    基本语法

    395 |

    dsds

    396 |

    高级用法

    397 |

    dsds

    398 | 399 |

    第二部分

    400 | 401 |

    hello world

    402 | 403 |

    第三部分

    404 | 405 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    406 | 407 |

    解释一下什么是移动web应用开发

    408 | 409 |

    为什么要用Hybird（混搭）呢？

    410 | 411 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    412 | 413 |
      414 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 415 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 416 |
    • 开发效率高，易于掌握
      • 417 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 418 |
    419 | 420 |

    整体架构

    421 | 422 |

    Webview 和 native代码如何交互

    423 | 424 | 425 |

    三部分的关系

    426 | 427 |

    你一定要清楚【技术栈】

    428 | 429 |

    界面UI展现

    430 | 
    - html5 + css3 （界面UI展现）
431 |
    432 |

    界面上的各种动态效果

    433 | 
    - js           （各种动态效果）
434 |
    435 |

    与服务器通信

    436 | 
    - ajax         （与服务器通信）
437 |
    438 |

    移动webapp和OS之间的桥梁：phonegap

    439 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
440 |
    441 |

    移动端特点

    442 | 443 |
      444 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 445 |
    • viewport？
      • 446 |
    • 真的不用兼容浏览器么？
      • 447 |
    • 适配屏幕（？响应式布局）
      • 448 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 449 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 450 |
    451 | 452 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    453 |

    移动web app

    454 | 455 |

    HTML5

    456 | 457 |

    CSS

    458 | 459 |

    JavaScript

    460 | 461 |

    基本语法

    462 |

    dsds

    463 |

    高级用法

    464 |

    dsds

    465 | 466 |

    第二部分

    467 | 468 |

    hello world

    469 | 470 |

    第三部分

    471 | 472 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    473 | 474 |

    解释一下什么是移动web应用开发

    475 | 476 |

    为什么要用Hybird（混搭）呢？

    477 | 478 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    479 | 480 |
      481 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 482 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 483 |
    • 开发效率高，易于掌握
      • 484 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 485 |
    486 | 487 |

    整体架构

    488 | 489 |

    Webview 和 native代码如何交互

    490 | 491 | 492 |

    三部分的关系

    493 | 494 |

    你一定要清楚【技术栈】

    495 | 496 |

    界面UI展现

    497 | 
    - html5 + css3 （界面UI展现）
498 |
    499 |

    界面上的各种动态效果

    500 | 
    - js           （各种动态效果）
501 |
    502 |

    与服务器通信

    503 | 
    - ajax         （与服务器通信）
504 |
    505 |

    移动webapp和OS之间的桥梁：phonegap

    506 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
507 |
    508 |

    移动端特点

    509 | 510 |
      511 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 512 |
    • viewport？
      • 513 |
    • 真的不用兼容浏览器么？
      • 514 |
    • 适配屏幕（？响应式布局）
      • 515 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 516 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 517 |
    518 | 519 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    520 |

    移动web app

    521 | 522 |

    HTML5

    523 | 524 |

    CSS

    525 | 526 |

    JavaScript

    527 | 528 |

    基本语法

    529 |

    dsds

    530 |

    高级用法

    531 |

    dsds

    532 | 533 |

    第二部分

    534 | 535 |

    hello world

    536 | 537 |

    第三部分

    538 | 539 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    540 | 541 |

    解释一下什么是移动web应用开发

    542 | 543 |

    为什么要用Hybird（混搭）呢？

    544 | 545 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    546 | 547 |
      548 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 549 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 550 |
    • 开发效率高，易于掌握
      • 551 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 552 |
    553 | 554 |

    整体架构

    555 | 556 |

    Webview 和 native代码如何交互

    557 | 558 | 559 |

    三部分的关系

    560 | 561 |

    你一定要清楚【技术栈】

    562 | 563 |

    界面UI展现

    564 | 
    - html5 + css3 （界面UI展现）
565 |
    566 |

    界面上的各种动态效果

    567 | 
    - js           （各种动态效果）
568 |
    569 |

    与服务器通信

    570 | 
    - ajax         （与服务器通信）
571 |
    572 |

    移动webapp和OS之间的桥梁：phonegap

    573 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
574 |
    575 |

    移动端特点

    576 | 577 |
      578 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 579 |
    • viewport？
      • 580 |
    • 真的不用兼容浏览器么？
      • 581 |
    • 适配屏幕（？响应式布局）
      • 582 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 583 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 584 |
    585 | 586 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    587 |
    590 | 591 | 592 | 593 | -------------------------------------------------------------------------------- /demo/lite/index_custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 29 | 30 | 31 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 52 | 591 | 592 |
    48 |
      49 | 50 |
    51 |     		53 | 54 |
    55 |

    移动web app

    56 | 57 |

    HTML5

    58 | 59 |

    CSS

    60 | 61 |

    JavaScript

    62 | 63 |

    基本语法

    64 |

    dsds

    65 |

    高级用法

    66 |

    dsds

    67 |
    68 |

    第二部分

    69 | 70 |

    hello world

    71 | 72 |

    第三部分

    73 | 74 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    75 | 76 |

    解释一下什么是移动web应用开发

    77 | 78 |

    为什么要用Hybird（混搭）呢？

    79 | 80 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    81 | 82 |
      83 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 84 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 85 |
    • 开发效率高，易于掌握
      • 86 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 87 |
    88 | 89 |

    整体架构

    90 | 91 |

    Webview 和 native代码如何交互

    92 | 93 | 94 |

    三部分的关系

    95 | 96 |

    你一定要清楚【技术栈】

    97 | 98 |

    界面UI展现

    99 | 
    - html5 + css3 （界面UI展现）
100 |
    101 |

    界面上的各种动态效果

    102 | 
    - js           （各种动态效果）
103 |
    104 |

    与服务器通信

    105 | 
    - ajax         （与服务器通信）
106 |
    107 |

    移动webapp和OS之间的桥梁：phonegap

    108 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
109 |
    110 |

    移动端特点

    111 | 112 |
      113 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 114 |
    • viewport？
      • 115 |
    • 真的不用兼容浏览器么？
      • 116 |
    • 适配屏幕（？响应式布局）
      • 117 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 118 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 119 |
    120 | 121 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    122 |

    移动web app

    123 | 124 |

    HTML5

    125 | 126 |

    CSS

    127 | 128 |

    JavaScript

    129 | 130 |

    基本语法

    131 |

    dsds

    132 |

    高级用法

    133 |

    dsds

    134 | 135 |

    第二部分

    136 | 137 |

    hello world

    138 | 139 |

    第三部分

    140 | 141 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    142 | 143 |

    解释一下什么是移动web应用开发

    144 | 145 |

    为什么要用Hybird（混搭）呢？

    146 | 147 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    148 | 149 |
      150 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 151 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 152 |
    • 开发效率高，易于掌握
      • 153 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 154 |
    155 | 156 |

    整体架构

    157 | 158 |

    Webview 和 native代码如何交互

    159 | 160 | 161 |

    三部分的关系

    162 | 163 |

    你一定要清楚【技术栈】

    164 | 165 |

    界面UI展现

    166 | 
    - html5 + css3 （界面UI展现）
167 |
    168 |

    界面上的各种动态效果

    169 | 
    - js           （各种动态效果）
170 |
    171 |

    与服务器通信

    172 | 
    - ajax         （与服务器通信）
173 |
    174 |

    移动webapp和OS之间的桥梁：phonegap

    175 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
176 |
    177 |

    移动端特点

    178 | 179 |
      180 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 181 |
    • viewport？
      • 182 |
    • 真的不用兼容浏览器么？
      • 183 |
    • 适配屏幕（？响应式布局）
      • 184 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 185 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 186 |
    187 | 188 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    189 |

    移动web app

    190 | 191 |

    HTML5

    192 | 193 |

    CSS

    194 | 195 |

    JavaScript

    196 | 197 |

    基本语法

    198 |

    dsds

    199 |

    高级用法

    200 |

    dsds

    201 | 202 |

    第二部分

    203 | 204 |

    hello world

    205 | 206 |

    第三部分

    207 | 208 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    209 | 210 |

    解释一下什么是移动web应用开发

    211 | 212 |

    为什么要用Hybird（混搭）呢？

    213 | 214 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    215 | 216 |
      217 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 218 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 219 |
    • 开发效率高，易于掌握
      • 220 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 221 |
    222 | 223 |

    整体架构

    224 | 225 |

    Webview 和 native代码如何交互

    226 | 227 | 228 |

    三部分的关系

    229 | 230 |

    你一定要清楚【技术栈】

    231 | 232 |

    界面UI展现

    233 | 
    - html5 + css3 （界面UI展现）
234 |
    235 |

    界面上的各种动态效果

    236 | 
    - js           （各种动态效果）
237 |
    238 |

    与服务器通信

    239 | 
    - ajax         （与服务器通信）
240 |
    241 |

    移动webapp和OS之间的桥梁：phonegap

    242 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
243 |
    244 |

    移动端特点

    245 | 246 |
      247 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 248 |
    • viewport？
      • 249 |
    • 真的不用兼容浏览器么？
      • 250 |
    • 适配屏幕（？响应式布局）
      • 251 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 252 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 253 |
    254 | 255 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    256 |

    移动web app

    257 | 258 |

    HTML5

    259 | 260 |

    CSS

    261 | 262 |

    JavaScript

    263 | 264 |

    基本语法

    265 |

    dsds

    266 |

    高级用法

    267 |

    dsds

    268 | 269 |

    第二部分

    270 | 271 |

    hello world

    272 | 273 |

    第三部分

    274 | 275 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    276 | 277 |

    解释一下什么是移动web应用开发

    278 | 279 |

    为什么要用Hybird（混搭）呢？

    280 | 281 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    282 | 283 |
      284 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 285 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 286 |
    • 开发效率高，易于掌握
      • 287 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 288 |
    289 | 290 |

    整体架构

    291 | 292 |

    Webview 和 native代码如何交互

    293 | 294 | 295 |

    三部分的关系

    296 | 297 |

    你一定要清楚【技术栈】

    298 | 299 |

    界面UI展现

    300 | 
    - html5 + css3 （界面UI展现）
301 |
    302 |

    界面上的各种动态效果

    303 | 
    - js           （各种动态效果）
304 |
    305 |

    与服务器通信

    306 | 
    - ajax         （与服务器通信）
307 |
    308 |

    移动webapp和OS之间的桥梁：phonegap

    309 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
310 |
    311 |

    移动端特点

    312 | 313 |
      314 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 315 |
    • viewport？
      • 316 |
    • 真的不用兼容浏览器么？
      • 317 |
    • 适配屏幕（？响应式布局）
      • 318 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 319 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 320 |
    321 | 322 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    323 |

    移动web app

    324 |

    HTML5

    325 | 326 |

    CSS

    327 | 328 |

    JavaScript

    329 | 330 |

    基本语法

    331 |

    dsds

    332 |

    高级用法

    333 |

    dsds

    334 | 335 |

    第二部分

    336 | 337 |

    hello world

    338 | 339 |

    第三部分

    340 | 341 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    342 | 343 |

    解释一下什么是移动web应用开发

    344 | 345 |

    为什么要用Hybird（混搭）呢？

    346 | 347 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    348 | 349 |
      350 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 351 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 352 |
    • 开发效率高，易于掌握
      • 353 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 354 |
    355 | 356 |

    整体架构

    357 | 358 |

    Webview 和 native代码如何交互

    359 | 360 | 361 |

    三部分的关系

    362 | 363 |

    你一定要清楚【技术栈】

    364 | 365 |

    界面UI展现

    366 | 
    - html5 + css3 （界面UI展现）
367 |
    368 |

    界面上的各种动态效果

    369 | 
    - js           （各种动态效果）
370 |
    371 |

    与服务器通信

    372 | 
    - ajax         （与服务器通信）
373 |
    374 |

    移动webapp和OS之间的桥梁：phonegap

    375 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
376 |
    377 |

    移动端特点

    378 | 379 |
      380 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 381 |
    • viewport？
      • 382 |
    • 真的不用兼容浏览器么？
      • 383 |
    • 适配屏幕（？响应式布局）
      • 384 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 385 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 386 |
    387 | 388 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    389 |

    移动web app

    390 | 391 |

    HTML5

    392 | 393 |

    CSS

    394 | 395 |

    JavaScript

    396 | 397 |

    基本语法

    398 |

    dsds

    399 |

    高级用法

    400 |

    dsds

    401 | 402 |

    第二部分

    403 | 404 |

    hello world

    405 | 406 |

    第三部分

    407 | 408 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    409 | 410 |

    解释一下什么是移动web应用开发

    411 | 412 |

    为什么要用Hybird（混搭）呢？

    413 | 414 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    415 | 416 |
      417 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 418 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 419 |
    • 开发效率高，易于掌握
      • 420 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 421 |
    422 | 423 |

    整体架构

    424 | 425 |

    Webview 和 native代码如何交互

    426 | 427 | 428 |

    三部分的关系

    429 | 430 |

    你一定要清楚【技术栈】

    431 | 432 |

    界面UI展现

    433 | 
    - html5 + css3 （界面UI展现）
434 |
    435 |

    界面上的各种动态效果

    436 | 
    - js           （各种动态效果）
437 |
    438 |

    与服务器通信

    439 | 
    - ajax         （与服务器通信）
440 |
    441 |

    移动webapp和OS之间的桥梁：phonegap

    442 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
443 |
    444 |

    移动端特点

    445 | 446 |
      447 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 448 |
    • viewport？
      • 449 |
    • 真的不用兼容浏览器么？
      • 450 |
    • 适配屏幕（？响应式布局）
      • 451 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 452 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 453 |
    454 | 455 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    456 |

    移动web app

    457 | 458 |

    HTML5

    459 | 460 |

    CSS

    461 | 462 |

    JavaScript

    463 | 464 |

    基本语法

    465 |

    dsds

    466 |

    高级用法

    467 |

    dsds

    468 | 469 |

    第二部分

    470 | 471 |

    hello world

    472 | 473 |

    第三部分

    474 | 475 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    476 | 477 |

    解释一下什么是移动web应用开发

    478 | 479 |

    为什么要用Hybird（混搭）呢？

    480 | 481 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    482 | 483 |
      484 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 485 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 486 |
    • 开发效率高，易于掌握
      • 487 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 488 |
    489 | 490 |

    整体架构

    491 | 492 |

    Webview 和 native代码如何交互

    493 | 494 | 495 |

    三部分的关系

    496 | 497 |

    你一定要清楚【技术栈】

    498 | 499 |

    界面UI展现

    500 | 
    - html5 + css3 （界面UI展现）
501 |
    502 |

    界面上的各种动态效果

    503 | 
    - js           （各种动态效果）
504 |
    505 |

    与服务器通信

    506 | 
    - ajax         （与服务器通信）
507 |
    508 |

    移动webapp和OS之间的桥梁：phonegap

    509 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
510 |
    511 |

    移动端特点

    512 | 513 |
      514 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 515 |
    • viewport？
      • 516 |
    • 真的不用兼容浏览器么？
      • 517 |
    • 适配屏幕（？响应式布局）
      • 518 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 519 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 520 |
    521 | 522 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    523 |

    移动web app

    524 | 525 |

    HTML5

    526 | 527 |

    CSS

    528 | 529 |

    JavaScript

    530 | 531 |

    基本语法

    532 |

    dsds

    533 |

    高级用法

    534 |

    dsds

    535 | 536 |

    第二部分

    537 | 538 |

    hello world

    539 | 540 |

    第三部分

    541 | 542 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    543 | 544 |

    解释一下什么是移动web应用开发

    545 | 546 |

    为什么要用Hybird（混搭）呢？

    547 | 548 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    549 | 550 |
      551 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 552 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 553 |
    • 开发效率高，易于掌握
      • 554 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 555 |
    556 | 557 |

    整体架构

    558 | 559 |

    Webview 和 native代码如何交互

    560 | 561 | 562 |

    三部分的关系

    563 | 564 |

    你一定要清楚【技术栈】

    565 | 566 |

    界面UI展现

    567 | 
    - html5 + css3 （界面UI展现）
568 |
    569 |

    界面上的各种动态效果

    570 | 
    - js           （各种动态效果）
571 |
    572 |

    与服务器通信

    573 | 
    - ajax         （与服务器通信）
574 |
    575 |

    移动webapp和OS之间的桥梁：phonegap

    576 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
577 |
    578 |

    移动端特点

    579 | 580 |
      581 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 582 |
    • viewport？
      • 583 |
    • 真的不用兼容浏览器么？
      • 584 |
    • 适配屏幕（？响应式布局）
      • 585 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 586 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 587 |
    588 | 589 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    590 |
    593 | 594 | 595 | 596 | -------------------------------------------------------------------------------- /demo/lite/index_oschina.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 27 | 28 | 29 | 30 | 31 | 58 | 59 | 60 | 61 | 62 | 63 | 66 |
    67 |

    移动web app

    68 | 69 |

    HTML5

    70 | 71 |

    CSS

    72 | 73 |

    JavaScript

    74 | 75 |

    基本语法

    76 |

    dsds

    77 |

    高级用法

    78 |

    dsds

    79 |
    80 |

    第二部分

    81 | 82 |

    hello world

    83 | 84 |

    第三部分

    85 | 86 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    87 | 88 |

    解释一下什么是移动web应用开发

    89 | 90 |

    为什么要用Hybird（混搭）呢？

    91 | 92 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    93 | 94 | 100 | 101 |

    整体架构

    102 | 103 |

    Webview 和 native代码如何交互

    104 | 105 | 106 |

    三部分的关系

    107 | 108 |

    你一定要清楚【技术栈】

    109 | 110 |

    界面UI展现

    111 | 
    - html5 + css3 （界面UI展现）
112 |
    113 |

    界面上的各种动态效果

    114 | 
    - js           （各种动态效果）
115 |
    116 |

    与服务器通信

    117 | 
    - ajax         （与服务器通信）
118 |
    119 |

    移动webapp和OS之间的桥梁：phonegap

    120 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
121 |
    122 |

    移动端特点

    123 | 124 | 132 | 133 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    134 |

    移动web app

    135 | 136 |

    HTML5

    137 | 138 |

    CSS

    139 | 140 |

    JavaScript

    141 | 142 |

    基本语法

    143 |

    dsds

    144 |

    高级用法

    145 |

    dsds

    146 | 147 |

    第二部分

    148 | 149 |

    hello world

    150 | 151 |

    第三部分

    152 | 153 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    154 | 155 |

    解释一下什么是移动web应用开发

    156 | 157 |

    为什么要用Hybird（混搭）呢？

    158 | 159 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    160 | 161 | 167 | 168 |

    整体架构

    169 | 170 |

    Webview 和 native代码如何交互

    171 | 172 | 173 |

    三部分的关系

    174 | 175 |

    你一定要清楚【技术栈】

    176 | 177 |

    界面UI展现

    178 | 
    - html5 + css3 （界面UI展现）
179 |
    180 |

    界面上的各种动态效果

    181 | 
    - js           （各种动态效果）
182 |
    183 |

    与服务器通信

    184 | 
    - ajax         （与服务器通信）
185 |
    186 |

    移动webapp和OS之间的桥梁：phonegap

    187 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
188 |
    189 |

    移动端特点

    190 | 191 | 199 | 200 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    201 |

    移动web app

    202 | 203 |

    HTML5

    204 | 205 |

    CSS

    206 | 207 |

    JavaScript

    208 | 209 |

    基本语法

    210 |

    dsds

    211 |

    高级用法

    212 |

    dsds

    213 | 214 |

    第二部分

    215 | 216 |

    hello world

    217 | 218 |

    第三部分

    219 | 220 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    221 | 222 |

    解释一下什么是移动web应用开发

    223 | 224 |

    为什么要用Hybird（混搭）呢？

    225 | 226 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    227 | 228 | 234 | 235 |

    整体架构

    236 | 237 |

    Webview 和 native代码如何交互

    238 | 239 | 240 |

    三部分的关系

    241 | 242 |

    你一定要清楚【技术栈】

    243 | 244 |

    界面UI展现

    245 | 
    - html5 + css3 （界面UI展现）
246 |
    247 |

    界面上的各种动态效果

    248 | 
    - js           （各种动态效果）
249 |
    250 |

    与服务器通信

    251 | 
    - ajax         （与服务器通信）
252 |
    253 |

    移动webapp和OS之间的桥梁：phonegap

    254 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
255 |
    256 |

    移动端特点

    257 | 258 | 266 | 267 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    268 |

    移动web app

    269 | 270 |

    HTML5

    271 | 272 |

    CSS

    273 | 274 |

    JavaScript

    275 | 276 |

    基本语法

    277 |

    dsds

    278 |

    高级用法

    279 |

    dsds

    280 | 281 |

    第二部分

    282 | 283 |

    hello world

    284 | 285 |

    第三部分

    286 | 287 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    288 | 289 |

    解释一下什么是移动web应用开发

    290 | 291 |

    为什么要用Hybird（混搭）呢？

    292 | 293 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    294 | 295 | 301 | 302 |

    整体架构

    303 | 304 |

    Webview 和 native代码如何交互

    305 | 306 | 307 |

    三部分的关系

    308 | 309 |

    你一定要清楚【技术栈】

    310 | 311 |

    界面UI展现

    312 | 
    - html5 + css3 （界面UI展现）
313 |
    314 |

    界面上的各种动态效果

    315 | 
    - js           （各种动态效果）
316 |
    317 |

    与服务器通信

    318 | 
    - ajax         （与服务器通信）
319 |
    320 |

    移动webapp和OS之间的桥梁：phonegap

    321 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
322 |
    323 |

    移动端特点

    324 | 325 | 333 | 334 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    335 |

    移动web app

    336 |

    HTML5

    337 | 338 |

    CSS

    339 | 340 |

    JavaScript

    341 | 342 |

    基本语法

    343 |

    dsds

    344 |

    高级用法

    345 |

    dsds

    346 | 347 |

    第二部分

    348 | 349 |

    hello world

    350 | 351 |

    第三部分

    352 | 353 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    354 | 355 |

    解释一下什么是移动web应用开发

    356 | 357 |

    为什么要用Hybird（混搭）呢？

    358 | 359 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    360 | 361 | 367 | 368 |

    整体架构

    369 | 370 |

    Webview 和 native代码如何交互

    371 | 372 | 373 |

    三部分的关系

    374 | 375 |

    你一定要清楚【技术栈】

    376 | 377 |

    界面UI展现

    378 | 
    - html5 + css3 （界面UI展现）
379 |
    380 |

    界面上的各种动态效果

    381 | 
    - js           （各种动态效果）
382 |
    383 |

    与服务器通信

    384 | 
    - ajax         （与服务器通信）
385 |
    386 |

    移动webapp和OS之间的桥梁：phonegap

    387 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
388 |
    389 |

    移动端特点

    390 | 391 | 399 | 400 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    401 |

    移动web app

    402 | 403 |

    HTML5

    404 | 405 |

    CSS

    406 | 407 |

    JavaScript

    408 | 409 |

    基本语法

    410 |

    dsds

    411 |

    高级用法

    412 |

    dsds

    413 | 414 |

    第二部分

    415 | 416 |

    hello world

    417 | 418 |

    第三部分

    419 | 420 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    421 | 422 |

    解释一下什么是移动web应用开发

    423 | 424 |

    为什么要用Hybird（混搭）呢？

    425 | 426 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    427 | 428 | 434 | 435 |

    整体架构

    436 | 437 |

    Webview 和 native代码如何交互

    438 | 439 | 440 |

    三部分的关系

    441 | 442 |

    你一定要清楚【技术栈】

    443 | 444 |

    界面UI展现

    445 | 
    - html5 + css3 （界面UI展现）
446 |
    447 |

    界面上的各种动态效果

    448 | 
    - js           （各种动态效果）
449 |
    450 |

    与服务器通信

    451 | 
    - ajax         （与服务器通信）
452 |
    453 |

    移动webapp和OS之间的桥梁：phonegap

    454 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
455 |
    456 |

    移动端特点

    457 | 458 | 466 | 467 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    468 |

    移动web app

    469 | 470 |

    HTML5

    471 | 472 |

    CSS

    473 | 474 |

    JavaScript

    475 | 476 |

    基本语法

    477 |

    dsds

    478 |

    高级用法

    479 |

    dsds

    480 | 481 |

    第二部分

    482 | 483 |

    hello world

    484 | 485 |

    第三部分

    486 | 487 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    488 | 489 |

    解释一下什么是移动web应用开发

    490 | 491 |

    为什么要用Hybird（混搭）呢？

    492 | 493 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    494 | 495 | 501 | 502 |

    整体架构

    503 | 504 |

    Webview 和 native代码如何交互

    505 | 506 | 507 |

    三部分的关系

    508 | 509 |

    你一定要清楚【技术栈】

    510 | 511 |

    界面UI展现

    512 | 
    - html5 + css3 （界面UI展现）
513 |
    514 |

    界面上的各种动态效果

    515 | 
    - js           （各种动态效果）
516 |
    517 |

    与服务器通信

    518 | 
    - ajax         （与服务器通信）
519 |
    520 |

    移动webapp和OS之间的桥梁：phonegap

    521 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
522 |
    523 |

    移动端特点

    524 | 525 | 533 | 534 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    535 |

    移动web app

    536 | 537 |

    HTML5

    538 | 539 |

    CSS

    540 | 541 |

    JavaScript

    542 | 543 |

    基本语法

    544 |

    dsds

    545 |

    高级用法

    546 |

    dsds

    547 | 548 |

    第二部分

    549 | 550 |

    hello world

    551 | 552 |

    第三部分

    553 | 554 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    555 | 556 |

    解释一下什么是移动web应用开发

    557 | 558 |

    为什么要用Hybird（混搭）呢？

    559 | 560 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    561 | 562 | 568 | 569 |

    整体架构

    570 | 571 |

    Webview 和 native代码如何交互

    572 | 573 | 574 |

    三部分的关系

    575 | 576 |

    你一定要清楚【技术栈】

    577 | 578 |

    界面UI展现

    579 | 
    - html5 + css3 （界面UI展现）
580 |
    581 |

    界面上的各种动态效果

    582 | 
    - js           （各种动态效果）
583 |
    584 |

    与服务器通信

    585 | 
    - ajax         （与服务器通信）
586 |
    587 |

    移动webapp和OS之间的桥梁：phonegap

    588 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
589 |
    590 |

    移动端特点

    591 | 592 | 600 | 601 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    602 | 603 | 604 | 605 | 606 | -------------------------------------------------------------------------------- /demo/lite/index_oschina_left.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 7 | 29 | 30 | 31 | 32 | 33 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 74 | 613 | 614 |
    69 |
    70 | 71 |
    72 | 73 |     		75 | 76 |
    77 |

    移动web app

    78 | 79 |

    HTML5

    80 | 81 |

    CSS

    82 | 83 |

    JavaScript

    84 | 85 |

    基本语法

    86 |

    dsds

    87 |

    高级用法

    88 |

    dsds

    89 |
    90 |

    第二部分

    91 | 92 |

    hello world

    93 | 94 |

    第三部分

    95 | 96 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    97 | 98 |

    解释一下什么是移动web应用开发

    99 | 100 |

    为什么要用Hybird（混搭）呢？

    101 | 102 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    103 | 104 |
      105 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 106 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 107 |
    • 开发效率高，易于掌握
      • 108 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 109 |
    110 | 111 |

    整体架构

    112 | 113 |

    Webview 和 native代码如何交互

    114 | 115 | 116 |

    三部分的关系

    117 | 118 |

    你一定要清楚【技术栈】

    119 | 120 |

    界面UI展现

    121 | 
    - html5 + css3 （界面UI展现）
122 |
    123 |

    界面上的各种动态效果

    124 | 
    - js           （各种动态效果）
125 |
    126 |

    与服务器通信

    127 | 
    - ajax         （与服务器通信）
128 |
    129 |

    移动webapp和OS之间的桥梁：phonegap

    130 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
131 |
    132 |

    移动端特点

    133 | 134 |
      135 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 136 |
    • viewport？
      • 137 |
    • 真的不用兼容浏览器么？
      • 138 |
    • 适配屏幕（？响应式布局）
      • 139 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 140 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 141 |
    142 | 143 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    144 |

    移动web app

    145 | 146 |

    HTML5

    147 | 148 |

    CSS

    149 | 150 |

    JavaScript

    151 | 152 |

    基本语法

    153 |

    dsds

    154 |

    高级用法

    155 |

    dsds

    156 | 157 |

    第二部分

    158 | 159 |

    hello world

    160 | 161 |

    第三部分

    162 | 163 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    164 | 165 |

    解释一下什么是移动web应用开发

    166 | 167 |

    为什么要用Hybird（混搭）呢？

    168 | 169 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    170 | 171 |
      172 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 173 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 174 |
    • 开发效率高，易于掌握
      • 175 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 176 |
    177 | 178 |

    整体架构

    179 | 180 |

    Webview 和 native代码如何交互

    181 | 182 | 183 |

    三部分的关系

    184 | 185 |

    你一定要清楚【技术栈】

    186 | 187 |

    界面UI展现

    188 | 
    - html5 + css3 （界面UI展现）
189 |
    190 |

    界面上的各种动态效果

    191 | 
    - js           （各种动态效果）
192 |
    193 |

    与服务器通信

    194 | 
    - ajax         （与服务器通信）
195 |
    196 |

    移动webapp和OS之间的桥梁：phonegap

    197 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
198 |
    199 |

    移动端特点

    200 | 201 |
      202 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 203 |
    • viewport？
      • 204 |
    • 真的不用兼容浏览器么？
      • 205 |
    • 适配屏幕（？响应式布局）
      • 206 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 207 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 208 |
    209 | 210 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    211 |

    移动web app

    212 | 213 |

    HTML5

    214 | 215 |

    CSS

    216 | 217 |

    JavaScript

    218 | 219 |

    基本语法

    220 |

    dsds

    221 |

    高级用法

    222 |

    dsds

    223 | 224 |

    第二部分

    225 | 226 |

    hello world

    227 | 228 |

    第三部分

    229 | 230 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    231 | 232 |

    解释一下什么是移动web应用开发

    233 | 234 |

    为什么要用Hybird（混搭）呢？

    235 | 236 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    237 | 238 |
      239 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 240 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 241 |
    • 开发效率高，易于掌握
      • 242 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 243 |
    244 | 245 |

    整体架构

    246 | 247 |

    Webview 和 native代码如何交互

    248 | 249 | 250 |

    三部分的关系

    251 | 252 |

    你一定要清楚【技术栈】

    253 | 254 |

    界面UI展现

    255 | 
    - html5 + css3 （界面UI展现）
256 |
    257 |

    界面上的各种动态效果

    258 | 
    - js           （各种动态效果）
259 |
    260 |

    与服务器通信

    261 | 
    - ajax         （与服务器通信）
262 |
    263 |

    移动webapp和OS之间的桥梁：phonegap

    264 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
265 |
    266 |

    移动端特点

    267 | 268 |
      269 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 270 |
    • viewport？
      • 271 |
    • 真的不用兼容浏览器么？
      • 272 |
    • 适配屏幕（？响应式布局）
      • 273 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 274 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 275 |
    276 | 277 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    278 |

    移动web app

    279 | 280 |

    HTML5

    281 | 282 |

    CSS

    283 | 284 |

    JavaScript

    285 | 286 |

    基本语法

    287 |

    dsds

    288 |

    高级用法

    289 |

    dsds

    290 | 291 |

    第二部分

    292 | 293 |

    hello world

    294 | 295 |

    第三部分

    296 | 297 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    298 | 299 |

    解释一下什么是移动web应用开发

    300 | 301 |

    为什么要用Hybird（混搭）呢？

    302 | 303 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    304 | 305 |
      306 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 307 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 308 |
    • 开发效率高，易于掌握
      • 309 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 310 |
    311 | 312 |

    整体架构

    313 | 314 |

    Webview 和 native代码如何交互

    315 | 316 | 317 |

    三部分的关系

    318 | 319 |

    你一定要清楚【技术栈】

    320 | 321 |

    界面UI展现

    322 | 
    - html5 + css3 （界面UI展现）
323 |
    324 |

    界面上的各种动态效果

    325 | 
    - js           （各种动态效果）
326 |
    327 |

    与服务器通信

    328 | 
    - ajax         （与服务器通信）
329 |
    330 |

    移动webapp和OS之间的桥梁：phonegap

    331 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
332 |
    333 |

    移动端特点

    334 | 335 |
      336 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 337 |
    • viewport？
      • 338 |
    • 真的不用兼容浏览器么？
      • 339 |
    • 适配屏幕（？响应式布局）
      • 340 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 341 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 342 |
    343 | 344 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    345 |

    移动web app

    346 |

    HTML5

    347 | 348 |

    CSS

    349 | 350 |

    JavaScript

    351 | 352 |

    基本语法

    353 |

    dsds

    354 |

    高级用法

    355 |

    dsds

    356 | 357 |

    第二部分

    358 | 359 |

    hello world

    360 | 361 |

    第三部分

    362 | 363 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    364 | 365 |

    解释一下什么是移动web应用开发

    366 | 367 |

    为什么要用Hybird（混搭）呢？

    368 | 369 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    370 | 371 |
      372 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 373 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 374 |
    • 开发效率高，易于掌握
      • 375 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 376 |
    377 | 378 |

    整体架构

    379 | 380 |

    Webview 和 native代码如何交互

    381 | 382 | 383 |

    三部分的关系

    384 | 385 |

    你一定要清楚【技术栈】

    386 | 387 |

    界面UI展现

    388 | 
    - html5 + css3 （界面UI展现）
389 |
    390 |

    界面上的各种动态效果

    391 | 
    - js           （各种动态效果）
392 |
    393 |

    与服务器通信

    394 | 
    - ajax         （与服务器通信）
395 |
    396 |

    移动webapp和OS之间的桥梁：phonegap

    397 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
398 |
    399 |

    移动端特点

    400 | 401 |
      402 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 403 |
    • viewport？
      • 404 |
    • 真的不用兼容浏览器么？
      • 405 |
    • 适配屏幕（？响应式布局）
      • 406 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 407 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 408 |
    409 | 410 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    411 |

    移动web app

    412 | 413 |

    HTML5

    414 | 415 |

    CSS

    416 | 417 |

    JavaScript

    418 | 419 |

    基本语法

    420 |

    dsds

    421 |

    高级用法

    422 |

    dsds

    423 | 424 |

    第二部分

    425 | 426 |

    hello world

    427 | 428 |

    第三部分

    429 | 430 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    431 | 432 |

    解释一下什么是移动web应用开发

    433 | 434 |

    为什么要用Hybird（混搭）呢？

    435 | 436 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    437 | 438 |
      439 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 440 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 441 |
    • 开发效率高，易于掌握
      • 442 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 443 |
    444 | 445 |

    整体架构

    446 | 447 |

    Webview 和 native代码如何交互

    448 | 449 | 450 |

    三部分的关系

    451 | 452 |

    你一定要清楚【技术栈】

    453 | 454 |

    界面UI展现

    455 | 
    - html5 + css3 （界面UI展现）
456 |
    457 |

    界面上的各种动态效果

    458 | 
    - js           （各种动态效果）
459 |
    460 |

    与服务器通信

    461 | 
    - ajax         （与服务器通信）
462 |
    463 |

    移动webapp和OS之间的桥梁：phonegap

    464 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
465 |
    466 |

    移动端特点

    467 | 468 |
      469 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 470 |
    • viewport？
      • 471 |
    • 真的不用兼容浏览器么？
      • 472 |
    • 适配屏幕（？响应式布局）
      • 473 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 474 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 475 |
    476 | 477 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    478 |

    移动web app

    479 | 480 |

    HTML5

    481 | 482 |

    CSS

    483 | 484 |

    JavaScript

    485 | 486 |

    基本语法

    487 |

    dsds

    488 |

    高级用法

    489 |

    dsds

    490 | 491 |

    第二部分

    492 | 493 |

    hello world

    494 | 495 |

    第三部分

    496 | 497 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    498 | 499 |

    解释一下什么是移动web应用开发

    500 | 501 |

    为什么要用Hybird（混搭）呢？

    502 | 503 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    504 | 505 |
      506 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 507 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 508 |
    • 开发效率高，易于掌握
      • 509 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 510 |
    511 | 512 |

    整体架构

    513 | 514 |

    Webview 和 native代码如何交互

    515 | 516 | 517 |

    三部分的关系

    518 | 519 |

    你一定要清楚【技术栈】

    520 | 521 |

    界面UI展现

    522 | 
    - html5 + css3 （界面UI展现）
523 |
    524 |

    界面上的各种动态效果

    525 | 
    - js           （各种动态效果）
526 |
    527 |

    与服务器通信

    528 | 
    - ajax         （与服务器通信）
529 |
    530 |

    移动webapp和OS之间的桥梁：phonegap

    531 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
532 |
    533 |

    移动端特点

    534 | 535 |
      536 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 537 |
    • viewport？
      • 538 |
    • 真的不用兼容浏览器么？
      • 539 |
    • 适配屏幕（？响应式布局）
      • 540 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 541 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 542 |
    543 | 544 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    545 |

    移动web app

    546 | 547 |

    HTML5

    548 | 549 |

    CSS

    550 | 551 |

    JavaScript

    552 | 553 |

    基本语法

    554 |

    dsds

    555 |

    高级用法

    556 |

    dsds

    557 | 558 |

    第二部分

    559 | 560 |

    hello world

    561 | 562 |

    第三部分

    563 | 564 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    565 | 566 |

    解释一下什么是移动web应用开发

    567 | 568 |

    为什么要用Hybird（混搭）呢？

    569 | 570 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    571 | 572 |
      573 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 574 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 575 |
    • 开发效率高，易于掌握
      • 576 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 577 |
    578 | 579 |

    整体架构

    580 | 581 |

    Webview 和 native代码如何交互

    582 | 583 | 584 |

    三部分的关系

    585 | 586 |

    你一定要清楚【技术栈】

    587 | 588 |

    界面UI展现

    589 | 
    - html5 + css3 （界面UI展现）
590 |
    591 |

    界面上的各种动态效果

    592 | 
    - js           （各种动态效果）
593 |
    594 |

    与服务器通信

    595 | 
    - ajax         （与服务器通信）
596 |
    597 |

    移动webapp和OS之间的桥梁：phonegap

    598 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
599 |
    600 |

    移动端特点

    601 | 602 |
      603 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 604 |
    • viewport？
      • 605 |
    • 真的不用兼容浏览器么？
      • 606 |
    • 适配屏幕（？响应式布局）
      • 607 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 608 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 609 |
    610 | 611 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    612 |
    615 | 616 | 617 | 618 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 33 | 34 | 35 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 54 | 626 | 627 |
    50 |
      51 | 52 |
    53 |     		55 | 56 |
    57 |

    移动web app

    58 |
    59 |
    60 |

    HTML5

    61 |
    62 |
    63 |

    CSS

    64 |
    65 |
    66 |

    JavaScript

    67 |
    68 |
    69 |

    基本语法

    70 |

    dsds

    71 |

    高级用法

    72 |

    dsds

    73 |
    74 |

    第二部分

    75 | 76 |

    hello world

    77 | 78 |

    第三部分

    79 | 80 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    81 | 82 |

    解释一下什么是移动web应用开发

    83 | 84 |

    为什么要用Hybird（混搭）呢？

    85 | 86 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    87 | 88 |
      89 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 90 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 91 |
    • 开发效率高，易于掌握
      • 92 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 93 |
    94 | 95 |

    整体架构

    96 | 97 |

    Webview 和 native代码如何交互

    98 | 99 | 100 |

    三部分的关系

    101 | 102 |

    你一定要清楚【技术栈】

    103 | 104 |

    界面UI展现

    105 | 
    - html5 + css3 （界面UI展现）
106 |
    107 |

    界面上的各种动态效果

    108 | 
    - js           （各种动态效果）
109 |
    110 |

    与服务器通信

    111 | 
    - ajax         （与服务器通信）
112 |
    113 |

    移动webapp和OS之间的桥梁：phonegap

    114 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
115 |
    116 |

    移动端特点

    117 | 118 |
      119 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 120 |
    • viewport？
      • 121 |
    • 真的不用兼容浏览器么？
      • 122 |
    • 适配屏幕（？响应式布局）
      • 123 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 124 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 125 |
    126 | 127 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    128 |

    移动web app

    129 |
    130 |
    131 |

    HTML5

    132 |
    133 |
    134 |

    CSS

    135 |
    136 |
    137 |

    JavaScript

    138 |
    139 |
    140 |

    基本语法

    141 |

    dsds

    142 |

    高级用法

    143 |

    dsds

    144 | 145 |

    第二部分

    146 | 147 |

    hello world

    148 | 149 |

    第三部分

    150 | 151 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    152 | 153 |

    解释一下什么是移动web应用开发

    154 | 155 |

    为什么要用Hybird（混搭）呢？

    156 | 157 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    158 | 159 |
      160 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 161 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 162 |
    • 开发效率高，易于掌握
      • 163 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 164 |
    165 | 166 |

    整体架构

    167 | 168 |

    Webview 和 native代码如何交互

    169 | 170 | 171 |

    三部分的关系

    172 | 173 |

    你一定要清楚【技术栈】

    174 | 175 |

    界面UI展现

    176 | 
    - html5 + css3 （界面UI展现）
177 |
    178 |

    界面上的各种动态效果

    179 | 
    - js           （各种动态效果）
180 |
    181 |

    与服务器通信

    182 | 
    - ajax         （与服务器通信）
183 |
    184 |

    移动webapp和OS之间的桥梁：phonegap

    185 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
186 |
    187 |

    移动端特点

    188 | 189 |
      190 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 191 |
    • viewport？
      • 192 |
    • 真的不用兼容浏览器么？
      • 193 |
    • 适配屏幕（？响应式布局）
      • 194 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 195 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 196 |
    197 | 198 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    199 |

    移动web app

    200 |
    201 |
    202 |

    HTML5

    203 |
    204 |
    205 |

    CSS

    206 |
    207 |
    208 |

    JavaScript

    209 |
    210 |
    211 |

    基本语法

    212 |

    dsds

    213 |

    高级用法

    214 |

    dsds

    215 | 216 |

    第二部分

    217 | 218 |

    hello world

    219 | 220 |

    第三部分

    221 | 222 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    223 | 224 |

    解释一下什么是移动web应用开发

    225 | 226 |

    为什么要用Hybird（混搭）呢？

    227 | 228 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    229 | 230 |
      231 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 232 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 233 |
    • 开发效率高，易于掌握
      • 234 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 235 |
    236 | 237 |

    整体架构

    238 | 239 |

    Webview 和 native代码如何交互

    240 | 241 | 242 |

    三部分的关系

    243 | 244 |

    你一定要清楚【技术栈】

    245 | 246 |

    界面UI展现

    247 | 
    - html5 + css3 （界面UI展现）
248 |
    249 |

    界面上的各种动态效果

    250 | 
    - js           （各种动态效果）
251 |
    252 |

    与服务器通信

    253 | 
    - ajax         （与服务器通信）
254 |
    255 |

    移动webapp和OS之间的桥梁：phonegap

    256 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
257 |
    258 |

    移动端特点

    259 | 260 |
      261 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 262 |
    • viewport？
      • 263 |
    • 真的不用兼容浏览器么？
      • 264 |
    • 适配屏幕（？响应式布局）
      • 265 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 266 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 267 |
    268 | 269 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    270 |

    移动web app

    271 |
    272 |
    273 |

    HTML5

    274 |
    275 |
    276 |

    CSS

    277 |
    278 |
    279 |

    JavaScript

    280 |
    281 |
    282 |

    基本语法

    283 |

    dsds

    284 |

    高级用法

    285 |

    dsds

    286 | 287 |

    第二部分

    288 | 289 |

    hello world

    290 | 291 |

    第三部分

    292 | 293 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    294 | 295 |

    解释一下什么是移动web应用开发

    296 | 297 |

    为什么要用Hybird（混搭）呢？

    298 | 299 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    300 | 301 |
      302 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 303 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 304 |
    • 开发效率高，易于掌握
      • 305 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 306 |
    307 | 308 |

    整体架构

    309 | 310 |

    Webview 和 native代码如何交互

    311 | 312 | 313 |

    三部分的关系

    314 | 315 |

    你一定要清楚【技术栈】

    316 | 317 |

    界面UI展现

    318 | 
    - html5 + css3 （界面UI展现）
319 |
    320 |

    界面上的各种动态效果

    321 | 
    - js           （各种动态效果）
322 |
    323 |

    与服务器通信

    324 | 
    - ajax         （与服务器通信）
325 |
    326 |

    移动webapp和OS之间的桥梁：phonegap

    327 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
328 |
    329 |

    移动端特点

    330 | 331 |
      332 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 333 |
    • viewport？
      • 334 |
    • 真的不用兼容浏览器么？
      • 335 |
    • 适配屏幕（？响应式布局）
      • 336 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 337 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 338 |
    339 | 340 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    341 |

    移动web app

    342 |
    343 |
    344 |

    HTML5

    345 |
    346 |
    347 |

    CSS

    348 |
    349 |
    350 |

    JavaScript

    351 |
    352 |
    353 |

    基本语法

    354 |

    dsds

    355 |

    高级用法

    356 |

    dsds

    357 | 358 |

    第二部分

    359 | 360 |

    hello world

    361 | 362 |

    第三部分

    363 | 364 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    365 | 366 |

    解释一下什么是移动web应用开发

    367 | 368 |

    为什么要用Hybird（混搭）呢？

    369 | 370 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    371 | 372 |
      373 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 374 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 375 |
    • 开发效率高，易于掌握
      • 376 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 377 |
    378 | 379 |

    整体架构

    380 | 381 |

    Webview 和 native代码如何交互

    382 | 383 | 384 |

    三部分的关系

    385 | 386 |

    你一定要清楚【技术栈】

    387 | 388 |

    界面UI展现

    389 | 
    - html5 + css3 （界面UI展现）
390 |
    391 |

    界面上的各种动态效果

    392 | 
    - js           （各种动态效果）
393 |
    394 |

    与服务器通信

    395 | 
    - ajax         （与服务器通信）
396 |
    397 |

    移动webapp和OS之间的桥梁：phonegap

    398 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
399 |
    400 |

    移动端特点

    401 | 402 |
      403 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 404 |
    • viewport？
      • 405 |
    • 真的不用兼容浏览器么？
      • 406 |
    • 适配屏幕（？响应式布局）
      • 407 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 408 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 409 |
    410 | 411 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    412 |

    移动web app

    413 |
    414 |
    415 |

    HTML5

    416 |
    417 |
    418 |

    CSS

    419 |
    420 |
    421 |

    JavaScript

    422 |
    423 |
    424 |

    基本语法

    425 |

    dsds

    426 |

    高级用法

    427 |

    dsds

    428 | 429 |

    第二部分

    430 | 431 |

    hello world

    432 | 433 |

    第三部分

    434 | 435 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    436 | 437 |

    解释一下什么是移动web应用开发

    438 | 439 |

    为什么要用Hybird（混搭）呢？

    440 | 441 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    442 | 443 |
      444 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 445 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 446 |
    • 开发效率高，易于掌握
      • 447 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 448 |
    449 | 450 |

    整体架构

    451 | 452 |

    Webview 和 native代码如何交互

    453 | 454 | 455 |

    三部分的关系

    456 | 457 |

    你一定要清楚【技术栈】

    458 | 459 |

    界面UI展现

    460 | 
    - html5 + css3 （界面UI展现）
461 |
    462 |

    界面上的各种动态效果

    463 | 
    - js           （各种动态效果）
464 |
    465 |

    与服务器通信

    466 | 
    - ajax         （与服务器通信）
467 |
    468 |

    移动webapp和OS之间的桥梁：phonegap

    469 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
470 |
    471 |

    移动端特点

    472 | 473 |
      474 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 475 |
    • viewport？
      • 476 |
    • 真的不用兼容浏览器么？
      • 477 |
    • 适配屏幕（？响应式布局）
      • 478 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 479 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 480 |
    481 | 482 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    483 |

    移动web app

    484 |
    485 |
    486 |

    HTML5

    487 |
    488 |
    489 |

    CSS

    490 |
    491 |
    492 |

    JavaScript

    493 |
    494 |
    495 |

    基本语法

    496 |

    dsds

    497 |

    高级用法

    498 |

    dsds

    499 | 500 |

    第二部分

    501 | 502 |

    hello world

    503 | 504 |

    第三部分

    505 | 506 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    507 | 508 |

    解释一下什么是移动web应用开发

    509 | 510 |

    为什么要用Hybird（混搭）呢？

    511 | 512 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    513 | 514 |
      515 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 516 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 517 |
    • 开发效率高，易于掌握
      • 518 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 519 |
    520 | 521 |

    整体架构

    522 | 523 |

    Webview 和 native代码如何交互

    524 | 525 | 526 |

    三部分的关系

    527 | 528 |

    你一定要清楚【技术栈】

    529 | 530 |

    界面UI展现

    531 | 
    - html5 + css3 （界面UI展现）
532 |
    533 |

    界面上的各种动态效果

    534 | 
    - js           （各种动态效果）
535 |
    536 |

    与服务器通信

    537 | 
    - ajax         （与服务器通信）
538 |
    539 |

    移动webapp和OS之间的桥梁：phonegap

    540 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
541 |
    542 |

    移动端特点

    543 | 544 |
      545 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 546 |
    • viewport？
      • 547 |
    • 真的不用兼容浏览器么？
      • 548 |
    • 适配屏幕（？响应式布局）
      • 549 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 550 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 551 |
    552 | 553 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    554 |

    移动web app

    555 |
    556 |
    557 |

    HTML5

    558 |
    559 |
    560 |

    CSS

    561 |
    562 |
    563 |

    JavaScript

    564 |
    565 |
    566 |

    基本语法

    567 |

    dsds

    568 |

    高级用法

    569 |

    dsds

    570 | 571 |

    第二部分

    572 | 573 |

    hello world

    574 | 575 |

    第三部分

    576 | 577 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    578 | 579 |

    解释一下什么是移动web应用开发

    580 | 581 |

    为什么要用Hybird（混搭）呢？

    582 | 583 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    584 | 585 |
      586 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 587 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 588 |
    • 开发效率高，易于掌握
      • 589 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 590 |
    591 | 592 |

    整体架构

    593 | 594 |

    Webview 和 native代码如何交互

    595 | 596 | 597 |

    三部分的关系

    598 | 599 |

    你一定要清楚【技术栈】

    600 | 601 |

    界面UI展现

    602 | 
    - html5 + css3 （界面UI展现）
603 |
    604 |

    界面上的各种动态效果

    605 | 
    - js           （各种动态效果）
606 |
    607 |

    与服务器通信

    608 | 
    - ajax         （与服务器通信）
609 |
    610 |

    移动webapp和OS之间的桥梁：phonegap

    611 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
612 |
    613 |

    移动端特点

    614 | 615 |
      616 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 617 |
    • viewport？
      • 618 |
    • 真的不用兼容浏览器么？
      • 619 |
    • 适配屏幕（？响应式布局）
      • 620 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 621 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 622 |
    623 | 624 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    625 |
    628 | 629 | 630 | 631 | -------------------------------------------------------------------------------- /demo/use_head_anchor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZTREE ToC DEMO 5 | 6 | 33 | 34 | 35 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 60 | 632 | 633 |
    56 |
      57 | 58 |
    59 |     		61 | 62 |
    63 |

    移动web app

    64 |
    65 |
    66 |

    HTML5

    67 |
    68 |
    69 |

    CSS

    70 |
    71 |
    72 |

    JavaScript

    73 |
    74 |
    75 |

    基本语法

    76 |

    dsds

    77 |

    高级用法

    78 |

    dsds

    79 |
    80 |

    第二部分

    81 | 82 |

    hello world

    83 | 84 |

    第三部分

    85 | 86 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    87 | 88 |

    解释一下什么是移动web应用开发

    89 | 90 |

    为什么要用Hybird（混搭）呢？

    91 | 92 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    93 | 94 |
      95 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 96 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 97 |
    • 开发效率高，易于掌握
      • 98 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 99 |
    100 | 101 |

    整体架构

    102 | 103 |

    Webview 和 native代码如何交互

    104 | 105 | 106 |

    三部分的关系

    107 | 108 |

    你一定要清楚【技术栈】

    109 | 110 |

    界面UI展现

    111 | 
    - html5 + css3 （界面UI展现）
112 |
    113 |

    界面上的各种动态效果

    114 | 
    - js           （各种动态效果）
115 |
    116 |

    与服务器通信

    117 | 
    - ajax         （与服务器通信）
118 |
    119 |

    移动webapp和OS之间的桥梁：phonegap

    120 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
121 |
    122 |

    移动端特点

    123 | 124 |
      125 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 126 |
    • viewport？
      • 127 |
    • 真的不用兼容浏览器么？
      • 128 |
    • 适配屏幕（？响应式布局）
      • 129 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 130 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 131 |
    132 | 133 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    134 |

    移动web app

    135 |
    136 |
    137 |

    HTML5

    138 |
    139 |
    140 |

    CSS

    141 |
    142 |
    143 |

    JavaScript

    144 |
    145 |
    146 |

    基本语法

    147 |

    dsds

    148 |

    高级用法

    149 |

    dsds

    150 | 151 |

    第二部分

    152 | 153 |

    hello world

    154 | 155 |

    第三部分

    156 | 157 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    158 | 159 |

    解释一下什么是移动web应用开发

    160 | 161 |

    为什么要用Hybird（混搭）呢？

    162 | 163 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    164 | 165 |
      166 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 167 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 168 |
    • 开发效率高，易于掌握
      • 169 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 170 |
    171 | 172 |

    整体架构

    173 | 174 |

    Webview 和 native代码如何交互

    175 | 176 | 177 |

    三部分的关系

    178 | 179 |

    你一定要清楚【技术栈】

    180 | 181 |

    界面UI展现

    182 | 
    - html5 + css3 （界面UI展现）
183 |
    184 |

    界面上的各种动态效果

    185 | 
    - js           （各种动态效果）
186 |
    187 |

    与服务器通信

    188 | 
    - ajax         （与服务器通信）
189 |
    190 |

    移动webapp和OS之间的桥梁：phonegap

    191 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
192 |
    193 |

    移动端特点

    194 | 195 |
      196 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 197 |
    • viewport？
      • 198 |
    • 真的不用兼容浏览器么？
      • 199 |
    • 适配屏幕（？响应式布局）
      • 200 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 201 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 202 |
    203 | 204 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    205 |

    移动web app

    206 |
    207 |
    208 |

    HTML5

    209 |
    210 |
    211 |

    CSS

    212 |
    213 |
    214 |

    JavaScript

    215 |
    216 |
    217 |

    基本语法

    218 |

    dsds

    219 |

    高级用法

    220 |

    dsds

    221 | 222 |

    第二部分

    223 | 224 |

    hello world

    225 | 226 |

    第三部分

    227 | 228 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    229 | 230 |

    解释一下什么是移动web应用开发

    231 | 232 |

    为什么要用Hybird（混搭）呢？

    233 | 234 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    235 | 236 |
      237 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 238 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 239 |
    • 开发效率高，易于掌握
      • 240 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 241 |
    242 | 243 |

    整体架构

    244 | 245 |

    Webview 和 native代码如何交互

    246 | 247 | 248 |

    三部分的关系

    249 | 250 |

    你一定要清楚【技术栈】

    251 | 252 |

    界面UI展现

    253 | 
    - html5 + css3 （界面UI展现）
254 |
    255 |

    界面上的各种动态效果

    256 | 
    - js           （各种动态效果）
257 |
    258 |

    与服务器通信

    259 | 
    - ajax         （与服务器通信）
260 |
    261 |

    移动webapp和OS之间的桥梁：phonegap

    262 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
263 |
    264 |

    移动端特点

    265 | 266 |
      267 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 268 |
    • viewport？
      • 269 |
    • 真的不用兼容浏览器么？
      • 270 |
    • 适配屏幕（？响应式布局）
      • 271 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 272 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 273 |
    274 | 275 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    276 |

    移动web app

    277 |
    278 |
    279 |

    HTML5

    280 |
    281 |
    282 |

    CSS

    283 |
    284 |
    285 |

    JavaScript

    286 |
    287 |
    288 |

    基本语法

    289 |

    dsds

    290 |

    高级用法

    291 |

    dsds

    292 | 293 |

    第二部分

    294 | 295 |

    hello world

    296 | 297 |

    第三部分

    298 | 299 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    300 | 301 |

    解释一下什么是移动web应用开发

    302 | 303 |

    为什么要用Hybird（混搭）呢？

    304 | 305 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    306 | 307 |
      308 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 309 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 310 |
    • 开发效率高，易于掌握
      • 311 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 312 |
    313 | 314 |

    整体架构

    315 | 316 |

    Webview 和 native代码如何交互

    317 | 318 | 319 |

    三部分的关系

    320 | 321 |

    你一定要清楚【技术栈】

    322 | 323 |

    界面UI展现

    324 | 
    - html5 + css3 （界面UI展现）
325 |
    326 |

    界面上的各种动态效果

    327 | 
    - js           （各种动态效果）
328 |
    329 |

    与服务器通信

    330 | 
    - ajax         （与服务器通信）
331 |
    332 |

    移动webapp和OS之间的桥梁：phonegap

    333 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
334 |
    335 |

    移动端特点

    336 | 337 |
      338 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 339 |
    • viewport？
      • 340 |
    • 真的不用兼容浏览器么？
      • 341 |
    • 适配屏幕（？响应式布局）
      • 342 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 343 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 344 |
    345 | 346 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    347 |

    移动web app

    348 |
    349 |
    350 |

    HTML5

    351 |
    352 |
    353 |

    CSS

    354 |
    355 |
    356 |

    JavaScript

    357 |
    358 |
    359 |

    基本语法

    360 |

    dsds

    361 |

    高级用法

    362 |

    dsds

    363 | 364 |

    第二部分

    365 | 366 |

    hello world

    367 | 368 |

    第三部分

    369 | 370 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    371 | 372 |

    解释一下什么是移动web应用开发

    373 | 374 |

    为什么要用Hybird（混搭）呢？

    375 | 376 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    377 | 378 |
      379 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 380 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 381 |
    • 开发效率高，易于掌握
      • 382 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 383 |
    384 | 385 |

    整体架构

    386 | 387 |

    Webview 和 native代码如何交互

    388 | 389 | 390 |

    三部分的关系

    391 | 392 |

    你一定要清楚【技术栈】

    393 | 394 |

    界面UI展现

    395 | 
    - html5 + css3 （界面UI展现）
396 |
    397 |

    界面上的各种动态效果

    398 | 
    - js           （各种动态效果）
399 |
    400 |

    与服务器通信

    401 | 
    - ajax         （与服务器通信）
402 |
    403 |

    移动webapp和OS之间的桥梁：phonegap

    404 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
405 |
    406 |

    移动端特点

    407 | 408 |
      409 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 410 |
    • viewport？
      • 411 |
    • 真的不用兼容浏览器么？
      • 412 |
    • 适配屏幕（？响应式布局）
      • 413 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 414 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 415 |
    416 | 417 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    418 |

    移动web app

    419 |
    420 |
    421 |

    HTML5

    422 |
    423 |
    424 |

    CSS

    425 |
    426 |
    427 |

    JavaScript

    428 |
    429 |
    430 |

    基本语法

    431 |

    dsds

    432 |

    高级用法

    433 |

    dsds

    434 | 435 |

    第二部分

    436 | 437 |

    hello world

    438 | 439 |

    第三部分

    440 | 441 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    442 | 443 |

    解释一下什么是移动web应用开发

    444 | 445 |

    为什么要用Hybird（混搭）呢？

    446 | 447 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    448 | 449 |
      450 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 451 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 452 |
    • 开发效率高，易于掌握
      • 453 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 454 |
    455 | 456 |

    整体架构

    457 | 458 |

    Webview 和 native代码如何交互

    459 | 460 | 461 |

    三部分的关系

    462 | 463 |

    你一定要清楚【技术栈】

    464 | 465 |

    界面UI展现

    466 | 
    - html5 + css3 （界面UI展现）
467 |
    468 |

    界面上的各种动态效果

    469 | 
    - js           （各种动态效果）
470 |
    471 |

    与服务器通信

    472 | 
    - ajax         （与服务器通信）
473 |
    474 |

    移动webapp和OS之间的桥梁：phonegap

    475 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
476 |
    477 |

    移动端特点

    478 | 479 |
      480 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 481 |
    • viewport？
      • 482 |
    • 真的不用兼容浏览器么？
      • 483 |
    • 适配屏幕（？响应式布局）
      • 484 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 485 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 486 |
    487 | 488 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    489 |

    移动web app

    490 |
    491 |
    492 |

    HTML5

    493 |
    494 |
    495 |

    CSS

    496 |
    497 |
    498 |

    JavaScript

    499 |
    500 |
    501 |

    基本语法

    502 |

    dsds

    503 |

    高级用法

    504 |

    dsds

    505 | 506 |

    第二部分

    507 | 508 |

    hello world

    509 | 510 |

    第三部分

    511 | 512 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    513 | 514 |

    解释一下什么是移动web应用开发

    515 | 516 |

    为什么要用Hybird（混搭）呢？

    517 | 518 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    519 | 520 |
      521 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 522 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 523 |
    • 开发效率高，易于掌握
      • 524 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 525 |
    526 | 527 |

    整体架构

    528 | 529 |

    Webview 和 native代码如何交互

    530 | 531 | 532 |

    三部分的关系

    533 | 534 |

    你一定要清楚【技术栈】

    535 | 536 |

    界面UI展现

    537 | 
    - html5 + css3 （界面UI展现）
538 |
    539 |

    界面上的各种动态效果

    540 | 
    - js           （各种动态效果）
541 |
    542 |

    与服务器通信

    543 | 
    - ajax         （与服务器通信）
544 |
    545 |

    移动webapp和OS之间的桥梁：phonegap

    546 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
547 |
    548 |

    移动端特点

    549 | 550 |
      551 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 552 |
    • viewport？
      • 553 |
    • 真的不用兼容浏览器么？
      • 554 |
    • 适配屏幕（？响应式布局）
      • 555 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 556 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 557 |
    558 | 559 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    560 |

    移动web app

    561 |
    562 |
    563 |

    HTML5

    564 |
    565 |
    566 |

    CSS

    567 |
    568 |
    569 |

    JavaScript

    570 |
    571 |
    572 |

    基本语法

    573 |

    dsds

    574 |

    高级用法

    575 |

    dsds

    576 | 577 |

    第二部分

    578 | 579 |

    hello world

    580 | 581 |

    第三部分

    582 | 583 |

    这次培训的目标是让大家了解移动web开发流程以及技术点，以便大家在以后工作中应用这些技术能够得心应手，有的放矢。

    584 | 585 |

    解释一下什么是移动web应用开发

    586 | 587 |

    为什么要用Hybird（混搭）呢？

    588 | 589 |

    移动开发分类：原生和hybird，为什么我们要用hybird呢？

    590 | 591 |
      592 |
    • 移动设备越来越强悍，网速越来越快，在移动设备上web app已经可以非常流畅
      • 593 |
    • 跨平台，通过cordova可以开发一次，在ios和android上都可以使用
      • 594 |
    • 开发效率高，易于掌握
      • 595 |
    • 如果你想来一个wap类似的站点，起个服务器就可以了
      • 596 |
    597 | 598 |

    整体架构

    599 | 600 |

    Webview 和 native代码如何交互

    601 | 602 | 603 |

    三部分的关系

    604 | 605 |

    你一定要清楚【技术栈】

    606 | 607 |

    界面UI展现

    608 | 
    - html5 + css3 （界面UI展现）
609 |
    610 |

    界面上的各种动态效果

    611 | 
    - js           （各种动态效果）
612 |
    613 |

    与服务器通信

    614 | 
    - ajax         （与服务器通信）
615 |
    616 |

    移动webapp和OS之间的桥梁：phonegap

    617 | 
    - cordova       (亦即phonegap，是移动webapp和OS之间的桥梁，类似于shell)
618 |
    619 |

    移动端特点

    620 | 621 |
      622 |
    • ui有点不一样？（囿于屏幕尺寸和原生app影响）
      • 623 |
    • viewport？
      • 624 |
    • 真的不用兼容浏览器么？
      • 625 |
    • 适配屏幕（？响应式布局）
      • 626 |
    • 移动端特有事件（如touch，手势等）咋整？
      • 627 |
    • 更多h5特性？（local storage，css3动画，canvas等？）
      • 628 |
    629 | 630 |

    如果大家对cordova不是很了解，以后可以补充一部分。

    631 |
    634 | 635 | 636 | 637 | --------------------------------------------------------------------------------