├── .gitignore ├── README.md ├── fork&pullrequests.md ├── package ├── dialog │ ├── README.md │ ├── code │ │ ├── 52cik │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ └── 4.html │ │ ├── ColdXu │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ └── 4.html │ │ ├── LastGun │ │ │ ├── dialog-stage-1 │ │ │ │ ├── dialog.html │ │ │ │ └── dialog.js │ │ │ ├── dialog-stage-2 │ │ │ │ ├── dialog.html │ │ │ │ └── dialog.js │ │ │ ├── dialog-stage-3 │ │ │ │ ├── dialog.html │ │ │ │ └── dialog.js │ │ │ └── dialog-stage-4 │ │ │ │ ├── dialog.html │ │ │ │ └── dialog.js │ │ ├── coolzjy │ │ │ ├── dialog.css │ │ │ ├── dialog.js │ │ │ └── index.html │ │ ├── fanplus │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── fromiris │ │ │ ├── close.png │ │ │ ├── css │ │ │ │ └── dialog.css │ │ │ ├── dialog.html │ │ │ ├── dialog.js │ │ │ └── dialog.less │ │ ├── lijinyao │ │ │ ├── close.png │ │ │ ├── dialog-stage1 │ │ │ │ ├── index.html │ │ │ │ └── script.js │ │ │ ├── dialog-stage2 │ │ │ │ ├── index.html │ │ │ │ └── script.js │ │ │ ├── dialog-stage3 │ │ │ │ ├── index.html │ │ │ │ └── script.js │ │ │ ├── dialog-stage4 │ │ │ │ ├── index.html │ │ │ │ └── script.js │ │ │ └── style.css │ │ ├── limingyang2012 │ │ │ ├── 阶段一 │ │ │ │ ├── css │ │ │ │ │ └── main.css │ │ │ │ ├── index.html │ │ │ │ └── js │ │ │ │ │ └── main.js │ │ │ ├── 阶段三 │ │ │ │ ├── css │ │ │ │ │ └── main.css │ │ │ │ ├── index.html │ │ │ │ └── js │ │ │ │ │ ├── jquery.min.js │ │ │ │ │ └── main.js │ │ │ ├── 阶段二 │ │ │ │ ├── css │ │ │ │ │ └── main.css │ │ │ │ ├── index.html │ │ │ │ └── js │ │ │ │ │ └── main.js │ │ │ └── 阶段四 │ │ │ │ ├── css │ │ │ │ └── main.css │ │ │ │ ├── index.html │ │ │ │ └── js │ │ │ │ ├── jquery.min.js │ │ │ │ └── main.js │ │ ├── murphywuwu │ │ │ ├── 1 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── style.css │ │ │ ├── 2 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── style.css │ │ │ ├── 3 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── style.css │ │ │ └── 4 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── style.css │ │ ├── newraina │ │ │ ├── 2 │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ └── style.css │ │ │ ├── 3 │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ └── style.css │ │ │ ├── 4 │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ └── style.css │ │ │ ├── 5 │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ └── style.css │ │ │ └── 1.html │ │ ├── scq000 │ │ │ ├── 1 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ │ ├── 2 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ │ ├── 3 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ │ └── 4 │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ ├── veena233 │ │ │ └── index5.html │ │ └── xuexb │ │ │ ├── 1 │ │ │ └── index.html │ │ │ ├── 2 │ │ │ └── index.html │ │ │ ├── 3 │ │ │ └── index.html │ │ │ ├── 4 │ │ │ └── index.html │ │ │ ├── README.md │ │ │ └── mod │ │ │ ├── close.png │ │ │ ├── close@2x.png │ │ │ └── dialog.css │ └── dialog.png └── tab │ ├── README.md │ ├── code │ ├── 593273894 │ │ ├── 1 │ │ │ └── index.html │ │ ├── 2 │ │ │ └── index.html │ │ ├── 3 │ │ │ └── index.html │ │ ├── 4 │ │ │ └── index.html │ │ └── 5 │ │ │ └── index.html │ ├── 2319103827 │ │ ├── index.html │ │ ├── index2.html │ │ ├── index3.html │ │ ├── index4.html │ │ └── index5.html │ ├── 52cik │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ └── 5.html │ ├── ColdXu │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ └── 5.html │ ├── DuXingXia233 │ │ ├── README.md │ │ ├── css │ │ │ ├── tab.css │ │ │ └── yahoo reSet.css │ │ ├── img │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ └── 8.png │ │ ├── js │ │ │ ├── common.js │ │ │ └── tab.js │ │ └── tab.html │ ├── LastGun │ │ ├── stage-1 │ │ │ ├── tab-1.html │ │ │ └── tab.js │ │ ├── stage-2 │ │ │ ├── tab.html │ │ │ └── tab.js │ │ ├── stage-3 │ │ │ ├── tab.html │ │ │ └── tab.js │ │ ├── stage-4 │ │ │ ├── tab.html │ │ │ └── tab.js │ │ └── stage-5 │ │ │ ├── tab.html │ │ │ └── tab.js │ ├── Yeahax │ │ ├── 1 │ │ │ └── index.html │ │ └── 2 │ │ │ └── index.html │ ├── coolzjy │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── langrren │ │ ├── 1 │ │ │ └── index.html │ │ └── 2 │ │ │ └── index.html │ ├── lijinyao │ │ ├── style.css │ │ ├── tab-stage1 │ │ │ ├── idnex.html │ │ │ └── script.js │ │ ├── tab-stage2 │ │ │ ├── idnex.html │ │ │ └── script.js │ │ ├── tab-stage3 │ │ │ ├── idnex.html │ │ │ └── script.js │ │ └── tab-stage4 │ │ │ ├── idnex.html │ │ │ └── script.js │ ├── limingyang2012 │ │ ├── 阶段一 │ │ │ ├── css │ │ │ │ └── main.css │ │ │ ├── index.html │ │ │ └── js │ │ │ │ └── main.js │ │ ├── 阶段三 │ │ │ ├── css │ │ │ │ └── main.css │ │ │ ├── index.html │ │ │ └── js │ │ │ │ └── main.js │ │ ├── 阶段二 │ │ │ ├── css │ │ │ │ └── main.css │ │ │ ├── index.html │ │ │ └── js │ │ │ │ └── main.js │ │ ├── 阶段五 │ │ │ ├── css │ │ │ │ └── main.css │ │ │ ├── index.html │ │ │ └── js │ │ │ │ └── main.js │ │ └── 阶段四 │ │ │ ├── css │ │ │ └── main.css │ │ │ ├── index.html │ │ │ └── js │ │ │ └── main.js │ ├── murphywuwu │ │ ├── 1 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── 2 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── 3 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── 4 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ └── 5 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ ├── myadmin │ │ └── index.html │ ├── newraina │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ ├── 5.html │ │ └── 6.html │ ├── rccoder │ │ ├── README.md │ │ ├── tab1.html │ │ ├── tab2.html │ │ ├── tab3.html │ │ ├── tab4.html │ │ └── tab5.html │ ├── scq000 │ │ ├── 1 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── 2 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ ├── 3 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ │ └── 4 │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ ├── veena233 │ │ ├── index1.html │ │ ├── index2.html │ │ └── index5.html │ ├── whatlife │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ └── 5.html │ ├── xuexb │ │ ├── 1 │ │ │ └── index.html │ │ ├── 2 │ │ │ └── index.html │ │ ├── 3 │ │ │ └── index.html │ │ ├── 4 │ │ │ └── index.html │ │ ├── 5 │ │ │ └── index.html │ │ └── README.md │ └── zmen │ │ ├── 1.html │ │ ├── 2.html │ │ ├── 3.html │ │ ├── 4.html │ │ └── 5.html │ └── tab.png └── static └── jquery └── 1.11.2 ├── jquery.js ├── jquery.min.js └── jquery.min.map /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | .idea 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # learn-js 2 | 3 | 4 | **请确认你访问的是主版本 [nimojs/learn-js](https://github.com/nimojs/learn-js)，在主版本中你可以看到所有人的代码提交** 5 | 6 | --- 7 | 8 | 这是一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 9 | 10 | 组件开发的挑战是循序渐进的，每个组件开发挑战都必须掌握必要的知识才可以接受。 11 | 12 | > 点击右上角的 **[Watch](https://github.com/nimojs/learn-js/subscription)** 关注本项目，点击 Star 收藏本项目。 13 | 14 | --- 15 | 16 | **参与方式：** 17 | 选择挑战某个组件开发，按阶段完成任务。将自己的代码提交到对应组件中。 18 | 19 | [Fork & Pull Requests | 克隆与请求合并](fork&pullrequests.md) 20 | 21 | ## Tab 选项卡 22 | 23 | 24 | 25 | 26 | [接受挑战](package/tab/) 27 | 28 | ## Dialog 弹出层 29 | 30 | 31 | 32 | [接受挑战](package/dialog/) -------------------------------------------------------------------------------- /fork&pullrequests.md: -------------------------------------------------------------------------------- 1 | # 克隆与请求合并 2 | 3 | ## 注册 GitHub 账号 4 | 5 | [https://github.com/join](https://github.com/join) 6 | 7 | ## Fork 此项目 8 | 9 | [https://github.com/nimojs/learn-js](https://github.com/nimojs/learn-js) 10 | 11 | ![fork](https://cloud.githubusercontent.com/assets/3949015/7487787/31a3645a-f3f1-11e4-85d8-e9fe041db782.png) 12 | 13 | ## 安装 GitHub 客户端 14 | 15 | 下载 [GitHub Windows 离线安装包](http://static.nimojs.com/file/github/github-windows7.zip) 16 | 17 | 解压缩后打开 GitHub.exe 18 | 19 | ![](https://cloud.githubusercontent.com/assets/3949015/7514594/6a6dea84-f4f1-11e4-9530-1f89eed33c29.png) 20 | 21 | 22 | ## Clone 代码到本地 23 | 24 | ![](https://cloud.githubusercontent.com/assets/3949015/7514669/1bd3e22e-f4f2-11e4-9d4a-4668f59db31c.png) 25 | 26 | 27 | ## 编写代码 28 | 29 | ![](https://cloud.githubusercontent.com/assets/3949015/7514699/60066232-f4f2-11e4-9e98-9cedaa67ae46.png) 30 | 31 | 在你所挑战的组件目录下的 `code` 文件夹创建你的 GitHub 用户名文件夹和对应挑战的阶段。如： 32 | 33 | ``` 34 | └── package/ 35 | └── tab 36 | └── code 37 | └── 2319103827 // 你的 GitHub 用户名 38 | └── 1 // 第一阶段代码 39 | └── index.html 40 | ``` 41 | 42 | ## 提交代码 43 | 44 | 在 GitHub 中双击项目 45 | 46 | ![](https://cloud.githubusercontent.com/assets/3949015/7514735/b5105670-f4f2-11e4-9c6c-a8703830f675.png) 47 | 48 | 填写提交说明 49 | 50 | ![](https://cloud.githubusercontent.com/assets/3949015/7514821/c5d9812e-f4f3-11e4-962f-f91d150f77c2.png) 51 | 52 | 点击 COMMIT 按钮 53 | 54 | 同步代码 55 | 56 | ![](https://cloud.githubusercontent.com/assets/3949015/7514793/61c16378-f4f3-11e4-9c33-a51b20f97cd4.png) 57 | 58 | ## 请求合并代码至 [nimojs/learn-js](https://github.com/nimojs/learn-js/pulls) 59 | 60 | 打开 `https://github.com/你的用户名/learn-js/` 61 | 62 | 点击 Pull Requset 63 | 64 | ![image](https://cloud.githubusercontent.com/assets/3949015/7514891/73cd9f2c-f4f4-11e4-871c-7213b761ad4f.png) 65 | 66 | 点击 Create pull request 67 | 68 | ![image](https://cloud.githubusercontent.com/assets/3949015/7514934/ed1ae20e-f4f4-11e4-9d9b-3da335b2588e.png) 69 | 70 | nimojs/learn-js 维护者收到 PR 后会合并你的请求。 71 | 72 | 最终你的代码会显示在 [https://github.com/nimojs/learn-js/blob/gh-pages/package/tab/code/2319103827/1/index.html](https://github.com/nimojs/learn-js/blob/gh-pages/package/tab/code/2319103827/1/index.html) -------------------------------------------------------------------------------- /package/dialog/README.md: -------------------------------------------------------------------------------- 1 | # Dialog 弹出层 2 | 3 | 4 | 5 | ## 阶段 1 6 | 7 | 实现上图 JS 效果，CSS样式随意。弹出层要水平垂直居中在屏幕中 8 | 9 | ## 阶段 2 10 | 11 | 封装成一个 `dialog` 函数，提供如下 api ： 12 | 13 | **trigger** 14 | 15 | 对话框触发元素，可传递选择器。 16 | 17 | **content** 18 | 19 | 容器的内容，可以是纯字符串、dom对象、jQuery对象、html标签字符串。 20 | 21 | 22 | ```js 23 | dialog({ 24 | trigger: '#btn', 25 | content: '哈哈' 26 | }) 27 | ``` 28 | 29 | ```html 30 | 31 | ``` 32 | 33 | 点击 Click me 弹出 **哈哈** 34 | 35 | 可通过参数指定父级DOM、触发DOM、内容DOM。 36 | 37 | ## 阶段3 38 | 可控制显示和关闭的动画效果 39 | 40 | ```js 41 | dialog({ 42 | trigger: '#btn', 43 | content: '哈哈', 44 | effectShow: function ($element) { 45 | // 淡入显示 46 | $element.fadeIn(500) 47 | }, 48 | effectHide: function ($element) { 49 | // 淡出显示 50 | $element.fadeOut(500) 51 | } 52 | }) 53 | ``` 54 | 55 | ## 阶段 4 56 | 添加点击关闭时触发的函数，并支持使用键盘 ESC 键关闭弹出层 57 | 58 | ```js 59 | dialog({ 60 | trigger: '#btn', 61 | content: '哈哈', 62 | onClose: function (element) { 63 | /* 64 | element 弹出层 DOM 元素 65 | */ 66 | } 67 | }) 68 | ``` 69 | ## 完成挑战 70 | 71 | 添加关闭事件 72 | 73 | 还有更多 API 可以实现，但以上四个阶段已经足够提高你 Dialog 类型组件开发的经验。 74 | 75 | 如果你将以上所有阶段都完成了， Dialog 的挑战就结束了。但我们希望你继续完善这个组件增加更多的 API。 76 | -------------------------------------------------------------------------------- /package/dialog/code/52cik/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog 阶段一 6 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
我是标题
27 |
我是内容 我是内容
28 | × 29 |
30 |
31 | 32 | 33 | 46 | 47 | -------------------------------------------------------------------------------- /package/dialog/code/52cik/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog 阶段二 6 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 | × 29 |
30 |
31 | 32 | 33 | 62 | 63 | -------------------------------------------------------------------------------- /package/dialog/code/52cik/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog 阶段三 6 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
我是标题
28 |
我是内容 我是内容
29 | × 30 |
31 |
32 | 33 | 34 | 84 | 85 | -------------------------------------------------------------------------------- /package/dialog/code/ColdXu/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog弹出窗第一阶段 6 | 7 | 38 | 39 | 40 |
41 |
42 |
dialog标题
43 |
X
44 |
45 |
反倒是阿凡达是爱疯多少
46 |
47 | 48 | 70 | 71 | -------------------------------------------------------------------------------- /package/dialog/code/ColdXu/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog弹出窗第二阶段 6 | 7 | 38 | 39 | 40 |
41 |
42 |
dialog标题
43 |
X
44 |
45 |
反倒是阿凡达是爱疯多少
46 |
47 | 48 | 94 | 95 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-1/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 55 | 56 | 57 | 58 |
59 |
60 |
61 | 我真是标题啊 62 | 63 |
64 |
我真是内容啊
65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-1/dialog.js: -------------------------------------------------------------------------------- 1 | 2 | ;(function(){ 3 | function $(element){ 4 | if(element){ 5 | return document.querySelectorAll(element)[0]; 6 | } 7 | } 8 | $('#toggle-dialog').addEventListener('click', function () { 9 | $('.dialog-wrapper').style.display='block'; 10 | $('.dialog-mask').style.display='block'; 11 | }) 12 | $('.dialog-close').addEventListener('click', function () { 13 | $('.dialog-wrapper').style.display='none'; 14 | $('.dialog-mask').style.display='none'; 15 | }) 16 | 17 | })() 18 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-2/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 56 | 57 | 58 | 59 |
60 | 61 | 62 | 69 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-2/dialog.js: -------------------------------------------------------------------------------- 1 | ;(function(global){ 2 | function $(element){ 3 | if(element){ 4 | return document.querySelectorAll(element)[0]; 5 | } 6 | } 7 | function Dialog(option){ 8 | this._init(option); 9 | } 10 | Dialog.prototype={ 11 | _init: function (option) { 12 | this._eventHandler(option); 13 | }, 14 | _render: function (option) { 15 | var _html= '
' + 16 | '
' + 17 | '
' 18 | +option.title 19 | +'' + 20 | '
' + 21 | '
' 22 | +option.content 23 | +'
' + 24 | '
'; 25 | var render=document.querySelector('#container'); 26 | render.innerHTML=_html; 27 | $('.dialog-close').addEventListener('click', function () { 28 | $('.dialog-wrapper').style.display='none'; 29 | $('.dialog-mask').style.display='none'; 30 | }) 31 | //$('.dialog-wrapper').style.display='none'; 32 | }, 33 | _eventHandler: function (option) { 34 | 35 | var that=this; 36 | $(option.trigger).addEventListener('click', function () { 37 | that._render(option); 38 | $('.dialog-wrapper').style.display='block'; 39 | $('.dialog-mask').style.display='block'; 40 | }); 41 | //$('.dialog-close').addEventListener('click', function () { 42 | // $('.dialog-wrapper').style.display='none'; 43 | // $('.dialog-mask').style.display='none'; 44 | //}) 45 | } 46 | } 47 | global.Dialog=Dialog; 48 | })(window) 49 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-3/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 56 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 78 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-3/dialog.js: -------------------------------------------------------------------------------- 1 | ;(function ($,global) { 2 | function Dialog(option){ 3 | this._init(option); 4 | } 5 | Dialog.prototype={ 6 | _init: function (option) { 7 | this._evenHandler(option); 8 | }, 9 | _render: function (option) { 10 | var _html= '
' + 11 | '
' + 12 | '
' 13 | +option.title 14 | +'' + 15 | '
' + 16 | '
' 17 | +option.content 18 | +'
' + 19 | '
'; 20 | var render=document.querySelector('#container'); 21 | render.innerHTML=_html; 22 | $('.dialog-close')[0].addEventListener('click', function () { 23 | if(option||option.effectHide){ 24 | option.effectHide($('.dialog-mask,.dialog-wrapper')); 25 | }else{ 26 | $('.dialog-wrapper').style.display='none'; 27 | $('.dialog-mask').style.display='none'; 28 | } 29 | }) 30 | }, 31 | _evenHandler: function (option) { 32 | var that=this; 33 | $(option.trigger)[0].addEventListener('click', function () { 34 | that._render(option); 35 | if(option||option.effectShow){ 36 | option.effectShow($('.dialog-mask,.dialog-wrapper')); 37 | }else{ 38 | $('.dialog-wrapper').style.display='block'; 39 | $('.dialog-mask').style.display='block'; 40 | } 41 | 42 | }); 43 | } 44 | } 45 | global.Dialog=Dialog; 46 | })(jQuery,window) 47 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-4/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 56 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 81 | -------------------------------------------------------------------------------- /package/dialog/code/LastGun/dialog-stage-4/dialog.js: -------------------------------------------------------------------------------- 1 | ;(function ($,global) { 2 | function Dialog(option){ 3 | this._init(option); 4 | } 5 | Dialog.prototype={ 6 | _init: function (option) { 7 | this._evenHandler(option); 8 | }, 9 | _render: function (option) { 10 | var _html= '
' 11 | + '
' 12 | + '
' 13 | +option.title 14 | +'' 15 | + '
' 16 | + '
' 17 | +option.content 18 | +'
' 19 | + '
'; 20 | var render=document.querySelector('#container'); 21 | render.innerHTML=_html; 22 | $('.dialog-close')[0].addEventListener('click', function () { 23 | if(option.onClose){ 24 | option.onClose(); 25 | } 26 | if(option&&option.effectHide){ 27 | option.effectHide($('.dialog-mask,.dialog-wrapper')); 28 | }else{ 29 | $('.dialog-mask,.dialog-wrapper').css('display','none'); 30 | } 31 | }); 32 | 33 | }, 34 | _evenHandler: function (option) { 35 | var that=this; 36 | $(option.trigger)[0].addEventListener('click', function () { 37 | that._render(option); 38 | if(option&&option.effectShow){ 39 | option.effectShow($('.dialog-mask,.dialog-wrapper')); 40 | }else{ 41 | $('.dialog-wrapper').style.display='block'; 42 | $('.dialog-mask').style.display='block'; 43 | } 44 | }); 45 | document.addEventListener('keydown', function (event) { 46 | if(event.keyCode === 27&& $('.dialog-wrapper').css('display')==='block'){ 47 | $('.dialog-close').trigger('click'); 48 | } 49 | }) 50 | } 51 | } 52 | global.Dialog=Dialog; 53 | })(jQuery,window) 54 | 55 | -------------------------------------------------------------------------------- /package/dialog/code/coolzjy/dialog.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .zv-dialog { 4 | position: fixed; 5 | display: none; 6 | top: 50%; 7 | left: 50%; 8 | width: 500px; 9 | height: 200px; 10 | background: #FFF; 11 | border: 5px solid #AAA; 12 | margin-top: -105px; 13 | margin-left: -255px 14 | } 15 | 16 | .zv-dialog-title { 17 | border-bottom: 1px solid #EEE; 18 | background: #CCC; 19 | overflow: hidden; 20 | } 21 | 22 | .zv-dialog-title h2 { 23 | display: inline-block; 24 | margin: 5px; 25 | } 26 | 27 | .zv-dialog-close { 28 | float: right; 29 | width: 20px; 30 | height: 20px; 31 | background-color: #AAA; 32 | margin: 10px; 33 | text-align: center; 34 | line-height: 20px; 35 | cursor: pointer; 36 | } 37 | 38 | .zv-dialog-content { 39 | padding: 5px; 40 | } -------------------------------------------------------------------------------- /package/dialog/code/coolzjy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 代码： 15 |
16 | 
17 | var dialog1 = dialog({trigger:"#btn", zIndex:10, title:"D1",
18 | 		content:"这是第一个对话框。这个对话框会覆盖第二个对话框，因为这个对话框设置了 zIndex 属性",
19 | 		effectShow:function(e){$(e).show("fast")},
20 | 		effectHide:function(e){$(e).hide("fast")},
21 | 		onClose:function(e){console.log(e.innerText)}});
22 | var dialog2 = dialog({trigger:"#btn2", title:"D2", content:"这是第二个对话框，这个对话框没有弹出关闭效果！这个对话框会被第一个对话框覆盖。",
23 | 		onClose:function(e){console.log("dialog 2 is closed")}});
24 |
25 |
26 |
27 | 28 | 37 | -------------------------------------------------------------------------------- /package/dialog/code/fanplus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dialog 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package/dialog/code/fanplus/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | font-family: "'Microsoft YaHei','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif" 7 | } 8 | .btn{ 9 | display: block; 10 | margin: 0 auto; 11 | width: 100px; 12 | height: 100px; 13 | border: 1px solid rgba(12,12,12,.3); 14 | border-radius: 3%; 15 | background: rgba(12,12,123,.3); 16 | color: white; 17 | font-size: 18px; 18 | cursor: pointer; 19 | } 20 | .m-dialog{ 21 | position: absolute; 22 | top: 50%; 23 | left: 50%; 24 | transform: translate(-50%,-50%); 25 | width: 500px; 26 | height: 200px; 27 | border: 2px solid rgba(12,12,12,.9); 28 | box-sizing: border-box; 29 | box-shadow: 2px 3px 5px rgba(12,12,12,.5); 30 | } 31 | .m-dialog-hd{ 32 | width: 100%; 33 | height: 50px; 34 | font-size: 20px; 35 | line-height: 50px; 36 | text-align: left; 37 | text-indent: 20px; 38 | background-color: rgba(12,12,12,.3); 39 | } 40 | .m-dialog-close{ 41 | float: right; 42 | margin-right: 20px; 43 | cursor: pointer; 44 | } 45 | .m-dialog-bd{ 46 | height: 150px; 47 | padding: 20px; 48 | box-sizing: border-box; 49 | } 50 | .m-dialog-ft { 51 | float: right; 52 | margin-top: -50px; 53 | margin-right: 10px; 54 | } 55 | .m-dialog-ft span{ 56 | display: inline-block; 57 | padding: 10px; 58 | border: 1px solid #666; 59 | cursor: pointer; 60 | } 61 | html .m-dialog--hide{ 62 | display: none; 63 | } 64 | -------------------------------------------------------------------------------- /package/dialog/code/fromiris/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/dialog/code/fromiris/close.png -------------------------------------------------------------------------------- /package/dialog/code/fromiris/css/dialog.css: -------------------------------------------------------------------------------- 1 | .dialog-container { 2 | display: none; 3 | width: 400px; 4 | height: 200px; 5 | position: absolute; 6 | left: 50%; 7 | margin-left: -205px; 8 | top: 50%; 9 | margin-top: -105px; 10 | border: 5px solid #656565; 11 | } 12 | .dialog-container .dialog-header { 13 | height: 50px; 14 | border-bottom: 1px solid #dcdcdc; 15 | background-color: #fafafa; 16 | position: relative; 17 | } 18 | .dialog-container .dialog-header .header-title { 19 | height: 50px; 20 | padding: 0 15px; 21 | line-height: 50px; 22 | font-size: 18px; 23 | font-weight: bold; 24 | } 25 | .dialog-container .dialog-header .header-close { 26 | cursor: pointer; 27 | position: absolute; 28 | right: 15px; 29 | top: 50%; 30 | margin-top: -12px; 31 | width: 24px; 32 | height: 24px; 33 | background: url(../close.png) no-repeat center; 34 | } 35 | .dialog-container .dialog-content { 36 | padding: 10px 15px; 37 | } 38 | .dialog-btn { 39 | -webkit-transition: all 1500ms ease-out 0s; 40 | transition: all 1500ms ease-out 0s; 41 | width: 200px; 42 | height: 100px; 43 | position: absolute; 44 | bottom: 0; 45 | right: 0; 46 | background-color: red; 47 | } 48 | -------------------------------------------------------------------------------- /package/dialog/code/fromiris/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog 6 | 7 | 8 | 9 | 10 | 11 |
出现
12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /package/dialog/code/fromiris/dialog.js: -------------------------------------------------------------------------------- 1 | (function ($, window) { 2 | 3 | var _option = { 4 | parentElem: 'body', 5 | trigger: '.dialog-btn', 6 | title: '我真的是标题', 7 | content: '我来自默认的dialog组件', 8 | // effectShow: function () {} 9 | // effectHide: function () {} 10 | onclose: function () {} 11 | }; 12 | var o = null; 13 | 14 | var createMask = (function () { 15 | var mask; 16 | return function () { 17 | return mask || (mask = $(o.parentElem).append('
')) 18 | } 19 | })(); 20 | var update = function () { 21 | $('.header-title').html(o.title); 22 | $('.dialog-content').html(o.content); 23 | } 24 | 25 | 26 | var initEvent = function () { 27 | $(o.trigger).on('click', function (ev) { 28 | createMask(); 29 | update(); 30 | if (o.effectShow) { 31 | o.effectShow($('.dialog-container')); 32 | return; 33 | } 34 | $('.dialog-container').show(); 35 | 36 | }) 37 | $(o.parentElem).on('click', 'div', function (ev) { 38 | if ($(this).hasClass('header-close')) { 39 | o.onclose($('.dialog-container')); 40 | if (o.effectHide) { 41 | o.effectHide($('.dialog-container')); 42 | return; 43 | } 44 | $('.dialog-container').hide(); 45 | } 46 | }) 47 | } 48 | 49 | var dialog = function (option) { 50 | o = $.extend(true, {}, _option, option); 51 | initEvent(); 52 | 53 | } 54 | 55 | 56 | 57 | window.dialog = dialog; 58 | })(jQuery, window); -------------------------------------------------------------------------------- /package/dialog/code/fromiris/dialog.less: -------------------------------------------------------------------------------- 1 | 2 | .dialog-container { 3 | display: none; 4 | width: 400px; 5 | height: 200px; 6 | position: absolute; 7 | left: 50%; 8 | margin-left: -205px; 9 | top: 50%; 10 | margin-top: -105px; 11 | border: 5px solid rgb(101,101,101); 12 | .dialog-header { 13 | height: 50px; 14 | border-bottom: 1px solid rgb(220,220,220); 15 | background-color: rgb(250, 250, 250); 16 | position: relative; 17 | .header-title { 18 | height: 50px; 19 | padding: 0 15px; 20 | line-height: 50px; 21 | font-size: 18px; 22 | font-weight: bold; 23 | } 24 | .header-close { 25 | cursor: pointer; 26 | position: absolute; 27 | right: 15px; 28 | top: 50%; 29 | margin-top: -12px; 30 | width: 24px; 31 | height: 24px; 32 | background: url(../close.png) no-repeat center; 33 | } 34 | } 35 | .dialog-content { 36 | padding: 10px 15px; 37 | } 38 | } 39 | 40 | .dialog-btn { 41 | -webkit-transition: all 1500ms ease-out 0s; 42 | transition: all 1500ms ease-out 0s; 43 | width: 200px; 44 | height: 100px; 45 | position: absolute; 46 | bottom: 0; 47 | right: 0; 48 | background-color: red; 49 | } -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/dialog/code/lijinyao/close.png -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage1/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Lijin on 2015/8/2. 3 | */ 4 | $(document).ready(function () { 5 | $('.open-dialog').click(function () { 6 | var dialogHtml = "
\ 7 |
\ 8 |

I am title

\ 9 |
\ 10 |
\ 11 |
\ 12 |

I am content

\ 13 |
\ 14 |
"; 15 | var dialog = $(dialogHtml); 16 | $('body').append(dialog); 17 | //show dialog 18 | dialog.css({display: 'block'}); 19 | $('.dialog-close').click(function () { 20 | dialog.remove(); 21 | }); 22 | }); 23 | }); -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage2/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Lijinyao on 2015/8/2. 3 | */ 4 | $(document).ready(function () { 5 | dialog({ 6 | trigger: '.open-dialog', 7 | content: "哈哈哈" 8 | }); 9 | }); 10 | 11 | var dialog = function (options) { 12 | var trigger = $(options.trigger); 13 | var content = options.content || ''; 14 | var addDialog = function () { 15 | //init dialog body 16 | var dialogHtml = "
\ 17 |
\ 18 |

I am title

\ 19 |
\ 20 |
\ 21 |
\ 22 |
\ 23 |
"; 24 | //转为jquery对象 25 | var dialog = $(dialogHtml); 26 | //insert dialog 27 | $('body').append(dialog); 28 | //insert content 29 | dialog.children('.dialog-body').append(content); 30 | //show dialog 31 | dialog.css({display: 'block'}); 32 | //add close event 33 | $('.dialog-close').click(function () { 34 | dialog.remove(); 35 | }); 36 | }; 37 | trigger.click(addDialog); 38 | 39 | }; -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage3/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Lijinyao on 2015/8/2. 3 | */ 4 | $(document).ready(function () { 5 | dialog({ 6 | trigger: '.open-dialog', 7 | content: "I am content", 8 | effectShow: function (element) { 9 | element.fadeIn(); 10 | }, 11 | effectHide: function (element) { 12 | element.fadeOut(); 13 | } 14 | }); 15 | }); 16 | 17 | var dialog = function (options) { 18 | var trigger = $(options.trigger); 19 | var content = options.content || ''; 20 | var effectShow = options.effectShow || function (element) {element.show()}; 21 | var effectHide = options.effectHide || function (element) {element.hide()}; 22 | var addDialog = function () { 23 | //init dialog body 24 | var dialogHtml = "
\ 25 |
\ 26 |

I am title

\ 27 |
\ 28 |
\ 29 |
\ 30 |
\ 31 |
"; 32 | //转为jquery对象 33 | var dialog = $(dialogHtml); 34 | //insert dialog 35 | $('body').append(dialog); 36 | //insert content 37 | dialog.children('.dialog-body').append(content); 38 | //effectShow 39 | effectShow(dialog); 40 | //add close event 41 | $('.dialog-close').click(function () { 42 | effectHide(dialog); 43 | }); 44 | }; 45 | trigger.click(addDialog); 46 | 47 | }; -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/dialog-stage4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package/dialog/code/lijinyao/style.css: -------------------------------------------------------------------------------- 1 | .dialog-container{ 2 | display: none; 3 | position: fixed; 4 | margin: auto; 5 | left:0; 6 | right:0; 7 | top:0; 8 | bottom:0; 9 | width: 500px; 10 | height: 200px; 11 | -webkit-box-shadow: 0 1px 5px gray; 12 | -moz-box-shadow: 0 1px 5px gray; 13 | box-shadow: 0 1px 5px gray; 14 | } 15 | .dialog-header{ 16 | padding-left: 20px; 17 | margin: 0; 18 | height: 40px; 19 | border-bottom: 2px solid #d9d9d9; 20 | } 21 | .dialog-close{ 22 | position: absolute; 23 | top: 0; 24 | right: 0; 25 | margin-top: 20px; 26 | margin-right: 20px; 27 | width: 20px; 28 | height: 20px; 29 | cursor: pointer; 30 | background-image: url("close.png"); 31 | } 32 | .dialog-close:hover{ 33 | background-position: -20px 0; 34 | } 35 | .dialog-body{ 36 | padding-left: 20px; 37 | } 38 | -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段一/css/main.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding:0px; 4 | } 5 | 6 | input,p{ 7 | display: table; 8 | margin: 20px auto; 9 | font-size: 16px; 10 | padding: 4px; 11 | } 12 | 13 | #mask{ 14 | position: absolute; 15 | top:0px; 16 | width:100%; 17 | height:100%; 18 | background-color: #000; 19 | opacity: 0.2; 20 | display: none; 21 | } 22 | 23 | .dialog{ 24 | width:460px; 25 | height:230px; 26 | border: 10px solid #555; 27 | position: absolute; 28 | left:50%; 29 | top:50%; 30 | transform: translate(-50%,-50%); 31 | z-index: 10; 32 | display: none; 33 | background-color: #fff; 34 | } 35 | 36 | .dialog .title{ 37 | height:40px; 38 | padding-top: 10px; 39 | padding-left: 10px; 40 | font-size: 24px; 41 | border-bottom: 1px solid #444; 42 | background-color: #eee; 43 | } 44 | .dialog .title .close{ 45 | font-weight: bold; 46 | float: right; 47 | padding-right: 10px; 48 | cursor: pointer; 49 | } 50 | .content{ 51 | font-size: 20px; 52 | padding:20px; 53 | 54 | } -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段一/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 弹出层 阶段一 6 | 7 | 8 | 9 | 10 |

By:limingyang2012

11 |
12 |
13 |
14 | 我真的是标题啊 15 | × 16 |
17 |
18 | 我是内容 我是内容 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段一/js/main.js: -------------------------------------------------------------------------------- 1 | var mask = document.getElementById("mask"); 2 | var dialog = document.querySelectorAll(".dialog")[0]; 3 | var btn = document.querySelectorAll("input")[0]; 4 | var close = document.querySelectorAll(".close")[0]; 5 | 6 | btn.onclick = function(){ 7 | mask.style.display = "block"; 8 | dialog.style.display = "block"; 9 | } 10 | 11 | close.onclick = function(){ 12 | mask.style.display = "none"; 13 | dialog.style.display = "none"; 14 | } -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段三/css/main.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding:0px; 4 | } 5 | 6 | button,p{ 7 | display: table; 8 | margin: 20px auto; 9 | font-size: 16px; 10 | padding: 4px; 11 | } 12 | 13 | .mask{ 14 | position: absolute; 15 | top:0px; 16 | width:100%; 17 | height:100%; 18 | background-color: #000; 19 | opacity: 0.2; 20 | display: none; 21 | } 22 | 23 | .dialog{ 24 | width:460px; 25 | height:230px; 26 | border: 10px solid #555; 27 | position: absolute; 28 | left:50%; 29 | top:50%; 30 | transform: translate(-50%,-50%); 31 | z-index: 10; 32 | background-color: #fff; 33 | display: none; 34 | } 35 | 36 | .dialog .title{ 37 | height:40px; 38 | padding-top: 10px; 39 | padding-left: 10px; 40 | font-size: 24px; 41 | border-bottom: 1px solid #444; 42 | background-color: #eee; 43 | } 44 | .dialog .title .close{ 45 | font-weight: bold; 46 | float: right; 47 | padding-right: 10px; 48 | cursor: pointer; 49 | } 50 | .content{ 51 | font-size: 20px; 52 | padding:20px; 53 | 54 | } -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段三/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 弹出层 阶段三 6 | 7 | 8 | 9 | 10 |

By:limingyang2012

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段三/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | var dialog = function(json){ 3 | //添加遮蔽罩 4 | var maskDiv = $("
"); 5 | maskDiv.addClass('mask'); 6 | $("p").after(maskDiv); 7 | 8 | //添加对话框 9 | var dialogDiv = $("
"); 10 | dialogDiv.addClass("dialog"); 11 | dialogDiv.html('
我真的是标题啊×
'+json.content+'
'); 12 | maskDiv.after(dialogDiv); 13 | 14 | $(json.trigger).click(function(){ 15 | json.effectShow ? json.effectShow(maskDiv) : maskDiv.css("display","block"); 16 | json.effectShow ? json.effectShow(dialogDiv) : dialogDiv.css("display","block"); 17 | }); 18 | 19 | $(".close").click(function(){ 20 | json.effectHide ? json.effectHide(maskDiv) : maskDiv.css("display","none"); 21 | json.effectHide ? json.effectHide(dialogDiv) : dialogDiv.css("display","none"); 22 | }) 23 | 24 | } 25 | 26 | dialog({ 27 | trigger: '#btn', 28 | content: '哈哈', 29 | effectShow: function ($element) { 30 | // 淡入显示 31 | $element.fadeIn(500) 32 | }, 33 | effectHide: function ($element) { 34 | // 淡出显示 35 | $element.fadeOut(500) 36 | } 37 | }) -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段二/css/main.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding:0px; 4 | } 5 | 6 | button,p{ 7 | display: table; 8 | margin: 20px auto; 9 | font-size: 16px; 10 | padding: 4px; 11 | } 12 | 13 | .mask{ 14 | position: absolute; 15 | top:0px; 16 | width:100%; 17 | height:100%; 18 | background-color: #000; 19 | opacity: 0.2; 20 | display: none; 21 | } 22 | 23 | .dialog{ 24 | width:460px; 25 | height:230px; 26 | border: 10px solid #555; 27 | position: absolute; 28 | left:50%; 29 | top:50%; 30 | transform: translate(-50%,-50%); 31 | z-index: 10; 32 | background-color: #fff; 33 | display: none; 34 | } 35 | 36 | .dialog .title{ 37 | height:40px; 38 | padding-top: 10px; 39 | padding-left: 10px; 40 | font-size: 24px; 41 | border-bottom: 1px solid #444; 42 | background-color: #eee; 43 | } 44 | .dialog .title .close{ 45 | font-weight: bold; 46 | float: right; 47 | padding-right: 10px; 48 | cursor: pointer; 49 | } 50 | .content{ 51 | font-size: 20px; 52 | padding:20px; 53 | 54 | } -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段二/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 弹出层 阶段二 6 | 7 | 8 | 9 | 10 |

By:limingyang2012

11 | 12 | 13 | -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段二/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | var dialog = function(json){ 3 | var btn = document.querySelectorAll(json.trigger)[0]; 4 | 5 | //添加遮蔽罩 6 | var maskDiv = document.createElement("div"); 7 | maskDiv.className = "mask"; 8 | document.body.appendChild(maskDiv); 9 | 10 | //添加对话框 11 | var dialogDiv = document.createElement("div"); 12 | dialogDiv.className = "dialog"; 13 | dialogDiv.innerHTML = '
我真的是标题啊×
'+json.content+'
' 14 | document.body.appendChild(dialogDiv); 15 | 16 | btn.onclick = function(){ 17 | maskDiv.style.display = "block"; 18 | dialogDiv.style.display = "block"; 19 | } 20 | 21 | var close = document.querySelectorAll(".close")[0]; 22 | close.onclick = function(){ 23 | maskDiv.style.display = "none"; 24 | dialogDiv.style.display = "none"; 25 | } 26 | 27 | } 28 | 29 | dialog({ 30 | trigger: '#btn', 31 | content: '哈哈' 32 | }) -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段四/css/main.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding:0px; 4 | } 5 | 6 | button,p{ 7 | display: table; 8 | margin: 20px auto; 9 | font-size: 16px; 10 | padding: 4px; 11 | } 12 | 13 | .mask{ 14 | position: absolute; 15 | top:0px; 16 | width:100%; 17 | height:100%; 18 | background-color: #000; 19 | opacity: 0.2; 20 | display: none; 21 | } 22 | 23 | .dialog{ 24 | width:460px; 25 | height:230px; 26 | border: 10px solid #555; 27 | position: absolute; 28 | left:50%; 29 | top:50%; 30 | transform: translate(-50%,-50%); 31 | z-index: 10; 32 | background-color: #fff; 33 | display: none; 34 | } 35 | 36 | .dialog .title{ 37 | height:40px; 38 | padding-top: 10px; 39 | padding-left: 10px; 40 | font-size: 24px; 41 | border-bottom: 1px solid #444; 42 | background-color: #eee; 43 | } 44 | .dialog .title .close{ 45 | font-weight: bold; 46 | float: right; 47 | padding-right: 10px; 48 | cursor: pointer; 49 | } 50 | .content{ 51 | font-size: 20px; 52 | padding:20px; 53 | 54 | } -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段四/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 弹出层 阶段四 6 | 7 | 8 | 9 | 10 |

By:limingyang2012

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package/dialog/code/limingyang2012/阶段四/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | var dialog = function(json){ 3 | //添加遮蔽罩 4 | var maskDiv = $("
"); 5 | maskDiv.addClass('mask'); 6 | $("p").after(maskDiv); 7 | //添加对话框 8 | var dialogDiv = $("
"); 9 | dialogDiv.addClass("dialog"); 10 | dialogDiv.html('
我真的是标题啊×
'+json.content+'
'); 11 | maskDiv.after(dialogDiv); 12 | 13 | $(json.trigger).click(function(){ 14 | json.effectShow ? json.effectShow(maskDiv) : maskDiv.css("display","block"); 15 | json.effectShow ? json.effectShow(dialogDiv) : dialogDiv.css("display","block"); 16 | }); 17 | 18 | $(".close").click(function(){ 19 | if(json.onClose && json.onClose()){ 20 | json.effectHide ? json.effectHide(maskDiv) : maskDiv.css("display","none"); 21 | json.effectHide ? json.effectHide(dialogDiv) : dialogDiv.css("display","none"); 22 | } 23 | }) 24 | 25 | //监听esc 26 | $(document).keydown(function (event) { 27 | if(event.keyCode === 27){ 28 | json.effectHide ? json.effectHide(maskDiv) : maskDiv.css("display","none"); 29 | json.effectHide ? json.effectHide(dialogDiv) : dialogDiv.css("display","none"); 30 | } 31 | }); 32 | } 33 | 34 | dialog({ 35 | trigger: '#btn', 36 | content: '哈哈', 37 | effectShow: function ($element) { 38 | // 淡入显示 39 | $element.fadeIn(500) 40 | }, 41 | effectHide: function ($element) { 42 | // 淡出显示 43 | $element.fadeOut(500) 44 | }, 45 | onClose: function () { 46 | /* 47 | element 弹出层 DOM 元素 48 | */ 49 | var b = confirm("你确定关闭对话框？") 50 | return b; 51 | } 52 | }) -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 34 | 35 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/1/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file dialog-1 js file 3 | * @author murphywuwu 4 | */ 5 | !(function (global) { 6 | /** 7 | * title : string 8 | * content: string 9 | */ 10 | 11 | function Dialog (opts) { 12 | this.init(opts); 13 | } 14 | 15 | Dialog.prototype = { 16 | init: function (opts) { 17 | this.opts = opts; 18 | this._buildHtml(opts); 19 | this.bindEvent(); 20 | }, 21 | _buildHtml: function (opts) { 22 | 23 | // 构造HTML结构 24 | var html = '
' 25 | + '
' 26 | + '
' 27 | + opts.title 28 | + '
' 29 | + '
' 30 | + opts.content 31 | + '
' 32 | + '
' 33 | + 'X' 34 | + '
' 35 | + '
'; 36 | 37 | // 将Dialog插入DOM中 38 | $('body').append(html); 39 | 40 | this.dialog_container = $('.dialog-container') 41 | }, 42 | bindEvent: function () { 43 | this.dialog_container = $('.dialog-container'); 44 | var that = this; 45 | var close = $('.close'); 46 | close.click(function () { 47 | that.dialog_container.hide(); 48 | }) 49 | } 50 | 51 | } 52 | 53 | global.Dialog = Dialog; 54 | 55 | })(window); 56 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*****dialog style*****/ 15 | .dialog-container { 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%,-50%); 20 | width: 600px; 21 | padding: 20px; 22 | background: #ffe2e2; 23 | } 24 | .dialog { 25 | position: relative; 26 | border: 10px solid #ff8989; 27 | font-size: 20px; 28 | } 29 | .title { 30 | padding: 10px; 31 | height: 50px; 32 | background: #fcf2f3; 33 | } 34 | .content { 35 | padding: 10px; 36 | height: 250px; 37 | background: #fff; 38 | font-size: 15px; 39 | } 40 | .close { 41 | position: absolute; 42 | top: 5px; 43 | right: 10px; 44 | color: #ccc; 45 | } 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/2/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file dialog-2 js file 3 | * @author murphywuwu 4 | */ 5 | !(function (global) { 6 | /** 7 | * title : string 8 | * content: string 9 | * trigger: string 10 | */ 11 | 12 | function Dialog (opts) { 13 | this.init(opts); 14 | } 15 | 16 | Dialog.prototype = { 17 | init: function (opts) { 18 | this._buildHtml(opts); 19 | this.bindEvent(opts); 20 | }, 21 | _buildHtml: function (opts) { 22 | 23 | // 构造HTML结构 24 | var html = '
' 25 | + '
' 26 | + '
' 27 | + opts.title 28 | + '
' 29 | + '
' 30 | + opts.content 31 | + '
' 32 | + '
' 33 | + 'X' 34 | + '
' 35 | + '
'; 36 | 37 | // 将Dialog插入DOM中 38 | $('body').append(html); 39 | 40 | // 初始化Dialog 41 | this.dialog_container = $('.dialog-container'); 42 | this.dialog_container.hide(); 43 | }, 44 | bindEvent: function (opts) { 45 | var that = this; 46 | // 获取元素 47 | var btn = $(opts.trigger); 48 | var close = $('.close'); 49 | // 绑定点击事件 50 | btn.click(function () { 51 | that.dialog_container.show(); 52 | }) 53 | close.click(function () { 54 | that.dialog_container.hide(); 55 | }); 56 | } 57 | 58 | } 59 | 60 | global.Dialog = Dialog; 61 | 62 | })(window); 63 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*****dialog style*****/ 15 | .dialog-container { 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%,-50%); 20 | width: 600px; 21 | padding: 20px; 22 | background: #ffe2e2; 23 | } 24 | .dialog { 25 | position: relative; 26 | border: 10px solid #ff8989; 27 | font-size: 20px; 28 | } 29 | .title { 30 | padding: 10px; 31 | height: 50px; 32 | background: #fcf2f3; 33 | } 34 | .content { 35 | padding: 10px; 36 | height: 250px; 37 | background: #fff; 38 | font-size: 15px; 39 | } 40 | .close { 41 | position: absolute; 42 | top: 5px; 43 | right: 10px; 44 | color: #ccc; 45 | } 46 | 47 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/3/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file dialog-3 js file 3 | * @author murphywuwu 4 | */ 5 | 6 | !(function (global) { 7 | /** 8 | * title : string 9 | * content: string 10 | * trigger: string 11 | */ 12 | 13 | function Dialog (opts) { 14 | this.init(opts); 15 | } 16 | 17 | Dialog.prototype = { 18 | init: function (opts) { 19 | this._buildHtml(opts); 20 | this.bindEvent(opts); 21 | }, 22 | _buildHtml: function (opts) { 23 | 24 | // 构造HTML结构 25 | var html = '
' 26 | + '
' 27 | + '
' 28 | + opts.title 29 | + '
' 30 | + '
' 31 | + opts.content 32 | + '
' 33 | + '
' 34 | + 'X' 35 | + '
' 36 | + '
'; 37 | 38 | // 将Dialog插入DOM中 39 | $('body').append(html); 40 | 41 | // 初始化Dialog 42 | this.dialog_container = $('.dialog-container'); 43 | this.dialog_container.hide(); 44 | }, 45 | bindEvent: function (opts) { 46 | var that = this; 47 | var effectShow = opts.effectShow; 48 | var effectHide = opts.effectHide; 49 | // 获取元素 50 | var btn = $(opts.trigger); 51 | var close = $('.close'); 52 | // 绑定点击事件 53 | btn.click(effectShow,function () { 54 | effectShow(that.dialog_container); 55 | }) 56 | close.click(effectHide,function () { 57 | effectHide(that.dialog_container); 58 | }); 59 | } 60 | 61 | } 62 | 63 | global.Dialog = Dialog; 64 | 65 | })(window); 66 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*****dialog style*****/ 15 | .dialog-container { 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%,-50%); 20 | width: 600px; 21 | padding: 20px; 22 | background: #ffe2e2; 23 | } 24 | .dialog { 25 | position: relative; 26 | border: 10px solid #ff8989; 27 | font-size: 20px; 28 | } 29 | .title { 30 | padding: 10px; 31 | height: 50px; 32 | background: #fcf2f3; 33 | } 34 | .content { 35 | padding: 10px; 36 | height: 250px; 37 | background: #fff; 38 | font-size: 15px; 39 | } 40 | .close { 41 | position: absolute; 42 | top: 5px; 43 | right: 10px; 44 | color: #ccc; 45 | } 46 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/4/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file dialog-4 js file 3 | * @author murphywuwu 4 | */ 5 | 6 | !(function (global) { 7 | /** 8 | * title : string 9 | * content: string 10 | * trigger: string 11 | */ 12 | 13 | function Dialog (opts) { 14 | this.init(opts); 15 | } 16 | 17 | Dialog.prototype = { 18 | init: function (opts) { 19 | this._buildHtml(opts); 20 | this.bindEvent(opts); 21 | }, 22 | _buildHtml: function (opts) { 23 | 24 | // 构造HTML结构 25 | var html = '
' 26 | + '
' 27 | + '
' 28 | + opts.title 29 | + '
' 30 | + '
' 31 | + opts.content 32 | + '
' 33 | + '
' 34 | + 'X' 35 | + '
' 36 | + '
'; 37 | 38 | // 将Dialog插入DOM中 39 | $('body').append(html); 40 | 41 | // 初始化Dialog 42 | this.dialog_container = $('.dialog-container'); 43 | this.dialog_container.hide(); 44 | }, 45 | bindEvent: function (opts) { 46 | // 获取元素 47 | var btn = $(opts.trigger); 48 | var close = $('.close'); 49 | var dialog_container = this.dialog_container; 50 | // 绑定事件 51 | btn.click(function () { 52 | opts.effectShow(dialog_container); 53 | }) 54 | close.click(function () { 55 | opts.onClose(dialog_container); 56 | }); 57 | $(document).keydown(function(e){ 58 | if(e.keyCode === 27) { 59 | opts.onClose(dialog_container); 60 | } 61 | }) 62 | } 63 | 64 | } 65 | 66 | global.Dialog = Dialog; 67 | 68 | })(window); 69 | -------------------------------------------------------------------------------- /package/dialog/code/murphywuwu/4/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*****dialog style*****/ 15 | .dialog-container { 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%,-50%); 20 | width: 600px; 21 | padding: 20px; 22 | background: #ffe2e2; 23 | } 24 | .dialog { 25 | position: relative; 26 | border: 10px solid #ff8989; 27 | font-size: 20px; 28 | } 29 | .title { 30 | padding: 10px; 31 | height: 50px; 32 | background: #fcf2f3; 33 | } 34 | .content { 35 | padding: 10px; 36 | height: 250px; 37 | background: #fff; 38 | font-size: 15px; 39 | } 40 | .close { 41 | position: absolute; 42 | top: 5px; 43 | right: 10px; 44 | color: #ccc; 45 | } 46 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 弹出层 | 第二阶段 | newraina 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/2/main.js: -------------------------------------------------------------------------------- 1 | dialog({ 2 | trigger: 'button', 3 | title : '您的浏览器即将爆炸', 4 | content: '非常遗憾地通知您，因为某些不能明说的原因，我们即将引爆您的浏览器，5秒倒计时会在红圈开始后出现。' 5 | }); 6 | 7 | 8 | /** 9 | * 第二阶段 对话框函数 10 | * @param options Object 11 | * option.trigger 触发对话框的DOM元素或者元素的选择器，触发方式为click 12 | * options.title 对话框的标题 13 | * options.content 对话框的内容 14 | */ 15 | function dialog(options) { 16 | // 缓存参数 17 | var trigger = typeof options.trigger === 'string' ? document.querySelector(options.trigger) : options.trigger; 18 | var title = options.title; 19 | var content = options.content; 20 | 21 | var dialogContainer = document.createElement('section'); 22 | 23 | dialogContainer.className = 'dialog-container'; 24 | 25 | (function init() { 26 | 27 | dialogContainer.innerHTML = '
' + 28 | '
' + 29 | '
' + 30 | title + 31 | '' + 32 | '
' + 33 | '
' + 34 | content + 35 | '
' + 36 | '
' + 37 | '
'; 38 | 39 | document.body.appendChild(dialogContainer); 40 | 41 | // 绑定事件 42 | trigger.addEventListener('click', show); 43 | dialogContainer.querySelector('.close-icon').addEventListener('click', hide); 44 | 45 | hide(); 46 | })(); 47 | 48 | function show() { 49 | removeClass(dialogContainer, 'dialog-hide'); 50 | } 51 | 52 | function hide() { 53 | addClass(dialogContainer, 'dialog-hide'); 54 | } 55 | } 56 | 57 | // 辅助函数 58 | function addClass(element, value) { 59 | if (!element.className) { 60 | element.className = value; 61 | } else { 62 | var newClassName = element.className; 63 | newClassName += " "; 64 | newClassName += value; 65 | element.className = newClassName; 66 | } 67 | } 68 | 69 | function removeClass(element, className) { 70 | if (element.className && element.className.indexOf(className) >= 0) { 71 | var oldClass = ' ' + element.className + ' '; 72 | var newClass = oldClass.replace(' ' + className + ' ', ' '); 73 | newClass = newClass.replace(/(^\s+)|(\s+$)/g, ''); 74 | element.className = newClass; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', Heiti, '黑体', sans-serif; 12 | font-size: 12px; 13 | 14 | margin: 0; 15 | } 16 | 17 | .dialog-container { 18 | position: fixed; 19 | z-index: 9999; 20 | top: 0; 21 | left: 0; 22 | 23 | display: block; 24 | 25 | width: 100%; 26 | height: 100%; 27 | margin: 0; 28 | padding: 0; 29 | 30 | border: none; 31 | background: rgba(0, 0, 0, .1); 32 | } 33 | 34 | .dialog-background { 35 | position: relative; 36 | 37 | width: 100%; 38 | height: 100%; 39 | 40 | background: rgba(0, 0, 0, .1); 41 | } 42 | 43 | .dialog { 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | 48 | width: 500px; 49 | height: 100px; 50 | margin-top: -150px; 51 | margin-left: -250px; 52 | 53 | box-shadow: 0 0 80px rgba(0, 0, 0, .3); 54 | } 55 | 56 | .header { 57 | font-size: 1.5em; 58 | font-weight: bold; 59 | line-height: 50px; 60 | 61 | height: 50px; 62 | 63 | text-align: center; 64 | 65 | color: #34495e; 66 | border-radius: 6px 6px 0 0; 67 | background: #1abc9c; 68 | } 69 | 70 | .close-icon { 71 | position: relative; 72 | 73 | display: inline-block; 74 | float: right; 75 | overflow: hidden; 76 | 77 | width: 15px; 78 | height: 15px; 79 | margin-top: 7px; 80 | margin-right: 7px; 81 | 82 | cursor: pointer; 83 | } 84 | 85 | .close-icon::before, 86 | .close-icon::after { 87 | position: absolute; 88 | top: 50%; 89 | left: 0; 90 | 91 | width: 100%; 92 | height: 3px; 93 | 94 | content: ''; 95 | 96 | border-radius: 3px; 97 | background: rgba(255, 255, 255, .5); 98 | } 99 | 100 | .close-icon::before { 101 | -webkit-transform: rotate(45deg); 102 | transform: rotate(45deg); 103 | } 104 | 105 | .close-icon::after { 106 | -webkit-transform: rotate(-45deg); 107 | transform: rotate(-45deg); 108 | } 109 | 110 | .dialog-content { 111 | font-size: 1.22em; 112 | 113 | padding: 20px; 114 | 115 | text-align: justify; 116 | 117 | color: #fff; 118 | border-radius: 0 0 6px 6px; 119 | background: #34495e; 120 | } 121 | 122 | .dialog-hide { 123 | display: none; 124 | } 125 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 弹出层 | 第三阶段 | newraina 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/3/main.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | dialog({ 3 | trigger : 'button', 4 | title : '您的浏览器即将爆炸', 5 | content : '非常遗憾地通知您，因为某些不能明说的原因，我们即将引爆您的浏览器，5秒倒计时会在红圈开始后出现。', 6 | effectShow: function ($element) { 7 | $element.fadeIn(500) 8 | }, 9 | effectHide: function ($element) { 10 | $element.fadeOut(500) 11 | } 12 | }); 13 | }); 14 | 15 | 16 | /** 17 | * 第三阶段 对话框函数 18 | * @param options Object 19 | * option.trigger 触发对话框的DOM元素或者元素的选择器，触发方式为click 20 | * options.title 对话框的标题 21 | * options.content 对话框的内容 22 | * options.effectShow 对话框出现效果 23 | * options.effectHide 对话框消失效果 24 | */ 25 | function dialog(options) { 26 | // 缓存参数 27 | var $trigger = $(options.trigger); 28 | var title = options.title; 29 | var content = options.content; 30 | var $effectShow = options.effectShow; 31 | var $effectHide = options.effectHide; 32 | 33 | var $dialogContainer = $('
').addClass('dialog-container'); 34 | 35 | (function init() { 36 | 37 | $dialogContainer.html( 38 | '
' + 39 | '
' + 40 | '
' + 41 | title + 42 | '' + 43 | '
' + 44 | '
' + 45 | content + 46 | '
' + 47 | '
' + 48 | '
' 49 | ); 50 | 51 | $('body').append($dialogContainer); 52 | 53 | // 绑定事件 54 | $trigger.on('click', function () { 55 | if ($effectShow) { 56 | $effectShow($dialogContainer); 57 | } 58 | else { 59 | $dialogContainer.show(); 60 | } 61 | }); 62 | 63 | $dialogContainer.find('.close-icon').on('click', function () { 64 | if ($effectHide) { 65 | $effectHide($dialogContainer); 66 | } 67 | else { 68 | $dialogContainer.hide(); 69 | } 70 | }); 71 | 72 | $dialogContainer.hide(); 73 | })(); 74 | } 75 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', Heiti, '黑体', sans-serif; 12 | font-size: 12px; 13 | 14 | margin: 0; 15 | } 16 | 17 | .dialog-container { 18 | position: fixed; 19 | z-index: 9999; 20 | top: 0; 21 | left: 0; 22 | 23 | display: block; 24 | 25 | width: 100%; 26 | height: 100%; 27 | margin: 0; 28 | padding: 0; 29 | 30 | border: none; 31 | background: rgba(0, 0, 0, .1); 32 | } 33 | 34 | .dialog-background { 35 | position: relative; 36 | 37 | width: 100%; 38 | height: 100%; 39 | 40 | background: rgba(0, 0, 0, .1); 41 | } 42 | 43 | .dialog { 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | 48 | width: 500px; 49 | height: 100px; 50 | margin-top: -150px; 51 | margin-left: -250px; 52 | 53 | box-shadow: 0 0 80px rgba(0, 0, 0, .3); 54 | } 55 | 56 | .header { 57 | font-size: 1.5em; 58 | font-weight: bold; 59 | line-height: 50px; 60 | 61 | height: 50px; 62 | 63 | text-align: center; 64 | 65 | color: #34495e; 66 | border-radius: 6px 6px 0 0; 67 | background: #1abc9c; 68 | } 69 | 70 | .close-icon { 71 | position: relative; 72 | 73 | display: inline-block; 74 | float: right; 75 | overflow: hidden; 76 | 77 | width: 15px; 78 | height: 15px; 79 | margin-top: 7px; 80 | margin-right: 7px; 81 | 82 | cursor: pointer; 83 | } 84 | 85 | .close-icon::before, 86 | .close-icon::after { 87 | position: absolute; 88 | top: 50%; 89 | left: 0; 90 | 91 | width: 100%; 92 | height: 3px; 93 | 94 | content: ''; 95 | 96 | border-radius: 3px; 97 | background: rgba(255, 255, 255, .5); 98 | } 99 | 100 | .close-icon::before { 101 | -webkit-transform: rotate(45deg); 102 | transform: rotate(45deg); 103 | } 104 | 105 | .close-icon::after { 106 | -webkit-transform: rotate(-45deg); 107 | transform: rotate(-45deg); 108 | } 109 | 110 | .dialog-content { 111 | font-size: 1.22em; 112 | 113 | padding: 20px; 114 | 115 | text-align: justify; 116 | 117 | color: #fff; 118 | border-radius: 0 0 6px 6px; 119 | background: #34495e; 120 | } 121 | 122 | .dialog-hide { 123 | display: none; 124 | } 125 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 弹出层 | 第四阶段 | newraina 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/4/main.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | dialog({ 3 | trigger : 'button', 4 | title : '您的浏览器即将爆炸', 5 | content : '非常遗憾地通知您，因为某些不能明说的原因，我们即将引爆您的浏览器，5秒倒计时会在红圈开始后出现。', 6 | effectShow: function ($element) { 7 | $element.fadeIn(500) 8 | }, 9 | effectHide: function ($element) { 10 | $element.fadeOut(500) 11 | }, 12 | onClose : function () { 13 | console.log('已经关掉了哦~') 14 | } 15 | }); 16 | }); 17 | 18 | 19 | /** 20 | * 第三阶段 对话框函数 21 | * @param options Object 22 | * option.trigger 触发对话框的DOM元素或者元素的选择器，触发方式为click 23 | * options.title 对话框的标题 24 | * options.content 对话框的内容 25 | * options.effectShow 对话框出现效果 26 | * options.effectHide 对话框消失效果 27 | */ 28 | function dialog(options) { 29 | // 缓存参数 30 | var $trigger = $(options.trigger); 31 | var title = options.title; 32 | var content = options.content; 33 | var effectShow = options.effectShow; 34 | var effectHide = options.effectHide; 35 | var onClose = options.onClose; 36 | 37 | // 对话框的主DOM元素 38 | var $dialogContainer = $('
').addClass('dialog-container'); 39 | // 待插入的对话框DOM内容 40 | var dialogHTML = '
' + 41 | '
' + 42 | '
' + 43 | title + 44 | '' + 45 | '
' + 46 | '
' + content + '
' + 47 | '
' + 48 | '
'; 49 | 50 | (function init() { 51 | $dialogContainer.html(dialogHTML); 52 | 53 | $('body').append($dialogContainer); 54 | 55 | $trigger.click(function () { 56 | 57 | dialogShow(); 58 | 59 | $(document).keydown(function (event) { 60 | if (event.which === 27) dialogHide(); 61 | $(document).off('keydown'); 62 | }); 63 | }); 64 | 65 | $dialogContainer.find('.close-icon').click(function () { 66 | dialogHide(); 67 | }); 68 | 69 | $dialogContainer.hide(); 70 | })(); 71 | 72 | function dialogShow() { 73 | if (effectShow) 74 | effectShow($dialogContainer); 75 | else 76 | $dialogContainer.show(); 77 | } 78 | 79 | function dialogHide() { 80 | if (effectHide) 81 | effectHide($dialogContainer); 82 | else 83 | $dialogContainer.hide(); 84 | 85 | if (onClose) 86 | onClose($dialogContainer); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/4/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', Heiti, '黑体', sans-serif; 12 | font-size: 12px; 13 | 14 | margin: 0; 15 | } 16 | 17 | .dialog-container { 18 | position: fixed; 19 | z-index: 9999; 20 | top: 0; 21 | left: 0; 22 | 23 | display: block; 24 | 25 | width: 100%; 26 | height: 100%; 27 | margin: 0; 28 | padding: 0; 29 | 30 | border: none; 31 | background: rgba(0, 0, 0, .1); 32 | } 33 | 34 | .dialog-background { 35 | position: relative; 36 | 37 | width: 100%; 38 | height: 100%; 39 | 40 | background: rgba(0, 0, 0, .1); 41 | } 42 | 43 | .dialog { 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | 48 | width: 500px; 49 | height: 100px; 50 | margin-top: -150px; 51 | margin-left: -250px; 52 | 53 | box-shadow: 0 0 80px rgba(0, 0, 0, .3); 54 | } 55 | 56 | .header { 57 | font-size: 1.5em; 58 | font-weight: bold; 59 | line-height: 50px; 60 | 61 | height: 50px; 62 | 63 | text-align: center; 64 | 65 | color: #34495e; 66 | border-radius: 6px 6px 0 0; 67 | background: #1abc9c; 68 | } 69 | 70 | .close-icon { 71 | position: relative; 72 | 73 | display: inline-block; 74 | float: right; 75 | overflow: hidden; 76 | 77 | width: 15px; 78 | height: 15px; 79 | margin-top: 7px; 80 | margin-right: 7px; 81 | 82 | cursor: pointer; 83 | } 84 | 85 | .close-icon::before, 86 | .close-icon::after { 87 | position: absolute; 88 | top: 50%; 89 | left: 0; 90 | 91 | width: 100%; 92 | height: 3px; 93 | 94 | content: ''; 95 | 96 | border-radius: 3px; 97 | background: rgba(255, 255, 255, .5); 98 | } 99 | 100 | .close-icon::before { 101 | -webkit-transform: rotate(45deg); 102 | transform: rotate(45deg); 103 | } 104 | 105 | .close-icon::after { 106 | -webkit-transform: rotate(-45deg); 107 | transform: rotate(-45deg); 108 | } 109 | 110 | .dialog-content { 111 | font-size: 1.22em; 112 | 113 | padding: 20px; 114 | 115 | text-align: justify; 116 | 117 | color: #fff; 118 | border-radius: 0 0 6px 6px; 119 | background: #34495e; 120 | } 121 | 122 | .dialog-hide { 123 | display: none; 124 | } 125 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 弹出层 | 第五阶段 | newraina 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package/dialog/code/newraina/5/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', Heiti, '黑体', sans-serif; 12 | font-size: 12px; 13 | margin: 0; 14 | } 15 | 16 | .dialog-background { 17 | position: fixed; 18 | top: 0; 19 | left: 0; 20 | display: block; 21 | width: 100%; 22 | height: 100%; 23 | margin: 0; 24 | padding: 0; 25 | border: none; 26 | background: rgba(0, 0, 0, .1); 27 | } 28 | 29 | .dialog { 30 | position: absolute; 31 | z-index: 1000; 32 | top: 50%; 33 | left: 50%; 34 | width: 500px; 35 | height: 100px; 36 | margin-top: -150px; 37 | margin-left: -250px; 38 | box-shadow: 0 0 80px rgba(0, 0, 0, .3); 39 | } 40 | 41 | .header { 42 | font-size: 1.5em; 43 | font-weight: bold; 44 | line-height: 50px; 45 | height: 50px; 46 | text-align: center; 47 | color: #34495e; 48 | border-radius: 6px 6px 0 0; 49 | background: #1abc9c; 50 | } 51 | 52 | .close-icon { 53 | float: right; 54 | font-size: 1.5em; 55 | height: 15px; 56 | margin-right: 10px; 57 | cursor: pointer; 58 | } 59 | 60 | .dialog-content { 61 | font-size: 1.22em; 62 | padding: 20px; 63 | text-align: justify; 64 | color: #fff; 65 | border-radius: 0 0 6px 6px; 66 | background: #34495e; 67 | } 68 | 69 | .dialog-hide { 70 | display: none; 71 | } 72 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog阶段１ 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
我真的是标题啊 14 | X 15 |
16 |
我是内容　我是内容
17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/1/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $('button').on('click', function() { 3 | $('.dialog').show(); 4 | }); 5 | 6 | $('.dialog-header .delete-icon').click(function() { 7 | $('.dialog').hide(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/1/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | background-color: #eee; 5 | } 6 | 7 | button { 8 | margin: 20px; 9 | } 10 | 11 | .dialog { 12 | width: 960px; 13 | height:300px; 14 | position:absolute; 15 | left:50%; 16 | top:50%; 17 | margin:-150px 0 0 -480px; 18 | border: 10px solid #ccc; 19 | display: none; 20 | } 21 | .dialog-header .delete-icon { 22 | float: right; 23 | height: 30px; 24 | width: 30px; 25 | text-align: center; 26 | color: red; 27 | cursor: pointer; 28 | } 29 | .dialog-header { 30 | width: auto; 31 | height: 50px; 32 | padding: 0 20px; 33 | line-height: 50px; 34 | font-weight: bold; 35 | border-bottom: 1px solid #000; 36 | } 37 | .dialog-content { 38 | width: auto; 39 | height: 200px; 40 | margin: 10px 20px; 41 | } 42 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog阶段１ 6 | 7 | 8 | 9 | 10 | 11 |
12 |
我真的是标题啊 13 | X 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/2/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | dialog({ 3 | trigger: '#btn', 4 | content: '哈哈' 5 | }); 6 | 7 | function dialog(options) { 8 | $('.dialog-content').append(options.content); 9 | 10 | $(options.trigger).click(function () { 11 | $('.dialog').show(); 12 | $('.dialog-header .delete-icon').click(function() { 13 | $('.dialog').hide(); 14 | }); 15 | }); 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/2/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | background-color: #eee; 5 | } 6 | 7 | button { 8 | margin: 20px; 9 | } 10 | 11 | .dialog { 12 | width: 960px; 13 | height:300px; 14 | position:absolute; 15 | left:50%; 16 | top:50%; 17 | margin:-150px 0 0 -480px; 18 | border: 10px solid #ccc; 19 | display: none; 20 | } 21 | .dialog-header .delete-icon { 22 | float: right; 23 | height: 30px; 24 | width: 30px; 25 | text-align: center; 26 | color: red; 27 | cursor: pointer; 28 | } 29 | .dialog-header { 30 | width: auto; 31 | height: 50px; 32 | padding: 0 20px; 33 | line-height: 50px; 34 | font-weight: bold; 35 | border-bottom: 1px solid #000; 36 | } 37 | .dialog-content { 38 | width: auto; 39 | height: 200px; 40 | margin: 10px 20px; 41 | } 42 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog阶段１ 6 | 7 | 8 | 9 | 10 | 11 |
12 |
我真的是标题啊 13 | X 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/3/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | dialog({ 3 | trigger: '#btn', 4 | content: '哈哈', 5 | effectShow: function ($element) { 6 | // 淡入显示 7 | $element.fadeIn(500) 8 | }, 9 | effectHide: function ($element) { 10 | // 淡出显示 11 | $element.fadeOut(500) 12 | } 13 | }); 14 | 15 | function dialog(options) { 16 | $('.dialog-content').append(options.content); 17 | 18 | $(options.trigger).click(function () { 19 | options.effectShow($('.dialog')); 20 | $('.dialog-header .delete-icon').click(function() { 21 | options.effectHide($('.dialog')); 22 | }); 23 | }); 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/3/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | background-color: #eee; 5 | } 6 | 7 | button { 8 | margin: 20px; 9 | } 10 | 11 | .dialog { 12 | width: 960px; 13 | height:300px; 14 | position:absolute; 15 | left:50%; 16 | top:50%; 17 | margin:-150px 0 0 -480px; 18 | border: 10px solid #ccc; 19 | display: none; 20 | } 21 | .dialog-header .delete-icon { 22 | float: right; 23 | height: 30px; 24 | width: 30px; 25 | text-align: center; 26 | color: red; 27 | cursor: pointer; 28 | } 29 | .dialog-header { 30 | width: auto; 31 | height: 50px; 32 | padding: 0 20px; 33 | line-height: 50px; 34 | font-weight: bold; 35 | border-bottom: 1px solid #000; 36 | } 37 | .dialog-content { 38 | width: auto; 39 | height: 200px; 40 | margin: 10px 20px; 41 | } 42 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog阶段１ 6 | 7 | 8 | 9 | 10 | 11 |
12 |
我真的是标题啊 13 | X 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/4/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | dialog({ 3 | trigger: '#btn', 4 | content: '哈哈', 5 | effectShow: function ($element) { 6 | // 淡入显示 7 | $element.fadeIn(500) 8 | }, 9 | onClose: function ($element) { 10 | $element.fadeOut(500); 11 | } 12 | }); 13 | 14 | function dialog(options) { 15 | $('.dialog-content').append(options.content); 16 | 17 | $(options.trigger).click(function () { 18 | options.effectShow($('.dialog')); 19 | $('.dialog-header .delete-icon').click(function() { 20 | options.onClose($('.dialog')); 21 | }); 22 | }); 23 | 24 | $(document).keydown(function (event) { 25 | if(event.keyCode === 27) { 26 | options.onClose($('.dialog')); 27 | } 28 | }); 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /package/dialog/code/scq000/4/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | background-color: #eee; 5 | } 6 | 7 | button { 8 | margin: 20px; 9 | } 10 | 11 | .dialog { 12 | width: 960px; 13 | height:300px; 14 | position:absolute; 15 | left:50%; 16 | top:50%; 17 | margin:-150px 0 0 -480px; 18 | border: 10px solid #ccc; 19 | display: none; 20 | } 21 | .dialog-header .delete-icon { 22 | float: right; 23 | height: 30px; 24 | width: 30px; 25 | text-align: center; 26 | color: red; 27 | cursor: pointer; 28 | } 29 | .dialog-header { 30 | width: auto; 31 | height: 50px; 32 | padding: 0 20px; 33 | line-height: 50px; 34 | font-weight: bold; 35 | border-bottom: 1px solid #000; 36 | } 37 | .dialog-content { 38 | width: auto; 39 | height: 200px; 40 | margin: 10px 20px; 41 | } 42 | -------------------------------------------------------------------------------- /package/dialog/code/veena233/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dialog 6 | 47 | 48 | 49 | 50 | 51 | 92 | 93 | -------------------------------------------------------------------------------- /package/dialog/code/xuexb/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo1 dialog for xuexb 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
br
14 | 15 | 16 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /package/dialog/code/xuexb/README.md: -------------------------------------------------------------------------------- 1 | # 弹出层 2 | 3 | by 前端小武 @xuexb 4 | 5 | ## 第一阶段 6 | 7 | [dmeo](1/index.html) 8 | 9 | 其实就是调用方法时创建一个容器，并输出模板，然后把这个容器设置看不到的状态用来获取宽高，当然也可以使用`visibility:hidden`，拿到宽高后你懂的。 10 | 11 | ## 第二阶段 12 | 13 | [dmeo](2/index.html) 14 | 15 | 在1的基础上添加触发元素，思路是在构造函数里判断是否有触发元素，如果有则绑定事件，事件触发的时候调用`create`方法来弹层 16 | 17 | ## 第三阶段 18 | 19 | [demo](3/index.html) 20 | 21 | 在2的基础上添加展现/隐藏回调，其实就是在弹层定位后执行下展现的方法 22 | 23 | ## 第四阶段 24 | 25 | [demo](4/index.html) 26 | 27 | 在3的基础上添加`onClose`关闭回调，添加`esc`事件监听，这里需要注意的是自己绑定的私有事件，在不用的时候（插件被销毁）一定要注销了，比如常见的`resize`,`scroll`,`key*`事件，不用的时候一定要卸载，事件空间是个好东西～ 28 | 29 | ## 扩展 30 | 31 | 其实弹层还要考虑窗口`resize`的时候、标题、按钮组、定时、宽高、遮罩、`fixed`等，还要提供一些常用的`API`，下面是我写的一个小弹层，欢迎[提bug](https://github.com/xuexb/demo/issues/new?title=dialog%20bug:)～ 32 | 33 | * [demo](http://github.xuexb.com/demo/dialog/) 34 | * [dialog.js](http://github.xuexb.com/demo/dialog/mod/dialog.js) -------------------------------------------------------------------------------- /package/dialog/code/xuexb/mod/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/dialog/code/xuexb/mod/close.png -------------------------------------------------------------------------------- /package/dialog/code/xuexb/mod/close@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/dialog/code/xuexb/mod/close@2x.png -------------------------------------------------------------------------------- /package/dialog/code/xuexb/mod/dialog.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /** 4 | * 弹出层 5 | * @author xiaowu 6 | * @email fe.xiaowu@gmail.com 7 | */ 8 | .ui-dl-inner { zoom: 1; position: relative; #zoom: 1; box-shadow: 0 0 8px rgba(0, 0, 0, .1); border: solid 1px #dcdcdc; background-color: #fff; } 9 | 10 | /*标题*/ 11 | .ui-dl-inner h3 { margin: 0; padding: 0; } 12 | .ui-dl-hd { border-bottom: 2px #eee solid; padding-left: 20px; padding-right: 42px; position: relative; } 13 | .ui-dl-hd h3 { padding: 13px 0; font-size: 14px; font-weight: bold; color: #333; height: 18px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 14 | 15 | /*没有标题时*/ 16 | .ui-dl-no-title .ui-dl-hd h3 { display: none; } 17 | .ui-dl-no-title .ui-dl-hd { border-bottom: none; } 18 | 19 | /*关闭按钮*/ 20 | .ui-dl-close { position: absolute; right: 0; top: 0; width: 16px; height: 16px; margin: 5px; font-size: 0; padding: 8px; cursor: pointer; } 21 | .ui-dl-close i { background: url('./close.png') 0 0 no-repeat; display: block; width: 16px; height: 16px; vertical-align: top; } 22 | .ui-dl-close:hover i { background-position: -17px 0; } 23 | 24 | /*retina*/ 25 | @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { 26 | .ui-dl-close i { background-image: url('./close@2x.png'); -webkit-background-size: 32px 14px; background-size: 32px 14px; } 27 | } 28 | 29 | /*内容*/ 30 | .ui-dl-cnt { color: #333; font-size: 12px; line-height: 1.6; padding: 20px; } -------------------------------------------------------------------------------- /package/dialog/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/dialog/dialog.png -------------------------------------------------------------------------------- /package/tab/README.md: -------------------------------------------------------------------------------- 1 | # Tab 选项卡 2 | 3 | 4 | 5 | ## 阶段 1 6 | 7 | 实现上图 JS 效果，CSS样式随意。 8 | 9 | 10 | ## 阶段 2 11 | 12 | 封装成一个 `tab` 函数，提供如下 api ： 13 | 14 | ```js 15 | tab({ 16 | element: '.newtab', 17 | triggers: '.triggers', 18 | contents: '.contents' 19 | }) 20 | ``` 21 | 22 | ```html 23 |
24 | 1 25 | 2 26 | 3 27 | 28 |
a
29 |
b
30 |
c
31 |
32 | ``` 33 | 34 | 可通过参数指定父级DOM、触发DOM、内容DOM。 35 | 36 | ## 阶段 3 37 | 38 | `activeIndex` 39 | 40 | 初始化时，自动切换到指定面板，默认为0，也就是第一个。 41 | 42 | ```js 43 | tab({ 44 | element: '.newtab', 45 | triggers: '.triggers', 46 | contents: '.contents', 47 | // 显示第二个 content 48 | activeIndex: 1 49 | }) 50 | ``` 51 | --- 52 | 53 | `activeTriggerClass` 54 | 55 | triggers被选中时的class,默认 `ui-tab-active` 56 | 57 | ```js 58 | tab({ 59 | element: '.newtab', 60 | triggers: '.triggers', 61 | contents: '.contents', 62 | activeTriggerClass: 'ui-tab-active' 63 | }) 64 | ``` 65 | 66 | 67 | ```css 68 | .ui-tab-active{ 69 | color: red; 70 | } 71 | ``` 72 | 73 | 74 | ## 阶段 4 75 | 76 | 添加触发类型 77 | 78 | `triggerType` 79 | 80 | 默认是 `click` ，可选 `hover` 81 | 82 | ```js 83 | tab({ 84 | element: '.newtab', 85 | triggerType: 'hover', 86 | triggers: '.triggers', 87 | contents: '.contents' 88 | }) 89 | ``` 90 | 91 | ## 阶段 5 92 | 93 | 可配置点击切换时触发的函数 94 | 95 | ```js 96 | tab({ 97 | element: '.newtab', 98 | triggerType: 'click', 99 | triggers: '.triggers', 100 | contents: '.contents', 101 | // click 或 hover trigger 时 onSwitch 会执行 102 | onSwitch: function (index, count) { 103 | /* 104 | index 是当前 trigger 的索引 105 | count 是 trigger 的总数 106 | */ 107 | } 108 | }) 109 | ``` 110 | 111 | ## 完成挑战 112 | 113 | 还有更多 API 可以实现，但以上五个阶段已经足够提高你 Tab 类型组件开发的经验。 114 | 115 | 如果你将以上所有阶段都完成了， Tab 的挑战就结束了。但我们希望你继续完善这个组件增加更多的 API。 116 | -------------------------------------------------------------------------------- /package/tab/code/2319103827/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡（第一阶段） By 2319103827 6 | 31 | 32 | 33 |

34 | Tab 选项卡（第一阶段） By 2319103827 35 |

36 | 37 | 1 38 | 2 39 | 3 40 |
41 |
42 |
b
43 |
c
44 | 45 | 61 | 62 | 63 |

64 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 65 |

66 | 67 | -------------------------------------------------------------------------------- /package/tab/code/2319103827/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡（第二阶段） By 2319103827 6 | 32 | 33 | 34 |

35 | Tab 选项卡（第一阶段） By 2319103827 36 |

37 |
38 | 1 39 | 2 40 | 3 41 |
42 |
a
43 |
b
44 |
c
45 |
46 | 47 | 70 | 71 | 72 |

73 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 74 |

75 | 76 | -------------------------------------------------------------------------------- /package/tab/code/2319103827/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡（第三阶段） By 2319103827 6 | 32 | 33 | 34 |

35 | Tab 选项卡（第一阶段） By 2319103827 36 |

37 |
38 | 1 39 | 2 40 | 3 41 |
42 |
a
43 |
b
44 |
c
45 |
46 | 47 | 72 | 73 | 74 |

75 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 76 |

77 | 78 | -------------------------------------------------------------------------------- /package/tab/code/2319103827/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡（第四阶段） By 2319103827 6 | 32 | 33 | 34 |

35 | Tab 选项卡（第一阶段） By 2319103827 36 |

37 |
38 | 1 39 | 2 40 | 3 41 |
42 |
a
43 |
b
44 |
c
45 |
46 | 47 | 75 | 76 | 77 |

78 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 79 |

80 | 81 | -------------------------------------------------------------------------------- /package/tab/code/52cik/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab 阶段一 6 | 17 | 18 | 19 | 20 |
21 |
22 | tab1 23 | tab2 24 | tab3 25 |
26 |
27 |
内容1
28 |
内容2
29 |
内容3
30 |
31 |
32 | 33 |
34 |
35 | tab1 36 | tab2 37 | tab3 38 |
39 |
40 |
内容1
41 |
内容2
42 |
内容3
43 |
44 |
45 | 46 | 47 | 60 | 61 | -------------------------------------------------------------------------------- /package/tab/code/52cik/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab 阶段二 6 | 16 | 17 | 18 |
19 | 1 20 | 2 21 | 3 22 | 23 |
a
24 |
b
25 |
c
26 |
27 | 28 |
29 | 1 30 | 2 31 | 3 32 | 33 |
a
34 |
b
35 |
c
36 |
37 | 38 | 39 | 59 | 60 | -------------------------------------------------------------------------------- /package/tab/code/52cik/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab 阶段三 6 | 19 | 20 | 21 |
22 | 1 23 | 2 24 | 3 25 | 26 |
a
27 |
b
28 |
c
29 |
30 | 31 |
32 | 1 33 | 2 34 | 3 35 | 36 |
a
37 |
b
38 |
c
39 |
40 | 41 | 42 | 74 | 75 | -------------------------------------------------------------------------------- /package/tab/code/593273894/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 47 | 48 | 49 | 50 |
51 |
52 | Home 53 | Profile 54 | Demo 55 |
56 |
57 |
离离原上草
58 |
一岁一枯荣
59 |
野火烧不尽
60 |
61 |
62 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /package/tab/code/593273894/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 47 | 48 | 49 | 50 |
51 |
52 | Home 53 | Profile 54 | Demo 55 |
56 |
57 |
离离原上草
58 |
一岁一枯荣
59 |
野火烧不尽
60 |
61 |
62 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /package/tab/code/ColdXu/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab选项卡第一阶段 6 | 40 | 41 | 42 |
43 |
44 |
tab1
45 |
tab2
46 |
tab3
47 |
48 |
49 |
我的tab1的内容
50 |
我的tab2的内容
51 |
我的tab3的内容
52 |
53 |
54 | 70 | 71 | -------------------------------------------------------------------------------- /package/tab/code/ColdXu/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab选项卡第二阶段 6 | 34 | 35 | 36 |
37 | tab1 38 | tab2 39 | tab3 40 | 我的tab1的内容 41 | 我的tab2的内容 42 | 我的tab3的内容 43 |
44 | 80 | 81 | -------------------------------------------------------------------------------- /package/tab/code/ColdXu/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab选项卡第三阶段 6 | 34 | 35 | 36 |
37 | tab1 38 | tab2 39 | tab3 40 | 我的tab1的内容 41 | 我的tab2的内容 42 | 我的tab3的内容 43 |
44 | 82 | 83 | -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/README.md: -------------------------------------------------------------------------------- 1 | 可配置点击切换时触发的函数 2 | 3 | ```js 4 | tab(DOM, { 5 | triggers: ".ui-tab-triggers", // 标签栏 的 CSS选择器 6 | content: ".ui-tab-content", // 内容栏 的 CSS选择器 7 | triggerType: "mouseover", // 触发方式事件类型,可切换为click 8 | activeIndex: 0, // 当前索引值 9 | activeTriggerClass: "triggers-active", // 当前标签栏添加的 className 10 | activeContentClass: "content-active", // 当前内容栏添加的 className 11 | 12 | 13 | directionControl: false, // 前后按钮功能 默认关闭 14 | 15 | // 前后按钮插入位置选择, 1为contanier, 2为trigger的父级, 其他默认在content的父级 16 | dirControl_parent: 3, 17 | 18 | dir_pre: "ui-tab-pre", // 为“向前”按钮添加 className 19 | dir_next: "ui-tab-next", // 为“向后”按钮添加 className 20 | 21 | auto: false, // 自动播放功能 默认关闭 22 | autoSpeed: 5000, // 自动播放速度 默认5秒 23 | delay: 200, // 鼠标离开后自动播放启动延迟时间 默认0.2秒 24 | 25 | 26 | // 切换功能函数 提供一个对象供调用参数 27 | // function({ 28 | // index: index, 提供当前标签栏索引值index 29 | // count: count, 标签栏总数 count 30 | // triggers: triggers, 标签栏DOM数组集合 triggers 31 | // content: content 内容栏DOM数组集合 content 32 | // }) { body.........} 33 | // 34 | // （非函数时 无效） 35 | onSwitch: null 36 | } 37 | }) 38 | ``` -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/css/yahoo reSet.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } 2 | body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } 3 | td,th,caption { font-size:14px; } 4 | h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } 5 | address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;} 6 | a { color:#555; text-decoration:none; } 7 | a:hover { text-decoration:underline; } 8 | img { border:none; } 9 | ol,ul,li { list-style:none; } 10 | input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } 11 | table { border-collapse:collapse; } 12 | html {overflow-y: scroll;} 13 | 14 | .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} 15 | .clearfix { *zoom:1; } -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/1.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/2.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/3.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/4.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/5.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/6.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/7.png -------------------------------------------------------------------------------- /package/tab/code/DuXingXia233/img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/DuXingXia233/img/8.png -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-1/tab-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 49 | 50 | 51 |
52 |
53 | Home 54 | Profile 55 | Demo 56 |
57 |
58 |
123456
59 |
7890
60 |
不知道写什么了
61 |
62 |
63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-1/tab.js: -------------------------------------------------------------------------------- 1 | ;(function($){ 2 | var tab={ 3 | init: function () { 4 | this.clickEvent(); 5 | this._trigger(); 6 | }, 7 | clickEvent: function () { 8 | $('.tab-header')[0].addEventListener('click', function (e) { 9 | $('.mynav').removeClass('active'); 10 | $('.myli').css('display','none'); 11 | for(var i= 0,len=$('.mynav').length;i 2 | 3 | 4 | 5 | Title 6 | 49 | 50 | 51 |
52 |
53 | 1 54 | 2 55 | 3 56 |
57 |
58 |
a
59 |
b
60 |
c
61 |
62 |
63 | 64 | 65 | 66 | 73 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-2/tab.js: -------------------------------------------------------------------------------- 1 | ;(function ($,global) { 2 | function Tab(config){ 3 | this._init(config) 4 | } 5 | Tab.prototype={ 6 | _init: function (config) { 7 | this.switchTab(config); 8 | this.defaultTrigger(config); 9 | }, 10 | switchTab: function (config) { 11 | $(config.triggers).click(function () { 12 | $(this).addClass('active').siblings().removeClass('active'); 13 | var $index=$(config.triggers).index($(this)); 14 | $(config.contents).css('display','none').eq($index).css('display','block'); 15 | }) 16 | }, 17 | defaultTrigger: function (config) { 18 | $(config.triggers).first().trigger('click'); 19 | } 20 | } 21 | global.Tab=Tab; 22 | })(jQuery,window) 23 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-3/tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 49 | 50 | 51 |
52 |
53 | 1 54 | 2 55 | 3 56 |
57 |
58 |
a
59 |
b
60 |
c
61 |
62 |
63 | 64 | 65 | 66 | 75 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-3/tab.js: -------------------------------------------------------------------------------- 1 | ;(function ($,global) { 2 | function Tab(config){ 3 | this._init(config) 4 | } 5 | Tab.prototype={ 6 | _init: function (config) { 7 | this.switchTab(config); 8 | this.defaultTrigger(config); 9 | }, 10 | switchTab: function (config) { 11 | $(config.triggers).click(function () { 12 | $(this).addClass(config.activeTriggerClass).siblings().removeClass(config.activeTriggerClass); 13 | var $index=$(config.triggers).index($(this)); 14 | $(config.contents).css('display','none').eq($index).css('display','block'); 15 | }) 16 | }, 17 | defaultTrigger: function (config) { 18 | $(config.triggers).eq(config.activeIndex-1).trigger('click'); 19 | } 20 | } 21 | global.Tab=Tab; 22 | })(jQuery,window) 23 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-4/tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 49 | 50 | 51 |
52 |
53 | 1 54 | 2 55 | 3 56 |
57 |
58 |
a
59 |
b
60 |
c
61 |
62 |
63 | 64 | 65 | 66 | 76 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-4/tab.js: -------------------------------------------------------------------------------- 1 | ;(function ($,global) { 2 | function Tab(config){ 3 | this._init(config) 4 | } 5 | Tab.prototype={ 6 | _init: function (config) { 7 | this.switchTab(config); 8 | this.defaultTrigger(config); 9 | }, 10 | switchTab: function (config) { 11 | if(config.triggerType === 'hover'){ 12 | config.triggerType = 'mouseenter'; 13 | } else if(config.triggerType === 'click'){ 14 | config.triggerType = 'click'; 15 | } 16 | $(config.triggers).on(config.triggerType,function () { 17 | $(this).addClass(config.activeTriggerClass).siblings().removeClass(config.activeTriggerClass); 18 | var $index=$(config.triggers).index($(this)); 19 | $(config.contents).css('display','none').eq($index).css('display','block'); 20 | }) 21 | }, 22 | defaultTrigger: function (config) { 23 | config.activeIndex=config.activeIndex||1; 24 | if(config.activeIndex<1||config.activeIndex>$(config.triggers).length){ 25 | alert('activeIndex参数配置错误，索引越界,无法显示默认值'); 26 | return 27 | } 28 | $(config.triggers).eq(config.activeIndex-1).trigger(config.triggerType); 29 | } 30 | } 31 | global.Tab=Tab; 32 | })(jQuery,window) 33 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-5/tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 49 | 50 | 51 |
52 |
53 | 1 54 | 2 55 | 3 56 |
57 |
58 |
a
59 |
b
60 |
c
61 |
62 |
63 | 64 | 65 | 66 | 85 | -------------------------------------------------------------------------------- /package/tab/code/LastGun/stage-5/tab.js: -------------------------------------------------------------------------------- 1 | ;(function ($,global) { 2 | function Tab(config){ 3 | this._init(config) 4 | } 5 | Tab.prototype={ 6 | _init: function (config) { 7 | this.switchTab(config); 8 | this.defaultTrigger(config); 9 | }, 10 | switchTab: function (config) { 11 | if(config.triggerType === 'hover'){ 12 | config.triggerType = 'mouseenter'; 13 | } else if(config.triggerType === 'click'){ 14 | config.triggerType = 'click'; 15 | } 16 | $(config.triggers).on(config.triggerType,function () { 17 | $(this).addClass(config.activeTriggerClass).siblings().removeClass(config.activeTriggerClass); 18 | var $index=$(config.triggers).index($(this)); 19 | $(config.contents).css('display','none').eq($index).css('display','block'); 20 | if(config.onSwitch){ 21 | config.onSwitch.call(this,$index,$(config.triggers).length); 22 | } 23 | 24 | }) 25 | }, 26 | defaultTrigger: function (config) { 27 | config.activeIndex=config.activeIndex||1; 28 | if(config.activeIndex<1||config.activeIndex>$(config.triggers).length){ 29 | alert('activeIndex参数配置错误，索引越界,无法显示默认值'); 30 | return 31 | } 32 | $(config.triggers).eq(config.activeIndex-1).trigger(config.triggerType); 33 | } 34 | } 35 | global.Tab=Tab; 36 | })(jQuery,window) 37 | 38 | -------------------------------------------------------------------------------- /package/tab/code/Yeahax/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab 6 | 23 | 24 | 25 |
26 |
27 | tab1 28 | tab2 29 | tab3 30 |
31 |
32 |
i am tab 1
33 |
i am tab 2
34 |
i am tab 3
35 |
36 |
37 | 58 | 59 | -------------------------------------------------------------------------------- /package/tab/code/Yeahax/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab 6 | 23 | 24 | 25 | 26 |
27 | 1 28 | 2 29 | 3 30 | 31 |
a
32 |
b
33 |
c
34 |
35 | 36 | 76 | 77 | -------------------------------------------------------------------------------- /package/tab/code/coolzjy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡——阶段1 6 | 7 | 8 | 9 |
10 | 1 11 | 2 12 | 3 13 | 14 |
a
15 |
b
16 |
c
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /package/tab/code/coolzjy/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .tab .tri { 4 | display: inline-block; 5 | padding: 10px; 6 | } 7 | 8 | .tab .ui-tab-active { 9 | position: relative; 10 | top: 1px; 11 | z-index: 1; 12 | border: 1px solid #D5D5D5; 13 | border-top-left-radius: 2px; 14 | border-top-right-radius: 2px; 15 | border-bottom: none; 16 | background: white; 17 | } 18 | 19 | .tab .cont { 20 | display: none; 21 | } 22 | 23 | .tab .ui-tab-current { 24 | display: block !important; 25 | border-top: 1px solid #D5D5D5; 26 | } -------------------------------------------------------------------------------- /package/tab/code/langrren/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡 6 | 49 | 50 | 51 |
52 |
53 |
Home
54 |
Profile
55 |
Demo
56 |
57 |
58 | 64 |
65 |

66 | 尘劳回脱事非常，紧把绳头做一场。 67 | 不经一番寒彻骨，那得梅花扑鼻香. 68 |

69 |
70 | 76 |
77 |
78 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /package/tab/code/lijinyao/style.css: -------------------------------------------------------------------------------- 1 | .tab{ 2 | margin: 0; 3 | padding: 0; 4 | border: 1px solid #c0c0c0; 5 | } 6 | .tab-nav{ 7 | border-bottom: 1px solid #c0c0c0; 8 | height: 40px; 9 | } 10 | .tab-nav span{ 11 | display: inline-block; 12 | border-right: 1px solid #c0c0c0; 13 | height: 40px; 14 | width: 100px; 15 | line-height: 40px; 16 | text-align: center; 17 | background-color: #f0f0f0; 18 | cursor: pointer; 19 | } 20 | .cont{ 21 | height: 300px; 22 | display: none; 23 | } 24 | .tab-nav span.active{ 25 | background: #ffffff; 26 | height: 41px; 27 | } 28 | .contents div.active{ 29 | display: block; 30 | } -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage1/idnex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | item1 15 | item2 16 | item3 17 |
18 |
19 |
content1
20 |
content2
21 |
content3
22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage1/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/lijinyao/tab-stage1/script.js -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage2/idnex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | item1 15 | item2 16 | item3 17 |
18 |
19 |
content1
20 |
content2
21 |
content3
22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage2/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/lijinyao/tab-stage2/script.js -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage3/idnex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | item1 15 | item2 16 | item3 17 |
18 |
19 |
content1
20 |
content2
21 |
content3
22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage3/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/lijinyao/tab-stage3/script.js -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage4/idnex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | item1 15 | item2 16 | item3 17 |
18 |
19 |
content1
20 |
content2
21 |
content3
22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /package/tab/code/lijinyao/tab-stage4/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/code/lijinyao/tab-stage4/script.js -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段一/css/main.css: -------------------------------------------------------------------------------- 1 | /******reset******/ 2 | html,body,ul,li{ 3 | padding:0px; 4 | margin: 0px; 5 | } 6 | li{ 7 | list-style: none; 8 | } 9 | 10 | /*******main.css*******/ 11 | #container{ 12 | width:500px; 13 | height:200px; 14 | margin: 50px auto; 15 | } 16 | .nav{ 17 | margin:20px; 18 | } 19 | .nav li{ 20 | display: inline; 21 | color:#058; 22 | font-size:24px; 23 | padding:4px 16px; 24 | cursor: pointer; 25 | border-bottom:2px solid #faa; 26 | } 27 | .active{ 28 | border: 2px solid #faa; 29 | border-bottom: none!important; 30 | border-radius: 6px 6px 0 0; 31 | } 32 | 33 | .contents div{ 34 | font-size: 18px; 35 | display: none; 36 | } 37 | .contents div:first-child{ 38 | display: block; 39 | } 40 | 41 | p{ 42 | width:100px; 43 | margin: 0px auto; 44 | } -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段一/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡 阶段一 6 | 7 | 8 | 9 |
10 | 13 |
14 |
离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
15 |
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
16 |
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
17 |
18 |
19 |

By:limingyang2012

20 | 21 | 22 | -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段一/js/main.js: -------------------------------------------------------------------------------- 1 | var aLi = document.getElementsByTagName("li"); 2 | var contents = document.getElementById("contents"); 3 | var contentChild = contents.getElementsByTagName("div"); 4 | 5 | var len = aLi.length; 6 | 7 | function tab(){ 8 | for(var i=0;i 2 | 3 | 4 | 5 | Tab 选项卡 阶段三 6 | 7 | 8 | 9 |
10 | 草诗经元日 11 | 12 |
离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 |
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 |
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 |
16 |

By:limingyang2012

17 | 18 | 19 | -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段三/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | function tab(json){ 3 | var newtab = document.querySelector(json.element); 4 | var triggers = document.querySelectorAll(json.triggers); 5 | var contents = document.querySelectorAll(json.contents); 6 | var index = json.activeIndex ? json.activeIndex : 0; 7 | var len = triggers.length; 8 | var active = "triggers active"; 9 | var noActive = "triggers"; 10 | 11 | triggers[index].className = active; 12 | contents[index].style.display = "block"; 13 | 14 | for(var i=0;i 2 | 3 | 4 | 5 | Tab 选项卡 阶段二 6 | 7 | 8 | 9 |
10 | 草诗经元日 11 | 12 |
离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 |
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 |
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 |
16 |

By:limingyang2012

17 | 18 | 19 | -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段二/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | function tab(json){ 3 | var newtab = document.querySelector(json.element); 4 | var triggers = document.querySelectorAll(json.triggers); 5 | var contents = document.querySelectorAll(json.contents); 6 | var len = triggers.length; 7 | var active = "triggers active"; 8 | var noActive = "triggers"; 9 | 10 | triggers[0].className = active; 11 | contents[0].style.display = "block"; 12 | 13 | for(var i=0;i 2 | 3 | 4 | 5 | Tab 选项卡 阶段五 6 | 7 | 8 | 9 |
10 | 草诗经元日 11 | 12 |
离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 |
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 |
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 |
16 |

By:limingyang2012

17 | 18 | 19 | -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段五/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | function tab(json){ 3 | var newtab = document.querySelector(json.element); 4 | var triggers = document.querySelectorAll(json.triggers); 5 | var contents = document.querySelectorAll(json.contents); 6 | var index = json.activeIndex ? json.activeIndex : 0; 7 | var triggerType = json.triggerType ? "onmouseover" : "onclick"; 8 | var len = triggers.length; 9 | var active = "triggers active"; 10 | var noActive = "triggers"; 11 | 12 | triggers[index].className = active; 13 | contents[index].style.display = "block"; 14 | 15 | for(var i=0;i 2 | 3 | 4 | 5 | Tab 选项卡 阶段四 6 | 7 | 8 | 9 |
10 | 草诗经元日 11 | 12 |
离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 |
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 |
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 |
16 |

By:limingyang2012

17 | 18 | 19 | -------------------------------------------------------------------------------- /package/tab/code/limingyang2012/阶段四/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | function tab(json){ 3 | var newtab = document.querySelector(json.element); 4 | var triggers = document.querySelectorAll(json.triggers); 5 | var contents = document.querySelectorAll(json.contents); 6 | var index = json.activeIndex ? json.activeIndex : 0; 7 | var triggerType = json.triggerType ? "onmouseover" : "onclick"; 8 | var len = triggers.length; 9 | var active = "triggers active"; 10 | var noActive = "triggers"; 11 | 12 | triggers[index].className = active; 13 | contents[index].style.display = "block"; 14 | 15 | for(var i=0;i 2 | 3 | 4 | 5 | Tab 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
    14 |
  • tab1
    • 15 |
  • tab2
    • 16 |
  • tab3
    • 17 |
18 |
19 |
20 |
one
21 |
two
22 |
three
23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/1/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file tab1 js file 3 | * @author murphywuwu 4 | */ 5 | 6 | (function () { 7 | var tab = $('.tab'); 8 | tab.on('click', '.nav-list li', function(){ 9 | var tab_num = $(this); 10 | tab_num.addClass('active').siblings().removeClass('active'); 11 | 12 | var item = $('.tab-content .item'); 13 | item.removeClass('active').eq(tab_num.index()).addClass('active'); 14 | }) 15 | })(); -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body,ul { 12 | margin: 0; 13 | padding: 0; 14 | } 15 | ul { 16 | list-style: none; 17 | } 18 | /*tab style*/ 19 | .tab { 20 | width: 250px; 21 | padding: 10px; 22 | margin: 40px auto; 23 | background: #fff; 24 | border-radius: 10px; 25 | } 26 | .tab-nav { 27 | margin-bottom: 10px; 28 | } 29 | .nav-list { 30 | overflow: hidden; 31 | } 32 | .nav-list li { 33 | float: left; 34 | padding: 10px 20px; 35 | border-bottom: 1px solid #ff5a5f; 36 | } 37 | 38 | .nav-list li.active { 39 | border: 1px solid #ff5a5f; 40 | border-bottom: none; 41 | } 42 | 43 | .tab-content .item { 44 | display: none; 45 | } 46 | .tab-content .item.active { 47 | display: block; 48 | } -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 6 | 7 | 8 | 9 | 10 | 11 |
12 | tab1 13 | tab2 14 | tab3 15 | 16 |
one
17 |
two
18 |
three
19 |
20 | 21 | 22 | 29 | 30 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/2/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file tab2 js file 3 | * @author murphywuwu 4 | */ 5 | 6 | ;(function () { 7 | tab = function tab(obj) { 8 | // 获取元素 9 | var tab = $(obj.element); 10 | var tab_num = $(obj.triggers) 11 | var tab_cont = $(obj.contents); 12 | 13 | // 实现tab交互 14 | tab.on('click', obj.triggers, function () { 15 | var show_tab = $(this); 16 | show_tab.addClass('active').siblings().removeClass('active'); 17 | 18 | var show_cont = tab_cont.eq(show_tab.index()); 19 | show_cont.addClass('active'); 20 | }) 21 | } 22 | })(); -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*tab style*/ 15 | .newtab { 16 | width: 260px; 17 | padding: 10px; 18 | margin: 40px auto; 19 | background: #fff; 20 | border-radius: 10px; 21 | font-size: 0px; 22 | } 23 | 24 | .triggers { 25 | display: inline-block; 26 | margin-bottom: 5px; 27 | padding: 5px 20px; 28 | border-bottom: 1px solid #ff5a5f; 29 | font-size: 16px; 30 | } 31 | 32 | 33 | .triggers.active { 34 | border: 1px solid #ff5a5f; 35 | border-bottom: none; 36 | } 37 | 38 | 39 | .contents.active { 40 | font-size: 14px; 41 | } 42 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 6 | 7 | 8 | 9 | 10 | 11 |
12 | tab1 13 | tab2 14 | tab3 15 | 16 |
one
17 |
two
18 |
three
19 |
20 | 21 | 22 | 23 | 32 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/3/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file tab3 js file 3 | * @author murphywuwu 4 | */ 5 | ;(function () { 6 | tab = function (obj) { 7 | // 获取元素 8 | var tabNew = $(obj.element); 9 | var tabNum = $(obj.triggers); 10 | var tabCont = $(obj.contents); 11 | // 初始化页面 12 | var activeClass = obj.activeTriggerClass || 'ui-tab-active'; 13 | var activeIndex = obj.activeIndex || 0; 14 | tabNum.eq(activeIndex).addClass(activeClass); 15 | tabCont.eq(activeIndex).addClass(activeClass); 16 | // 实现tab交互 17 | tabNew.on('click', obj.triggers, function () { 18 | var showTab = $(this); 19 | showTab.addClass(activeClass).siblings().removeClass(activeClass); 20 | 21 | var showCont = tabCont.eq(showTab.index()); 22 | showCont.addClass(activeClass); 23 | }); 24 | }; 25 | })(); -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*tab style*/ 15 | .newtab { 16 | width: 260px; 17 | padding: 10px; 18 | margin: 40px auto; 19 | background: #fff; 20 | border-radius: 10px; 21 | font-size: 0; 22 | } 23 | 24 | .triggers { 25 | display: inline-block; 26 | margin-bottom: 5px; 27 | padding: 5px 20px; 28 | border-bottom: 1px solid #ff5a5f; 29 | font-size: 16px; 30 | } 31 | .triggers.ui-tab-active { 32 | border: 1px solid #ff5a5f; 33 | border-bottom: none; 34 | } 35 | .contents.ui-tab-active { 36 | font-size: 14px; 37 | } 38 | 39 | .ui-tab-active { 40 | color: #f00; 41 | } 42 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 6 | 7 | 8 | 9 | 10 | 11 |
12 | tab1 13 | tab2 14 | tab3 15 | 16 |
one
17 |
two
18 |
three
19 |
20 | 21 | 22 | 23 | 33 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/4/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file tab4 js file 3 | * @author murphywuwu 4 | */ 5 | ;(function () { 6 | tab = function (obj) { 7 | // 获取元素 8 | var tabNum = $(obj.triggers); 9 | var tabCont = $(obj.contents); 10 | // 初始化页面 11 | var activeClass = obj.activeTriggerClass || 'ui-tab-active'; 12 | var activeIndex = obj.activeIndex || 0; 13 | var triggerType = obj.triggerType || 'click'; 14 | tabNum.eq(activeIndex).addClass(activeClass); 15 | tabCont.eq(activeIndex).addClass(activeClass); 16 | // 实现tab交互 17 | tabNum[triggerType](function () { 18 | var showTab = $(this); 19 | showTab.addClass(activeClass).siblings().removeClass(activeClass); 20 | var showCont = tabCont.eq(showTab.index()); 21 | showCont.addClass(activeClass); 22 | }); 23 | } 24 | })(); -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/4/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*****tab style*****/ 15 | .newtab { 16 | width: 260px; 17 | padding: 10px; 18 | margin: 40px auto; 19 | background: #fff; 20 | border-radius: 10px; 21 | font-size: 0; 22 | } 23 | 24 | .triggers { 25 | display: inline-block; 26 | margin-bottom: 5px; 27 | padding: 5px 20px; 28 | border-bottom: 1px solid #ff5a5f; 29 | font-size: 16px; 30 | } 31 | .triggers.ui-tab-active { 32 | border: 1px solid #ff5a5f; 33 | border-bottom: none; 34 | } 35 | .contents.ui-tab-active { 36 | font-size: 14px; 37 | } 38 | 39 | .ui-tab-active { 40 | color: #f00; 41 | } 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 6 | 7 | 8 | 9 | 10 | 11 |
12 | tab1 13 | tab2 14 | tab3 15 | 16 |
one
17 |
two
18 |
three
19 |
20 | 21 | 22 | 23 | 41 | -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/5/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file tab5 js file 3 | * @author murphywuwu 4 | */ 5 | ;(function () { 6 | tab = function (obj) { 7 | // 获取元素 8 | var tabNum = $(obj.triggers); 9 | var tabCont = $(obj.contents); 10 | // 初始化页面 11 | var activeClass = obj.activeTriggerClass || 'ui-tab-active'; 12 | var activeIndex = obj.activeIndex || 0; 13 | var triggerType = obj.triggerType || 'click'; 14 | tabNum.eq(activeIndex).addClass(activeClass); 15 | tabCont.eq(activeIndex).addClass(activeClass); 16 | // 实现tab交互 17 | tabNum[triggerType](function () { 18 | var showTab = $(this); 19 | showTab.addClass(activeClass).siblings().removeClass(activeClass); 20 | var showCont = tabCont.eq(showTab.index()); 21 | showCont.addClass(activeClass); 22 | 23 | obj.onSwitch(showTab.index(),tabNum.length); 24 | }); 25 | } 26 | })(); -------------------------------------------------------------------------------- /package/tab/code/murphywuwu/5/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px/1.5 jaf-bernino-sans, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 3 | background: #ededed; 4 | } 5 | /*****basic reset*****/ 6 | *, 7 | *:after, 8 | *:before { 9 | box-sizing: border-box; 10 | } 11 | body { 12 | margin: 0; 13 | } 14 | /*****tab style*****/ 15 | .newtab { 16 | width: 260px; 17 | padding: 10px; 18 | margin: 40px auto; 19 | background: #fff; 20 | border-radius: 10px; 21 | font-size: 0; 22 | } 23 | 24 | .triggers { 25 | display: inline-block; 26 | margin-bottom: 5px; 27 | padding: 5px 20px; 28 | border-bottom: 1px solid #ff5a5f; 29 | font-size: 16px; 30 | } 31 | .triggers.ui-tab-active { 32 | border: 1px solid #ff5a5f; 33 | border-bottom: none; 34 | } 35 | .contents.ui-tab-active { 36 | font-size: 14px; 37 | } 38 | 39 | .ui-tab-active { 40 | color: #f00; 41 | } -------------------------------------------------------------------------------- /package/tab/code/rccoder/README.md: -------------------------------------------------------------------------------- 1 | #Tab 选项卡 2 |
3 | 用来jQuery -------------------------------------------------------------------------------- /package/tab/code/rccoder/tab1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tab-1 5 | 6 | 47 | 48 | 49 |
50 |
51 |
    52 |
  • Home
    • 53 |
  • Profile
    • 54 |
  • Demo
    • 55 |
56 |
57 |
58 |
离离原上草
59 |
一岁一枯荣
60 |
野火烧不尽
61 |
62 |
63 | 77 | 78 | -------------------------------------------------------------------------------- /package/tab/code/scq000/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab第一阶段 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 18 | 19 |
20 |
1.
21 |
2.
22 |
3.
23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /package/tab/code/scq000/1/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $('.tab-nav li').on('click', function() { 3 | $('.active').removeClass('active'); 4 | $(this).addClass('active'); 5 | var targetId = $(this).attr('for'); 6 | $('#' + targetId).addClass('active'); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /package/tab/code/scq000/1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | 6 | .tab { 7 | width: 500px; 8 | margin: 10px auto; 9 | } 10 | 11 | .tab-nav { 12 | list-style: none; 13 | height: 25px; 14 | line-height: 25px; 15 | border-bottom: 1px solid #ddd; 16 | } 17 | .tab-nav > li { 18 | float: left; 19 | width: 100px; 20 | text-align: center; 21 | margin-right: 5px; 22 | } 23 | .tab-nav>li>a { 24 | border: 1px solid #ddd; 25 | border-bottom-color: transparent; 26 | border-top-left-radius: 5px; 27 | border-top-right-radius: 5px; 28 | display: block; 29 | text-decoration: none; 30 | color: #337ab7 31 | } 32 | .tab-nav>li.active>a { 33 | background-color: #fff; 34 | border-bottom-color: transparent; 35 | color: #000; 36 | } 37 | .tab-nav>li>a:hover { 38 | background-color: #eee; 39 | } 40 | 41 | .tab-content { 42 | margin: 10px auto; 43 | position: relative; 44 | } 45 | .tab-pane { 46 | position: absolute; 47 | display: none; 48 | } 49 | .tab-content > .active { 50 | display: block; 51 | } 52 | -------------------------------------------------------------------------------- /package/tab/code/scq000/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab第二阶段 6 | 7 | 8 | 9 | 10 | 11 |
12 | 1 13 | 2 14 | 3 15 | 16 |
a
17 |
b
18 |
c
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package/tab/code/scq000/2/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | tab({ 3 | element: '.newtab', 4 | triggers: '.triggers', 5 | contents: '.contents' 6 | }); 7 | }); 8 | 9 | function tab(options) { 10 | var $element = $(options.element); 11 | var $triggers = $(options.triggers); 12 | var $contents = $(options.contents); 13 | 14 | $triggers.on('click', function() { 15 | $('.active').removeClass('active'); 16 | $(this).addClass('active'); 17 | $contents.eq($triggers.index(this)).addClass('active'); 18 | }); 19 | } 20 | -------------------------------------------------------------------------------- /package/tab/code/scq000/2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | .triggers{ 6 | width: 100px; 7 | height: 40px; 8 | line-height: 40px; 9 | text-align: center; 10 | border: 1px solid #eee; 11 | display: inline-block; 12 | } 13 | .contents { 14 | display: none; 15 | } 16 | .newtab > div.active { 17 | display: block; 18 | } 19 | .newtab > span.active { 20 | border-bottom: none; 21 | } 22 | -------------------------------------------------------------------------------- /package/tab/code/scq000/3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab第三阶段 6 | 7 | 8 | 9 | 10 | 11 |
12 | 1 13 | 2 14 | 3 15 | 16 |
a
17 |
b
18 |
c
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package/tab/code/scq000/3/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | tab({ 3 | element: '.newtab', 4 | triggers: '.triggers', 5 | contents: '.contents', 6 | // 显示第二个 content 7 | activeIndex: 1 8 | }); 9 | }); 10 | 11 | function tab(options) { 12 | var $element = $(options.element); 13 | var $triggers = $(options.triggers); 14 | var $contents = $(options.contents); 15 | var activeIndex = options.activeIndex || 0; 16 | var activeTriggerClass = options.activeTriggerClass || 'ui-tab-active'; 17 | 18 | $contents.eq(activeIndex).addClass('active'); 19 | $triggers.eq(activeIndex).addClass('active ' + activeTriggerClass); 20 | 21 | $triggers.on('click', function() { 22 | $('.active').removeClass('active').removeClass(activeTriggerClass); 23 | $(this).addClass('active ' + activeTriggerClass); 24 | $contents.eq($triggers.index(this)).addClass('active'); 25 | }); 26 | } 27 | -------------------------------------------------------------------------------- /package/tab/code/scq000/3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | .triggers{ 6 | width: 100px; 7 | height: 40px; 8 | line-height: 40px; 9 | text-align: center; 10 | border: 1px solid #eee; 11 | display: inline-block; 12 | } 13 | .contents { 14 | display: none; 15 | } 16 | .newtab > div.active { 17 | display: block; 18 | } 19 | .newtab > span.active { 20 | border-bottom: none; 21 | } 22 | 23 | .ui-tab-active { 24 | color:red; 25 | } 26 | -------------------------------------------------------------------------------- /package/tab/code/scq000/4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab第四阶段 6 | 7 | 8 | 9 | 10 | 11 |
12 | 1 13 | 2 14 | 3 15 | 16 |
a
17 |
b
18 |
c
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package/tab/code/scq000/4/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | tab({ 3 | element: '.newtab', 4 | triggerType: 'hover', 5 | triggers: '.triggers', 6 | contents: '.contents' 7 | }); 8 | }); 9 | 10 | function tab(options) { 11 | var $element = $(options.element); 12 | var $triggers = $(options.triggers); 13 | var $contents = $(options.contents); 14 | var activeIndex = options.activeIndex || 0; 15 | var activeTriggerClass = options.activeTriggerClass || 'ui-tab-active'; 16 | 17 | $contents.eq(activeIndex).addClass('active'); 18 | $triggers.eq(activeIndex).addClass('active ' + activeTriggerClass); 19 | var triggerType = options.triggerType === 'hover' ? 'mouseover' : 'click'; 20 | 21 | $triggers.on(triggerType, function() { 22 | $('.active').removeClass('active').removeClass(activeTriggerClass); 23 | $(this).addClass('active ' + activeTriggerClass); 24 | $contents.eq($triggers.index(this)).addClass('active'); 25 | }); 26 | 27 | } 28 | -------------------------------------------------------------------------------- /package/tab/code/scq000/4/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | .triggers{ 6 | width: 100px; 7 | height: 40px; 8 | line-height: 40px; 9 | text-align: center; 10 | border: 1px solid #eee; 11 | display: inline-block; 12 | } 13 | .contents { 14 | display: none; 15 | } 16 | .newtab > div.active { 17 | display: block; 18 | } 19 | .newtab > span.active { 20 | border-bottom: none; 21 | } 22 | 23 | .ui-tab-active { 24 | color:red; 25 | } 26 | -------------------------------------------------------------------------------- /package/tab/code/veena233/index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tab 6 | 39 | 40 | 41 |
42 | 47 |
    48 |
  • 昔我往矣,杨柳依依;今我来思,雨雪霏霏.(诗经·小雅·采薇) 译:回想当初出征时,杨柳轻轻飘动.如今回家的途中,雪花粉粉飘落.
    • 49 |
  • 知我者,谓我心忧,不知我者,谓我何求.（诗经·王风·黍离） 50 | 译：知道我的人,说我心烦忧；不知道的,问我有何求.高高在上的老天,是谁害我如此(指离家出走)?
    • 51 |
  • 一日不见,如三秋兮.（诗经·王风·采葛）
    • 52 |
53 | 73 |
74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /package/tab/code/whatlife/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | tab1 普通实现 7 | 45 | 46 | 47 | 48 |

TAB 选项卡 阶段1

49 |
50 |
51 | 1 52 | 2 53 | 3 54 |
a
55 |
b
56 |
c
57 |
58 |
59 | 60 | 61 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /package/tab/code/xuexb/README.md: -------------------------------------------------------------------------------- 1 | # Tab 选项卡 2 | 3 | ## 阶段1 4 | 5 | 在项目中常常会有一些`tab`类型的选项卡切换,通常我们这样写: [demo1](1/index.html) 6 | 7 | ## 阶段2 8 | 9 | 封装成一个 `tab` 函数: [demo2](2/index.html) 10 | 11 | ## 阶段3 12 | 13 | 添加 `activeIndex`默认触发索引,`activeTriggerClass`触发操作的样式类 参数: [demo3](3/index.html) 14 | 15 | ## 阶段4 16 | 17 | 添加`triggerType`事件类型参数: [demo4](4/index.html) 18 | 19 | ## 阶段5 20 | 21 | 添加`onSwitch`触发回调参数: [demo5](5/index.html) 22 | 23 | [在线浏览](http://github.xuexb.com/tab/) -------------------------------------------------------------------------------- /package/tab/code/zmen/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tab 选项卡（第一阶段） By zmen 6 | 44 | 45 | 46 |
47 |
    48 |
  • Tab1
    • 49 |
  • Tab2
    • 50 |
  • Tab3
    • 51 |
52 |
    53 |
  • The first page.
    • 54 |
  • And this is the second one.
    • 55 |
  • The final one.
    • 56 |
57 |
58 |

59 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 60 |

61 | 81 | 82 | -------------------------------------------------------------------------------- /package/tab/tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nimoc/learn-js/f88e70fd54b2aea33212efaa78f31a186ffd5213/package/tab/tab.png --------------------------------------------------------------------------------