|
526 | 526 | .CodeRay .change .change{color:#66f} |
527 | 527 | .CodeRay .head .head{color:#f4f} |
528 | 528 | </style> |
529 | | -<style> |
530 | | -.hidden { |
531 | | - display: none; |
532 | | -} |
533 | | - |
534 | | -.switch { |
535 | | - border-width: 1px 1px 0 1px; |
536 | | - border-style: solid; |
537 | | - border-color: #7a2518; |
538 | | - display: inline-block; |
539 | | -} |
540 | | - |
541 | | -.switch--item { |
542 | | - padding: 10px; |
543 | | - background-color: #ffffff; |
544 | | - color: #7a2518; |
545 | | - display: inline-block; |
546 | | - cursor: pointer; |
547 | | -} |
548 | | - |
549 | | -.switch--item.selected { |
550 | | - background-color: #7a2519; |
551 | | - color: #ffffff; |
552 | | -} |
553 | | - |
554 | | -</style> |
555 | | -<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script> |
556 | | -<script type="text/javascript"> |
557 | | -function addBlockSwitches() { |
558 | | - $('.primary').each(function() { |
559 | | - primary = $(this); |
560 | | - createSwitchItem(primary, createBlockSwitch(primary)).item.addClass("selected"); |
561 | | - primary.children('.title').remove(); |
562 | | - }); |
563 | | - $('.secondary').each(function(idx, node) { |
564 | | - secondary = $(node); |
565 | | - primary = findPrimary(secondary); |
566 | | - switchItem = createSwitchItem(secondary, primary.children('.switch')); |
567 | | - switchItem.content.addClass('hidden'); |
568 | | - findPrimary(secondary).append(switchItem.content); |
569 | | - secondary.remove(); |
570 | | - }); |
571 | | -} |
572 | | - |
573 | | -function createBlockSwitch(primary) { |
574 | | - blockSwitch = $('<div class="switch"></div>'); |
575 | | - primary.prepend(blockSwitch); |
576 | | - return blockSwitch; |
577 | | -} |
578 | | - |
579 | | -function findPrimary(secondary) { |
580 | | - candidate = secondary.prev(); |
581 | | - while (!candidate.is('.primary')) { |
582 | | - candidate = candidate.prev(); |
583 | | - } |
584 | | - return candidate; |
585 | | -} |
586 | | - |
587 | | -function createSwitchItem(block, blockSwitch) { |
588 | | - blockName = block.children('.title').text(); |
589 | | - content = block.children('.content').first().append(block.next('.colist')); |
590 | | - item = $('<div class="switch--item">' + blockName + '</div>'); |
591 | | - item.on('click', '', content, function(e) { |
592 | | - $(this).addClass('selected'); |
593 | | - $(this).siblings().removeClass('selected'); |
594 | | - e.data.siblings('.content').addClass('hidden'); |
595 | | - e.data.removeClass('hidden'); |
596 | | - }); |
597 | | - blockSwitch.append(item); |
598 | | - return {'item': item, 'content': content}; |
599 | | -} |
600 | | - |
601 | | -$(addBlockSwitches); |
602 | | - |
603 | | -</script> |
| 529 | +<style> |
| 530 | +.hidden { |
| 531 | + display: none; |
| 532 | +} |
| 533 | + |
| 534 | +.switch { |
| 535 | + border-width: 1px 1px 0 1px; |
| 536 | + border-style: solid; |
| 537 | + border-color: #7a2518; |
| 538 | + display: inline-block; |
| 539 | +} |
| 540 | + |
| 541 | +.switch--item { |
| 542 | + padding: 10px; |
| 543 | + background-color: #ffffff; |
| 544 | + color: #7a2518; |
| 545 | + display: inline-block; |
| 546 | + cursor: pointer; |
| 547 | +} |
| 548 | + |
| 549 | +.switch--item.selected { |
| 550 | + background-color: #7a2519; |
| 551 | + color: #ffffff; |
| 552 | +} |
| 553 | + |
| 554 | +</style> |
| 555 | +<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script> |
| 556 | +<script type="text/javascript"> |
| 557 | +function addBlockSwitches() { |
| 558 | + $('.primary').each(function() { |
| 559 | + primary = $(this); |
| 560 | + createSwitchItem(primary, createBlockSwitch(primary)).item.addClass("selected"); |
| 561 | + primary.children('.title').remove(); |
| 562 | + }); |
| 563 | + $('.secondary').each(function(idx, node) { |
| 564 | + secondary = $(node); |
| 565 | + primary = findPrimary(secondary); |
| 566 | + switchItem = createSwitchItem(secondary, primary.children('.switch')); |
| 567 | + switchItem.content.addClass('hidden'); |
| 568 | + findPrimary(secondary).append(switchItem.content); |
| 569 | + secondary.remove(); |
| 570 | + }); |
| 571 | +} |
| 572 | + |
| 573 | +function createBlockSwitch(primary) { |
| 574 | + blockSwitch = $('<div class="switch"></div>'); |
| 575 | + primary.prepend(blockSwitch); |
| 576 | + return blockSwitch; |
| 577 | +} |
| 578 | + |
| 579 | +function findPrimary(secondary) { |
| 580 | + candidate = secondary.prev(); |
| 581 | + while (!candidate.is('.primary')) { |
| 582 | + candidate = candidate.prev(); |
| 583 | + } |
| 584 | + return candidate; |
| 585 | +} |
| 586 | + |
| 587 | +function createSwitchItem(block, blockSwitch) { |
| 588 | + blockName = block.children('.title').text(); |
| 589 | + content = block.children('.content').first().append(block.next('.colist')); |
| 590 | + item = $('<div class="switch--item">' + blockName + '</div>'); |
| 591 | + item.on('click', '', content, function(e) { |
| 592 | + $(this).addClass('selected'); |
| 593 | + $(this).siblings().removeClass('selected'); |
| 594 | + e.data.siblings('.content').addClass('hidden'); |
| 595 | + e.data.removeClass('hidden'); |
| 596 | + }); |
| 597 | + blockSwitch.append(item); |
| 598 | + return {'item': item, 'content': content}; |
| 599 | +} |
| 600 | + |
| 601 | +$(addBlockSwitches); |
| 602 | + |
| 603 | +</script> |
604 | 604 |
|
605 | 605 | </head> |
606 | 606 | <body class="article"> |
|
0 commit comments