mirror of
https://github.com/atom/atom.git
synced 2026-01-22 21:38:10 -05:00
Tabs
This commit is contained in:
Corey Johnson
@@ -1,86 +0,0 @@
|
||||
* { margin: 0; padding: 0; }
|
||||
body {
|
||||
font: 12px "Lucida Grande", Helvetica, Arial, serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
iframe { border: 0; }
|
||||
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#D8D7D8));
|
||||
padding: 3px 0 0 0;
|
||||
}
|
||||
|
||||
#tabs .add a {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
padding: 2px;
|
||||
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: #000 1px 1px 0;
|
||||
background: #d8d7d8;
|
||||
border: 1px solid #a0a0a0;
|
||||
border-bottom: none;
|
||||
|
||||
-webkit-border-top-right-radius: 10px 5px;
|
||||
-webkit-border-top-left-radius: 10px 5px;
|
||||
-webkit-box-shadow: inset 0 1px 0 white;
|
||||
}
|
||||
#tabs .add span {
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#tabs ul {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #a0a0a0;
|
||||
}
|
||||
#tabs ul li { display: inline; }
|
||||
|
||||
#tabs ul li.active a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 8px;
|
||||
|
||||
background: #eee;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
#tabs ul li a {
|
||||
display: block;
|
||||
float: left;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
height: 8px;
|
||||
|
||||
padding: 3px 50px 7px;
|
||||
margin: 0 -5px 0 0;
|
||||
color: #222;
|
||||
background: #d8d7d8;
|
||||
|
||||
-webkit-border-top-right-radius: 10px 20px;
|
||||
-webkit-border-top-left-radius: 10px 20px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 white;
|
||||
|
||||
border: 1px solid #a0a0a0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
-webkit-box-shadow: inset 0 1px 0 white;
|
||||
-moz-box-shadow: inset 0 1px 0 white;
|
||||
height: 97%;
|
||||
}
|
||||
@@ -1,38 +1,43 @@
|
||||
# {$} = require 'jQuery'
|
||||
# {Chrome} = require 'lib/osx'
|
||||
{Chrome, File, Dir, Process} = require 'lib/osx'
|
||||
|
||||
# awesome hover effect
|
||||
if false
|
||||
$('#tabs ul li:not(".active") a').mousemove (e) ->
|
||||
originalBG = $(this).css("background-color")
|
||||
x = e.pageX - @offsetLeft
|
||||
y = e.pageY - @offsetTop
|
||||
xy = x + " " + y
|
||||
exports.show = ->
|
||||
root = OSX.NSBundle.mainBundle.resourcePath + '/HTML/'
|
||||
html = OSX.NSString.stringWithContentsOfFile "#{root}/tabs.html"
|
||||
|
||||
bgWebKit = "-webkit-gradient(radial, #{xy}, 0, #{xy}, 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), #{originalBG}"
|
||||
Chrome.addPane('main', html)
|
||||
|
||||
$(this).css background: bgWebKit
|
||||
# awesome hover effect
|
||||
if false
|
||||
$('#tabs ul li:not(".active") a').mousemove (e) ->
|
||||
originalBG = $(this).css("background-color")
|
||||
x = e.pageX - @offsetLeft
|
||||
y = e.pageY - @offsetTop
|
||||
xy = x + " " + y
|
||||
|
||||
$('#tabs ul li:not(".active") a').mouseleave (e) ->
|
||||
$(this).removeAttr 'style'
|
||||
bgWebKit = "-webkit-gradient(radial, #{xy}, 0, #{xy}, 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), #{originalBG}"
|
||||
|
||||
# events
|
||||
$('#tabs ul li:not(.add) a').live 'click', ->
|
||||
$('#tabs ul .active').removeClass()
|
||||
$(this).parents('li').addClass 'active'
|
||||
$(this).css background: bgWebKit
|
||||
|
||||
idx = $('#tabs ul a').index this
|
||||
$('.content iframe').hide().eq(idx).show().focus()
|
||||
$('#tabs ul li:not(".active") a').mouseleave (e) ->
|
||||
$(this).removeAttr 'style'
|
||||
|
||||
false
|
||||
# events
|
||||
$('#tabs ul li:not(.add) a').live 'click', ->
|
||||
$('#tabs ul .active').removeClass()
|
||||
$(this).parents('li').addClass 'active'
|
||||
|
||||
$('#tabs .add a').click ->
|
||||
$('#tabs ul .active').removeClass()
|
||||
$('#tabs ul .add').before '<li><a href="#">untitled</a></li>'
|
||||
idx = $('#tabs ul a').index this
|
||||
$('.content iframe').hide().eq(idx).show().focus()
|
||||
|
||||
$('.content iframe').hide()
|
||||
$('.content').append '<iframe src="editor.html" width="100%" height="100%"></iframe>'
|
||||
false
|
||||
|
||||
$('#tabs ul .add').prev().addClass 'active'
|
||||
$('#tabs .add a').click ->
|
||||
$('#tabs ul .active').removeClass()
|
||||
$('#tabs ul .add').before '<li><a href="#">untitled</a></li>'
|
||||
|
||||
false
|
||||
$('.content iframe').hide()
|
||||
$('.content').append '<iframe src="editor.html" width="100%" height="100%"></iframe>'
|
||||
|
||||
$('#tabs ul .add').prev().addClass 'active'
|
||||
|
||||
false
|
||||
|
||||
115
HTML/tabs.html
115
HTML/tabs.html
@@ -1,24 +1,99 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body {
|
||||
font: 12px "Lucida Grande", Helvetica, Arial, serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
iframe { border: 0; }
|
||||
|
||||
<div id="tabs">
|
||||
<ul class="clearfix">
|
||||
<li class="active"><a href="#">untitled</a></li>
|
||||
<li class="add"><a href="#"><span>+</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
<div class="content">
|
||||
<iframe src="editor.html" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
#tabs {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#D8D7D8));
|
||||
padding: 3px 0 0 0;
|
||||
}
|
||||
|
||||
<script src="vendor/jquery.js"></script>
|
||||
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="lib/osx.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="lib/tabs.js"></script>
|
||||
#tabs .add a {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
</body>
|
||||
</html>
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
padding: 2px;
|
||||
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: #000 1px 1px 0;
|
||||
background: #d8d7d8;
|
||||
border: 1px solid #a0a0a0;
|
||||
border-bottom: none;
|
||||
|
||||
-webkit-border-top-right-radius: 10px 5px;
|
||||
-webkit-border-top-left-radius: 10px 5px;
|
||||
-webkit-box-shadow: inset 0 1px 0 white;
|
||||
}
|
||||
#tabs .add span {
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#tabs ul {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #a0a0a0;
|
||||
}
|
||||
#tabs ul li { display: inline; }
|
||||
|
||||
#tabs ul li.active a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 8px;
|
||||
|
||||
background: #eee;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
#tabs ul li a {
|
||||
display: block;
|
||||
float: left;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
height: 8px;
|
||||
|
||||
padding: 3px 50px 7px;
|
||||
margin: 0 -5px 0 0;
|
||||
color: #222;
|
||||
background: #d8d7d8;
|
||||
|
||||
-webkit-border-top-right-radius: 10px 20px;
|
||||
-webkit-border-top-left-radius: 10px 20px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 white;
|
||||
|
||||
border: 1px solid #a0a0a0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
-webkit-box-shadow: inset 0 1px 0 white;
|
||||
-moz-box-shadow: inset 0 1px 0 white;
|
||||
height: 97%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="tabs">
|
||||
<ul class="clearfix">
|
||||
<li class="active"><a href="#">untitled</a></li>
|
||||
<li class="add"><a href="#"><span>+</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<iframe src="editor.html" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user