13 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/dialog/code/scq000/1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 | 我真的是标题啊
15 | ×
16 |
17 |
18 | 我是内容 我是内容
19 |
20 |
13 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段三/css/main.css:
--------------------------------------------------------------------------------
1 | /******reset******/
2 | html,body{
3 | padding:0px;
4 | margin: 0px;
5 | }
6 | /*******main.css*******/
7 | .newtab{
8 | width:500px;
9 | height:200px;
10 | margin: 50px auto;
11 | }
12 | .triggers{
13 | color:#058;
14 | font-size:24px;
15 | padding:4px 16px;
16 | cursor: pointer;
17 | border-bottom:2px solid #faa;
18 | }
19 | .active{
20 | border: 2px solid #faa;
21 | border-bottom: none!important;
22 | border-radius: 6px 6px 0 0;
23 | }
24 | .contents{
25 | font-size: 20px;
26 | padding-top: 20px;
27 | display: none;
28 | }
29 | p{
30 | width:100px;
31 | margin: 0px auto;
32 | }
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段二/css/main.css:
--------------------------------------------------------------------------------
1 | /******reset******/
2 | html,body{
3 | padding:0px;
4 | margin: 0px;
5 | }
6 | /*******main.css*******/
7 | .newtab{
8 | width:500px;
9 | height:200px;
10 | margin: 50px auto;
11 | }
12 | .triggers{
13 | color:#058;
14 | font-size:24px;
15 | padding:4px 16px;
16 | cursor: pointer;
17 | border-bottom:2px solid #faa;
18 | }
19 | .active{
20 | border: 2px solid #faa;
21 | border-bottom: none!important;
22 | border-radius: 6px 6px 0 0;
23 | }
24 | .contents{
25 | font-size: 20px;
26 | padding-top: 20px;
27 | display: none;
28 | }
29 | p{
30 | width:100px;
31 | margin: 0px auto;
32 | }
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段五/css/main.css:
--------------------------------------------------------------------------------
1 | /******reset******/
2 | html,body{
3 | padding:0px;
4 | margin: 0px;
5 | }
6 | /*******main.css*******/
7 | .newtab{
8 | width:500px;
9 | height:200px;
10 | margin: 50px auto;
11 | }
12 | .triggers{
13 | color:#058;
14 | font-size:24px;
15 | padding:4px 16px;
16 | cursor: pointer;
17 | border-bottom:2px solid #faa;
18 | }
19 | .active{
20 | border: 2px solid #faa;
21 | border-bottom: none!important;
22 | border-radius: 6px 6px 0 0;
23 | }
24 | .contents{
25 | font-size: 20px;
26 | padding-top: 20px;
27 | display: none;
28 | }
29 | p{
30 | width:100px;
31 | margin: 0px auto;
32 | }
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段四/css/main.css:
--------------------------------------------------------------------------------
1 | /******reset******/
2 | html,body{
3 | padding:0px;
4 | margin: 0px;
5 | }
6 | /*******main.css*******/
7 | .newtab{
8 | width:500px;
9 | height:200px;
10 | margin: 50px auto;
11 | }
12 | .triggers{
13 | color:#058;
14 | font-size:24px;
15 | padding:4px 16px;
16 | cursor: pointer;
17 | border-bottom:2px solid #faa;
18 | }
19 | .active{
20 | border: 2px solid #faa;
21 | border-bottom: none!important;
22 | border-radius: 6px 6px 0 0;
23 | }
24 | .contents{
25 | font-size: 20px;
26 | padding-top: 20px;
27 | display: none;
28 | }
29 | p{
30 | width:100px;
31 | margin: 0px auto;
32 | }
--------------------------------------------------------------------------------
/package/dialog/code/scq000/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 我真的是标题啊
14 |
15 |
16 | 我是内容 我是内容
17 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/package/dialog/code/scq000/3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 我真的是标题啊
13 |
14 |
15 |
16 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/package/dialog/code/scq000/4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 我真的是标题啊
13 |
14 |
15 |
16 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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/scq000/3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 我真的是标题啊
13 |
14 |
15 |
16 |
12 | 1
13 | 2
14 | 3
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/tab/code/scq000/4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
17 | b
18 | c
19 |
12 | 1
13 | 2
14 | 3
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/tab/code/scq000/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
17 | b
18 | c
19 |
12 | 1
13 | 2
14 | 3
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/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/tab/code/limingyang2012/阶段一/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
17 | b
18 | c
19 |
10 |
13 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/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 |
14 |
18 | 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
15 | 远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
16 | 参差荇菜，左右流之。窈窕淑女，寤寐求之。
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
17 | 千门万户曈曈日，总把新桃换旧符。
24 |
25 |
26 | [接受挑战](package/tab/)
27 |
28 | ## Dialog 弹出层
29 |
30 | 
31 |
32 | [接受挑战](package/dialog/)
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段三/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 | 草诗经元日
11 |
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段二/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 | 远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 | 参差荇菜，左右流之。窈窕淑女，寤寐求之。
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 | 千门万户曈曈日，总把新桃换旧符。
10 | 草诗经元日
11 |
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段五/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 | 远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 | 参差荇菜，左右流之。窈窕淑女，寤寐求之。
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 | 千门万户曈曈日，总把新桃换旧符。
10 | 草诗经元日
11 |
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/tab/code/limingyang2012/阶段四/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 | 远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 | 参差荇菜，左右流之。窈窕淑女，寤寐求之。
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 | 千门万户曈曈日，总把新桃换旧符。
10 | 草诗经元日
11 |
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/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/tab/code/lijinyao/tab-stage3/idnex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
13 | 远芳侵古道，晴翠接荒城。又送王孙去，萋萋满离别。
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
14 | 参差荇菜，左右流之。窈窕淑女，寤寐求之。
爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。
15 | 千门万户曈曈日，总把新桃换旧符。
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/package/tab/code/lijinyao/tab-stage4/idnex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 | item1
15 | item2
16 | item3
17 |
18 |
19 |
23 |
24 | content1
20 | content2
21 | content3
22 |
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/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 = "
13 |
14 | item1
15 | item2
16 | item3
17 |
18 |
19 |
23 |
24 | content1
20 | content2
21 | content3
22 | \
7 |
";
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/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/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/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/lijinyao/tab-stage1/idnex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | \
8 |
\
11 | I am title
\ 9 | \ 10 |\
12 |
\
14 | I am content
\ 13 |
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/package/tab/code/lijinyao/tab-stage2/idnex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 | item1
15 | item2
16 | item3
17 |
18 |
19 |
23 |
24 | content1
20 | content2
21 | content3
22 |
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/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/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/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/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.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/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/dialog/code/murphywuwu/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 | item1
15 | item2
16 | item3
17 |
18 |
19 |
23 |
24 | content1
20 | content2
21 | content3
22 | 出现
12 |
13 |
29 |
30 |
--------------------------------------------------------------------------------
/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/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
12 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/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/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/murphywuwu/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
18 |
19 |
20 |
24 | one
21 | two
22 | three
23 |
12 | tab1
13 | tab2
14 | tab3
15 |
16 |
20 |
21 |
22 |
29 |
30 |
--------------------------------------------------------------------------------
/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/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/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/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/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;ione
17 | two
18 | three
19 |
12 | tab1
13 | tab2
14 | tab3
15 |
16 |
20 |
21 |
22 |
23 |
32 |
--------------------------------------------------------------------------------
/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 = 'one
17 | two
18 | three
19 | 我真的是标题啊×
'+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/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/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/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/tab/code/murphywuwu/4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 | tab1
13 | tab2
14 | tab3
15 |
16 |
20 |
21 |
22 |
23 |
33 |
--------------------------------------------------------------------------------
/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/阶段三/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/阶段二/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/阶段四/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/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/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;ione
17 | two
18 | three
19 | 我真的是标题啊×
'+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/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 |
";
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/tab/code/murphywuwu/5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | \
18 |
\
21 | I am title
\ 19 | \ 20 |\
22 |
\
23 |
12 | tab1
13 | tab2
14 | tab3
15 |
16 |
20 |
21 |
22 |
23 |
41 |
--------------------------------------------------------------------------------
/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 = 'one
17 | two
18 | three
19 | '
25 | + '
';
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/README.md:
--------------------------------------------------------------------------------
1 | # Dialog 弹出层
2 |
3 | '
26 | + '
'
27 | + opts.title
28 | + '
'
29 | + ''
30 | + opts.content
31 | + '
'
32 | + ''
33 | + 'X'
34 | + '
'
35 | + '
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/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'
25 | + '
';
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/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/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/code/52cik/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | '
26 | + '
'
27 | + opts.title
28 | + '
'
29 | + ''
30 | + opts.content
31 | + '
'
32 | + ''
33 | + 'X'
34 | + '
'
35 | + '
24 |
25 |
31 |
32 |
33 |
46 |
47 |
--------------------------------------------------------------------------------
/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/coolzjy/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
26 |
30 | 我是标题
27 | 我是内容 我是内容
28 | ×
29 |
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 | \
25 |
";
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/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/tab/code/2319103827/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | \
26 |
\
29 | I am title
\ 27 | \ 28 |\
30 |
\
31 | 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/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 | + '
';
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/ColdXu/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | '
27 | + '
'
28 | + opts.title
29 | + '
'
30 | + ''
31 | + opts.content
32 | + '
'
33 | + ''
34 | + 'X'
35 | + '
'
36 | + '
41 |
47 |
48 |
70 |
71 |
--------------------------------------------------------------------------------
/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 = '
42 |
45 | dialog标题
43 | X
44 | 反倒是阿凡达是爱疯多少
46 | '
26 | + '
';
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/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(''
27 | + '
'
28 | + opts.title
29 | + '
'
30 | + ''
31 | + opts.content
32 | + '
'
33 | + ''
34 | + 'X'
35 | + '
'
36 | + '我真的是标题啊×
'+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/tab/code/ColdXu/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
43 |
54 |
70 |
71 |
--------------------------------------------------------------------------------
/package/dialog/code/52cik/2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
44 |
48 | tab1
45 | tab2
46 | tab3
47 |
49 |
53 | 我的tab1的内容
50 | 我的tab2的内容
51 | 我的tab3的内容
52 |
24 |
25 |
31 |
32 |
33 |
62 |
63 |
--------------------------------------------------------------------------------
/package/tab/code/Yeahax/1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
26 |
27 |
28 | ×
29 |
30 |
26 |
37 |
58 |
59 |
--------------------------------------------------------------------------------
/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 | '
27 | tab1
28 | tab2
29 | tab3
30 |
31 |
32 |
36 | i am tab 1
33 | i am tab 2
34 | i am tab 3
35 | ' +
12 | '
';
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/tab/code/52cik/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | '
13 | +option.title
14 | +'' +
15 | '
' +
16 | ''
17 | +option.content
18 | +'
' +
19 | '
21 |
32 |
33 |
22 | tab1
23 | tab2
24 | tab3
25 |
26 |
27 |
31 | 内容1
28 | 内容2
29 | 内容3
30 |
34 |
45 |
46 |
47 |
60 |
61 |
--------------------------------------------------------------------------------
/package/dialog/code/LastGun/dialog-stage-2/dialog.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
35 | tab1
36 | tab2
37 | tab3
38 |
39 |
40 |
44 | 内容1
41 | 内容2
42 | 内容3
43 | ' +
17 | '
';
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/tab/code/LastGun/stage-1/tab-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | '
18 | +option.title
19 | +'' +
20 | '
' +
21 | ''
22 | +option.content
23 | +'
' +
24 | '
52 |
53 | Home
54 | Profile
55 | Demo
56 |
57 |
58 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/package/tab/code/whatlife/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 123456
59 | 7890
60 | 不知道写什么了
61 | TAB 选项卡 阶段1
49 |
50 |
59 |
60 |
61 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/package/dialog/code/LastGun/dialog-stage-1/dialog.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
51 | 1
52 | 2
53 | 3
54 |
58 | a
55 | b
56 | c
57 |
60 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/package/tab/code/52cik/2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
61 | 我真是标题啊
62 |
63 |
64 | 我真是内容啊
65 |
19 | 1
20 | 2
21 | 3
22 |
23 |
27 |
28 | a
24 | b
25 | c
26 |
29 | 1
30 | 2
31 | 3
32 |
33 |
37 |
38 |
39 |
59 |
60 |
--------------------------------------------------------------------------------
/package/tab/code/LastGun/stage-2/tab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
34 | b
35 | c
36 |
52 |
53 | 1
54 | 2
55 | 3
56 |
57 |
58 |
62 |
63 |
64 |
65 |
66 |
73 |
--------------------------------------------------------------------------------
/package/tab/code/2319103827/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
59 | b
60 | c
61 | 35 | Tab 选项卡（第一阶段） By 2319103827 36 |
37 |
38 | 1
39 | 2
40 | 3
41 |
42 |
46 |
47 |
70 |
71 |
72 | 42 |
a
43 | b
44 | c
45 | 73 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 74 |
75 | 76 | -------------------------------------------------------------------------------- /package/tab/code/593273894/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
51 |
62 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/package/tab/code/LastGun/stage-3/tab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
52 | Home
53 | Profile
54 | Demo
55 |
56 |
57 |
61 | 离离原上草
58 | 一岁一枯荣
59 | 野火烧不尽
60 |
52 |
53 | 1
54 | 2
55 | 3
56 |
57 |
58 |
62 |
63 |
64 |
65 |
66 |
75 |
--------------------------------------------------------------------------------
/package/tab/code/LastGun/stage-4/tab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
59 | b
60 | c
61 |
52 |
53 | 1
54 | 2
55 | 3
56 |
57 |
58 |
62 |
63 |
64 |
65 |
66 |
76 |
--------------------------------------------------------------------------------
/package/tab/README.md:
--------------------------------------------------------------------------------
1 | # Tab 选项卡
2 |
3 | a
59 | b
60 | c
61 | 
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 |
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/dialog/code/xuexb/1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
29 | b
30 | c
31 | 13 |
br
14 |
15 |
16 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/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 | + '
';
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/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 | ''
13 | +option.title
14 | +''
15 | + '
'
16 | + ''
17 | +option.content
18 | +'
'
19 | + '' +
39 | '' +
40 | ' ' +
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 |
--------------------------------------------------------------------------------
/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 | 
12 |
13 | ## 安装 GitHub 客户端
14 |
15 | 下载 [GitHub Windows 离线安装包](http://static.nimojs.com/file/github/github-windows7.zip)
16 |
17 | 解压缩后打开 GitHub.exe
18 |
19 | 
20 |
21 |
22 | ## Clone 代码到本地
23 |
24 | 
25 |
26 |
27 | ## 编写代码
28 |
29 | 
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 | 
47 |
48 | 填写提交说明
49 |
50 | 
51 |
52 | 点击 COMMIT 按钮
53 |
54 | 同步代码
55 |
56 | 
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 | 
65 |
66 | 点击 Create pull request
67 |
68 | 
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/code/ColdXu/2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ' +
41 | title +
42 | '' +
43 | '
' +
44 | '' +
45 | content +
46 | '
' +
47 | '
41 |
47 |
48 |
94 |
95 |
--------------------------------------------------------------------------------
/package/tab/code/ColdXu/2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
42 |
45 | dialog标题
43 | X
44 | 反倒是阿凡达是爱疯多少
46 |
37 | tab1
38 | tab2
39 | tab3
40 | 我的tab1的内容
41 | 我的tab2的内容
42 | 我的tab3的内容
43 |
44 |
80 |
81 |
--------------------------------------------------------------------------------
/package/tab/code/veena233/index1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
42 |
47 |
74 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/package/dialog/code/LastGun/dialog-stage-3/dialog.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
48 |
- 昔我往矣,杨柳依依;今我来思,雨雪霏霏.(诗经·小雅·采薇) 译:回想当初出征时,杨柳轻轻飘动.如今回家的途中,雪花粉粉飘落. 49 |
- 知我者,谓我心忧,不知我者,谓我何求.（诗经·王风·黍离） 50 | 译：知道我的人,说我心烦忧；不知道的,问我有何求.高高在上的老天,是谁害我如此(指离家出走)? 51 |
- 一日不见,如三秋兮.（诗经·王风·采葛） 52 |
35 | Tab 选项卡（第一阶段） By 2319103827 36 |
37 |
38 | 1
39 | 2
40 | 3
41 |
42 |
46 |
47 |
72 |
73 |
74 | 42 |
a
43 | b
44 | c
45 | 75 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 76 |
77 | 78 | -------------------------------------------------------------------------------- /package/tab/code/593273894/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
51 |
62 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/package/dialog/code/LastGun/dialog-stage-4/dialog.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
52 | Home
53 | Profile
54 | Demo
55 |
56 |
57 |
61 | 离离原上草
58 | 一岁一枯荣
59 | 野火烧不尽
60 | ' +
28 | '' +
29 | ' ' +
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/tab/code/Yeahax/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ' +
30 | title +
31 | '' +
32 | '
' +
33 | '' +
34 | content +
35 | '
' +
36 | '
27 | 1
28 | 2
29 | 3
30 |
31 |
35 |
36 |
76 |
77 |
--------------------------------------------------------------------------------
/package/dialog/code/52cik/3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
32 | b
33 | c
34 |
25 |
26 |
32 |
33 |
34 |
84 |
85 |
--------------------------------------------------------------------------------
/package/dialog/code/veena233/index5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
31 | 我是标题
28 | 我是内容 我是内容
29 | ×
30 | 35 | Tab 选项卡（第一阶段） By 2319103827 36 |
37 |
38 | 1
39 | 2
40 | 3
41 |
42 |
46 |
47 |
75 |
76 |
77 | 42 |
a
43 | b
44 | c
45 | 78 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 79 |
80 | 81 | -------------------------------------------------------------------------------- /package/tab/code/ColdXu/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
37 | tab1
38 | tab2
39 | tab3
40 | 我的tab1的内容
41 | 我的tab2的内容
42 | 我的tab3的内容
43 |
44 |
82 |
83 |
--------------------------------------------------------------------------------
/package/tab/code/52cik/3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
22 | 1
23 | 2
24 | 3
25 |
26 |
30 |
31 | a
27 | b
28 | c
29 |
32 | 1
33 | 2
34 | 3
35 |
36 |
40 |
41 |
42 |
74 |
75 |
--------------------------------------------------------------------------------
/package/tab/code/langrren/1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | a
37 | b
38 | c
39 |
52 |
53 |
57 |
78 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/package/tab/code/LastGun/stage-5/tab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Home
54 | Profile
55 | Demo
56 |
58 |
64 |
77 |
65 |
70 |
76 | 66 | 尘劳回脱事非常，紧把绳头做一场。 67 | 不经一番寒彻骨，那得梅花扑鼻香. 68 |
69 |
52 |
53 | 1
54 | 2
55 | 3
56 |
57 |
58 |
62 |
63 |
64 |
65 |
66 |
85 |
--------------------------------------------------------------------------------
/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 = 'a
59 | b
60 | c
61 | ' +
41 | '' +
42 | ' ' +
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/tab/code/zmen/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ' +
43 | title +
44 | '' +
45 | '
' +
46 | '' + content + '
' +
47 | '
47 |
58 | -
48 |
- Tab1 49 |
- Tab2 50 |
- Tab3 51 |
-
53 |
- The first page. 54 |
- And this is the second one. 55 |
- The final one. 56 |
59 | learn-js: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。 60 |
61 | 81 | 82 | -------------------------------------------------------------------------------- /package/tab/code/rccoder/tab1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
50 |
63 |
77 |
78 |
--------------------------------------------------------------------------------
51 |
57 | -
52 |
- Home 53 |
- Profile 54 |
- Demo 55 |
58 |
62 | 离离原上草
59 | 一岁一枯荣
60 | 野火烧不尽
61 |