├── src ├── example │ ├── tip │ │ ├── tip.css │ │ └── tip.js │ ├── area │ │ ├── area.css │ │ ├── area.js │ │ └── area-data.js │ ├── audio │ │ ├── audio.css │ │ ├── audio.gif │ │ ├── audio.jpg │ │ ├── audio.js │ │ └── audio.png │ ├── dialog │ │ ├── dialog.js │ │ ├── dialog.css │ │ ├── dialog.min.css │ │ ├── dialog.scss │ │ ├── dialog.min.js │ │ └── dialog-jquery.min.js │ ├── paging │ │ ├── query.js │ │ └── paging.css │ ├── query │ │ └── query.js │ ├── select │ │ ├── select.js │ │ └── select.css │ ├── table │ │ ├── paging.js │ │ ├── query.js │ │ ├── table.js │ │ ├── dialog.css │ │ ├── table.css │ │ └── paging.css │ ├── upload │ │ └── upload.js │ ├── calendar │ │ ├── calendar.css │ │ ├── calendar.js │ │ └── calendar.min.css │ ├── loading │ │ ├── loading.css │ │ ├── loading.js │ │ └── loading.gif │ ├── network │ │ ├── network.css │ │ ├── network.js │ │ └── loading.gif │ ├── autosearch │ │ ├── autosearch.css │ │ └── autosearch.js │ ├── lazy-load │ │ └── lazy-load.js │ ├── scroll-load │ │ ├── scroll-load │ │ ├── scroll-load.min.js │ │ ├── scroll-load-jquery.min.js │ │ ├── wap-material.css │ │ ├── scroll-load.js │ │ └── scroll-load-jquery.js │ ├── word-count │ │ ├── word-count.css │ │ └── word-count.js │ ├── format-number │ │ └── format-number.js │ ├── image-zooming │ │ └── image-zooming.js │ ├── mobile-photo-preview │ │ ├── dialog.css │ │ ├── mobile-photo-preview.css │ │ ├── mobile-photo-preview.js │ │ ├── mobile-photo-preview.min.css │ │ ├── dialog.min.css │ │ ├── mobile-photo-preview.min.js │ │ └── dialog.min.js │ ├── mobile-upload │ │ ├── mobile-upload.js │ │ ├── mobile-upload.min.js │ │ ├── mobile-upload-jquery.min.js │ │ └── mobile-upload-jquery.js │ ├── carousel-image │ │ ├── carousel-image.css │ │ └── carousel-image.js │ ├── click-progress │ │ ├── click-progress.css │ │ └── click-progress.js │ ├── localStorage-cache │ │ └── localStorage-cache.js │ ├── mobile-select-area │ │ ├── mobile-select-area.js │ │ ├── mobile-select-area.min.css │ │ ├── mobile-select-area.css │ │ ├── mobile-select-area.min.js │ │ └── dialog.css │ └── mobile-select-date │ │ ├── mobile-select-area.css │ │ ├── mobile-select-date.js │ │ ├── mobile-select-date.css │ │ ├── mobile-select-date.min.js │ │ ├── dialog.min.css │ │ ├── mobile-select-area.min.css │ │ ├── mobile-select-area.min.js │ │ └── dialog.css ├── images │ ├── bg_hr.png │ ├── body-bg.jpg │ ├── ui │ │ ├── area.jpg │ │ ├── tip.jpg │ │ ├── audio.jpg │ │ ├── dialog.jpg │ │ ├── dialog.png │ │ ├── loading.jpg │ │ ├── network.jpg │ │ ├── paging.jpg │ │ ├── query.jpg │ │ ├── select.jpg │ │ ├── table.jpg │ │ ├── upload.jpg │ │ ├── upload.png │ │ ├── calendar.jpg │ │ ├── calendar.png │ │ ├── lazy-load.gif │ │ ├── autosearch.jpg │ │ ├── scroll-load.jpg │ │ ├── scroll-load.png │ │ ├── word-count.jpg │ │ ├── word-count.png │ │ ├── carousel-image.jpg │ │ ├── carousel-image.png │ │ ├── click-progress.jpg │ │ ├── click-progress.png │ │ ├── format-number.jpg │ │ ├── image-zooming.jpg │ │ ├── image-zooming.png │ │ ├── mobile-upload.jpg │ │ ├── mobile-upload.png │ │ ├── localStorage-cache.jpg │ │ ├── mobile-select-area.jpg │ │ ├── mobile-select-area.png │ │ ├── mobile-select-date.jpg │ │ ├── mobile-select-date.png │ │ ├── mobile-photo-preview.jpg │ │ └── mobile-photo-preview.png │ ├── blacktocat.png │ ├── example │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── a.png │ │ ├── a1.png │ │ ├── a2.png │ │ ├── a3.png │ │ ├── a4.png │ │ ├── a5.png │ │ ├── b.png │ │ ├── c.png │ │ ├── z1.jpg │ │ ├── horse.ogg │ │ ├── loading.gif │ │ └── carousel-image.png │ ├── header-bg.jpg │ ├── sidebar-bg.jpg │ ├── highlight-bg.jpg │ ├── download-button.png │ ├── github-button.png │ ├── icon_download.png │ └── sprite_download.png ├── json │ ├── data.asp │ ├── index.html │ ├── autosearch.txt │ ├── list.html │ └── area.html ├── stylesheets │ ├── RXTgOOQ9AAtaVOHxx0IUBOkI_DLF4EgbZt3mhU8gQFo.woff │ ├── css.css │ ├── pygment_trac.css │ └── print.css ├── .html ├── hidewx.html ├── javascripts │ └── main.js └── audio.html ├── 打包压缩.bat ├── .gitignore ├── 更新所有js.bat ├── http服务.bat ├── readdir.js ├── control ├── menu.vm ├── side.vm └── head.vm ├── screen ├── index.vm ├── audio.vm ├── query.vm ├── scroll-load.vm ├── area.vm ├── localStorage-cache.vm ├── mobile-select-date.vm ├── mobile-upload.vm ├── lazy-load.vm ├── network.vm ├── paging.vm ├── upload.vm ├── format-number.vm ├── mobile-select-area.vm ├── loading.vm ├── mobile-photo-preview.vm ├── click-progress.vm └── table.vm ├── package.json ├── mine.js ├── layout └── default.vm ├── http.js ├── params.json ├── README.md └── getjs.js /src/example/tip/tip.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/tip/tip.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/area/area.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/area/area.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/audio/audio.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/audio/audio.gif: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/audio/audio.jpg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/audio/audio.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/dialog/dialog.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/paging/query.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/query/query.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/select/select.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/table/paging.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/table/query.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/table/table.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/upload/upload.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/area/area-data.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/calendar/calendar.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/calendar/calendar.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/loading/loading.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/loading/loading.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/network/network.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/network/network.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/paging/paging.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/select/select.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/autosearch/autosearch.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/autosearch/autosearch.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/lazy-load/lazy-load.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/scroll-load/scroll-load: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/word-count/word-count.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/word-count/word-count.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /打包压缩.bat: -------------------------------------------------------------------------------- 1 | @Echo Off 2 | grunt watch 3 | -------------------------------------------------------------------------------- /src/example/format-number/format-number.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/image-zooming/image-zooming.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/dialog.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-upload/mobile-upload.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | .idea -------------------------------------------------------------------------------- /src/example/carousel-image/carousel-image.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/carousel-image/carousel-image.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/click-progress/click-progress.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/click-progress/click-progress.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/dialog/dialog.css: -------------------------------------------------------------------------------- 1 | 404: Not Found 2 | -------------------------------------------------------------------------------- /src/example/table/dialog.css: -------------------------------------------------------------------------------- 1 | 404: Not Found 2 | -------------------------------------------------------------------------------- /更新所有js.bat: -------------------------------------------------------------------------------- 1 | @Echo Off 2 | node getjs.js 3 | PAUSE -------------------------------------------------------------------------------- /src/example/localStorage-cache/localStorage-cache.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-select-area/mobile-select-area.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-select-date/mobile-select-area.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-select-date/mobile-select-date.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/mobile-photo-preview.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/mobile-photo-preview.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /http服务.bat: -------------------------------------------------------------------------------- 1 | @Echo Off 2 | explorer http://localhost:3001/src/index.html & node http.js 3 | PAUSE -------------------------------------------------------------------------------- /src/images/bg_hr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/bg_hr.png -------------------------------------------------------------------------------- /src/images/body-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/body-bg.jpg -------------------------------------------------------------------------------- /src/images/ui/area.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/area.jpg -------------------------------------------------------------------------------- /src/images/ui/tip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/tip.jpg -------------------------------------------------------------------------------- /src/json/data.asp: -------------------------------------------------------------------------------- 1 | {"url":"http://ott.wansecheng.com/weidian/wdgoods/1421671057774.jpg","status":true} -------------------------------------------------------------------------------- /src/images/blacktocat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/blacktocat.png -------------------------------------------------------------------------------- /src/images/example/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/1.png -------------------------------------------------------------------------------- /src/images/example/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/2.png -------------------------------------------------------------------------------- /src/images/example/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/3.png -------------------------------------------------------------------------------- /src/images/example/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/a.png -------------------------------------------------------------------------------- /src/images/example/a1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/a1.png -------------------------------------------------------------------------------- /src/images/example/a2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/a2.png -------------------------------------------------------------------------------- /src/images/example/a3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/a3.png -------------------------------------------------------------------------------- /src/images/example/a4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/a4.png -------------------------------------------------------------------------------- /src/images/example/a5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/a5.png -------------------------------------------------------------------------------- /src/images/example/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/b.png -------------------------------------------------------------------------------- /src/images/example/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/c.png -------------------------------------------------------------------------------- /src/images/example/z1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/z1.jpg -------------------------------------------------------------------------------- /src/images/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/header-bg.jpg -------------------------------------------------------------------------------- /src/images/sidebar-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/sidebar-bg.jpg -------------------------------------------------------------------------------- /src/images/ui/audio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/audio.jpg -------------------------------------------------------------------------------- /src/images/ui/dialog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/dialog.jpg -------------------------------------------------------------------------------- /src/images/ui/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/dialog.png -------------------------------------------------------------------------------- /src/images/ui/loading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/loading.jpg -------------------------------------------------------------------------------- /src/images/ui/network.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/network.jpg -------------------------------------------------------------------------------- /src/images/ui/paging.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/paging.jpg -------------------------------------------------------------------------------- /src/images/ui/query.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/query.jpg -------------------------------------------------------------------------------- /src/images/ui/select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/select.jpg -------------------------------------------------------------------------------- /src/images/ui/table.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/table.jpg -------------------------------------------------------------------------------- /src/images/ui/upload.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/upload.jpg -------------------------------------------------------------------------------- /src/images/ui/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/upload.png -------------------------------------------------------------------------------- /src/example/audio/audio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/example/audio/audio.png -------------------------------------------------------------------------------- /src/images/highlight-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/highlight-bg.jpg -------------------------------------------------------------------------------- /src/images/ui/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/calendar.jpg -------------------------------------------------------------------------------- /src/images/ui/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/calendar.png -------------------------------------------------------------------------------- /src/images/ui/lazy-load.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/lazy-load.gif -------------------------------------------------------------------------------- /src/images/download-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/download-button.png -------------------------------------------------------------------------------- /src/images/example/horse.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/horse.ogg -------------------------------------------------------------------------------- /src/images/example/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/loading.gif -------------------------------------------------------------------------------- /src/images/github-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/github-button.png -------------------------------------------------------------------------------- /src/images/icon_download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/icon_download.png -------------------------------------------------------------------------------- /src/images/sprite_download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/sprite_download.png -------------------------------------------------------------------------------- /src/images/ui/autosearch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/autosearch.jpg -------------------------------------------------------------------------------- /src/images/ui/scroll-load.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/scroll-load.jpg -------------------------------------------------------------------------------- /src/images/ui/scroll-load.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/scroll-load.png -------------------------------------------------------------------------------- /src/images/ui/word-count.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/word-count.jpg -------------------------------------------------------------------------------- /src/images/ui/word-count.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/word-count.png -------------------------------------------------------------------------------- /src/example/loading/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/example/loading/loading.gif -------------------------------------------------------------------------------- /src/example/network/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/example/network/loading.gif -------------------------------------------------------------------------------- /src/images/ui/carousel-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/carousel-image.jpg -------------------------------------------------------------------------------- /src/images/ui/carousel-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/carousel-image.png -------------------------------------------------------------------------------- /src/images/ui/click-progress.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/click-progress.jpg -------------------------------------------------------------------------------- /src/images/ui/click-progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/click-progress.png -------------------------------------------------------------------------------- /src/images/ui/format-number.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/format-number.jpg -------------------------------------------------------------------------------- /src/images/ui/image-zooming.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/image-zooming.jpg -------------------------------------------------------------------------------- /src/images/ui/image-zooming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/image-zooming.png -------------------------------------------------------------------------------- /src/images/ui/mobile-upload.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-upload.jpg -------------------------------------------------------------------------------- /src/images/ui/mobile-upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-upload.png -------------------------------------------------------------------------------- /src/images/example/carousel-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/example/carousel-image.png -------------------------------------------------------------------------------- /src/images/ui/localStorage-cache.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/localStorage-cache.jpg -------------------------------------------------------------------------------- /src/images/ui/mobile-select-area.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-select-area.jpg -------------------------------------------------------------------------------- /src/images/ui/mobile-select-area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-select-area.png -------------------------------------------------------------------------------- /src/images/ui/mobile-select-date.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-select-date.jpg -------------------------------------------------------------------------------- /src/images/ui/mobile-select-date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-select-date.png -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/mobile-photo-preview.min.css: -------------------------------------------------------------------------------- 1 | @import url('dialog.min.css'); 2 | @import url('mobile-photo-preview.css'); -------------------------------------------------------------------------------- /src/images/ui/mobile-photo-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-photo-preview.jpg -------------------------------------------------------------------------------- /src/images/ui/mobile-photo-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/images/ui/mobile-photo-preview.png -------------------------------------------------------------------------------- /src/stylesheets/RXTgOOQ9AAtaVOHxx0IUBOkI_DLF4EgbZt3mhU8gQFo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/jsmodule/HEAD/src/stylesheets/RXTgOOQ9AAtaVOHxx0IUBOkI_DLF4EgbZt3mhU8gQFo.woff -------------------------------------------------------------------------------- /readdir.js: -------------------------------------------------------------------------------- 1 | 2 | var fs=require('fs'); 3 | 4 | //读目录下的文件 5 | var files =fs.readdirSync('html'); 6 | files.forEach(function(item){ 7 | console.log(item) 8 | var content = fs.readFileSync('html/'+item, "utf-8"); 9 | // console.log(content) 10 | }); -------------------------------------------------------------------------------- /control/menu.vm: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /screen/index.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $set(modulename,jsmodule) 4 | $set(title,js组件) 5 |

6 | js组件 7 |

8 | 9 | $control.setTemplate("modulelist.vm") 10 | 11 | -------------------------------------------------------------------------------- /src/json/index.html: -------------------------------------------------------------------------------- 1 | { 2 | "data": [{ 3 | "title": "希腊原装进口[戴蒙蒂诺]特级初榨橄榄油1L[买一赠…", 4 | "url": "http://www.baidu.com/img/baidu_jgylogo3.gif" 5 | }, { 6 | "title": "如果不相信再来一条。", 7 | "url": "http://p1.qhimg.com/t016951262e124afd79.png" 8 | },{ 9 | "title": "让生意简单，生活更精采", 10 | "url":"http://image.wansecheng.com/img2013/logo.jpg" 11 | }] 12 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "family": "tianxiangbing", 3 | "name": "jsmodule", 4 | "description": "js组件", 5 | "version": "1.0.0", 6 | "author": { 7 | "name": "田想兵", 8 | "url": "http://www.lovewebgames.com" 9 | }, 10 | "devDependencies": { 11 | "grunt-contrib-watch": "latest", 12 | "grunt-contrib-concat": "~0.4.0", 13 | "grunt-contrib-uglify": "~0.4.0", 14 | "grunt-contrib-copy": "~0.5.0", 15 | "grunt-contrib-cssmin": "~0.9.0", 16 | "grunt-text-replace": "~0.3.12" 17 | } 18 | } -------------------------------------------------------------------------------- /mine.js: -------------------------------------------------------------------------------- 1 | exports.types = { 2 | "css": "text/css", 3 | "gif": "image/gif", 4 | "html": "text/html", 5 | "ico": "image/x-icon", 6 | "jpeg": "image/jpeg", 7 | "jpg": "image/jpeg", 8 | "js": "text/javascript", 9 | "json": "application/json", 10 | "pdf": "application/pdf", 11 | "png": "image/png", 12 | "svg": "image/svg+xml", 13 | "swf": "application/x-shockwave-flash", 14 | "tiff": "image/tiff", 15 | "txt": "text/plain", 16 | "wav": "audio/x-wav", 17 | "wma": "audio/x-ms-wma", 18 | "wmv": "video/x-ms-wmv", 19 | "xml": "text/xml" 20 | }; -------------------------------------------------------------------------------- /src/json/autosearch.txt: -------------------------------------------------------------------------------- 1 | [{ 2 | "id":1, 3 | "name": "测试111asdasd查塔顶嘿轩地顶起asfj" 4 | }, { 5 | "id":2, 6 | "name": "测试122" 7 | }, { 8 | "id":3, 9 | "name": "测试222" 10 | }, { 11 | "id":4, 12 | "name": "测试212" 13 | }, { 14 | "id":5, 15 | "name": "测试222" 16 | }, { 17 | "id":6, 18 | "name": "测试222" 19 | }, { 20 | "id":7, 21 | "name": "测试222" 22 | }, { 23 | "id":8, 24 | "name": "测试222" 25 | }, { 26 | "id":9, 27 | "name": "测试222" 28 | }, { 29 | "id":10, 30 | "name": "测试222" 31 | }, { 32 | "id":11, 33 | "name": "测试222" 34 | }] -------------------------------------------------------------------------------- /src/json/list.html: -------------------------------------------------------------------------------- 1 | { 2 | "status": true, 3 | "msg": "\u8bf7\u6c42\u6210\u529f", 4 | "data": { 5 | "data": [{ 6 | "goods_id": 500001, 7 | "goods_bn": "bn000501", 8 | "goods_name": "手机" 9 | }, { 10 | "goods_id": 500002, 11 | "goods_bn": "bn000502", 12 | "goods_name": "电脑" 13 | }, { 14 | "goods_id": 500003, 15 | "goods_bn": "bn000503", 16 | "goods_name": "电视机" 17 | }, { 18 | "goods_id": 500004, 19 | "goods_bn": "bn000504", 20 | "goods_name": "风扇" 21 | }, { 22 | "goods_id": 500005, 23 | "goods_bn": "bn000505", 24 | "goods_name": "显示器" 25 | }], 26 | "count": { 27 | "total": 100 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /control/side.vm: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/.html: -------------------------------------------------------------------------------- 1 | $screen_placeholder 2 | 3 | 4 | 5 | 6 |
源码在github上托管，请尽量到github上下载最新代码！也可以提交Issues. 如果您发现demo无法使用时，请多刷新几次页面就好了,非代码问题，便宜空间问题多。
7 | 8 | 9 | -------------------------------------------------------------------------------- /layout/default.vm: -------------------------------------------------------------------------------- 1 | $screen_placeholder 2 | 3 | 4 | 5 | 6 |
源码在github上托管，请尽量到github上下载最新代码！也可以提交Issues. 如果您发现demo无法使用时，请多刷新几次,可能是js文件没有加载成功。
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/hidewx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | hide weixin 5 | 6 | 7 | 27 | 28 | -------------------------------------------------------------------------------- /src/json/area.html: -------------------------------------------------------------------------------- 1 | { 2 | "data": [{ 3 | "id": 1, 4 | "name": "浙江省", 5 | "child": [{ 6 | "id": "1", 7 | "name": "杭州市", 8 | "child": [{ 9 | "id": 1, 10 | "name": "滨江区" 11 | }, { 12 | "id": 2, 13 | "name": "西湖区" 14 | }, { 15 | "id": 2, 16 | "name": "余杭区" 17 | }, { 18 | "id": 2, 19 | "name": "留下区" 20 | }] 21 | }, { 22 | "id": "2", 23 | "name": "宁波市", 24 | "child": [] 25 | }, { 26 | "id": "3", 27 | "name": "温州市", 28 | "child": [] 29 | }] 30 | }, { 31 | "id": 2, 32 | "name": "江苏省", 33 | "child": [{ 34 | "id": "1", 35 | "name": "南京", 36 | "child": [{ 37 | "id": 1, 38 | "name": "解放区" 39 | }] 40 | }] 41 | }, { 42 | "id": 3, 43 | "name": "湖北省" 44 | }] 45 | } -------------------------------------------------------------------------------- /src/example/table/table.css: -------------------------------------------------------------------------------- 1 | @import url(https://cdn.rawgit.com/tianxiangbing/paging/master/src/paging.css); 2 | @import url(https://cdn.rawgit.com/tianxiangbing/dialog/master/src/dialog.css); 3 | body{font-size: 12px;} 4 | /* 列表 */ 5 | .tab-list{font-size: 12px;width: 100%;border-collapse: collapse;} 6 | .tab-list a{color:#2b6cbc;} 7 | .tab-list thead {background-color: #f6f6f6;line-height: 32px;} 8 | .tab-list tbody{line-height: 32px;} 9 | .tab-list tbody>tr:nth-child(even){background-color:#f6f6f6; } 10 | .tab-list thead th{color:#999;text-align: center;font-weight: normal;border:none;padding:0;margin:0;} 11 | .tab-list tbody td{text-align: center;} 12 | .tab-list input.checkbox{vertical-align: -3px;margin-right: 5px;} 13 | .tab-list .first-cell{padding-left:15px;text-align: left;} -------------------------------------------------------------------------------- /src/example/mobile-select-area/mobile-select-area.min.css: -------------------------------------------------------------------------------- 1 | .ui-scroller,.ui-scroller>div{position:relative;height:88px}.ui-scroller dl,.ui-scroller p{width:100%;position:absolute;top:30px}.ui-scroller{width:100%;min-width:260px;font-size:14px;font-weight:400;-webkit-mask:-webkit-gradient(linear,0 30%,0 100%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)))}.ui-scroller>div{width:33%;display:inline-block;overflow:hidden;box-sizing:border-box}.ui-scroller dl{margin:0}.ui-scroller dd{:padding;:0;margin:0;overflow:hidden;text-overflow:ellipsis;width:100%;height:30px;line-height:30px}.ui-scroller-mask{-webkit-mask:-webkit-gradient(linear,0 30%,0 0,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)))}.ui-scroller p{height:30px;margin:0;z-index:-1;border:1px solid #e2e2e2;border-left:none;border-right:none}.ui-scroller .ui-dialog-action{margin-top:10px} -------------------------------------------------------------------------------- /src/example/mobile-select-area/mobile-select-area.css: -------------------------------------------------------------------------------- 1 | @import url(dialog.css); 2 | /*selectarea*/ 3 | .ui-dialog {box-sizing:border-box; } 4 | .ui-scroller{position: relative;height: 125px;width: 100%; min-width: 260px;font-size: 14px;font-weight: normal;} 5 | .ui-scroller>div{width: 33%;display: inline-block;position:relative;height: 125px;overflow: hidden;box-sizing:border-box;} 6 | .ui-scroller dl{position: absolute;width: 100%;margin: 0;top:30px;} 7 | .ui-scroller dd{padding;0;margin:0;overflow: hidden; text-overflow:ellipsis;width:100%;height: 30px;line-height: 30px;} 8 | .ui-scroller dd.focus{} 9 | .ui-scroller{-webkit-mask: -webkit-gradient(linear,0% 30%,0% 100%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)));} 10 | .ui-scroller-mask{-webkit-mask: -webkit-gradient(linear,0% 30%,0% 0%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)));} 11 | .ui-scroller p{position: absolute;top:30px;height:30px;width: 100%;margin: 0;z-index: -1;border:1px solid #e2e2e2;border-left:none;border-right:none;} 12 | .ui-scroller .ui-dialog-action{margin-top: 10px;} 13 | .ui-dialog-bottom{ 14 | border-radius: 0; 15 | } 16 | .ui-dialog-bottom .ui-dialog-action .ui-confirm-close, .ui-dialog-action .ui-confirm-no{ 17 | border:none; 18 | } -------------------------------------------------------------------------------- /src/example/mobile-select-date/mobile-select-date.css: -------------------------------------------------------------------------------- 1 | @import url(dialog.css); 2 | /*selectarea*/ 3 | .ui-dialog {box-sizing:border-box; } 4 | .ui-scroller{position: relative;height: 125px;width: 100%; min-width: 260px;font-size: 14px;font-weight: normal;} 5 | .ui-scroller>div{width: 33%;display: inline-block;position:relative;height: 125px;overflow: hidden;box-sizing:border-box;} 6 | .ui-scroller dl{position: absolute;width: 100%;margin: 0;top:30px;} 7 | .ui-scroller dd{padding;0;margin:0;overflow: hidden; text-overflow:ellipsis;width:100%;height: 30px;line-height: 30px;} 8 | .ui-scroller dd.focus{} 9 | .ui-scroller{-webkit-mask: -webkit-gradient(linear,0% 30%,0% 100%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)));} 10 | .ui-scroller-mask{-webkit-mask: -webkit-gradient(linear,0% 30%,0% 0%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)));} 11 | .ui-scroller p{position: absolute;top:30px;height:30px;width: 100%;margin: 0;z-index: -1;border:1px solid #e2e2e2;border-left:none;border-right:none;} 12 | .ui-scroller .ui-dialog-action{margin-top: 10px;} 13 | .ui-dialog-bottom{ 14 | border-radius: 0; 15 | } 16 | .ui-dialog-bottom .ui-dialog-action .ui-confirm-close, .ui-dialog-action .ui-confirm-no{ 17 | border:none; 18 | } -------------------------------------------------------------------------------- /src/example/mobile-select-date/mobile-select-date.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-select-date v1.0.0 2 | * author:tianxiangbing email:55342775@qq.com 3 | * demo:http://www.lovewebgames.com/jsmodule/mobile-select-date.html 4 | * git:https://github.com/tianxiangbing/mobile-select-date 2015-04-17 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$","mobileSelectArea"],b):"object"==typeof exports?module.exports=b():a.MobileSelectDate=b($,MobileSelectArea)}(this,function(a,b){function c(b,c){return b.base={},chid=a.extend(b.base,c),chid=a.extend(b,c),b}var d=function(){};return d.prototype=c(d.prototype,new b),a.extend(d.prototype,{init:function(b){this.settings=b,this.separator="/";var c=new Date;this.settings.value=a(this.settings.trigger).val()||c.getFullYear()+"/"+(c.getMonth()+1)+"/0",this.settings.value=this.settings.value.replace(/\//g,","),this.settings.text=this.settings.value.split(","),this.base.init.bind(this)(this.settings)},getData:function(){for(var a=[],b=1990,c=(new Date).getFullYear();c>=b;b++){var d={};d.id=d.name=b,d.child=[];for(var e=1;12>=e;e++){var f={};f.id=f.name=("0"+e).slice(-2),f.child=[];for(var g=new Date(b,e,0).getDate(),h=1;g>=h;h++){var i={};i.id=i.name=("0"+h).slice(-2),f.child.push(i)}d.child.push(f)}a.push(d)}this.data=a}}),d}); -------------------------------------------------------------------------------- /src/example/table/paging.css: -------------------------------------------------------------------------------- 1 | .ui-paging-container{color:#666;font-size: 12px;} 2 | .ui-paging-container ul{overflow: hidden;text-align: center;} 3 | .ui-paging-container ul,.ui-paging-container li{list-style: none;} 4 | .ui-paging-container li{display: inline-block;padding:3px 6px;margin-left: 5px;color:#666;} 5 | .ui-paging-container li.ui-pager{cursor: pointer; border:1px solid #ddd;border-radius: 2px;} 6 | .ui-paging-container li.ui-pager:hover,.ui-paging-container li.focus{background-color: #288df0;color:#FFFFFF;} 7 | .ui-paging-container li.ui-paging-ellipse{border:none;} 8 | .ui-paging-container li.ui-paging-toolbar{padding:0;} 9 | .ui-paging-container li.ui-paging-toolbar select{height:22px;border:1px solid #ddd;color: #666;} 10 | .ui-paging-container li.ui-paging-toolbar input{line-height: 20px; height:20px;padding:0;border:1px solid #ddd;text-align: center;width: 30px;margin:0 0 0 5px;vertical-align: middle;} 11 | .ui-paging-container li.ui-paging-toolbar a{vertical-align: middle; text-decoration: none;display: inline-block;height:20px;border:1px solid #ddd;vertical-align: top;border-radius: 2px;line-height: 20px;padding:0 3px;cursor: pointer;margin-left: 5px;color: #666;} 12 | .ui-paging-container li.ui-pager-disabled,.ui-paging-container li.ui-pager-disabled:hover{background-color: #f6f6f6;;cursor: default;border:none;color:#ddd;} 13 | -------------------------------------------------------------------------------- /control/head.vm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | js组件-js插件-jquery插件-$!title 12 | 13 | 14 | 15 | 25 |
26 |
27 |
-------------------------------------------------------------------------------- /http.js: -------------------------------------------------------------------------------- 1 | var PORT = 3001; 2 | 3 | var http = require('http'); 4 | var url=require('url'); 5 | var fs=require('fs'); 6 | var mine=require('./mine').types; 7 | var path=require('path'); 8 | 9 | var server = http.createServer(function (request, response) { 10 | var pathname = url.parse(request.url).pathname; 11 | console.log(pathname) 12 | var realPath = pathname.substr(1);//path.join("assets", pathname); 13 | console.log(realPath); 14 | var ext = path.extname(realPath); 15 | ext = ext ? ext.slice(1) : 'unknown'; 16 | fs.exists(realPath, function (exists) { 17 | if (!exists) { 18 | response.writeHead(404, { 19 | 'Content-Type': 'text/plain' 20 | }); 21 | 22 | response.write("This request URL " + pathname + " was not found on this server."); 23 | response.end(); 24 | } else { 25 | fs.readFile(realPath, "binary", function (err, file) { 26 | if (err) { 27 | response.writeHead(500, { 28 | 'Content-Type': 'text/plain' 29 | }); 30 | response.end(err); 31 | } else { 32 | var contentType = mine[ext] || "text/plain"; 33 | response.writeHead(200, { 34 | 'Content-Type': contentType 35 | }); 36 | response.write(file, "binary"); 37 | response.end(); 38 | } 39 | }); 40 | } 41 | }); 42 | }); 43 | server.listen(PORT); 44 | console.log("Server runing at port: " + PORT + "."); -------------------------------------------------------------------------------- /src/javascripts/main.js: -------------------------------------------------------------------------------- 1 | //console.log('This would be the main JS file.'); 2 | (function($) { 3 | $('#search').on('keyup', function() { 4 | var val = this.value; 5 | var modulelist = $('#modulelist').children(); 6 | for (var i = 0, l = modulelist.length; i < l; i++) { 7 | var item = $(modulelist[i]); 8 | var text = $('.m-title', item).html(); 9 | var link = $('.m-title', item).attr('href').split('.')[0]; 10 | if (text.toString().indexOf(val) != -1 || link.toString().indexOf(val) != -1) { 11 | item.show(500); 12 | } else { 13 | item.hide(500); 14 | } 15 | } 16 | }); 17 | // $('#modulelist').height($('#modulelist').height()) 18 | // $('#modulelist').width($('#modulelist').width()) 19 | 20 | function Sort() { 21 | var arr = $('#modulelist').children(); 22 | var oldPositionArray = []; 23 | arr.each(function() { 24 | var item = $(this); 25 | var pos = item.position(); 26 | item.attr(pos); 27 | oldPositionArray.push(pos); 28 | }); 29 | arr.sort(function(item) { 30 | var $item = $(item); 31 | $item.css({ 32 | position: 'absolute', 33 | left: parseInt($item.attr('left')), 34 | top: parseInt($item.attr('top')) 35 | }); 36 | return Math.random() > .5 ? 1 : -1; 37 | }); 38 | $('#modulelist').children().remove(); 39 | arr.each(function(i, d) { 40 | var item = $(this); 41 | $('#modulelist').append(item); 42 | item.css('position', "absolute").animate({ 43 | left: parseInt(oldPositionArray[i].left), 44 | top: parseInt(oldPositionArray[i].top) 45 | }, 1500, function() { 46 | item.css('position','static'); 47 | }); 48 | }); 49 | }; 50 | Sort(); 51 | })(jQuery); -------------------------------------------------------------------------------- /src/stylesheets/css.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Architects Daughter'; 3 | font-style: normal; 4 | font-weight: 400; 5 | } 6 | .uilist{list-style:none;padding:none;position: relative;} 7 | .uilist li{display:block;width: 166px;height: 224px;margin-bottom:20px; float:left;padding:10px 20px;background-color:#fff;border:1px solid #ddd;margin-right: 20px;} 8 | .uilist li:hover{border-color:#ddd;box-shadow:5px 5px 20px #666;} 9 | .uilist li a{display:block;} 10 | .uilist li img{width:166px;height: 166px;} 11 | .uilist li .a_code{display: inline-block;padding:3px 5px;background-color: #f2f2f2;border:1px solid #ccc;border-radius: 2px;} 12 | .uilist li .a_code:hover{background-color:#fff;} 13 | .menu{position:absolute;right:0;top:-100px;overflow:hidden;height:38px;background-color:#0F67A1;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);} 14 | .menu li{list-style:none;float:left;height:38px;line-height:38px;} 15 | .menu li a{font-size:14px;color:white;font-weight:bold;padding:0 10px;} 16 | .JYapi_menu{float:left;list-style:none;width:200px;background-color:#0F67A1;border-radius: 2px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);} 17 | .JYapi_menu li{list-style:none;} 18 | .JYapi_menu li a{color:#eee;} 19 | #main_content .JYapi_menu a:hover {color: #ccc;text-shadow: 0 0 2px yellow;} 20 | #search{height:40px;line-height:40px;border:1px solid #ddd;padding:0 20px;border-radius: 20px;width:500px;margin:0 auto;outline: none;font-size: 16px;color:#999;display: block;} 21 | .m-title{width:166px;text-overflow:ellipsis;white-space: nowrap;overflow: hidden;} 22 | .inner input[type=text]{height:30px;line-height: 30px;color:#666;border-radius: 4px;margin:10px;border:1px solid #ccc;} 23 | .inner input[type=button]{height:30px;line-height: 30px;color:#666;border-radius: 4px;margin:10px;border:1px solid #ccc;background-color: #fff;} -------------------------------------------------------------------------------- /src/example/calendar/calendar.min.css: -------------------------------------------------------------------------------- 1 | .clearfix,.clearfix:after{display:block;zoom:1}.ui-calendar{border:1px solid #ccc;background-color:#f9f9f9;color:#666;font-family:arial,'Hiragino Sans GB',sans-serif;position:absolute}.ui-calendar ul{list-style:none;overflow:hidden;margin:0;padding:0;background-color:#fff;width:210px}.ui-calendar li{list-style:none;float:left;width:30px;height:26px;line-height:26px;text-align:center;cursor:pointer}.ui-calendar li:hover,.ui-calendar-pannel span:hover,.ui-calendar-toolbar a:hover{background-color:#f2f2f2}.ui-calendar-pannel span{cursor:pointer;display:block;float:left;width:30px;text-align:center;height:30px;line-height:30px}.ui-calendar-pannel .month,.ui-calendar-pannel .year{width:40px}.ui-calendar-pannel .month{width:50px}.ui-calendar-toolbar{border-top:1px solid #ccc}.ui-month-list,.ui-year-list{display:none;position:absolute;top:30px;left:-1px;height:176px;width:100%;background-color:#fff;border:1px solid #ccc}.ui-month-list .current,.ui-month-list div:hover,.ui-year-list .current,.ui-year-list div:hover{background-color:#f2f2f2}.ui-month-list div,.ui-year-list div{cursor:pointer;float:left;width:25%;height:33.33%;line-height:3;overflow:hidden;box-sizing:border-box;text-align:center;display:table-cell;vertical-align:middle;border:none}.ui-calendar-toolbar a{cursor:pointer;display:inline-block;height:30px;line-height:30px;width:51px;text-align:center;border-right:1px solid #ccc}.ui-calendar-toolbar a.ui-calendar-close{border-right-width:0}.ui-calendar-time{margin:0 auto;text-align:center;padding:3px}.ui-calendar-time a{display:inline-block;padding:2px 3px;cursor:pointer}.nextday,.nexttenyear,.preday,.prevtenyear{color:#999}.calendar-header b{width:30px;float:left;display:block;text-align:center}.ui-calendar li.focus{background-color:#288df0;color:#FFF}.ui-calendar li.disabled{background-color:#ccc}.clearfix:after{height:0;clear:both;visibility:hidden;content:'.'} -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | {"name":"Jsmodule","tagline":"JS组件","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at https://help.github.com/pages or contact support@github.com and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /screen/audio.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,audio) 5 | $set(title,音频播放器样式) 6 |

audio

7 |

audio style, 音频播放器样式

8 | 9 | 12 | 13 | 14 | 15 | 19 | 
<audio src="horse.ogg" class="audio" controls="controls">
20 | Your browser does not support the audio element.
21 | </audio>
22 | <audio src="horse.ogg" class="audio" controls="controls">
23 | Your browser does not support the audio element.
24 | </audio>
25 | <script src="../dist/jquery-1.9.1.min.js" type="text/javascript"></script>
26 | <script src="../dist/audio.js" type="text/javascript"></script>
27 | <script>
28 | $('.audio').Audio();//or new Audio.init({target:$('.audio')})
29 | </script>
30 |
31 | 32 |

属性和回调(options)

33 |

target:

34 | 
要变化样式的audio
35 |
36 | 37 |

play:

38 | 
开始
39 |
40 | 41 |

stop:

42 | 
停止
43 |
44 | 45 |

playCallback:

46 |

function(this.audio,this.audio.paused,this.durationContent)

47 | 
播放或暂停时的回调
48 |
49 | 50 |

stopCallback

51 |

function(this,this.audio,this.audio.paused,this.durationContent)

52 | 
停止后的回调
53 |
54 | 55 |

updateCallback

56 |

function(this,this.audio,this.audio.duration,this.durationContent))

57 | 
更新进度时的回调
58 |
59 | -------------------------------------------------------------------------------- /src/example/mobile-upload/mobile-upload.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-upload v1.0.2 2 | * author:tianxiangbing email: 3 | * demo:http://www.lovewebgames.com/jsmodule/p_upload.html 4 | * git: 2015-04-07 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.Mobile_upload=b(window.Zepto||window.jQuery||$)}(this,function(a){function b(){var a=Math.random().toString().replace(".","");this.id="upload_"+a,this.fileInput}return a.fn.Mobile_upload=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({target:a(this)},c);e.init(f),d.push(e)}),d},b.prototype={init:function(b){this.settings=a.extend({},this.settings,b),this.target=this.settings.target,this.createFile(),this.name=this.settings.name||"files",this.fileInput.css({opacity:"0",width:1}),this.settings.multiple&&this.fileInput.attr("multiple","multiple"),this.bindEvent()},touch:function(b,c){function d(a){return c.call(this,a)}var e;a(b).on("click",d),a(b).on("touchmove",function(){e=!0}).on("touchend",function(a){if(a.preventDefault(),!e){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}e=!1})},createFile:function(){var b=this;b.fileInput&&b.fileInput.remove(),a(b.target).after(''),b.fileInput=a("#"+b.id)},bindEvent:function(){var b=this;this.touch(a(this.target),function(){return a(b.fileInput).trigger("click"),!1}),b.bindFileEvent()},bindFileEvent:function(){var b=this;a(this.fileInput).change(function(c){for(var d=/^image\//i,e=c.target.files,f=e.length-1;f>=0;f--){var g=e[f];if(!d.test(g.type)){alert("不是图片文件");break}var h=new FileReader;b.settings.startUpload&&b.settings.startUpload(b.target),h.onload=function(){if(b.createFile(),b.bindFileEvent(),b.settings.imageReady&&b.settings.imageReady(b.target,this.result),b.settings.ajax){var c={};c[b.settings.ajax.name||"file"]=this.result,a.ajax({type:"post",url:b.settings.ajax.url,data:c,dataType:"json",success:function(a){b.settings.callback&&b.settings.callback(a)},complete:function(){b.settings.endUpload&&b.settings.endUpload(b.target)}})}else b.settings.callback&&b.settings.callback(this.result,g,b.name)},h.readAsDataURL(g)}})}},b}); -------------------------------------------------------------------------------- /src/example/mobile-upload/mobile-upload-jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-upload v1.0.2 2 | * author:tianxiangbing email: 3 | * demo:http://www.lovewebgames.com/jsmodule/p_upload.html 4 | * git: 2015-04-07 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.Mobile_upload=b(window.Zepto||window.jQuery||$)}(this,function(a){function b(){var a=Math.random().toString().replace(".","");this.id="upload_"+a,this.fileInput}return a.fn.Mobile_upload=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({target:a(this)},c);e.init(f),d.push(e)}),d},b.prototype={init:function(b){this.settings=a.extend({},this.settings,b),this.target=this.settings.target,this.createFile(),this.name=this.settings.name||"files",this.fileInput.css({opacity:"0",width:1}),this.settings.multiple&&this.fileInput.attr("multiple","multiple"),this.bindEvent()},touch:function(b,c){function d(a){return c.call(this,a)}var e;a(b).on("click",d),a(b).on("touchmove",function(){e=!0}).on("touchend",function(a){if(a.preventDefault(),!e){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}e=!1})},createFile:function(){var b=this;b.fileInput&&b.fileInput.remove(),a(b.target).after(''),b.fileInput=a("#"+b.id)},bindEvent:function(){var b=this;this.touch(a(this.target),function(){return a(b.fileInput).trigger("click"),!1}),b.bindFileEvent()},bindFileEvent:function(){var b=this;a(this.fileInput).change(function(c){for(var d=/^image\//i,e=c.target.files,f=e.length-1;f>=0;f--){var g=e[f];if(!d.test(g.type)){alert("不是图片文件");break}var h=new FileReader;b.settings.startUpload&&b.settings.startUpload(b.target),h.onload=function(){if(b.createFile(),b.bindFileEvent(),b.settings.imageReady&&b.settings.imageReady(b.target,this.result),b.settings.ajax){var c={};c[b.settings.ajax.name||"file"]=this.result,a.ajax({type:"post",url:b.settings.ajax.url,data:c,dataType:"json",success:function(a){b.settings.callback&&b.settings.callback(a)},complete:function(){b.settings.endUpload&&b.settings.endUpload(b.target)}})}else b.settings.callback&&b.settings.callback(this.result,g,b.name)},h.readAsDataURL(g)}})}},b}); -------------------------------------------------------------------------------- /src/example/dialog/dialog.min.css: -------------------------------------------------------------------------------- 1 | .ui-dialog{display:none;border:1px solid #ccc;background-color:#fff;font-family:arial,'Hiragino Sans GB',sans-serif;position:fixed;left:40%;top:40%}.ui-dialog-close{position:absolute;right:10px;cursor:pointer;color:#FFF;font-weight:700;font-family:cursive}.ui-dialog-mask{position:fixed;width:100%;height:100%;left:0;top:0;background:#000;opacity:.3;display:none;filter:alpha(opacity=30)}.ui-dialog-title{background-color:#288df0;color:#fff;padding:5px 10px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-moz-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0,0,0)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}@-webkit-keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}.zoomIn{-webkit-animation-name:zoomIn;-moz-animation-name:zoomIn;-ms-animation-name:zoomIn;animation-name:zoomIn}.zoomOut{-webkit-animation-name:zoomOut;-moz-animation-name:zoomOut;-ms-animation-name:zoomOut;animation-name:zoomOut}.animated{-webkit-animation-duration:.5s;-ms-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}#confirmDialog{width:350px;background-color:#fff}.ui-alert-title,.ui-confirm-title{white-space:nowrap;text-align:center;font-size:18px;font-weight:700;color:#333;line-height:40px}.confirm-title2{font-size:16px;font-weight:400;color:#666;text-align:center;line-height:1.8}.ui-alert-submit,.ui-confirm-submit,.ui-dialog-submit{background-color:#e05658}.ui-confirm-close,.ui-confirm-no,.ui-dialog-cancel{background-color:#999}.ui-dialog-action{text-align:center;margin-top:20px;width:100%;border:none}.ui-dialog-action td{text-align:center;border:none}.ui-dialog-action button{display:inline-block;border-radius:5px;padding:5px 20px;color:#fff;border:none;outline:0;cursor:pointer;box-sizing:border-box}.ui-alert{border-radius:5px;overflow:hidden;padding:20px}.ui-alert .ui-dialog-close{display:none}.ui-alert .ui-alert-submit{margin:0 auto}.ui-alert-info{text-align:center;margin-top:20px} -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/dialog.min.css: -------------------------------------------------------------------------------- 1 | .ui-dialog{display:none;border:1px solid #ccc;background-color:#fff;font-family:arial,'Hiragino Sans GB',sans-serif;position:fixed;left:40%;top:40%}.ui-dialog-close{position:absolute;right:10px;cursor:pointer;color:#FFF;font-weight:700;font-family:cursive}.ui-dialog-mask{position:fixed;width:100%;height:100%;left:0;top:0;background:#000;opacity:.3;display:none;filter:alpha(opacity=30)}.ui-dialog-title{background-color:#288df0;color:#fff;padding:5px 10px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-moz-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0,0,0)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}@-webkit-keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}.zoomIn{-webkit-animation-name:zoomIn;-moz-animation-name:zoomIn;-ms-animation-name:zoomIn;animation-name:zoomIn}.zoomOut{-webkit-animation-name:zoomOut;-moz-animation-name:zoomOut;-ms-animation-name:zoomOut;animation-name:zoomOut}.animated{-webkit-animation-duration:.5s;-ms-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}#confirmDialog{width:350px;background-color:#fff}.ui-alert-title,.ui-confirm-title{white-space:nowrap;text-align:center;font-size:18px;font-weight:700;color:#333;line-height:40px}.confirm-title2{font-size:16px;font-weight:400;color:#666;text-align:center;line-height:1.8}.ui-alert-submit,.ui-confirm-submit,.ui-dialog-submit{background-color:#e05658}.ui-confirm-close,.ui-confirm-no,.ui-dialog-cancel{background-color:#999}.ui-dialog-action{text-align:center;margin-top:20px;width:100%;border:none}.ui-dialog-action td{text-align:center;border:none}.ui-dialog-action button{display:inline-block;border-radius:5px;padding:5px 20px;color:#fff;border:none;outline:0;cursor:pointer;box-sizing:border-box}.ui-alert{border-radius:5px;overflow:hidden;padding:20px}.ui-alert .ui-dialog-close{display:none}.ui-alert .ui-alert-submit{margin:0 auto}.ui-alert-info{text-align:center;margin-top:20px} -------------------------------------------------------------------------------- /src/example/mobile-select-date/dialog.min.css: -------------------------------------------------------------------------------- 1 | .ui-dialog{display:none;border:1px solid #ccc;background-color:#fff;font-family:arial,'Hiragino Sans GB',sans-serif;position:fixed;left:40%;top:40%}.ui-dialog-close{position:absolute;right:10px;cursor:pointer;color:#FFF;font-weight:700;font-family:cursive}.ui-dialog-mask{position:fixed;width:100%;height:100%;left:0;top:0;background:#000;opacity:.3;display:none;filter:alpha(opacity=30)}.ui-dialog-title{background-color:#288df0;color:#fff;padding:5px 10px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-moz-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0,0,0)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}@-webkit-keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}.zoomIn{-webkit-animation-name:zoomIn;-moz-animation-name:zoomIn;-ms-animation-name:zoomIn;animation-name:zoomIn}.zoomOut{-webkit-animation-name:zoomOut;-moz-animation-name:zoomOut;-ms-animation-name:zoomOut;animation-name:zoomOut}.animated{-webkit-animation-duration:.5s;-ms-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}#confirmDialog{width:350px;background-color:#fff}.ui-alert-title,.ui-confirm-title{white-space:nowrap;text-align:center;font-size:18px;font-weight:700;color:#333;line-height:40px}.confirm-title2{font-size:16px;font-weight:400;color:#666;text-align:center;line-height:1.8}.ui-alert-submit,.ui-confirm-submit,.ui-dialog-submit{background-color:#e05658}.ui-confirm-close,.ui-confirm-no,.ui-dialog-cancel{background-color:#999}.ui-dialog-action{text-align:center;margin-top:20px;width:100%;border:none}.ui-dialog-action td{text-align:center;border:none}.ui-dialog-action button{display:inline-block;border-radius:5px;padding:5px 20px;color:#fff;border:none;outline:0;cursor:pointer;box-sizing:border-box}.ui-alert{border-radius:5px;overflow:hidden;padding:20px}.ui-alert .ui-dialog-close{display:none}.ui-alert .ui-alert-submit{margin:0 auto}.ui-alert-info{text-align:center;margin-top:20px} -------------------------------------------------------------------------------- /screen/query.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,query) 5 | $set(title,获取url参数和form表单json格式) 6 | 7 |

8 | query

9 | 10 |

对表单和url的操作

11 |

12 |

13 |

14 | 如图所示，它的主要作用就是取url的参数，和格式化form表单里的参数。

15 |

Demo:

16 | 点我加参数 17 | 点我取参数 18 |
19 |

用户名：

20 |

　邮箱：

21 |

手机号：

22 |

　地址：

23 |

24 |
25 |
26 | 27 | 28 | 37 |

38 | 用法

39 | 40 | 
Query.getQuery('a')
41 | var json = Query.getForm($('#form'));
42 |
43 | 44 |

45 | 参数说明

46 | 47 |

48 | getQuery: (argname,type,win)

49 | 50 | 
取url参数
51 | argname 是要取的参数名，如a=1这里要传"a";
52 | type是指取的类型，默认是"?"，可以传"#"取锚点值
53 | win是指要取的window对象，默认为当前的window.
54 |
55 | 56 |

57 | getForm:(form)

58 | 59 | 
取form参数
60 | form为当前的dom节点，可以是div或其他的类型的节点，不一定要<form>
61 |
62 | 63 | 64 |

其它组件推荐

65 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /src/example/scroll-load/scroll-load.min.js: -------------------------------------------------------------------------------- 1 | /*! scroll-load v1.0.0 2 | * author:tianxiangbing email: 3 | * demo:http://www.lovewebgames.com/jsmodule/scroll-load.html 4 | * git: 2015-04-07 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.ScrollLoad=b(window.Zepto||window.jQuery||$)}(this,function(a){a.fn.ScrollLoad=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({container:a(this)},c);e.init(f),d.push(e)}),d};var b=function(){this.container,this.url,this.param,this.page=1,this.pagename="page",this.loadmore};return b.prototype={init:function(b){this.settings=a.extend({},b),this.load=this.settings.loadmore||a('
点击加载更多
'),this.scrolltrigger=a(this.settings.scrolltrigger||window),this.container=this.settings.container,0==this.container.children().size()&&this.container.append('
'),this.container.append(this.load),this.url=this.settings.url,this.page=this.settings.page||1,this.pagename=b.pagename||"page",this.param=a.extend({},this.settings.param),this.param[this.pagename]=this.page,this.bindEvent(),this.checkPosition()},touch:function(b,c){var d;a(b).on("click",c),a(b).on("touchmove",function(){d=!0}).on("touchend",function(a){if(a.preventDefault(),!d){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}d=!1})},bindEvent:function(){if(this.container.size()){var a=this;a.settings.scrollLoad&&a.scrolltrigger.scroll(function(){a.checkPosition()}),a.touch(a.load,function(){a.ajaxData()})}},checkPosition:function(){var b=a(this.container).children().first().height(),c=this.load.height(),d=this.scrolltrigger[0].clientHeight||document.documentElement.clientHeight||document.body.clientHeight,e=(this.scrolltrigger[0].clientWidth||document.documentElement.clientWidth||document.body.clientWidth,this.scrolltrigger.scrollTop());d+e>=b+c/2&&this.ajaxData()},ajaxData:function(){var b=this;return b.ajax?!1:(b.ajax=!0,this.load.html("正在加载中..."),this.param[this.pagename]=this.page,void a.ajax({url:b.url,type:b.settings.type||"get",dataType:"json",cache:!1,data:b.param,timeout:3e4,success:function(a){b.settings.format?b.settings.format(this.container,a):b.format(a),b.page++},complete:function(){setTimeout(function(){b.ajax=!1},500),b.load.html("点击加载更多")}}))},format:function(b){b.data&&b.data.length||(b.nodata=!0,this.load.remove());var c="string"==typeof this.settings.tpl?a(this.settings.tpl):this.settings.tpl,d=c.html(),e=Handlebars.compile(d),f=e(b);this.container.children().first().append(f),this.settings.callback&&this.settings.callback(this.container,b)}},b}); -------------------------------------------------------------------------------- /src/example/scroll-load/scroll-load-jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! scroll-load v1.0.0 2 | * author:tianxiangbing email: 3 | * demo:http://www.lovewebgames.com/jsmodule/scroll-load.html 4 | * git: 2015-04-07 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.ScrollLoad=b(window.Zepto||window.jQuery||$)}(this,function(a){a.fn.ScrollLoad=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({container:a(this)},c);e.init(f),d.push(e)}),d};var b=function(){this.container,this.url,this.param,this.page=1,this.pagename="page",this.loadmore};return b.prototype={init:function(b){this.settings=a.extend({},b),this.load=this.settings.loadmore||a('
点击加载更多
'),this.scrolltrigger=a(this.settings.scrolltrigger||window),this.container=this.settings.container,0==this.container.children().size()&&this.container.append('
'),this.container.append(this.load),this.url=this.settings.url,this.page=this.settings.page||1,this.pagename=b.pagename||"page",this.param=a.extend({},this.settings.param),this.param[this.pagename]=this.page,this.bindEvent(),this.checkPosition()},touch:function(b,c){var d;a(b).on("click",c),a(b).on("touchmove",function(){d=!0}).on("touchend",function(a){if(a.preventDefault(),!d){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}d=!1})},bindEvent:function(){if(this.container.size()){var a=this;a.settings.scrollLoad&&a.scrolltrigger.scroll(function(){a.checkPosition()}),a.touch(a.load,function(){a.ajaxData()})}},checkPosition:function(){var b=a(this.container).children().first().height(),c=this.load.height(),d=this.scrolltrigger[0].clientHeight||document.documentElement.clientHeight||document.body.clientHeight,e=(this.scrolltrigger[0].clientWidth||document.documentElement.clientWidth||document.body.clientWidth,this.scrolltrigger.scrollTop());d+e>=b+c/2&&this.ajaxData()},ajaxData:function(){var b=this;return b.ajax?!1:(b.ajax=!0,this.load.html("正在加载中..."),this.param[this.pagename]=this.page,void a.ajax({url:b.url,type:b.settings.type||"get",dataType:"json",cache:!1,data:b.param,timeout:3e4,success:function(a){b.settings.format?b.settings.format(this.container,a):b.format(a),b.page++},complete:function(){setTimeout(function(){b.ajax=!1},500),b.load.html("点击加载更多")}}))},format:function(b){b.data&&b.data.length||(b.nodata=!0,this.load.remove());var c="string"==typeof this.settings.tpl?a(this.settings.tpl):this.settings.tpl,d=c.html(),e=Handlebars.compile(d),f=e(b);this.container.children().first().append(f),this.settings.callback&&this.settings.callback(this.container,b)}},b}); -------------------------------------------------------------------------------- /screen/scroll-load.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,scroll-load) 5 | $set(title,滚动加载) 6 | 7 |
8 |
    9 |
10 |
11 |

js 滚动加载内容 12 |

13 |

14 | 用法

15 | 
    <div id="content">
16 |     </div>
17 |     <script id="entry-template" type="text/x-handlebars-template">
18 |         {{#each data}}
19 |         <div><img src="{{url}}"/></div>
20 |         <div>{{title}}</div>
21 |         {{/each}}
22 |     </script>
23 |     <script src="../dist/jquery-1.9.1.min.js"></script>
24 |     <script src="../dist/handlebars-v3.0.0.js"></script>
25 |     <script src="../dist/scroll-load-jquery.js"></script>
26 |     <script>
27 |         $('#content').ScrollLoad({tpl:"#entry-template",url:"data.json",autoLoad:true});
28 |     </script>
29 |
30 |

31 | 参数及回调

32 |

url

33 | 
请求加载的url
34 |

pagename

35 | 
分页参数名page
36 |

param

37 | 
object,其他的参数
38 |

autoLoad :bool

39 | 
是否自动加滚动加载,默认false;
40 |

format: function

41 | 
格式化的回调方法，如果没传，就会以tpl参数进行handlebars的方式格式化 。
42 |

tpl:

43 | 
handlebars的模板节点(string or object),要单独引用handlebars
44 | 45 | 61 | 62 | 63 | 64 | 72 | 73 |

其它组件推荐

74 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/area.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,area) 5 | $set(title,地区联动选择pc版) 6 |

area

7 |

省市区三级联动pc版

8 |

手机版的地区三级联动请至 mobile-select-area

9 | 10 |
11 |
地区联动
12 |
13 |
14 |
15 | 16 | -- 省份 -- 17 |
18 |
19 |
20 | 21 | -- 城市 -- 22 |
    23 |
    24 |
    25 | 26 | -- 市区 -- 27 |
      28 |
      29 |
      30 |
      31 |
      32 | 33 | 34 | 35 | 38 | 39 |

      js:

      40 | 
          <script src="jquery-1.9.1.min.js"></script>
41 |     <script src="area-data.js"></script>
42 |     <script src="area.js"></script>
43 |     <script>
44 |     Area.init(AreaData);
45 |     </script>
46 |
      47 | 48 |

      AreaData是取的area-data.js的静态数据，也可以通过ajax一次性全读出来

      49 |

      html:

      50 | 
      <div class="area-input">
51 |     <div class="area province">
52 |         <input type="hidden" id="hd_province">
53 |         <span>-- 省份 --</span><i></i>
54 |         <div class="area-content"></div>
55 |     </div>
56 |     <div class="area city">
57 |         <input type="hidden" id="hd_city">
58 |         <span>-- 城市 --</span><i></i>
59 |         <div class="area-content"><ul></ul></div>
60 |     </div>
61 |     <div class="area downtown">
62 |         <input type="hidden" id="hd_downtown">
63 |         <span>-- 市区 --</span><i></i>
64 |         <div class="area-content"><ul></ul></div>
65 |     </div>
66 | </div>
67 |
      68 | 69 |

      area-data:

      70 | 
      "data": [{
71 |         "id": "2",
72 |         "name": "\u5317\u4eac\u5e02",
73 |         "child": [{
74 |             "id": "2288",
75 |             "name": "\u4e1c\u57ce\u533a"
76 |         }]
77 |         ...
78 |         }]
79 |
      80 | -------------------------------------------------------------------------------- /src/example/mobile-select-date/mobile-select-area.min.css: -------------------------------------------------------------------------------- 1 | .ui-dialog{display:none;border:1px solid #ccc;background-color:#fff;font-family:arial,'Hiragino Sans GB',sans-serif;position:fixed;left:40%;top:40%}.ui-dialog-close{position:absolute;right:10px;cursor:pointer;color:#FFF;font-weight:700;font-family:cursive}.ui-dialog-mask{position:fixed;width:100%;height:100%;left:0;top:0;background:#000;opacity:.3;display:none;filter:alpha(opacity=30)}.ui-scroller,.ui-scroller>div{position:relative;height:88px}.ui-dialog-title{background-color:#288df0;color:#fff;padding:5px 10px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-moz-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-moz-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0,0,0)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}@-webkit-keyframes zoomOut{0%{opacity:1;transform:scale3d(1,1,1)}100%{opacity:0;transform:scale3d(0,0,0)}}.zoomIn{-webkit-animation-name:zoomIn;-moz-animation-name:zoomIn;-ms-animation-name:zoomIn;animation-name:zoomIn}.zoomOut{-webkit-animation-name:zoomOut;-moz-animation-name:zoomOut;-ms-animation-name:zoomOut;animation-name:zoomOut}.animated{-webkit-animation-duration:.5s;-ms-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}#confirmDialog{width:350px;background-color:#fff}.ui-alert-title,.ui-confirm-title{white-space:nowrap;text-align:center;font-size:18px;font-weight:700;color:#333;line-height:40px}.confirm-title2{font-size:16px;font-weight:400;color:#666;text-align:center;line-height:1.8}.ui-alert-submit,.ui-confirm-submit,.ui-dialog-submit{background-color:#e05658}.ui-confirm-close,.ui-confirm-no,.ui-dialog-cancel{background-color:#999}.ui-dialog-action{text-align:center;margin-top:20px;width:100%;border:none}.ui-dialog-action td{text-align:center;border:none}.ui-dialog-action button{display:inline-block;border-radius:5px;padding:5px 20px;color:#fff;border:none;outline:0;cursor:pointer;box-sizing:border-box}.ui-alert{border-radius:5px;overflow:hidden;padding:20px}.ui-alert .ui-dialog-close{display:none}.ui-alert .ui-alert-submit{margin:0 auto}.ui-alert-info{text-align:center;margin-top:20px}.ui-scroller dl,.ui-scroller p{width:100%;position:absolute;margin:0}.ui-scroller{width:100%;min-width:260px;font-size:14px;font-weight:400;-webkit-mask:-webkit-gradient(linear,0 30%,0 100%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)))}.ui-scroller>div{width:33%;display:inline-block;overflow:hidden;box-sizing:border-box}.ui-scroller dl{top:30px}.ui-scroller dd{:padding;:0;margin:0;overflow:hidden;text-overflow:ellipsis;width:100%;height:30px;line-height:30px}.ui-scroller-mask{-webkit-mask:-webkit-gradient(linear,0 30%,0 0,from(rgba(222,187,71,1)),to(rgba(36,142,36,0)))}.ui-scroller p{top:30px;height:30px;z-index:-1;border:1px solid #e2e2e2;border-left:none;border-right:none}.ui-scroller .ui-dialog-action{margin-top:10px} -------------------------------------------------------------------------------- /src/example/mobile-select-area/mobile-select-area.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-select-area author:tianxiangbing email:55342775@qq.com 2 | * demo:http://www.lovewebgames.com/jsmodule/mobile-select-area.html 3 | * git:https://github.com/tianxiangbing/mobile-select-area 2015-04-07 */ 4 | !function(a,b){"function"==typeof define&&define.amd?define(["$","dialog"],b):"object"==typeof exports?module.exports=b():a.MobileSelectArea=b(window.Zepto||window.jQuery||$)}(this,function(a){var b=function(){var a=Math.random().toString().replace(".","");this.id="scroller_"+a,this.scroller,this.data,this.index=0,this.value=[0,0,0],this.oldvalue,this.text=["","",""],this.level=3,this.mtop=30};return b.prototype={init:function(b){this.settings=a.extend({},b),this.trigger=a(this.settings.trigger),this.trigger.attr("readonly","readonly"),this.value=this.settings.value&&this.settings.value.split(",")||[0,0,0],this.oldvalue=this.value.concat([]),this.getData(),this.bindEvent()},getData:function(){var b=this;"object"==typeof this.settings.data?this.data=this.settings.data:a.ajax({dataType:"json",cache:!0,url:this.settings.data,type:"GET",success:function(a){b.data=a.data},accepts:{json:"application/json, text/javascript, */*; q=0.01"}})},bindEvent:function(){var b=this;this.trigger.tap(function(){a.confirm('

      ',null,function(a){"yes"==a&&b.submit(),(a="no")&&b.cancel(),this.dispose()}),b.scroller=a("#"+b.id),b.format();var c=0,d=0;return b.scroller.children().bind("touchstart",function(a){c=a.changedTouches[0].pageY}),b.scroller.children().bind("touchmove",function(b){d=b.changedTouches[0].pageY;var e=d-c,f=a(b.target).parent();if("DL"==f[0].nodeName){var g=parseInt(f.css("top")||0)+e;return f.css("top",g),c=d,!1}}),b.scroller.children().bind("touchend",function(e){d=e.changedTouches[0].pageY;var f=d-c,g=a(e.target).parent();if("DL"==g[0].nodeName){var h=a(g.parent()).index(),i=parseInt(g.css("top")||0)+f;i>b.mtop&&(i=b.mtop),i<-a(g).height()+60&&(i=-a(g).height()+60);var j=i/b.mtop,k=Math.round(j),l=Math.abs(k)+1;1==k&&(l=0),b.value[h]=a(g.children().get(l)).attr("ref"),b.text[h]=0==b.value[h]?"":a(g.children().get(l)).html();for(var m=b.level-1;m>h;m--)b.value[m]=0,b.text[m]="";return a(g.children().get(l)).hasClass("focus")||b.format(),a(g.children().get(l)).addClass("focus").siblings().removeClass("focus"),g.css("top",k*b.mtop),!1}}),!1})},format:function(){{var a=this;a.scroller.children()}this.f(this.data)},f:function(b){var c=this,d=b;d||(d=[]);var e,f='
      ——
      ',g=0,h=c.mtop;if(0!==c.index&&"0"==c.value[c.index-1])f='
      ——
      ',c.value[c.index]=0,c.text[c.index]="",g=0;else{"0"==c.value[c.index]&&(f='
      ——
      ',g=0);for(var i=0,j=d.length;j>i;i++){var k=d[i].pid||0,l=d[i].id||0,m="";c.value[c.index]==l&&(m="focus",g=l,e=d[i].child,h=c.mtop*-i),f+='
      '+d[i].name+"
      "}}f+="
      ";var n=a(f);n.css("top",h);var o=c.scroller.children();return a(o[c.index]).html(n),c.index++,c.index>c.level-1?void(c.index=0):void c.f(e)},submit:function(){this.oldvalue=this.value.concat([]),1==this.trigger[0].nodeType&&(this.trigger.val(this.text.join(" ")),this.trigger.attr("data-value",this.value.join(","))),this.trigger.next(":hidden").val(this.value.join(",")),this.settings.callback&&this.settings.callback(this.scroller)},cancel:function(){this.value=this.oldvalue.concat([])}},b}); -------------------------------------------------------------------------------- /screen/localStorage-cache.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,localStorage-cache) 5 | $set(title,lacalStorage-cache) 6 |

      localStorage-cache

      7 |

      localStorage本地存储缓存管理。

      8 | 9 |
      过期时间： 内容：
      10 |
      11 |
      12 |
      13 |
      14 |
      15 | 16 | 17 | 54 |

      ##使用方法

      55 | 
      LocalStorageCache.add('key','value');
56 |

      一般情况下是这样的添加的

      57 |

      ##add :function(key,value,exp)

      58 | 
      add有三个参数,key是键，value为值，exp是过期时间，可以是0（关闭时过期）,int 秒为单位，date类型为具体到期日期
59 |

      ##get:function(key,promise)

      60 | 
      返回promise, 如果cache已过期，当第二个参数promise存在时，promise的fail时会在返回过期时的值
61 | 
62 | function ajax(){
63 |     var dtd = $.Deferred();
64 |     $.get('index.html').done(function(){
65 |         dtd.resolve("hello world.");
66 |         LocalStorageCache.setExpired($('#txt_expri').val())//重新设置过期时间
67 |     }).fail(function(){
68 |         dtd.reject();
69 |     });
70 |     return  dtd ;
71 | }
72 | $("#btn_getupdate").click(function(){
73 |     LocalStorageCache.get('key',ajax).done(function(result){
74 |         alert(result)
75 |     }).fail(function(result){
76 |         alert(result+'fail')
77 |     });
78 | });
79 |

      ##remove:function(key)

      80 | 
      移除cache
81 |

      ##clear:function()

      82 | 
      清空所有cache
83 |

      ##update:function(key,value,exp)

      84 | 
      更新cache,如果不加exp参数，就只更新内容。
85 |
      -------------------------------------------------------------------------------- /src/example/dialog/dialog.scss: -------------------------------------------------------------------------------- 1 | .ui-dialog { 2 | font-family: "Microsoft YaHei" ! important; 3 | box-sizing:border-box;pointer-events: auto;display: none;/* border: 1px solid #ccc; */ background-color: #fff; font-family: arial, 'Hiragino Sans GB', sans-serif; position: absolute;/* left:40%;top:40%; */ } 4 | .ui-dialog-close { position: absolute; right: 10px;cursor: pointer;color:#FFF; font-weight: bold;font-family: cursive;} 5 | .ui-dialog-mask{position: fixed;width:100%;height:100%;left:0;top:0;background:#000;opacity: .7;display: none;filter:alpha(opacity=70);} 6 | .ui-dialog-title{background-color:#288df0;color:#fff;padding:5px 10px;} 7 | @-webkit-keyframes zoomIn { 8 | 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 9 | 100% { opacity: 1; } 10 | } 11 | @-moz-keyframes zoomIn { 12 | 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 13 | 100% { opacity: 1; } 14 | } 15 | @keyframes zoomIn { 16 | 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);} 17 | 100% { opacity: 1; } 18 | } 19 | @keyframes zoomOut { 20 | 0% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);} 21 | 100% { opacity: 0;} 22 | } 23 | @-webkit-keyframes zoomOut { 24 | 0% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);} 25 | 100% { opacity: 0; } 26 | } 27 | @-moz-keyframes zoomOut { 28 | 0% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 29 | 100% { opacity: 1; } 30 | } 31 | .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } 32 | .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut;display: none\0 !important; } 33 | .animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } 34 | #confirmDialog{width: 350px;background-color: #fff;} 35 | .ui-confirm-title,.ui-alert-title{ text-align: center;font-size: 14px;color:#333;line-height: 25px; 36 | padding:27px 0 20px 0; } 37 | .confirm-title2{font-size: 16px;font-weight: normal; color: #666;text-align: center;line-height: 1.8;} 38 | .ui-dialog-cancel{background-color:#999999;} 39 | .ui-dialog-action{height:45px;line-height:45px;border-collapse:collapse;border-spacing:0;pointer-events: auto;text-align: center;width:100%;border-top: 1px solid #dcdcdc;padding:0;margin:0;} 40 | .ui-dialog-action td{text-align: center;border:none;} 41 | .ui-dialog-action { 42 | button,a{background-color: #fff;display:block;width:100%;height:100%;color:#47b5ca;border:none;outline: none;cursor: pointer;box-sizing: border-box;padding:0;} 43 | .ui-confirm-close,.ui-confirm-no{color:#747474;border-left:1px solid #dcdcdc;} 44 | } 45 | .ui-alert{border-radius: 5px;overflow: hidden;} 46 | .ui-alert .ui-dialog-close{display: none;} 47 | .ui-alert .ui-alert-submit{margin: 0 auto;} 48 | .ui-alert-info{text-align: center;margin-top:20px;} 49 | .ui-alert-tip{ 50 | color:#fff !important; 51 | background-color: rgba(0, 0, 0, .5) !important; 52 | .ui-alert-title{ 53 | color:#fff !important; 54 | padding:27px 25px; 55 | } 56 | } -------------------------------------------------------------------------------- /src/example/mobile-select-date/mobile-select-area.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-select-date v1.0.0 2 | * author:tianxiangbing email:55342775@qq.com 3 | * demo:http://www.lovewebgames.com/jsmodule/mobile-select-date.html 4 | * git:https://github.com/tianxiangbing/mobile-select-date 2015-04-17 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$","dialog"],b):"object"==typeof exports?module.exports=b():a.MobileSelectArea=b(window.Zepto||window.jQuery||$)}(this,function(a){var b=function(){var a=Math.random().toString().replace(".","");this.id="scroller_"+a,this.scroller,this.data,this.index=0,this.value=[0,0,0],this.oldvalue,this.text=["","",""],this.level=3,this.mtop=30,this.separator=" "};return b.prototype={init:function(b){this.settings=a.extend({},b),this.trigger=a(this.settings.trigger),this.trigger.attr("readonly","readonly"),this.value=this.settings.value&&this.settings.value.split(",")||[0,0,0],this.text=this.settings.text||this.trigger.val().split(" ")||["","",""],this.oldvalue=this.value.concat([]),this.clientHeight=document.documentElement.clientHeight||document.body.clientHeight,this.clientWidth=document.documentElement.clientWidth||document.body.clientWidth,this.getData(),this.bindEvent()},getData:function(){var b=this;"object"==typeof this.settings.data?this.data=this.settings.data:a.ajax({dataType:"json",cache:!0,url:this.settings.data,type:"GET",success:function(a){b.data=a.data},accepts:{json:"application/json, text/javascript, */*; q=0.01"}})},bindEvent:function(){var b=this;this.trigger.tap(function(){a.confirm('

      ',null,function(a){"yes"==a&&b.submit(),(a="no")&&b.cancel(),this.dispose()},{clientHeight:b.clientHeight,clientWidth:b.clientWidth}),b.scroller=a("#"+b.id),b.format();var c=0,d=0;return b.scroller.children().bind("touchstart",function(a){c=a.changedTouches[0].pageY}),b.scroller.children().bind("touchmove",function(b){d=b.changedTouches[0].pageY;var e=d-c,f=a(b.target).parent();if("DL"==f[0].nodeName){var g=parseInt(f.css("top")||0)+e;return f.css("top",g),c=d,!1}}),b.scroller.children().bind("touchend",function(e){d=e.changedTouches[0].pageY;var f=d-c,g=a(e.target).parent();if("DL"==g[0].nodeName){var h=a(g.parent()).index(),i=parseInt(g.css("top")||0)+f;i>b.mtop&&(i=b.mtop),i<-a(g).height()+60&&(i=-a(g).height()+60);var j=i/b.mtop,k=Math.round(j),l=Math.abs(k)+1;1==k&&(l=0),b.value[h]=a(g.children().get(l)).attr("ref"),b.text[h]=0==b.value[h]?"":a(g.children().get(l)).html();for(var m=b.level-1;m>h;m--)b.value[m]=0,b.text[m]="";return a(g.children().get(l)).hasClass("focus")||b.format(),a(g.children().get(l)).addClass("focus").siblings().removeClass("focus"),g.css("top",k*b.mtop),!1}}),!1})},format:function(){{var a=this;a.scroller.children()}this.f(this.data)},f:function(b){var c=this,d=b;d||(d=[]);var e,f='
      ——
      ',g=0,h=c.mtop;if(0!==c.index&&"0"==c.value[c.index-1])f='
      ——
      ',c.value[c.index]=0,c.text[c.index]="",g=0;else{"0"==c.value[c.index]&&(f='
      ——
      ',g=0);for(var i=0,j=d.length;j>i;i++){var k=d[i].pid||0,l=d[i].id||0,m="";c.value[c.index]==l&&(m="focus",g=l,e=d[i].child,h=c.mtop*-i),f+='
      '+d[i].name+"
      "}}f+="
      ";var n=a(f);n.css("top",h);var o=c.scroller.children();return a(o[c.index]).html(n),c.index++,c.index>c.level-1?void(c.index=0):void c.f(e)},submit:function(){this.oldvalue=this.value.concat([]),1==this.trigger[0].nodeType&&(this.trigger.val(this.text.join(this.separator)),this.trigger.attr("data-value",this.value.join(","))),this.trigger.next(":hidden").val(this.value.join(",")),this.settings.callback&&this.settings.callback(this.scroller)},cancel:function(){this.value=this.oldvalue.concat([])}},b}); -------------------------------------------------------------------------------- /screen/mobile-select-date.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,mobile-select-date) 5 | $set(title,手机端选择日期) 6 |

      7 | mobile-select-date

      8 | 9 |

      手机联动选择日期 10 | 这个组件是从mobile-select-area 继承过来的，所以调用方法基本相同

      11 | 请切换手机调试模式或用手机浏览器访问此demo 12 | 13 | 14 |

      居中显示：

      15 |

      置底固定显示：

      16 | 17 | 18 | 19 | 20 | 26 |

      27 | 用法

      28 |

      预览效果图

      29 |

      30 |

      PC端推荐使用

      calendar组件

      31 |

      32 | 注：依赖于dialog和mobile-select-area 33 |

      34 | 
      <!DOCTYPE>
35 | <html>
36 |     <head>
37 |         <title>时间选择器</title>
38 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
39 |         <link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">
40 |         <script type="text/javascript" src="../dist/zepto.js"></script>
41 |         <script type="text/javascript" src="../dist/dialog.js"></script>
42 |         <script type="text/javascript" src="../dist/mobile-select-area.js"></script>
43 |         <script type="text/javascript" src="../dist/mobile-select-date.js"></script>
44 |     </head>
45 |     <body>
46 |         <input type="text" id="txt_date" value="2013/01/22"/>
47 |         <script>
48 |         var selectDate = new MobileSelectDate();
49 |         selectDate.init({trigger:'#txt_date'});
50 |         </script>
51 |     </body>
52 | </html>
53 |
      54 | 55 |

      56 | 属性及方法

      57 | 58 |

      59 | trigger:

      60 | 61 | 
          触发弹窗的DOM元素 ，可以是input或其他
62 |
      63 | 64 |

      65 | callback:

      66 | 67 | 
          选中后的回调，默认有填充trigger的value值，以‘/’分隔
68 |
      69 | 70 |

      其它组件推荐

      71 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/mobile-upload.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,mobile-upload) 5 | $set(title,上传图片预览webkit) 6 |

      7 | mobile-upload

      8 |

      手机上传图片 9 |

      10 |

      11 | 12 | 13 | 14 | 15 | 21 |

      22 |

      23 | 用法

      24 | 25 | 
          <button id="btn_upload">upload</button>
26 |     <script src="../src/jquery-1.9.1.min.js"></script>
27 |     <script src="../src/mobile-upload.js"></script>
28 |     <script>
29 |     var upload = new Mobile_upload();
30 |     upload.init({target:$('#btn_upload'),multiple:true,callback:function(result,name,postName){
31 |         $('body').append('<img src="'+result+'"/><input type="hidden" name="'+postName+'"/>');
32 |     }});
33 |     </script>
34 |
      35 | 36 |
      37 | 38 |

      39 | 或者

      40 | 41 | 
          <script src="../src/jquery-1.9.1.min.js"></script>
42 |     <script src="../src/mobile-upload-jquery.js"></script>
43 |     <button class="mobile-upload">upload</button>
44 |     <script>
45 |     $(function(){
46 |         $('.mobile-upload').Mobile_upload({multiple:true,callback:function(result,name,postName){
47 |             $('body').append('<img src="'+result+'"/><input type="hidden" name="'+postName+'"/>');
48 |         }});
49 |     });
50 |     </script>
51 |
      52 |

      53 | 54 | 61 |

      62 |

      **新增返回时直接ajax提交数据到后台 **

      63 | 64 |

      65 | 属性和方法

      66 | 67 |

      68 | 属性

      69 | 70 |

      71 | target:

      72 | 73 | 
          上传的对象结点(jquery方式调用的为它本身)
74 |
      75 | 76 |

      77 | multiple:

      78 | 79 | 
          是否上传多张
80 |
      81 | 82 |

      83 | 方法

      84 | 85 |

      86 | callback:function(result,name,postName)

      87 | 88 | 
          上传完成后的回调,参数result是返回图片数据，name是文件名,postName是隐藏input的name，方便form提交时使用
89 |
      90 | 91 |

      其它组件推荐

      92 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jsmodule 2 | JS组件 3 | ========================== 4 | #[日历、日期、calendar](https://github.com/tianxiangbing/calendar) 5 | ![日历、日期、calendar:](http://www.lovewebgames.com/jsmodule/images/ui/calendar.png "日历、日期、calendar") 6 | #[浮层、弹窗、dialog](https://github.com/tianxiangbing/dialog) 7 | ![浮层、弹窗、dialog:](http://www.lovewebgames.com/jsmodule/images/ui/dialog.png "浮层、弹窗、dialog") 8 | #[h5上传图片、upload](https://github.com/tianxiangbing/mobile-upload) 9 | ![h5上传图片、upload:](http://www.lovewebgames.com/jsmodule/images/ui/mobile-upload.png "h5上传图片、upload") 10 | #[js的滚动加载内容](https://github.com/tianxiangbing/scroll-load) 11 | ![js的滚动加载内容:](http://www.lovewebgames.com/jsmodule/images/ui/scroll-load.png "js的滚动加载内容") 12 | #[js手机选择地区联动仿ios](https://github.com/tianxiangbing/mobile-select-area) 13 | ![js手机选择地区联动仿ios:](http://www.lovewebgames.com/jsmodule/images/ui/mobile-select-area.png "js手机选择地区联动仿ios") 14 | #[js实现手机端图片预览](https://github.com/tianxiangbing/mobile-photo-preview) 15 | ![js实现手机端图片预览:](http://www.lovewebgames.com/jsmodule/images/ui/mobile-photo-preview.png "js实现手机端图片预览") 16 | #[js实现手机端选择日期](https://github.com/tianxiangbing/mobile-select-date) 17 | ![js实现手机端选择日期:](http://www.lovewebgames.com/jsmodule/images/ui/mobile-select-date.png "js实现手机端选择日期") 18 | #[轮播图片、支持手机滑动](https://github.com/tianxiangbing/carousel-image) 19 | ![轮播图片、支持手机滑动:](http://www.lovewebgames.com/jsmodule/images/ui/carousel-image.png "轮播图片、支持手机滑动") 20 | #[仿ajax上传文件iframe](https://github.com/tianxiangbing/upload) 21 | ![仿ajax上传文件iframe:](http://www.lovewebgames.com/jsmodule/images/ui/upload.png "轮播图片、支持手机滑动") 22 | #[点击的进度条](https://github.com/tianxiangbing/click-progress) 23 | ![点击的进度条:](http://www.lovewebgames.com/jsmodule/images/ui/click-progress.png "点击的进度条") 24 | #[文本框计数统计](https://github.com/tianxiangbing/word-count) 25 | ![文本框计数统计:](http://www.lovewebgames.com/jsmodule/images/ui/word-count.png "文本框计数统计") 26 | #[图片的懒加载](https://github.com/tianxiangbing/lazy-load) 27 | ![图片的懒加载:](http://www.lovewebgames.com/jsmodule/images/ui/lazy-load.gif "图片的懒加载") 28 | #[本地缓存localStorage](https://github.com/tianxiangbing/localStorage-cache) 29 | ![本地缓存localStorage:](http://www.lovewebgames.com/jsmodule/images/ui/localStorage-cache.jpg "本地缓存localStorage") 30 | #[pc地区联动选择area](https://github.com/tianxiangbing/area) 31 | ![pc地区联动选择area:](http://www.lovewebgames.com/jsmodule/images/ui/area.jpg "pc地区联动选择area") 32 | #[图片放大镜](https://github.com/tianxiangbing/image-zooming) 33 | ![图片放大镜:](http://www.lovewebgames.com/jsmodule/images/ui/image-zooming.jpg "图片放大镜") 34 | #[ajax分页插件paging](https://github.com/tianxiangbing/paging) 35 | ![ajax分页插件paging:](http://www.lovewebgames.com/jsmodule/images/ui/paging.jpg "ajax分页插件paging") 36 | #[url参数和表单json参数](https://github.com/tianxiangbing/query) 37 | ![url参数和表单json参数:](http://www.lovewebgames.com/jsmodule/images/ui/query.jpg "url参数和表单json参数") 38 | #[table表格组件](https://github.com/tianxiangbing/table) 39 | ![table表格组件:](http://www.lovewebgames.com/jsmodule/images/ui/table.jpg "table表格组件") 40 | #[自动搜索提示autosearch](https://github.com/tianxiangbing/autosearch) 41 | ![自动搜索提示autosearch:](http://www.lovewebgames.com/jsmodule/images/ui/autosearch.jpg "自动搜索提示autosearch") 42 | #[数字格式化千分位](https://github.com/tianxiangbing/format-number) 43 | ![数字格式化千分位:](http://www.lovewebgames.com/jsmodule/images/ui/format-number.jpg "数字格式化千分位") 44 | #[ajax的扩展network](https://github.com/tianxiangbing/network) 45 | ![ajax的扩展network:](http://www.lovewebgames.com/jsmodule/images/ui/network.jpg "ajax的扩展network") 46 | #[ajax的扩展network](https://github.com/tianxiangbing/network) 47 | ![ajax的扩展network:](http://www.lovewebgames.com/jsmodule/images/ui/network.jpg "ajax的扩展network") 48 | #[loading加载效果](https://github.com/tianxiangbing/loading) 49 | ![loading加载效果:](http://www.lovewebgames.com/jsmodule/images/ui/loading.jpg "loading加载效果") 50 | #[js提示组件tip](https://github.com/tianxiangbing/tip) 51 | ![js提示组件tip:](http://www.lovewebgames.com/jsmodule/images/ui/tip.jpg "js提示组件tip") 52 | #[模拟select下拉选择框](https://github.com/tianxiangbing/select) 53 | ![模拟select下拉选择框:](http://www.lovewebgames.com/jsmodule/images/ui/select.jpg "模拟select下拉选择框") 54 | -------------------------------------------------------------------------------- /screen/lazy-load.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,lazy-load) 5 | $set(title,图片懒加载) 6 |

      7 | lazy-load

      8 | 9 |

      图片懒加载

      10 | 11 | 12 | 13 | 14 | 27 |

      28 | 使用方法案例:

      29 | 30 | 
      <img data-src="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.jpg" alt="">
 31 | $('img').LazyLoad({
 32 |     container: window,
 33 |     event:'scroll',
 34 |     effect: 'show',
 35 |     effectArgs: 'slow',
 36 |     loadImg:'loading.gif',
 37 |     load: null,
 38 |     offset: 0
 39 | });
 40 |
      41 | 42 |

      43 | 或者

      44 | 45 | 
      var obj = new LazyLoad();
 46 | obj.init({
 47 |     elements:'img',
 48 |     container: window,
 49 |     effect: 'show',
 50 |     event:'scroll',
 51 |     effectArgs: 'slow',
 52 |     loadImg:'loading.gif',
 53 |     load: null,
 54 |     offset: 0
 55 | });
 56 |
      57 | 58 |
      59 | 60 |

      61 | 属性和方法

      62 | 63 |

      64 | elements:

      65 | 66 | 
      dom的集合，一般为需要懒加载的img标签集合，如果是动态加载的内容，请在html加载完成之后再调用init
 67 |
      68 | 69 |

      70 | init:

      71 | 72 | 
      初始化方法
 73 |
      74 | 75 |

      76 | container: window

      77 | 78 | 
      触发滚动条的容器，默认为window,可不传
 79 |
      80 | 81 |

      82 | event:

      83 | 84 | 
      容器触发事件，默认为scroll
 85 |
      86 | 87 |

      88 | effect:

      89 | 90 | 
      触发的事件方法，默认为 show
 91 |
      92 | 93 |

      94 | effectArgs

      95 | 96 | 
      要给effect传的参数，可不传
 97 |
      98 | 99 |

      100 | loadImg

      101 | 102 | 
      加载等待时显示的图片地址，默认是一个1pxx1px的图
103 |
      104 | 105 |

      106 | offset:

      107 | 108 | 
      与图片的差值，默认0
109 |
      110 | 111 |

      112 | load:function(img)

      113 | 114 | 
      加载完成的回调,this指向当前对象
115 |
      116 | 117 |

      其它组件推荐

      118 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/network.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,network) 5 | $set(title,ajax请求的重写防重复点击) 6 |

      7 | network

      8 | 9 |

      ajax请求的重写,防重复点击

      10 | 11 |

      它的核心还是使用$.ajax，只是在这里加上了加载效果，然后去除了重复的提交

      12 | 13 |

      它的使用方法和$.ajax和$.get和$.post一致，返回的也是deferred.

      14 | 15 |

      demo实例如下

      16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 91 |

      92 | API

      93 | 94 |

      95 | ajax:({},target)

      96 | 97 | 
      
 98 | 	ajax调用,settings同jquery的ajax,但多了一个oneRequest参数,此参数有时，会标识该请求只能成功发送一次，判断成功的标准是oneRequest返回true.
 99 | 	target当传入此参数时loading将在target上loading,如果不传，加载效果就是全屏的。
100 |
      101 | 102 |
      103 | 104 | 
      $('#btn-send').click(function() {
105 |     Network.ajax({
106 |         url: "/ajax.json",
107 |         data: "a=1",
108 |         beforeSend: function() {
109 |             console.log('发起请求')
110 |         },
111 | 		oneRequest:function(result){
112 | 			if(result.status){
113 | 				return true;
114 | 			}else{
115 | 				return false;
116 | 			}
117 | 		}
118 |     },this).done(function() {
119 |         console.log('请求结束')
120 |     });
121 | });
122 |
      123 | 124 |

      125 | get:(url,data,fun,dataType)

      126 | 127 | 
      同jquery的get方法,以get方式的ajax请求，这里没有target，为全屏加载效果
128 |
      129 | 130 |

      131 | post:(url,data,fun,dataType)

      132 | 133 | 
      同$.post,以post方式的ajax请求，也是全屏的加载效果
134 |
      135 | 136 | 137 |

      其它组件推荐

      138 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /src/example/mobile-upload/mobile-upload-jquery.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Created with Sublime Text 2. 3 | * User: 田想兵 4 | * Date: 2015-03-17 5 | * Time: 18:06:23 6 | * Contact: 55342775@qq.com 7 | */ 8 | ; 9 | (function(root, factory) { 10 | //amd 11 | if (typeof define === 'function' && define.amd) { 12 | define(['$'], factory); 13 | } else if (typeof exports === 'object') { //umd 14 | module.exports = factory(); 15 | } else { 16 | root.Mobile_upload = factory(window.Zepto || window.jQuery || $); 17 | } 18 | })(this, function($) { 19 | $.fn.Mobile_upload = function(settings) { 20 | var list = []; 21 | $(this).each(function() { 22 | var upload = new Mobile_upload(); 23 | var options = $.extend({ 24 | target: $(this) 25 | }, settings); 26 | upload.init(options); 27 | list.push(upload); 28 | }); 29 | return list; 30 | }; 31 | 32 | function Mobile_upload() { 33 | var rnd = Math.random().toString().replace('.', ''); 34 | this.id = 'upload_' + rnd; 35 | this.fileInput; 36 | } 37 | Mobile_upload.prototype = { 38 | init: function(settings) { 39 | this.settings = $.extend({}, this.settings, settings); 40 | this.target = this.settings.target; 41 | this.createFile(); 42 | this.name = this.settings.name || "files"; 43 | this.fileInput.css({ 44 | 'opacity': '0', 45 | width: 1 46 | }); 47 | if (this.settings.multiple) { 48 | this.fileInput.attr('multiple', 'multiple'); 49 | } 50 | this.bindEvent(); 51 | }, 52 | touch: function(obj, fn) { 53 | var move; 54 | $(obj).on('click', click); 55 | 56 | function click(e) { 57 | return fn.call(this, e); 58 | } 59 | $(obj).on('touchmove', function(e) { 60 | move = true; 61 | }).on('touchend', function(e) { 62 | e.preventDefault(); 63 | if (!move) { 64 | var returnvalue = fn.call(this, e, 'touch'); 65 | if (!returnvalue) { 66 | e.preventDefault(); 67 | e.stopPropagation(); 68 | } 69 | } 70 | move = false; 71 | }); 72 | }, 73 | createFile: function() { 74 | var _this = this; 75 | _this.fileInput && _this.fileInput.remove(); 76 | $(_this.target).after(''); 77 | _this.fileInput = $('#' + _this.id); 78 | }, 79 | bindEvent: function(e) { 80 | var _this = this; 81 | this.touch($(this.target), function(e, t) { 82 | $(_this.fileInput).trigger('click'); 83 | return false; 84 | }); 85 | _this.bindFileEvent(); 86 | }, 87 | bindFileEvent: function() { 88 | var _this = this; 89 | $(this.fileInput).change(function(e) { 90 | var reg_type = /^image\//i; 91 | var files = e.target.files; 92 | for (var i = files.length - 1; i >= 0; i--) { 93 | var file = files[i]; 94 | if (reg_type.test(file.type)) { 95 | var reader = new FileReader(); 96 | _this.settings.startUpload && _this.settings.startUpload(_this.target); 97 | reader.onload = function() { 98 | _this.createFile(); 99 | _this.bindFileEvent(); 100 | _this.settings.imageReady && _this.settings.imageReady(_this.target, this.result); 101 | // $('body').append(''); 102 | if (_this.settings.ajax) { 103 | var data = {}; 104 | data[_this.settings.ajax.name || 'file'] = this.result; 105 | $.ajax({ 106 | type: 'post', 107 | url: _this.settings.ajax.url, 108 | data: data, 109 | dataType: 'json', 110 | success: function(result) { 111 | if (_this.settings.callback) { 112 | _this.settings.callback(result); 113 | } 114 | }, 115 | complete: function() { 116 | _this.settings.endUpload && _this.settings.endUpload(_this.target); 117 | } 118 | }); 119 | } else 120 | if (_this.settings.callback) { 121 | _this.settings.callback(this.result, file, _this.name); 122 | } 123 | }; 124 | reader.readAsDataURL(file); 125 | } else { 126 | alert("不是图片文件"); 127 | break; 128 | } 129 | }; 130 | }); 131 | } 132 | }; 133 | return Mobile_upload; 134 | }); -------------------------------------------------------------------------------- /src/stylesheets/pygment_trac.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .highlight .k { font-weight: bold } /* Keyword */ 5 | .highlight .o { font-weight: bold } /* Operator */ 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 14 | .highlight .gh { color: #999999 } /* Generic.Heading */ 15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 17 | .highlight .go { color: #888888 } /* Generic.Output */ 18 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 19 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 20 | .highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ 21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 24 | .highlight .kn { font-weight: bold } /* Keyword.Namespace */ 25 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 26 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 27 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 28 | .highlight .m { color: #009999 } /* Literal.Number */ 29 | .highlight .s { color: #d14 } /* Literal.String */ 30 | .highlight .na { color: #008080 } /* Name.Attribute */ 31 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 32 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 33 | .highlight .no { color: #008080 } /* Name.Constant */ 34 | .highlight .ni { color: #800080 } /* Name.Entity */ 35 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 36 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 37 | .highlight .nn { color: #555555 } /* Name.Namespace */ 38 | .highlight .nt { color: #000080 } /* Name.Tag */ 39 | .highlight .nv { color: #008080 } /* Name.Variable */ 40 | .highlight .ow { font-weight: bold } /* Operator.Word */ 41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 43 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 44 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 45 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 46 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 47 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 48 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 49 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 50 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 51 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 52 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 53 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 54 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 55 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 56 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 57 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 58 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 59 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 60 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 61 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 62 | 63 | .type-csharp .highlight .k { color: #0000FF } 64 | .type-csharp .highlight .kt { color: #0000FF } 65 | .type-csharp .highlight .nf { color: #000000; font-weight: normal } 66 | .type-csharp .highlight .nc { color: #2B91AF } 67 | .type-csharp .highlight .nn { color: #000000 } 68 | .type-csharp .highlight .s { color: #A31515 } 69 | .type-csharp .highlight .sc { color: #A31515 } 70 | -------------------------------------------------------------------------------- /src/example/scroll-load/wap-material.css: -------------------------------------------------------------------------------- 1 | 2 | /**素材**/ 3 | ul{list-style: none;} 4 | .topsearch{padding:15px 16px;position: relative;} 5 | .topsearch input {width:100%;height: 32px;border:none;background-color: #eeeeee;border-radius: 5px;} 6 | .topsearch i{ background:url(/img2014/icon-search-red-44.png) no-repeat;background-size: 100% 100%;display: block;width:22px;height:22px;left:20px;top:20px;position: absolute;} 7 | .bgeeeeee{background-color: #eeeeee;} 8 | .material-list{ padding:16px 4px 0 15px;font-size: 12px;color:#333;line-height: 1.6; } 9 | .material-list li{width:50%;float:left;padding-right: 10px;box-sizing:border-box;margin-bottom: 10px;} 10 | .material-list li a{color:#333;} 11 | .material-list li .pro-title{height: 40px;overflow: hidden; } 12 | .material-list li>div{background-color: #fff;padding:12px 12px;} 13 | .material-list li img{width:100%;} 14 | .fl{float:left;} 15 | .fr{float: right;} 16 | .clearfix:after { display: block; height: 0; clear: both; visibility: hidden; content: '.'; zoom:1;} 17 | .clearfix { display: block;zoom:1; } 18 | .color999999{color:#999999;} 19 | .color666666{color:#666666;} 20 | .color333333{color:#333333;} 21 | .bgffffff{background-color: #fff;} 22 | .fbold{font-weight: bold;} 23 | .colore05658{color:#e05658;} 24 | .mgt5{margin-top: 5px;} 25 | .detail-container{padding:15px 16px;background-color: #eeeeee;line-height: 1.6;color:#333;} 26 | .detail-container h1,.detail-container h2{font-size: 1rem;font-weight: normal;color: #474747;margin: 10px 0;} 27 | .detail-container h1{font-size: 14px;} 28 | .detail-container h2,.detail-desc p{border-bottom: 1px solid #dcdcdc;padding-bottom:5px;} 29 | .detail-container h2{padding-bottom: 12px;} 30 | .w20p{width: 20%;} 31 | .w80p{width:80%;} 32 | .detail-head img{width:60px;height:60px;} 33 | .tcenter{text-align: center;} 34 | .detail-head {padding:10px 10px 0 0;box-sizing:border-box;} 35 | .detail-desc{padding:5px 15px;background-color: #fff;margin-top:10px;} 36 | .detail-desc i{display:inline-block;width:26px;height:28px;background:url(/img2014/icon-fire.png) no-repeat;background-size: 80% 80%;margin: 0 0 -10px 10px;} 37 | .f14{font-size: 14px;} 38 | .f12{font-size: 12px;} 39 | .icon-down{background:url(/img2014/icon-download.png) no-repeat;background-size: 80% 80%;width:37px;height:40px;display: block;float:left;margin-top:5px;} 40 | .imglist{} 41 | .imglist a{width:33%;float:left;box-sizing:border-box;padding:15px 15px 0 0;} 42 | .imglist a img{width:100%;} 43 | .hide{display: none;} 44 | .zclip{opacity: 0;} 45 | .bottom-action{background-color: #fff;margin-top:10px;clear:both;height: 50px;bottom:0;width: 100%;} 46 | .bottom-action button{height:100%;float:left;border:none;background-color: #fff;} 47 | .btn-material,.btn-mymaterial{width:40%;color:#1c1b20;} 48 | .btn-addmaterial{width:20%;background:url(/img2014/icon-btn-add.png);background-size: 100% 100%;} 49 | .uploadlist{padding:10px 0;box-sizing:border-box;} 50 | .uploadlist a{padding:0 10px 10px 10px;display: block;float: left;width:33%;box-sizing:border-box;text-align: center;} 51 | .uploadlist img{display: block;height:80px;margin:0 auto;box-sizing:border-box;} 52 | .uploadlist input{width:1px;height:1px;position: absolute;left:0;top:0;} 53 | .upload{box-sizing:border-box;display: block;height:80px;width:100%;border:none;background:url(/img2014/icon-img-upload.png);background-size: 100% 100%;float:left;box-sizing:border-box;} 54 | .big-upload{background:url(/img2014/icon-upload-big.png);width:100px;height: 100px;background-size: 100% 100%;margin:10px auto;float:none;} 55 | .uploadlist .one-upload{width:100%;} 56 | .txt_materialtitle{border:none;border-bottom: 1px solid #dcdcdc;width:100%;} 57 | .add-desc{padding:10px 15px;color:#474747;} 58 | .txt_materialdesc{width:100%;margin-top:10px;height: 60px;font-size: 14px;line-height: 1.5;color:#666666;border:none;} 59 | .btn_submit{width:100%;margin-top:20px;} 60 | .redbtn{height:35px;border:none;background-color: #e05658;color:#fff;} 61 | .addmaterial h1{font-size: 16px;} 62 | .topmenu{padding:0 15px;} 63 | .topmenu a{display: inline-block;width: 33%;text-align: center;line-height: 44px;height: 44px;color:#565656;} 64 | .topmenu a.current{border-bottom:2px solid #e05658;} 65 | .edit-opinion{margin-top: 10px;text-align: center;padding:10px 0 ;box-sizing:border-box;} 66 | .edit-opinion .redbtn{padding:0 40px;margin-top:5px;} 67 | .opinion{padding:0 10px;line-height: 1.5;} 68 | .ui-loading{ width:100%;display:block;clear:both;text-align: center;line-height: 40px;background-color: #ccc;cursor: pointer;} -------------------------------------------------------------------------------- /src/stylesheets/print.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | padding: 0; 15 | margin: 0; 16 | font: inherit; 17 | font-size: 100%; 18 | vertical-align: baseline; 19 | border: 0; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-spacing: 0; 42 | border-collapse: collapse; 43 | } 44 | body { 45 | font-family: 'Helvetica Neue', Helvetica, Arial, serif; 46 | font-size: 13px; 47 | line-height: 1.5; 48 | color: #000; 49 | } 50 | 51 | a { 52 | font-weight: bold; 53 | color: #d5000d; 54 | } 55 | 56 | header { 57 | padding-top: 35px; 58 | padding-bottom: 10px; 59 | } 60 | 61 | header h1 { 62 | font-size: 48px; 63 | font-weight: bold; 64 | line-height: 1.2; 65 | color: #303030; 66 | letter-spacing: -1px; 67 | } 68 | 69 | header h2 { 70 | font-size: 24px; 71 | font-weight: normal; 72 | line-height: 1.3; 73 | color: #aaa; 74 | letter-spacing: -1px; 75 | } 76 | #downloads { 77 | display: none; 78 | } 79 | #main_content { 80 | padding-top: 20px; 81 | } 82 | 83 | code, pre { 84 | margin-bottom: 30px; 85 | font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal; 86 | font-size: 12px; 87 | color: #222; 88 | } 89 | 90 | code { 91 | padding: 0 3px; 92 | } 93 | 94 | pre { 95 | padding: 20px; 96 | overflow: auto; 97 | border: solid 1px #ddd; 98 | } 99 | pre code { 100 | padding: 0; 101 | } 102 | 103 | ul, ol, dl { 104 | margin-bottom: 20px; 105 | } 106 | 107 | 108 | /* COMMON STYLES */ 109 | 110 | table { 111 | width: 100%; 112 | border: 1px solid #ebebeb; 113 | } 114 | 115 | th { 116 | font-weight: 500; 117 | } 118 | 119 | td { 120 | font-weight: 300; 121 | text-align: center; 122 | border: 1px solid #ebebeb; 123 | } 124 | 125 | form { 126 | padding: 20px; 127 | background: #f2f2f2; 128 | 129 | } 130 | 131 | 132 | /* GENERAL ELEMENT TYPE STYLES */ 133 | 134 | h1 { 135 | font-size: 2.8em; 136 | } 137 | 138 | h2 { 139 | margin-bottom: 8px; 140 | font-size: 22px; 141 | font-weight: bold; 142 | color: #303030; 143 | } 144 | 145 | h3 { 146 | margin-bottom: 8px; 147 | font-size: 18px; 148 | font-weight: bold; 149 | color: #d5000d; 150 | } 151 | 152 | h4 { 153 | font-size: 16px; 154 | font-weight: bold; 155 | color: #303030; 156 | } 157 | 158 | h5 { 159 | font-size: 1em; 160 | color: #303030; 161 | } 162 | 163 | h6 { 164 | font-size: .8em; 165 | color: #303030; 166 | } 167 | 168 | p { 169 | margin-bottom: 20px; 170 | font-weight: 300; 171 | } 172 | 173 | a { 174 | text-decoration: none; 175 | } 176 | 177 | p a { 178 | font-weight: 400; 179 | } 180 | 181 | blockquote { 182 | padding: 0 0 0 30px; 183 | margin-bottom: 20px; 184 | font-size: 1.6em; 185 | border-left: 10px solid #e9e9e9; 186 | } 187 | 188 | ul li { 189 | padding-left: 20px; 190 | list-style-position: inside; 191 | list-style: disc; 192 | } 193 | 194 | ol li { 195 | padding-left: 3px; 196 | list-style-position: inside; 197 | list-style: decimal; 198 | } 199 | 200 | dl dd { 201 | font-style: italic; 202 | font-weight: 100; 203 | } 204 | 205 | footer { 206 | padding-top: 20px; 207 | padding-bottom: 30px; 208 | margin-top: 40px; 209 | font-size: 13px; 210 | color: #aaa; 211 | } 212 | 213 | footer a { 214 | color: #666; 215 | } 216 | 217 | /* MISC */ 218 | .clearfix:after { 219 | display: block; 220 | height: 0; 221 | clear: both; 222 | visibility: hidden; 223 | content: '.'; 224 | } 225 | 226 | .clearfix {display: inline-block;} 227 | * html .clearfix {height: 1%;} 228 | .clearfix {display: block;} 229 | -------------------------------------------------------------------------------- /screen/paging.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,paging) 5 | $set(title,ajax分页插件paging) 6 |

      7 | paging

      8 | 9 |

      分页控件paging

      10 |
      11 |
      12 | 13 | 14 | 15 | 16 | 20 | 21 |

      22 | 使用方法案例:

      23 | 24 | 
      <div id="pageTool"></div>
 25 | $('#pageTool').Paging({pagesize:10,count:100});
 26 |
      27 | 28 |

      29 | 或者

      30 | 31 | 
      var p = new Paging();
 32 | p.init({target:'#pageTool',pagesize:10,count:100});
 33 |
      34 | 35 |
      36 | 37 |

      38 | 属性和方法

      39 | 40 |

      41 | pagesize:

      42 | 43 | 
      每页的条数
 44 |
      45 | 46 |

      47 | callback:function(page,size,count)

      48 | 49 | 
      翻页时的回调方法，page为当前页码,size为每页条数，count为总页数
 50 |
      51 |

      52 | current:

      53 | 54 | 
      当前页码，默认为1
 55 |
      56 | 57 |

      58 | prevTpl

      59 | 60 | 
      上一页的模板,默认“上一页”
 61 |
      62 | 63 |

      64 | nextTpl

      65 | 66 | 
      下一页的模板，默认“下一页”
 67 |
      68 | 69 |

      70 | firstTpl

      71 | 72 | 
      首页的模板，默认“首页”
 73 |
      74 | 75 |

      76 | lastTpl

      77 | 78 | 
      末页的模板，默认“末页”
 79 |
      80 | 81 |

      82 | ellipseTpl

      83 | 84 | 
      省略号的模板，默认“...”
 85 |
      86 | 87 |

      88 | toolbar: bool

      89 | 90 | 
      是否显示工具栏,默认为false
 91 |
      92 | 93 |

      94 | pageSizeList:[]

      95 | 96 | 
      当显示工具栏时有效，可设置每页条数，默认为[5,10,15,20]
 97 |
      98 | 99 |

      100 | changePagesize:function(ps)

      101 | 102 | 
      修改每页的条数,参数为int
103 |
      104 | 105 |

      106 | go:function(p)

      107 | 108 | 
      跳转至某一页,默认到current
109 |
      110 | 111 |

      112 | render:function(ops)

      113 | 114 | 
      重新渲染,ops:{count:int,pagesize:int,current:int,pagecount:int}
115 |
      116 | 117 |

      其它组件推荐

      118 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /src/example/scroll-load/scroll-load.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Created with Sublime Text 2. 3 | * User: 田想兵 4 | * Date: 2015-03-26 5 | * Time: 14:39:30 6 | * Contact: 55342775@qq.com 7 | */ 8 | ; 9 | (function(root, factory) { 10 | //amd 11 | if (typeof define === 'function' && define.amd) { 12 | define(['$'], factory); 13 | } else if (typeof exports === 'object') { //umd 14 | module.exports = factory(); 15 | } else { 16 | root.ScrollLoad = factory(window.Zepto || window.jQuery || $); 17 | } 18 | })(this, function($) { 19 | $.fn.ScrollLoad = function(settings) { 20 | var list = []; 21 | $(this).each(function() { 22 | var scroll = new ScrollLoad(); 23 | var options = $.extend({ 24 | container: $(this) 25 | }, settings); 26 | scroll.init(options); 27 | list.push(scroll); 28 | }); 29 | return list; 30 | }; 31 | var ScrollLoad = function() { 32 | this.container; 33 | this.url; 34 | this.param; 35 | this.page = 1; 36 | this.pagename = 'page' 37 | this.loadmore; 38 | }; 39 | ScrollLoad.prototype = { 40 | init: function(settings) { 41 | this.settings = $.extend({}, settings); 42 | this.load = this.settings.loadmore || $('
      点击加载更多
      '); 43 | this.scrolltrigger = $(this.settings.scrolltrigger || window); 44 | this.container = this.settings.container; 45 | if (this.container.children().size() == 0) { 46 | this.container.append('
      '); 47 | } 48 | this.container.append(this.load); 49 | this.url = this.settings.url; 50 | this.page = this.settings.page || 1; 51 | this.pagename = settings.pagename || 'page'; 52 | this.param = $.extend({}, this.settings.param); 53 | this.param[this.pagename] = this.page; 54 | this.bindEvent(); 55 | this.checkPosition(); 56 | }, 57 | touch: function(obj, fn) { 58 | var move; 59 | $(obj).on('click', fn); 60 | $(obj).on('touchmove', function(e) { 61 | move = true; 62 | }).on('touchend', function(e) { 63 | e.preventDefault(); 64 | if (!move) { 65 | var returnvalue = fn.call(this, e, 'touch'); 66 | if (!returnvalue) { 67 | e.preventDefault(); 68 | e.stopPropagation(); 69 | } 70 | } 71 | move = false; 72 | }); 73 | }, 74 | bindEvent: function() { 75 | if (this.container.size()) { 76 | var _this = this; 77 | if (_this.settings.scrollLoad) { 78 | _this.scrolltrigger.scroll(function() { 79 | _this.checkPosition(); 80 | }); 81 | } 82 | _this.touch(_this.load, function() { 83 | _this.ajaxData(); 84 | }); 85 | } 86 | }, 87 | checkPosition: function() { 88 | var offsetH = $(this.container).children().first().height(); 89 | var height = this.load.height(); 90 | var clientHeight = this.scrolltrigger[0].clientHeight || document.documentElement.clientHeight || document.body.clientHeight; //可视区域 91 | var clientWidth = this.scrolltrigger[0].clientWidth || document.documentElement.clientWidth || document.body.clientWidth; 92 | var scrollTop = this.scrolltrigger.scrollTop(); 93 | if (offsetH + height / 2 <= clientHeight + scrollTop) { 94 | this.ajaxData(); 95 | } 96 | }, 97 | ajaxData: function() { 98 | var _this = this; 99 | if (_this.ajax) { 100 | return false; 101 | } 102 | _this.ajax = true; 103 | this.load.html('正在加载中...'); 104 | this.param[this.pagename] = this.page; 105 | $.ajax({ 106 | url: _this.url, 107 | type: _this.settings.type || "get", 108 | dataType: "json", 109 | cache: false, 110 | data: _this.param, 111 | timeout: 30000, 112 | success: function(result) { 113 | if (_this.settings.format) { 114 | _this.settings.format(this.container, result); 115 | } else { 116 | _this.format(result); 117 | }; 118 | _this.page++; 119 | }, 120 | complete: function() { 121 | setTimeout(function() { 122 | _this.ajax = false; 123 | }, 500); 124 | _this.load.html('点击加载更多'); 125 | } 126 | }); 127 | }, 128 | format: function(result) { 129 | if (!(result.data && result.data.length)) { 130 | result.nodata = true; 131 | this.load.remove(); 132 | }; 133 | var tpl = typeof this.settings.tpl === "string" ? $(this.settings.tpl) : this.settings.tpl; 134 | var source = tpl.html(); 135 | var template = Handlebars.compile(source); 136 | var html = template(result); 137 | this.container.children().first().append(html) 138 | this.settings.callback && this.settings.callback(this.container, result); 139 | } 140 | }; 141 | return ScrollLoad; 142 | }); -------------------------------------------------------------------------------- /src/example/scroll-load/scroll-load-jquery.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Created with Sublime Text 2. 3 | * User: 田想兵 4 | * Date: 2015-03-26 5 | * Time: 14:39:30 6 | * Contact: 55342775@qq.com 7 | */ 8 | ; 9 | (function(root, factory) { 10 | //amd 11 | if (typeof define === 'function' && define.amd) { 12 | define(['$'], factory); 13 | } else if (typeof exports === 'object') { //umd 14 | module.exports = factory(); 15 | } else { 16 | root.ScrollLoad = factory(window.Zepto || window.jQuery || $); 17 | } 18 | })(this, function($) { 19 | $.fn.ScrollLoad = function(settings) { 20 | var list = []; 21 | $(this).each(function() { 22 | var scroll = new ScrollLoad(); 23 | var options = $.extend({ 24 | container: $(this) 25 | }, settings); 26 | scroll.init(options); 27 | list.push(scroll); 28 | }); 29 | return list; 30 | }; 31 | var ScrollLoad = function() { 32 | this.container; 33 | this.url; 34 | this.param; 35 | this.page = 1; 36 | this.pagename = 'page' 37 | this.loadmore; 38 | }; 39 | ScrollLoad.prototype = { 40 | init: function(settings) { 41 | this.settings = $.extend({}, settings); 42 | this.load = this.settings.loadmore || $('
      点击加载更多
      '); 43 | this.scrolltrigger = $(this.settings.scrolltrigger || window); 44 | this.container = this.settings.container; 45 | if (this.container.children().size() == 0) { 46 | this.container.append('
      '); 47 | } 48 | this.container.append(this.load); 49 | this.url = this.settings.url; 50 | this.page = this.settings.page || 1; 51 | this.pagename = settings.pagename || 'page'; 52 | this.param = $.extend({}, this.settings.param); 53 | this.param[this.pagename] = this.page; 54 | this.bindEvent(); 55 | this.checkPosition(); 56 | }, 57 | touch: function(obj, fn) { 58 | var move; 59 | $(obj).on('click', fn); 60 | $(obj).on('touchmove', function(e) { 61 | move = true; 62 | }).on('touchend', function(e) { 63 | e.preventDefault(); 64 | if (!move) { 65 | var returnvalue = fn.call(this, e, 'touch'); 66 | if (!returnvalue) { 67 | e.preventDefault(); 68 | e.stopPropagation(); 69 | } 70 | } 71 | move = false; 72 | }); 73 | }, 74 | bindEvent: function() { 75 | if (this.container.size()) { 76 | var _this = this; 77 | if (_this.settings.scrollLoad) { 78 | _this.scrolltrigger.scroll(function() { 79 | _this.checkPosition(); 80 | }); 81 | } 82 | _this.touch(_this.load, function() { 83 | _this.ajaxData(); 84 | }); 85 | } 86 | }, 87 | checkPosition: function() { 88 | var offsetH = $(this.container).children().first().height(); 89 | var height = this.load.height(); 90 | var clientHeight = this.scrolltrigger[0].clientHeight || document.documentElement.clientHeight || document.body.clientHeight; //可视区域 91 | var clientWidth = this.scrolltrigger[0].clientWidth || document.documentElement.clientWidth || document.body.clientWidth; 92 | var scrollTop = this.scrolltrigger.scrollTop(); 93 | if (offsetH + height / 2 <= clientHeight + scrollTop) { 94 | this.ajaxData(); 95 | } 96 | }, 97 | ajaxData: function() { 98 | var _this = this; 99 | if (_this.ajax) { 100 | return false; 101 | } 102 | _this.ajax = true; 103 | this.load.html('正在加载中...'); 104 | this.param[this.pagename] = this.page; 105 | $.ajax({ 106 | url: _this.url, 107 | type: _this.settings.type || "get", 108 | dataType: "json", 109 | cache: false, 110 | data: _this.param, 111 | timeout: 30000, 112 | success: function(result) { 113 | if (_this.settings.format) { 114 | _this.settings.format(this.container, result); 115 | } else { 116 | _this.format(result); 117 | }; 118 | _this.page++; 119 | }, 120 | complete: function() { 121 | setTimeout(function() { 122 | _this.ajax = false; 123 | }, 500); 124 | _this.load.html('点击加载更多'); 125 | } 126 | }); 127 | }, 128 | format: function(result) { 129 | if (!(result.data && result.data.length)) { 130 | result.nodata = true; 131 | this.load.remove(); 132 | }; 133 | var tpl = typeof this.settings.tpl === "string" ? $(this.settings.tpl) : this.settings.tpl; 134 | var source = tpl.html(); 135 | var template = Handlebars.compile(source); 136 | var html = template(result); 137 | this.container.children().first().append(html) 138 | this.settings.callback && this.settings.callback(this.container, result); 139 | } 140 | }; 141 | return ScrollLoad; 142 | }); -------------------------------------------------------------------------------- /screen/upload.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,upload) 5 | $set(title,js异步上传文件) 6 |

      7 | upload

      8 | 9 |

      js上传文件 10 | 例子见DEMO 11 |

      12 | 13 | 14 |
      15 | 16 | 17 | 32 |

      33 | 用法

      34 | 35 | 
      <button id="btn_upload">upload</button>
 36 | <script src="../src/jquery-1.9.1.min.js"></script>
 37 | <script src="../src/upload.js"></script>
 38 | <script>
 39 | var upload = new Upload();
 40 | upload.init({target:$('#btn_upload'),url:"data.html",accept:"png,jpg", callback:function(result){
 41 |     eval( 'result='+result);
 42 |     $('body').append('<img src="'+result.url+'" width="200" height="200"/><input type="hidden" value="'+result.url+'"/>');
 43 | }});
 44 | </script>
 45 |
      46 | 47 |
      48 | 49 |

      50 | 或者 requirejs:

      51 | 52 | 
      <button id="btn_upload">upload</button>
 53 | <script type="text/javascript" src="../dest/require.js"></script>
 54 | <script>
 55 | requirejs.config({
 56 |     //By default load any module IDs from js/lib
 57 |     baseUrl: '../dest',
 58 |     paths: {
 59 |         $: 'jquery-1.11.2',
 60 |         upload:"upload"
 61 |     }
 62 | });
 63 | require(['upload',"$"], function(Upload,$) {
 64 |     var upload = new Upload();
 65 |     upload.init({target:$('#btn_upload'),url:"data.html",accept:"png,jpg", callback:function(result){
 66 |         eval( 'result='+result);
 67 |         $('body').append('<img src="'+result.url+'" width="200" height="200"/><input type="hidden" value="'+result.url+'"/>');
 68 |     }});
 69 | });
 70 | </script>
 71 |
      72 | 73 |

      74 | 属性和方法

      75 | 76 |

      77 | 属性

      78 | 79 |

      80 | target:

      81 | 82 | 
          上传的对象结点(jquery方式调用的为它本身)
 83 |
      84 | 85 |

      86 | url:

      87 | 88 | 89 | 
          上传提交地址
 90 |
      91 | 92 |

      93 | accept:

      94 | 95 | 
          文件格式，如"jpg,png,jpeg",不区分大小写
 96 |
      97 |

      98 | 方法

      99 | 100 |

      101 | callback:function(result)

      102 | 103 | 
          上传完成后的回调,参数result是返回的数据，这里只作字符串的处理，如果要转json可以使用JSON.parse或上面例子里的eval进行转换
104 |
      105 | 106 |

      107 | startUpload:function(input,i)

      108 | 109 | 
      上传开始时的回调，i 是一个随机的key,它与callback的i是一相同的，可以用它来串联这些回调，比如例子中的loading效果
110 |
      111 | 112 |

      其它组件推荐

      113 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/format-number.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,format-number) 5 | $set(title,数字或金额格式化) 6 |

      7 | format-number

      8 |

      文本框数字或金额格式化 9 | 效果如下:

      10 | 11 | 12 |
      整数：
      13 | 17 |
      整数可为负：
      18 | 22 |
      两位小数(默认)：
      23 | 27 |
      3位小数并且可为负数：
      28 | 32 |
      4位小数并且不可为负数：
      33 | 37 |
      标签：123123123.13211=123123123.11
      38 | 41 |

      42 | 演示代码

      43 | 
      <script src="../src/jquery-1.11.2.js"></script>
44 |     <script src="../src/format-number.js"></script>
45 |     <div>整数：<input type="text" data-type="int" data-name="int"/></div>
46 |     <script>
47 |         var n1 = new FormatNumber();
48 |         n1.init({trigger:$('[data-type="int"]'),decimal:0});
49 |     </script>
50 |     <div>整数可为负：<input type="text" data-type="int2" data-name="int"/></div>
51 |     <script>
52 |         var n2 = new FormatNumber();
53 |         n2.init({trigger:$('[data-type="int2"]'),decimal:0,minus:true});
54 |     </script>
55 |     <div>两位小数(默认)：<input type="text" class="has-minus" value="1112212.221" data-type="number" data-name="as"/></div>
56 |     <script>
57 |         var n3 = new FormatNumber();
58 |         n3.init({trigger:$('[data-type="number"]')});
59 |     </script>
60 |     <div>3位小数并且可为负数：<input type="text" data-name="pc" data-type="pecent"/></div>
61 |     <script>
62 |         var n4 = new FormatNumber();
63 |         n4.init({trigger:$('[data-type="pecent"]'),decimal:3,minus:true});
64 |     </script>
65 |     <div>4位小数并且不可为负数：<input type="text" data-name="pc" data-type="pecent2"/></div>
66 |     <script>
67 |         var n5 = new FormatNumber();
68 |         n5.init({trigger:$('[data-type="pecent2"]'),decimal:4});
69 |     </script>
70 |     <div>标签：123123123.13211=<span id="sp_number">123123123.13211</span></div>
71 |     <script>
72 |     $('#sp_number').FormatNumber({decimal:4})
73 |     </script>
74 |
      75 |

      76 | API

      77 |

      78 | 属性

      79 |

      80 | trigger:dom|string

      81 | 
      触发器元素，可为input或标签元素(span/div)
82 |
      83 |

      84 | parent :dom|string

      85 | 
      委托对象，由于本插件对事件的绑定都以委托为主，如不传，默认代理到body上
86 |
      87 |

      88 | decimal: int

      89 | 
      小数位数，默认2位
90 |
      91 |

      92 | minus: bool

      93 | 
      是否支持负数，默认为false不支持
94 |
      95 | 96 |

      其它组件推荐

      97 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/mobile-select-area.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,mobile-select-area) 5 | $set(title,手机端选择地区联动) 6 |

      7 | mobile-select-area

      8 | 9 |

      手机联动选择地区

      10 | 请切换手机调试模式或用手机浏览器访问此demo 11 |

      请选择地区:

      12 |

      我固定显示在底部:

      13 | 14 | 15 | 16 | 17 | 18 | 24 |

      25 | 用法

      26 | 27 | 
      ##注：依赖于[dialog](https://github.com/tianxiangbing/dialog)
 28 |     <!DOCTYPE>
 29 |     <html>
 30 |         <head>
 31 |             <title>选择地区</title>
 32 |             <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 33 |             <link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">
 34 |             <link rel="stylesheet" type="text/css" href="../dist/dialog.css">
 35 |             <script type="text/javascript" src="../dist/zepto.js"></script>
 36 |             <script type="text/javascript" src="../dist/dialog.js"></script>
 37 |             <script type="text/javascript" src="../dist/dialog.js"></script>
 38 |             <script type="text/javascript" src="../dist/mobile-select-area.js"></script>
 39 |         </head>
 40 |         <body>
 41 |             <input type="text" id="txt_area" value="浙江省 杭州市 滨江区"/>
 42 |             <input type="hidden" id="hd_area" value="1,1,1"/>
 43 |             <script>
 44 |             var selectArea = new MobileSelectArea();
 45 |             selectArea.init({trigger:$('#txt_area'),value:$('#hd_area').val(),data:'data.json'});
 46 |             </script>
 47 |         </body>
 48 |     </html>
 49 |
      50 | 51 |

      52 | 属性及方法

      53 | 54 |

      55 | trigger:

      56 | 57 | 
          触发弹窗的DOM元素 ，可以是input或其他
 58 |
      59 | 60 |

      61 | value:

      62 | 63 | 
          初始值,
 64 |
      65 | 66 |

      67 | data:

      68 | 69 | 
          当data为json对象时可以直接解析
 70 |     当data为string发送ajax请求后返回json,格式如下：
 71 |     {
 72 |         "data": [{
 73 |             "id": 1,
 74 |             "name": "浙江省",
 75 |             "child": [{
 76 |                 "id": "1",
 77 |                 "name": "杭州市",
 78 |                 "child": [{
 79 |                     "id": 1,
 80 |                     "name": "滨江区"
 81 |                 }]
 82 |             }]
 83 |         }, {
 84 |             "id": 2,
 85 |             "name": "江苏省",
 86 |             "child": [{
 87 |                 "id": "1",
 88 |                 "name": "南京",
 89 |                 "child": [{
 90 |                     "id": 1,
 91 |                     "name": "解放区"
 92 |                 }]
 93 |             }]
 94 |         }, {
 95 |             "id": 3,
 96 |             "name": "湖北省"
 97 |         }]
 98 |     }
 99 |
      100 | 101 |

      102 | callback:

      103 | 104 | 
          选中后的回调，默认有填充trigger的value值，以及赋值它后面紧跟着的hidden的value值，以逗号分隔id，空格分隔文字
105 |
      106 | 107 |

      其它组件推荐

      108 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/loading.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,loading) 5 | $set(title,loading加载动画效果) 6 |

      7 | loading

      8 | 9 |

      loading... 10 | 实例演示：

      11 |

      12 | 13 | 14 | 15 |

      16 |
      这是个内容的例子
      17 | 18 | 19 | 20 | 53 |

      DEMO请点击这里查看.

      54 | 55 |

      56 | 调用示例

      57 | 58 |

      html:

      59 | 60 | 
      <p>
 61 |     <input type="button" id="loading1" value="loading我自己">
 62 |     <input type="button" id="loading2" value="loading下面这个div">
 63 |     <input type="button" id="loading3" value="loading全屏">
 64 | </p>
 65 | <div id="loading-content" style="width:300px;height:200px;border:1px solid #ccc;background-color:#f2f2f2;">这是个内容的例子</div>
 66 | <script src="../src/jquery-1.11.2.js"></script>
 67 | <script src="../src/loading.js"></script>
 68 |
      69 | 70 |

      js:

      71 | 72 | 
      //loading我自己
 73 | $('#loading1').click(function(){
 74 |     var load = new Loading();
 75 |     load.init({
 76 |         target: this
 77 |     });
 78 |     load.start();
 79 |     setTimeout(function() {
 80 |         load.stop();
 81 |     }, 3000)
 82 | });
 83 | //loading下面这个div
 84 | $('#loading2').click(function(){
 85 |     var load = new Loading();
 86 |     load.init({
 87 |         target: "#loading-content"
 88 |     });
 89 |     load.start();
 90 |     setTimeout(function() {
 91 |         load.stop();
 92 |     }, 3000)
 93 | });
 94 | //loading全屏
 95 | $('#loading3').click(function(){
 96 |     var load = new Loading();
 97 |     load.init();
 98 |     load.start();
 99 |     setTimeout(function() {
100 |         load.stop();
101 |     }, 30000)
102 | });
103 |
      104 | 105 |

      106 | API

      107 | 108 |

      109 | 属性

      110 | 111 |

      112 | target:string||dom

      113 | 114 | 
      需要显示loading的节点，不传值时显示全屏的loading
115 |
      116 | 117 |

      118 | 方法

      119 | 120 |

      121 | start:function()

      122 | 123 | 
      开始loading
124 |
      125 | 126 |

      127 | stop:function()

      128 | 129 | 
      结束loading
130 |
      131 | 132 |

      133 | 事件

      134 | 135 |

      136 | stop

      137 | 138 | 
      target的stop事件触发时，结束loading. 如
139 | $('html').trigger('stop')会结束全屏的loading动画.
140 |
      141 | 142 |

      其它组件推荐

      143 | $control.setTemplate("modulelist.vm") 144 | -------------------------------------------------------------------------------- /getjs.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var List = { 3 | dialog: { 4 | files: ["dialog.js", "dialog.css"] 5 | }, 6 | "image-zooming": { 7 | files: ["image-zooming.js"] 8 | }, 9 | "lazy-load": { 10 | files: ["lazy-load.js"] 11 | }, 12 | "mobile-photo-preview": { 13 | "files": ["mobile-photo-preview.js", "mobile-photo-preview.css"], 14 | module: ["dialog"] 15 | }, 16 | "mobile-select-area": { 17 | files: ["mobile-select-area.js", "mobile-select-area.css"], 18 | module: ["dialog"] 19 | }, 20 | "mobile-select-date": { 21 | files: ["mobile-select-date.js"], 22 | module: ["mobile-select-area"] 23 | }, 24 | "mobile-upload": { 25 | files: ["mobile-upload.js"] 26 | }, 27 | "paging": { 28 | files: ["query.js", "paging.js", "paging.css"] 29 | }, 30 | "query": { 31 | files: ['query.js'] 32 | }, 33 | "scroll-load": { 34 | files: ['scroll-load'] 35 | }, 36 | table: { 37 | files: ["query.js", "paging.js", "table.js"], 38 | module: ["dialog", "paging"] 39 | }, 40 | upload: { 41 | files: ['upload.js'] 42 | }, 43 | "word-count": { 44 | files: ["word-count.js", "word-count.css"] 45 | } 46 | , 47 | "format-number": { 48 | files: ["format-number.js"] 49 | } 50 | , "network": { 51 | files: ['network.js', 'network.css'] 52 | } 53 | , 'loading': { 54 | files: ['loading.css', 'loading.js'] 55 | } 56 | , 'tip': { 57 | files: ['tip.css', 'tip.js'] 58 | }, 59 | "carousel-image": { 60 | files: ['carousel-image.js', 'carousel-image.css'] 61 | }, 62 | "calendar": { 63 | files: ['calendar.js', 'calendar.css'] 64 | }, 65 | "click-progress": { 66 | files: ['click-progress.js', 'click-progress.css'] 67 | }, 68 | "autosearch": { 69 | files: ['autosearch.js', 'autosearch.css'] 70 | }, 71 | "select": { 72 | files: ['select.js', 'select.css'] 73 | }, 74 | "localStorage-cache": { 75 | files: ['localStorage-cache.js'] 76 | }, 77 | "area": { 78 | files: [ 79 | 'area.js', "area.css", "area-data.js"] 80 | }, 81 | "audio": { 82 | files: ["audio.js", "audio.css", "audio.jpg", "audio.gif"] 83 | } 84 | }; 85 | var http = require('http'); 86 | /* 87 | List.forEach(function(a,b) { 88 | 89 | 90 | for (var i in obj) { 91 | var dirname = i; 92 | var arr = obj[dirname]; 93 | var dir = 'src/example/' + dirname; 94 | createDir(dir); 95 | arr.files.forEach(function(o) { 96 | var url = 'http://cdn.rawgit.com/tianxiangbing/' + dirname + '/master/src/' + o; 97 | var filename = o; 98 | if (o.indexOf('http') != -1) { 99 | url = o; 100 | filename = o.split('/').pop(); 101 | } 102 | console.log('======dir========') 103 | console.log(dir) 104 | console.log('==============') 105 | getContent(dir + '/' + filename, url); 106 | }); 107 | arr.module.forEach(function(m){ 108 | 109 | }) 110 | } 111 | }) 112 | */ 113 | for (var module in List) { 114 | loadModule(module) 115 | } 116 | function loadModule(module, p) { 117 | var dirname = module; 118 | var arr = List[dirname]; 119 | var dir = 'src/example/' + (p || dirname); 120 | createDir(dir); 121 | // arr.files.forEach(function (o) { 122 | // var url = 'http://rawgit.com/tianxiangbing/' + dirname + '/master/src/' + o; 123 | // var filename = o; 124 | // if (o.indexOf('http') != -1) { 125 | // url = o; 126 | // filename = o.split('/').pop(); 127 | // } 128 | // console.log('======dir========') 129 | // console.log(dir) 130 | // console.log('==============') 131 | // getContent(dir + '/' + filename, url); 132 | // }); 133 | function loadjs(){ 134 | if(arr.files.length ==0)return ; 135 | let o = arr.files.shift(); 136 | var url = 'http://rawgit.com/tianxiangbing/' + dirname + '/master/src/' + o; 137 | var filename = o; 138 | if (o.indexOf('http') != -1) { 139 | url = o; 140 | filename = o.split('/').pop(); 141 | } 142 | console.log('======dir========') 143 | console.log(dir) 144 | getContent(dir + '/' + filename, url).then(function(){ 145 | loadjs(); 146 | }); 147 | } 148 | loadjs(); 149 | 150 | if (arr.module) { 151 | arr.module.forEach(function (m) { 152 | loadModule(m, dirname) 153 | }) 154 | } 155 | } 156 | //'http://cdn.rawgit.com/tianxiangbing/mobile-select-area/master/src/mobile-select-area.js' 157 | function getContent(file, url) { 158 | console.log(url) 159 | let p = new Promise(function (resolve,reject) { 160 | http.get(url, function (res) { 161 | var str = ''; 162 | res.on('data', function (d) { 163 | //process.stdout.write(d); 164 | str += d; 165 | }) 166 | res.on('end', function (d) { 167 | save(file, str); 168 | resolve(); 169 | }); 170 | }); 171 | }); 172 | return p; 173 | }; 174 | 175 | function save(file, content) { 176 | fs.writeFile(file, content, function (err) { 177 | if (err) throw err; 178 | }); 179 | }; 180 | //创建目录 181 | function createDir(dir) { 182 | if (!fs.existsSync(dir)) { 183 | fs.mkdir(dir); 184 | } 185 | } -------------------------------------------------------------------------------- /src/example/mobile-select-area/dialog.css: -------------------------------------------------------------------------------- 1 | .ui-dialog { 2 | font-family: "Microsoft YaHei" !important; 3 | box-sizing: border-box; 4 | pointer-events: auto; 5 | display: none; 6 | /* border: 1px solid #ccc; */ 7 | background-color: #fff; 8 | font-family: arial, 'Hiragino Sans GB', sans-serif; 9 | position: absolute; 10 | /* left:40%;top:40%; */ } 11 | 12 | .ui-dialog-close { 13 | position: absolute; 14 | right: 10px; 15 | cursor: pointer; 16 | color: #FFF; 17 | font-weight: bold; 18 | font-family: cursive; } 19 | 20 | .ui-dialog-mask { 21 | position: fixed; 22 | width: 100%; 23 | height: 100%; 24 | left: 0; 25 | top: 0; 26 | background: #000; 27 | opacity: .7; 28 | display: none; 29 | filter: alpha(opacity=70); } 30 | 31 | .ui-dialog-title { 32 | background-color: #288df0; 33 | color: #fff; 34 | padding: 5px 10px; } 35 | 36 | @-webkit-keyframes zoomIn { 37 | 0% { 38 | opacity: 0; 39 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 40 | -moz-transform: scale3d(0.3, 0.3, 0.3); 41 | -ms-transform: scale3d(0.3, 0.3, 0.3); 42 | transform: scale3d(0.3, 0.3, 0.3); } 43 | 100% { 44 | opacity: 1; } } 45 | @-moz-keyframes zoomIn { 46 | 0% { 47 | opacity: 0; 48 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 49 | -moz-transform: scale3d(0.3, 0.3, 0.3); 50 | -ms-transform: scale3d(0.3, 0.3, 0.3); 51 | transform: scale3d(0.3, 0.3, 0.3); } 52 | 100% { 53 | opacity: 1; } } 54 | @keyframes zoomIn { 55 | 0% { 56 | opacity: 0; 57 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 58 | -moz-transform: scale3d(0.3, 0.3, 0.3); 59 | -ms-transform: scale3d(0.3, 0.3, 0.3); 60 | transform: scale3d(0.3, 0.3, 0.3); } 61 | 100% { 62 | opacity: 1; } } 63 | @keyframes zoomOut { 64 | 0% { 65 | opacity: 1; 66 | -webkit-transform: scale3d(1, 1, 1); 67 | -moz-transform: scale3d(1, 1, 1); 68 | -ms-transform: scale3d(1, 1, 1); 69 | transform: scale3d(1, 1, 1); } 70 | 100% { 71 | opacity: 0; } } 72 | @-webkit-keyframes zoomOut { 73 | 0% { 74 | opacity: 1; 75 | -webkit-transform: scale3d(1, 1, 1); 76 | -moz-transform: scale3d(1, 1, 1); 77 | -ms-transform: scale3d(1, 1, 1); 78 | transform: scale3d(1, 1, 1); } 79 | 100% { 80 | opacity: 0; } } 81 | @-moz-keyframes zoomOut { 82 | 0% { 83 | opacity: 1; 84 | -webkit-transform: scale3d(1, 1, 1); 85 | -moz-transform: scale3d(1, 1, 1); 86 | -ms-transform: scale3d(1, 1, 1); 87 | transform: scale3d(1, 1, 1); } 88 | 100% { 89 | opacity: 1; } } 90 | .zoomIn { 91 | -webkit-animation-name: zoomIn; 92 | animation-name: zoomIn; } 93 | 94 | .zoomOut { 95 | -webkit-animation-name: zoomOut; 96 | animation-name: zoomOut; 97 | display: none\0 !important; } 98 | 99 | .animated { 100 | -webkit-animation-duration: .5s; 101 | animation-duration: .5s; 102 | -webkit-animation-fill-mode: both; 103 | -ms-animation-fill-mode: both; 104 | -moz-animation-fill-mode: both; 105 | animation-fill-mode: both; } 106 | 107 | #confirmDialog { 108 | width: 350px; 109 | background-color: #fff; } 110 | 111 | .ui-confirm-title, .ui-alert-title { 112 | text-align: center; 113 | font-size: 14px; 114 | color: #333; 115 | line-height: 25px; 116 | padding: 27px 0 20px 0; } 117 | 118 | .confirm-title2 { 119 | font-size: 16px; 120 | font-weight: normal; 121 | color: #666; 122 | text-align: center; 123 | line-height: 1.8; } 124 | 125 | .ui-dialog-cancel { 126 | background-color: #999999; } 127 | 128 | .ui-dialog-action { 129 | height: 45px; 130 | line-height: 45px; 131 | border-collapse: collapse; 132 | border-spacing: 0; 133 | pointer-events: auto; 134 | text-align: center; 135 | width: 100%; 136 | border-top: 1px solid #dcdcdc; 137 | padding: 0; 138 | margin: 0; } 139 | 140 | .ui-dialog-action td { 141 | text-align: center; 142 | border: none; } 143 | 144 | .ui-dialog-action button, .ui-dialog-action a { 145 | background-color: #fff; 146 | display: block; 147 | width: 100%; 148 | height: 100%; 149 | color: #47b5ca; 150 | border: none; 151 | outline: none; 152 | cursor: pointer; 153 | box-sizing: border-box; 154 | padding: 0; } 155 | .ui-dialog-action .ui-confirm-close, .ui-dialog-action .ui-confirm-no { 156 | color: #747474; 157 | border-left: 1px solid #dcdcdc; } 158 | 159 | .ui-alert { 160 | border-radius: 5px; 161 | overflow: hidden; } 162 | 163 | .ui-alert .ui-dialog-close { 164 | display: none; } 165 | 166 | .ui-alert .ui-alert-submit { 167 | margin: 0 auto; } 168 | 169 | .ui-alert-info { 170 | text-align: center; 171 | margin-top: 20px; } 172 | 173 | .ui-alert-tip { 174 | color: #fff !important; 175 | background-color: rgba(0, 0, 0, 0.5) !important; } 176 | .ui-alert-tip .ui-alert-title { 177 | color: #fff !important; 178 | padding: 27px 25px; } 179 | 180 | /*# sourceMappingURL=dialog.css.map */ 181 | -------------------------------------------------------------------------------- /src/example/mobile-select-date/dialog.css: -------------------------------------------------------------------------------- 1 | .ui-dialog { 2 | font-family: "Microsoft YaHei" !important; 3 | box-sizing: border-box; 4 | pointer-events: auto; 5 | display: none; 6 | /* border: 1px solid #ccc; */ 7 | background-color: #fff; 8 | font-family: arial, 'Hiragino Sans GB', sans-serif; 9 | position: absolute; 10 | /* left:40%;top:40%; */ } 11 | 12 | .ui-dialog-close { 13 | position: absolute; 14 | right: 10px; 15 | cursor: pointer; 16 | color: #FFF; 17 | font-weight: bold; 18 | font-family: cursive; } 19 | 20 | .ui-dialog-mask { 21 | position: fixed; 22 | width: 100%; 23 | height: 100%; 24 | left: 0; 25 | top: 0; 26 | background: #000; 27 | opacity: .7; 28 | display: none; 29 | filter: alpha(opacity=70); } 30 | 31 | .ui-dialog-title { 32 | background-color: #288df0; 33 | color: #fff; 34 | padding: 5px 10px; } 35 | 36 | @-webkit-keyframes zoomIn { 37 | 0% { 38 | opacity: 0; 39 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 40 | -moz-transform: scale3d(0.3, 0.3, 0.3); 41 | -ms-transform: scale3d(0.3, 0.3, 0.3); 42 | transform: scale3d(0.3, 0.3, 0.3); } 43 | 100% { 44 | opacity: 1; } } 45 | @-moz-keyframes zoomIn { 46 | 0% { 47 | opacity: 0; 48 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 49 | -moz-transform: scale3d(0.3, 0.3, 0.3); 50 | -ms-transform: scale3d(0.3, 0.3, 0.3); 51 | transform: scale3d(0.3, 0.3, 0.3); } 52 | 100% { 53 | opacity: 1; } } 54 | @keyframes zoomIn { 55 | 0% { 56 | opacity: 0; 57 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 58 | -moz-transform: scale3d(0.3, 0.3, 0.3); 59 | -ms-transform: scale3d(0.3, 0.3, 0.3); 60 | transform: scale3d(0.3, 0.3, 0.3); } 61 | 100% { 62 | opacity: 1; } } 63 | @keyframes zoomOut { 64 | 0% { 65 | opacity: 1; 66 | -webkit-transform: scale3d(1, 1, 1); 67 | -moz-transform: scale3d(1, 1, 1); 68 | -ms-transform: scale3d(1, 1, 1); 69 | transform: scale3d(1, 1, 1); } 70 | 100% { 71 | opacity: 0; } } 72 | @-webkit-keyframes zoomOut { 73 | 0% { 74 | opacity: 1; 75 | -webkit-transform: scale3d(1, 1, 1); 76 | -moz-transform: scale3d(1, 1, 1); 77 | -ms-transform: scale3d(1, 1, 1); 78 | transform: scale3d(1, 1, 1); } 79 | 100% { 80 | opacity: 0; } } 81 | @-moz-keyframes zoomOut { 82 | 0% { 83 | opacity: 1; 84 | -webkit-transform: scale3d(1, 1, 1); 85 | -moz-transform: scale3d(1, 1, 1); 86 | -ms-transform: scale3d(1, 1, 1); 87 | transform: scale3d(1, 1, 1); } 88 | 100% { 89 | opacity: 1; } } 90 | .zoomIn { 91 | -webkit-animation-name: zoomIn; 92 | animation-name: zoomIn; } 93 | 94 | .zoomOut { 95 | -webkit-animation-name: zoomOut; 96 | animation-name: zoomOut; 97 | display: none\0 !important; } 98 | 99 | .animated { 100 | -webkit-animation-duration: .5s; 101 | animation-duration: .5s; 102 | -webkit-animation-fill-mode: both; 103 | -ms-animation-fill-mode: both; 104 | -moz-animation-fill-mode: both; 105 | animation-fill-mode: both; } 106 | 107 | #confirmDialog { 108 | width: 350px; 109 | background-color: #fff; } 110 | 111 | .ui-confirm-title, .ui-alert-title { 112 | text-align: center; 113 | font-size: 14px; 114 | color: #333; 115 | line-height: 25px; 116 | padding: 27px 0 20px 0; } 117 | 118 | .confirm-title2 { 119 | font-size: 16px; 120 | font-weight: normal; 121 | color: #666; 122 | text-align: center; 123 | line-height: 1.8; } 124 | 125 | .ui-dialog-cancel { 126 | background-color: #999999; } 127 | 128 | .ui-dialog-action { 129 | height: 45px; 130 | line-height: 45px; 131 | border-collapse: collapse; 132 | border-spacing: 0; 133 | pointer-events: auto; 134 | text-align: center; 135 | width: 100%; 136 | border-top: 1px solid #dcdcdc; 137 | padding: 0; 138 | margin: 0; } 139 | 140 | .ui-dialog-action td { 141 | text-align: center; 142 | border: none; } 143 | 144 | .ui-dialog-action button, .ui-dialog-action a { 145 | background-color: #fff; 146 | display: block; 147 | width: 100%; 148 | height: 100%; 149 | color: #47b5ca; 150 | border: none; 151 | outline: none; 152 | cursor: pointer; 153 | box-sizing: border-box; 154 | padding: 0; } 155 | .ui-dialog-action .ui-confirm-close, .ui-dialog-action .ui-confirm-no { 156 | color: #747474; 157 | border-left: 1px solid #dcdcdc; } 158 | 159 | .ui-alert { 160 | border-radius: 5px; 161 | overflow: hidden; } 162 | 163 | .ui-alert .ui-dialog-close { 164 | display: none; } 165 | 166 | .ui-alert .ui-alert-submit { 167 | margin: 0 auto; } 168 | 169 | .ui-alert-info { 170 | text-align: center; 171 | margin-top: 20px; } 172 | 173 | .ui-alert-tip { 174 | color: #fff !important; 175 | background-color: rgba(0, 0, 0, 0.5) !important; } 176 | .ui-alert-tip .ui-alert-title { 177 | color: #fff !important; 178 | padding: 27px 25px; } 179 | 180 | /*# sourceMappingURL=dialog.css.map */ 181 | -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/mobile-photo-preview.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-select-area v1.0.0 2 | * author:tianxiangbing email:55342775@qq.com 3 | * demo:http://www.lovewebgames.com/jsmodule/mobile-photo-preview.html 4 | * git:https://github.com/tianxiangbing/mobile-photo-preview 2015-04-15 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$","dialog"],b):"object"==typeof exports?module.exports=b():a.MobilePhotoPreview=b($,Dialog)}(this,function(a,b){function c(){var a=Math.random().toString().replace(".","");this.id="mp_"+a,this.currentIndex=1,this.sum=1,this.arr=[],this.objArr={},this.dialog,this.bloom}return a.fn.MobilePhotoPreview=function(b){a(this).each(function(){var d=new c;d.init(a.extend({target:a(this)},b))})},c.prototype={init:function(b){this.settings=a.extend({},b),this.target=a(this.settings.target),this.trigger=this.settings.trigger||"a",this.bloom=this.settings.bloom||!1,this.bindEvent()},touch:function(b,c,d){function e(a){return d.call(this,a)}var f;"function"==typeof c&&(d=c),a(b).on("touchmove",c,function(){f=!0}).on("touchend",c,function(a){if(a.preventDefault(),!f){var b=d.call(this,a,"touch");b===!1&&(a.preventDefault(),a.stopPropagation())}f=!1}),a(b).on("click",c,e)},bindEvent:function(){var a=this;a.touch(a.target,a.trigger,function(){return a.initDailog.call(a,this),!1})},bindSlide:function(){var b=this,c={},d=0,e={},f=!1;b.imgPreview.on("touchstart",function(a){return c={x:a.changedTouches[0].pageX,y:a.changedTouches[0].pageY},2==a.targetTouches.length?(f=!1,!1):void(d=a.changedTouches[0].pageX)}),b.imgPreview.on("touchmove",function(d){if(2==d.targetTouches.length)return!1;f=!0,e={x:d.changedTouches[0].pageX,y:d.changedTouches[0].pageY};var g=a(this).position();return a(this).css(b.bloom?{left:g.left+(e.x-c.x),top:g.top+(e.y-c.y)}:{left:g.left+(e.x-c.x)}),c=e,!1}),b.imgPreview.on("touchend",function(g){if(e={x:g.changedTouches[0].pageX,y:g.changedTouches[0].pageY},1==g.targetTouches.length)return c=e,!1;var h=a(this).position(),i={left:h.left+(e.x-c.x),top:h.top+(e.y-c.y)};a(this).css(i);var j=Math.abs(i.left/b.maxWidth),k=j.toString().split("."),l=0,m=k.length>1?"0."+k[1]:0;l=m>.3?Math.ceil(j):Math.floor(j),b.currentIndex=l,d=b.arr.length&&(b.currentIndex=b.arr.length-1),b.go(),f=!1})},go:function(b){var c=this,d=c.currentIndex*c.maxWidth;b=b?"css":"animate",a(c.imgPreview)[b]({left:-d,top:0},200);var e=c.dialog.dialogContainer;a(".imgViewTop em",e).html(c.currentIndex+1+"/"+c.arr.length),c.current=a(c.arr[c.currentIndex]),c.settings.callback&&c.settings.callback.call(c,c.objArr[c.currentIndex],c.currentIndex)},initDailog:function(c){var d=this;d.dialog=null,d.dialog=new b,d.arr=d.target.find(d.trigger),d.sum=d.arr.length,d.currentIndex=a(c).index();var e=a.extend({target:'
      '+(d.currentIndex+1)+"/"+d.sum+'
      ',animate:!0,show:!0,width:"100%",height:"100%",mask:!0,className:"ui-preview",afterHide:function(){this.dispose(),d.settings.hide&&d.settings.hide()},beforeHide:function(){var b=d.imgPreview.children()[d.currentIndex];a(b).siblings().hide()},beforeShow:function(b){d.imgPreview=a("#imgPreview",b),d.format(b),d.bindSlide(),d.go(!0),d.settings.show&&d.settings.show.call(d,d.dialog.dialogContainer)}},{});d.dialog.init(e)},hide:function(){this.dialog.hide()},format:function(){function b(b){length++,c.objArr[b]={src:this.src,height:this.height,width:this.width,elem:a(c.imgPreview.children().get(b)).children("img"),index:b},c.objArr.length=length,c.initSize(b)}var c=this;this.length=0;for(var d="",e=0,f=c.arr.length;f>e;e++){var g=a(c.arr[e]),h='style="visibility:hidden;"';e==c.currentIndex&&(h='style="display:block;"');var i=g.attr("href")||g.children("input").val()||g.children("img").attr("src");d+="
      ',function(a,c,d){setTimeout(function(){var a=new Image;a.src=d,a.complete?b.call(a,c):(a.onreadystatechange=function(){("complete"==this.readystate||"loaded"==this.readyState)&&b.call(this,c)},a.onload=function(){b.call(this,c)})})}(g,e,i)}c.imgPreview.html(d),setTimeout(function(){c.imgPreview.children().css("visibility","visible")},500),c.setSize(),a(window).resize(a.proxy(c.setSize,c))},setSize:function(){var b=this,c=b.dialog.dialogContainer,d=document.documentElement.clientHeight||document.body.clientHeight,e=document.documentElement.clientWidth||document.body.clientWidth;this.maxHeight=d-a(".imgViewTop",c).height()-a(".imgTitle",c).height(),this.maxWidth=e,b.imgPreview.width(this.maxWidth*b.arr.length),b.imgPreview.height(this.maxHeight),b.imgPreview.children("div").width(this.maxWidth)},initSize:function(a){var b=this.objArr[a];if(this.maxHeight 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | js组件-js插件-jquery插件-音频播放器样式 12 | 13 | 14 | 15 | 25 |
      26 |
      27 |
      28 | 29 |  41 | 42 | 43 |

      audio

      44 |

      audio style, 音频播放器样式

      45 | 46 | 49 | 50 | 51 | 52 | 56 | 
      <audio src="horse.ogg" class="audio" controls="controls">
 57 | Your browser does not support the audio element.
 58 | </audio>
 59 | <audio src="horse.ogg" class="audio" controls="controls">
 60 | Your browser does not support the audio element.
 61 | </audio>
 62 | <script src="../dist/jquery-1.9.1.min.js" type="text/javascript"></script>
 63 | <script src="../dist/audio.js" type="text/javascript"></script>
 64 | <script>
 65 | $('.audio').Audio();//or new Audio.init({target:$('.audio')})
 66 | </script>
 67 |
      68 | 69 |

      属性和回调(options)

      70 |

      target:

      71 | 
      要变化样式的audio
 72 |
      73 | 74 |

      play:

      75 | 
      开始
 76 |
      77 | 78 |

      stop:

      79 | 
      停止
 80 |
      81 | 82 |

      playCallback:

      83 |

      function(this.audio,this.audio.paused,this.durationContent)

      84 | 
      播放或暂停时的回调
 85 |
      86 | 87 |

      stopCallback

      88 |

      function(this,this.audio,this.audio.paused,this.durationContent)

      89 | 
      停止后的回调
 90 |
      91 | 92 |

      updateCallback

      93 |

      function(this,this.audio,this.audio.duration,this.durationContent))

      94 | 
      更新进度时的回调
 95 |
      96 | 97 |
      98 |
      99 |
      100 | 101 |
      源码在github上托管，请尽量到github上下载最新代码！也可以提交Issues. 如果您发现demo无法使用时，请多刷新几次,可能是js文件没有加载成功。
      102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /screen/mobile-photo-preview.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,mobile-photo-preview) 5 | $set(title,js手机端照片预览) 6 | 7 |

      8 | mobile-photo-preview

      9 |

      demo:(请使用手机浏览器模式访问该例子)

      10 |
      11 | 12 | 13 | 14 |
      15 | 16 | 17 | 22 | 23 | 24 | 25 | 30 |

      31 | 使用方法案例:

      32 | 
          var photoPreview = new MobilePhotoPreview();
33 | 	    photoPreview.init({
34 | 	        target: $('.preview-list'),
35 | 	        trigger: '.preview',
36 | 	        show: function(c) {
37 | 	            var del = $('<span class="icon-del"><span>');
38 | 	            $('.imgViewTop', c).append(del);
39 | 	            del.tap(function() {
40 | 	                photoPreview.current.remove();
41 | 	                photoPreview.hide();
42 | 	            });
43 | 	        }
44 | 	    });
45 |
      46 |

      47 | 或者：

      48 | 
          $('.preview-list').MobilePhotoPreview({
49 | 	        trigger: '.preview',
50 | 	        show: function(c) {
51 | 	            var del = $('<span class="icon-del"><span>');
52 | 	            $('.imgViewTop', c).append(del);
53 | 	            var _this = this;
54 | 	            del.tap(function() {
55 | 	                _this.current.remove();
56 | 	                _this.hide();
57 | 	            });
58 | 	        }
59 | 	    });
60 |
      61 |

      注：两种方法没有本质的区别，推荐第一种。

      62 |

      63 | API 属性、方法及回调：

      64 |

      65 | target:

      66 | 
          表示是在这个容器内的元素会触发事件，它是一个范围，与trigger一同使用，委托事件节点，所以是必须的。建议不作根结点的委托.
67 |
      68 |

      69 | trigger:

      70 | 
          表示触发事件的对象，它可以是动态的，默认是target下面的a链接触发
71 |
      72 |

      73 | show:

      74 | 
          显示之后的回调，参数是dialog容器，当前this指向MobilePhotoPreview的实例。这是一个为了扩展更多功能的回调方法。为了更好的用到这个回调，你可以会对下面的属性有兴趣了解
75 |
      76 |

      77 | this下的属性及方法：

      78 |

      79 | current:

      80 | 
          当前的结点对象
81 |
      82 |

      83 | currentIndex:

      84 | 
          当前索引
85 |
      86 |

      87 | objArr:

      88 | 
          数组对象，在这里，你可以得到一个集合，包括索引、element、宽、高。这将会是很有用的东西。
89 |
      90 |

      91 | hide:

      92 | 
          调用的是dialog的hide.
93 |
      94 |

      其它组件推荐

      95 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/click-progress.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,click-progress) 5 | $set(title,点击的进度条) 6 |

      7 | click-progress

      8 | 9 |

      点击的进度条 10 |

      11 | 12 | 13 |
      14 | 15 |
      16 |
      17 |
      18 | 19 | 20 | 21 | 56 |

      57 | 使用方法案例:

      58 | 59 | 
      <div class="progress"><div class="progress-finished"></div></div>
 60 | <input type="button" value="click" id="click"/>
 61 | $('#click').ClickProgress({
 62 |     target:$('.progress'),
 63 |     v:5,
 64 |     a:1,
 65 |     change:'height',//width时是横向，可以看demo
 66 |     time:30,
 67 |     clicked:function(a,b,c){
 68 |         console.log(c,'加油')
 69 |         },
 70 |     progress:function(a,b,c){
 71 |         console.log(c)
 72 |         },
 73 |     callback:function(){
 74 |         alert('完成了')
 75 |     }
 76 | });
 77 |
      78 | 79 |

      80 | 或者requirejs

      81 | 82 | 
      requirejs.config({
 83 |     //By default load any module IDs from js/lib
 84 |     baseUrl: '../src',
 85 |     paths: {
 86 |         $: 'zepto'
 87 |     }
 88 | });
 89 | require(['click-progress',"$"], function(ClickProgress,$) {
 90 |     var cp = new ClickProgress();
 91 |     cp.init({
 92 |         trigger:$('#click'),
 93 |         target:$('.progress'),
 94 |         v:5,
 95 |         a:1,
 96 |         change:'height',
 97 |         time:30,
 98 |         clicked:function(a,b,c){
 99 |             console.log(c,'加油')
100 |             },
101 |         progress:function(a,b,c){
102 |             console.log(c)
103 |             },
104 |         callback:function(){
105 |             alert('完成了')
106 |         }
107 |     });
108 |  });
109 |
      110 | 111 |

      112 | 属性和方法

      113 | 114 |

      115 | trigger:

      116 | 117 | 
      触发事件的对象
118 |
      119 | 120 |

      121 | target:

      122 | 123 | 
      进度条对象dom，结果有两层
124 |
      125 | 126 |

      127 | v:

      128 | 129 | 
      每次点击的初始速度
130 |
      131 | 132 |

      133 | a:

      134 | 135 | 
      加速度，可以理解为重力或摩擦力
136 |
      137 | 138 |

      139 | change:height/width

      140 | 141 | 
      是改变的高度还是width,默认为height
142 |
      143 | 144 |

      145 | time:

      146 | 147 | 
      频率
148 |
      149 | 150 |

      151 | clicked:function(a,b,c)

      152 | 153 | 
      点击后的回调，a是trigger,b是target,c是当前的power值，下面的一样
154 |
      155 | 156 |

      157 | progress:function(a,b,c)

      158 | 159 | 
      每次进度改变的回调
160 |
      161 | 162 |

      163 | callback:function(a,b,c)

      164 | 165 | 
      结束后的回调，这里指达到100%;
166 |
      167 | 168 |

      其它组件推荐

      169 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /screen/table.vm: -------------------------------------------------------------------------------- 1 | $control.setTemplate("head.vm") 2 | $control.setTemplate("menu.vm") 3 | $control.setTemplate("side.vm") 4 | $set(modulename,table) 5 | $set(title,表格渲染组件) 6 |

      7 | table

      8 |
      9 |

      表格的渲染组件

      10 |
      11 |
      12 | 名称: search 13 |
      14 |
      15 | loading... 16 |
      17 |
      18 |
      19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 51 | 52 | 56 |
      57 |

      如上所示，功能基本包括常用表格中遇到的分页、搜索、删除、AJAX操作。由于是用的HANDLEBARS渲染的，所以样式可能很好的控制，要加新的功能也较容易。

      58 | 59 |

      60 | 调用例子

      61 | 62 |

      63 | html

      64 | 65 | 
      <div class="form">
 66 |     名称: <input type="text" name="gname"> <a href="#" id="search">search</a>
 67 | </div>
 68 | <div id="tab-list" ajaxurl="list.json">
 69 |     loading...
 70 | </div>
 71 | <div id="pager"></div>
 72 |
      73 | 74 |

      75 | 模板

      76 | 77 | 
      <script type="text/x-handlebars-template" id="tpl-list">
 78 |     <table class="tab-list">
 79 |         <thead>
 80 |             <tr>
 81 |                     <th class="first-cell">序号</th>
 82 |                     <th>商品条码</th>
 83 |                     <th>商品名称</th>
 84 |                     <th>状态</th>
 85 |                     <th>操作</th>
 86 |             </tr>
 87 |         </thead>
 88 |         <tbody>
 89 |             {{#each data}}
 90 |             <tr>
 91 |                     <td class="first-cell">{{@index}}</td>
 92 |                     <td>{{goods_bn}}</td>
 93 |                     <td>{{goods_name}}</td>
 94 |                     <td>上架</td>
 95 |                     <td><a class="js-ajax" js-ajax-param="id={{goods_id}}" href="action.json">下架</a> <a class="js-delete" href="action.json">删除</a></td>
 96 |             </tr>
 97 |             {{/each}}
 98 |         </tbody>
 99 |     </table>
100 | </script>
101 |
      102 | 103 |

      104 | js

      105 | 106 | 
      <script>
107 |     var table = new Table($('#tab-list'), $('#tpl-list'), $('#pager'), {}, $('#search'));
108 |     table.init({type:'post'});
109 | </script>
110 |
      111 | 112 |
      113 | 114 |

      115 | 属性和方法

      116 | 117 |

      118 | constuctor:function(table, temp, page, param, search, callback, filterCon)

      119 | 120 | 
      构造函数，table是指存放表格的容器，可以是一个空的div，也可以是table里的一个tbody；
121 | temp是指表格的模板，这里是script节点的jquery对象
122 | page 需要放置分页控件的容器
123 | param 初始化带的参数 type json
124 | search 搜索按钮节点，你的祖先级中要有一个class为form的节点，会利用[query](https://github.com/tianxiangbing/query)格式化里面为参数，进行查询数据操作
125 | callback 加载后的回调
126 | filterCon 筛选过滤
127 |
      128 | 129 |

      130 | init:function(settings)

      131 | 132 | 
      init是启动方法，目前的settings中仅包含{type:'get'} ，ajax请求的类型
133 |
      134 | 135 |

      其它组件推荐

      136 | $control.setTemplate("modulelist.vm") -------------------------------------------------------------------------------- /src/example/mobile-photo-preview/dialog.min.js: -------------------------------------------------------------------------------- 1 | /*! mobile-select-area v1.0.0 2 | * author:tianxiangbing email:55342775@qq.com 3 | * demo:http://www.lovewebgames.com/jsmodule/mobile-photo-preview.html 4 | * git:https://github.com/tianxiangbing/mobile-photo-preview 2015-04-15 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.Dialog=b(window.Zepto||window.jQuery||$)}(this,function(a){a.fn.Dialog=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({trigger:a(this)},c);e.init(f),d.push(e)}),d},a.Dialog=function(c){if("alert"===c.type){var d=new b,e='
      '+c.content+"
      ",f="";c.button?("boolean"==typeof c.button&&(c.button="确定"),f='

      "):c.timer||(c.timer=3e3),e+=f;var g=a.extend({target:e,animate:!0,show:!0,mask:!0,className:"ui-alert",afterHide:function(){this.dispose(),c.callback&&c.callback()}},c);d.init(g),c.timer&&setTimeout(function(){d.dispose(),c.callback&&c.callback()},c.timer)}if("confirm"===c.type){var h=new b,e='
      '+c.content+"
      ",f="";c.buttons||(c.buttons=[{yes:"确定"},{no:"取消"}]);for(var i="",j=0,k=c.buttons.length;k>j;j++){var l=c.buttons[j];l.yes&&(i+='"),l.no&&(i+='"),l.close&&(i+='")}f=''+i+"
      ",e+=f;var m=a.extend({target:e,animate:!0,show:!0,mask:!0,className:"ui-alert",afterHide:function(){this.dispose()},beforeShow:function(b){h.touch(a(".ui-confirm-submit",b),function(){c.callback&&c.callback.call(h,"yes",b)}),h.touch(a(".ui-confirm-no",b),function(){c.callback&&c.callback.call(h,"no",b)}),h.touch(a(".ui-confirm-close",b),function(){c.callback&&c.callback.call(h,"close",b)})}},c);h.init(m)}},a.alert=function(b,c,d,e){a.Dialog({content:b,button:c,timer:e,callback:d,zIndex:100,type:"alert"})},a.confirm=function(b,c,d){a.Dialog({content:b,buttons:c,callback:d,zIndex:100,type:"confirm"})};var b=function(){var b=Math.random().toString().replace(".","");this.id="dialog_"+b,this.settings={},this.settings.closeTpl=a('x'),this.settings.titleTpl=a('
      '),this.timer=null,this.showed=!1,this.mask=a()};return b.prototype={init:function(b){this.settings=a.extend({},this.settings,b),this.settings.mask&&(this.mask=a('
      '),a("body").append(this.mask)),a("body").append('
      '),this.dialogContainer=a("#"+this.id);var c=this.settings.zIndex||10;this.dialogContainer.css({zIndex:c}),this.settings.className&&this.dialogContainer.addClass(this.settings.className),this.mask.css({zIndex:c-1}),this.settings.closeTpl&&this.dialogContainer.append(this.settings.closeTpl),this.settings.title&&(this.dialogContainer.append(this.settings.titleTpl),this.settings.titleTpl.html(this.settings.title)),this.bindEvent(),this.settings.show&&this.show()},touch:function(b,c){function d(a){return c.call(this,a)}var e;a(b).on("click",d),a(b).on("touchmove",function(){e=!0}).on("touchend",function(a){if(a.preventDefault(),!e){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}e=!1})},bindEvent:function(){var b=this;this.settings.trigger&&(a(this.settings.trigger).click(function(){b.show()}),b.touch(a(this.settings.trigger),function(){b.show()})),a(this.dialogContainer).delegate(".js-dialog-close","click",function(){return b.hide(),!1}),a(window).resize(function(){b.setPosition()}),a(window).scroll(function(){b.setPosition()}),a(window).keydown(function(a){27===a.keyCode&&b.showed&&b.hide()})},dispose:function(){this.dialogContainer.remove(),this.mask.remove()},hide:function(){var b=this;b.settings.beforeHide&&b.settings.beforeHide.call(b,b.dialogContainer),this.showed=!1,this.mask.hide(),this.settings.animate?(this.dialogContainer.removeClass("zoomIn").addClass("zoomOut"),setTimeout(function(){b.dialogContainer.hide(),"object"==typeof b.settings.target&&a("body").append(b.dialogContainer.hide()),b.settings.afterHide&&b.settings.afterHide.call(b,b.dialogContainer)},500)):(this.dialogContainer.hide(),"object"==typeof this.settings.target&&a("body").append(this.dialogContainer),this.settings.afterHide&&this.settings.afterHide.call(this,this.dialogContainer))},show:function(){this.dailogContent="string"==typeof this.settings.target?a(/^(\.|\#\w+)/gi.test(this.settings.target)?this.settings.target:"
      "+this.settings.target+"
      "):this.settings.target,this.mask.show(),this.dailogContent.show(),this.height=this.settings.height||"auto",this.width=this.settings.width||"auto",this.dialogContainer.append(this.dailogContent).show().css({height:this.height,width:this.width}),this.settings.beforeShow&&this.settings.beforeShow.call(this,this.dialogContainer),this.showed=!0,this.setPosition(),this.settings.animate&&this.dialogContainer.addClass("zoomIn").removeClass("zoomOut").addClass("animated")},setPosition:function(){if(this.showed){var a=this;this.dialogContainer.show(),this.height=this.settings.height,this.width=this.settings.width,isNaN(this.height)&&(this.height=this.dialogContainer.outerHeight&&this.dialogContainer.outerHeight()||this.dialogContainer.height()),isNaN(this.width)&&(this.width=this.dialogContainer.outerWidth&&this.dialogContainer.outerWidth()||this.dialogContainer.width());var b=document.documentElement.clientHeight||document.body.clientHeight,c=document.documentElement.clientWidth||document.body.clientWidth,d=this.width/2,e=this.height/2,f=c/2-d,g=b/2-e;f=Math.max(0,f),g=Math.max(0,g),a.dialogContainer.css({position:"fixed",top:g,left:f})}}},b}); -------------------------------------------------------------------------------- /src/example/dialog/dialog.min.js: -------------------------------------------------------------------------------- 1 | /*! dialog v1.0.3 2 | * author:tianxiangbing email:55342775@qq.com 3 | * demo:http://www.lovewebgames.com/jsmodule/dialog.html 4 | * git:https://github.com/tianxiangbing/dialog 2015-04-15 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.Dialog=b(window.Zepto||window.jQuery||$)}(this,function(a){a.fn.Dialog=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({trigger:a(this)},c);e.init(f),d.push(e)}),d},a.Dialog=function(c){if("alert"===c.type){var d=new b,e='
      '+c.content+"
      ",f="";c.button?("boolean"==typeof c.button&&(c.button="确定"),f='

      "):c.timer||(c.timer=3e3),e+=f;var g=a.extend({target:e,animate:!0,show:!0,mask:!0,className:"ui-alert",afterHide:function(){this.dispose(),c.callback&&c.callback()}},c);d.init(g),c.timer&&setTimeout(function(){d.dispose(),c.callback&&c.callback()},c.timer),d.touch(d.mask,function(){d.dispose(),c.callback&&c.callback()})}if("confirm"===c.type){var h=new b,e='
      '+c.content+"
      ",f="";c.buttons||(c.buttons=[{yes:"确定"},{no:"取消"}]);for(var i="",j=0,k=c.buttons.length;k>j;j++){var l=c.buttons[j];l.yes&&(i+='"),l.no&&(i+='"),l.close&&(i+='")}f=''+i+"
      ",e+=f;var m=a.extend({target:e,animate:!0,show:!0,mask:!0,className:"ui-alert",afterHide:function(){this.dispose()},beforeShow:function(b){h.touch(a(".ui-confirm-submit",b),function(){c.callback&&c.callback.call(h,"yes",b)}),h.touch(a(".ui-confirm-no",b),function(){c.callback&&c.callback.call(h,"no",b)}),h.touch(a(".ui-confirm-close",b),function(){c.callback&&c.callback.call(h,"close",b)})}},c);h.init(m)}},a.alert=function(b,c,d,e){a.Dialog({content:b,button:c,timer:e,callback:d,zIndex:100,type:"alert"})},a.confirm=function(b,c,d){a.Dialog({content:b,buttons:c,callback:d,zIndex:100,type:"confirm"})};var b=function(){var b=Math.random().toString().replace(".","");this.id="dialog_"+b,this.settings={},this.settings.closeTpl=a('x'),this.settings.titleTpl=a('
      '),this.timer=null,this.showed=!1,this.mask=a()};return b.prototype={init:function(b){this.settings=a.extend({},this.settings,b),this.settings.mask&&(this.mask=a('
      '),a("body").append(this.mask)),a("body").append('
      '),this.dialogContainer=a("#"+this.id);var c=this.settings.zIndex||10;this.dialogContainer.css({zIndex:c}),this.settings.className&&this.dialogContainer.addClass(this.settings.className),this.mask.css({zIndex:c-1}),this.settings.closeTpl&&this.dialogContainer.append(this.settings.closeTpl),this.settings.title&&(this.dialogContainer.append(this.settings.titleTpl),this.settings.titleTpl.html(this.settings.title)),this.bindEvent(),this.settings.show&&this.show()},touch:function(b,c){function d(a){return c.call(this,a)}var e;a(b).on("click",d),a(b).on("touchmove",function(){e=!0}).on("touchend",function(a){if(a.preventDefault(),!e){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}e=!1})},bindEvent:function(){var b=this;this.settings.trigger&&(a(this.settings.trigger).click(function(){b.show()}),b.touch(a(this.settings.trigger),function(){b.show()})),a(this.dialogContainer).delegate(".js-dialog-close","click",function(){return b.hide(),!1}),a(window).resize(function(){b.setPosition()}),a(window).scroll(function(){b.setPosition()}),a(window).keydown(function(a){27===a.keyCode&&b.showed&&b.hide()})},dispose:function(){this.dialogContainer.remove(),this.mask.remove()},hide:function(){var b=this;b.settings.beforeHide&&b.settings.beforeHide.call(b,b.dialogContainer),this.showed=!1,this.mask.hide(),this.settings.animate?(this.dialogContainer.removeClass("zoomIn").addClass("zoomOut"),setTimeout(function(){b.dialogContainer.hide(),"object"==typeof b.settings.target&&a("body").append(b.dialogContainer.hide()),b.settings.afterHide&&b.settings.afterHide.call(b,b.dialogContainer)},500)):(this.dialogContainer.hide(),"object"==typeof this.settings.target&&a("body").append(this.dialogContainer),this.settings.afterHide&&this.settings.afterHide.call(this,this.dialogContainer))},show:function(){this.dailogContent="string"==typeof this.settings.target?a(/^(\.|\#\w+)/gi.test(this.settings.target)?this.settings.target:"
      "+this.settings.target+"
      "):this.settings.target,this.mask.show(),this.dailogContent.show(),this.height=this.settings.height||"auto",this.width=this.settings.width||"auto",this.dialogContainer.append(this.dailogContent).show().css({height:this.height,width:this.width}),this.settings.beforeShow&&this.settings.beforeShow.call(this,this.dialogContainer),this.showed=!0,a(this.settings.trigger).blur(),this.setPosition();var b=this;setInterval(function(){b.setPosition()},1e3),this.settings.animate&&this.dialogContainer.addClass("zoomIn").removeClass("zoomOut").addClass("animated")},setPosition:function(){if(this.showed){var a=this;this.dialogContainer.show(),this.height=this.settings.height,this.width=this.settings.width,isNaN(this.height)&&(this.height=this.dialogContainer.outerHeight&&this.dialogContainer.outerHeight()||this.dialogContainer.height()),isNaN(this.width)&&(this.width=this.dialogContainer.outerWidth&&this.dialogContainer.outerWidth()||this.dialogContainer.width());var b=document.documentElement.clientHeight||document.body.clientHeight,c=document.documentElement.clientWidth||document.body.clientWidth,d=this.width/2,e=this.height/2,f=c/2-d,g=b/2-e;f=Math.max(0,f),g=Math.max(0,g),a.dialogContainer.css({position:"fixed",top:g,left:f})}}},b}); -------------------------------------------------------------------------------- /src/example/dialog/dialog-jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! dialog v1.0.3 2 | * author:tianxiangbing email:55342775@qq.com 3 | * demo:http://www.lovewebgames.com/jsmodule/dialog.html 4 | * git:https://github.com/tianxiangbing/dialog 2015-04-15 */ 5 | !function(a,b){"function"==typeof define&&define.amd?define(["$"],b):"object"==typeof exports?module.exports=b():a.Dialog=b(window.Zepto||window.jQuery||$)}(this,function(a){a.fn.Dialog=function(c){var d=[];return a(this).each(function(){var e=new b,f=a.extend({trigger:a(this)},c);e.init(f),d.push(e)}),d},a.Dialog=function(c){if("alert"===c.type){var d=new b,e='
      '+c.content+"
      ",f="";c.button?("boolean"==typeof c.button&&(c.button="确定"),f='

      "):c.timer||(c.timer=3e3),e+=f;var g=a.extend({target:e,animate:!0,show:!0,mask:!0,className:"ui-alert",afterHide:function(){this.dispose(),c.callback&&c.callback()}},c);d.init(g),c.timer&&setTimeout(function(){d.dispose(),c.callback&&c.callback()},c.timer),d.touch(d.mask,function(){d.dispose(),c.callback&&c.callback()})}if("confirm"===c.type){var h=new b,e='
      '+c.content+"
      ",f="";c.buttons||(c.buttons=[{yes:"确定"},{no:"取消"}]);for(var i="",j=0,k=c.buttons.length;k>j;j++){var l=c.buttons[j];l.yes&&(i+='"),l.no&&(i+='"),l.close&&(i+='")}f=''+i+"
      ",e+=f;var m=a.extend({target:e,animate:!0,show:!0,mask:!0,className:"ui-alert",afterHide:function(){this.dispose()},beforeShow:function(b){h.touch(a(".ui-confirm-submit",b),function(){c.callback&&c.callback.call(h,"yes",b)}),h.touch(a(".ui-confirm-no",b),function(){c.callback&&c.callback.call(h,"no",b)}),h.touch(a(".ui-confirm-close",b),function(){c.callback&&c.callback.call(h,"close",b)})}},c);h.init(m)}},a.alert=function(b,c,d,e){a.Dialog({content:b,button:c,timer:e,callback:d,zIndex:100,type:"alert"})},a.confirm=function(b,c,d){a.Dialog({content:b,buttons:c,callback:d,zIndex:100,type:"confirm"})};var b=function(){var b=Math.random().toString().replace(".","");this.id="dialog_"+b,this.settings={},this.settings.closeTpl=a('x'),this.settings.titleTpl=a('
      '),this.timer=null,this.showed=!1,this.mask=a()};return b.prototype={init:function(b){this.settings=a.extend({},this.settings,b),this.settings.mask&&(this.mask=a('
      '),a("body").append(this.mask)),a("body").append('
      '),this.dialogContainer=a("#"+this.id);var c=this.settings.zIndex||10;this.dialogContainer.css({zIndex:c}),this.settings.className&&this.dialogContainer.addClass(this.settings.className),this.mask.css({zIndex:c-1}),this.settings.closeTpl&&this.dialogContainer.append(this.settings.closeTpl),this.settings.title&&(this.dialogContainer.append(this.settings.titleTpl),this.settings.titleTpl.html(this.settings.title)),this.bindEvent(),this.settings.show&&this.show()},touch:function(b,c){function d(a){return c.call(this,a)}var e;a(b).on("click",d),a(b).on("touchmove",function(){e=!0}).on("touchend",function(a){if(a.preventDefault(),!e){var b=c.call(this,a,"touch");b||(a.preventDefault(),a.stopPropagation())}e=!1})},bindEvent:function(){var b=this;this.settings.trigger&&(a(this.settings.trigger).click(function(){b.show()}),b.touch(a(this.settings.trigger),function(){b.show()})),a(this.dialogContainer).delegate(".js-dialog-close","click",function(){return b.hide(),!1}),a(window).resize(function(){b.setPosition()}),a(window).scroll(function(){b.setPosition()}),a(window).keydown(function(a){27===a.keyCode&&b.showed&&b.hide()})},dispose:function(){this.dialogContainer.remove(),this.mask.remove()},hide:function(){var b=this;b.settings.beforeHide&&b.settings.beforeHide.call(b,b.dialogContainer),this.showed=!1,this.mask.hide(),this.settings.animate?(this.dialogContainer.removeClass("zoomIn").addClass("zoomOut"),setTimeout(function(){b.dialogContainer.hide(),"object"==typeof b.settings.target&&a("body").append(b.dialogContainer.hide()),b.settings.afterHide&&b.settings.afterHide.call(b,b.dialogContainer)},500)):(this.dialogContainer.hide(),"object"==typeof this.settings.target&&a("body").append(this.dialogContainer),this.settings.afterHide&&this.settings.afterHide.call(this,this.dialogContainer))},show:function(){this.dailogContent="string"==typeof this.settings.target?a(/^(\.|\#\w+)/gi.test(this.settings.target)?this.settings.target:"
      "+this.settings.target+"
      "):this.settings.target,this.mask.show(),this.dailogContent.show(),this.height=this.settings.height||"auto",this.width=this.settings.width||"auto",this.dialogContainer.append(this.dailogContent).show().css({height:this.height,width:this.width}),this.settings.beforeShow&&this.settings.beforeShow.call(this,this.dialogContainer),this.showed=!0,a(this.settings.trigger).blur(),this.setPosition();var b=this;setInterval(function(){b.setPosition()},1e3),this.settings.animate&&this.dialogContainer.addClass("zoomIn").removeClass("zoomOut").addClass("animated")},setPosition:function(){if(this.showed){var a=this;this.dialogContainer.show(),this.height=this.settings.height,this.width=this.settings.width,isNaN(this.height)&&(this.height=this.dialogContainer.outerHeight&&this.dialogContainer.outerHeight()||this.dialogContainer.height()),isNaN(this.width)&&(this.width=this.dialogContainer.outerWidth&&this.dialogContainer.outerWidth()||this.dialogContainer.width());var b=document.documentElement.clientHeight||document.body.clientHeight,c=document.documentElement.clientWidth||document.body.clientWidth,d=this.width/2,e=this.height/2,f=c/2-d,g=b/2-e;f=Math.max(0,f),g=Math.max(0,g),a.dialogContainer.css({position:"fixed",top:g,left:f})}}},b}); --------------------------------------------------------------------------------