Skip to content

S
SkyWalking

apache / SkyWalking
上一次同步 1 年多

通知 302
Star 21345
Fork 6091
S
SkyWalking

体验新版 GitCode，发现更多精彩内容 >>

提交 43b7ef2b 编写于 作者: Z zhang.xin
浏览文件
操作

1.删除merge错误的样式和页面

上级 488def5f
展开全部 隐藏空白更改
内联 并排
Showing with 0 addition and 2801 deletion
javascripts/scale.fix.js 已删除 100644 → 0
浏览文件 @ 488def5f
fixScale = function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
};
\ No newline at end of file
sample-code/codeView.html 已删除 100644 → 0
浏览文件 @ 488def5f
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Sky Walking API Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="../stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="../stylesheets/github-light.css" media="screen">
</head>
<body style="font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;padding:0;font-size:16px;line-height:1.5">
<section class="page-header" style="background-image: url(../images/backgroud.png);padding: 0.5rem 1rem;text-align:center;">
<h2 style="color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.5">Sky Walking API Guide</h2>
</section>
<section class="main-content">
<h3>
<a id="useInSpring" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪注册在Spring中类实例的方法调用？
</h3>
<p>1.Spring配置文件头部，配置所需的命名空间</p>
<pre>
xmlns:skywalking="http://cloud.asiainfo.com/schema/skywalking"
xsi:schemaLocation="http://cloud.asiainfo.com/schema/skywalking
http://cloud.asiainfo.com/schema/skywalking/skywalking.xsd"</pre>
<p>典型Spring配置文件如下</p>
<pre>&lt;beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:skywalking="http://cloud.asiainfo.com/schema/skywalking"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://cloud.asiainfo.com/schema/skywalking
http://cloud.asiainfo.com/schema/skywalking/skywalking.xsd"&gt;</pre>
<p>2.Spring配置文件中，设置需要追踪包名、类名或方法名。可配置多个。</p>
<pre>
&lt;skywalking:trace packageExpression="com.ai.app.domain.test.*" classExpression="*"/&gt;
&lt;skywalking:trace packageExpression="com.ai.app.domain.test..*" classExpression="className*"/&gt;
</pre>
<p><span style="color:red">注意：对于方法的追踪，仅限于实例级的public方法。其他方法由于Java运行时原因，无法追踪。</span></p>
<p>3.通过Spring标注，或配置文件将TracingAspectBean注册到Spring Context上下文中</p>
<h3>
<a id="useInDubbo" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪dubbo调用？
</h3>
<p>这里的dubbo，专指阿里发布的，已停止维护的标准dubbo版本（<a href='http://dubbo.io'>dubbo.io</a>）。扩展版本dubbox请参考相关章节。</p>
<p>在客户端和服务端配置全局filter：swEnhanceFilter。</p>
<pre>
//客户端Spring配置文件
&lt;dubbo:consumer filter="swEnhanceFilter"/&gt;
//服务端Spring配置文件
&lt;dubbo:provider filter="swEnhanceFilter"/&gt;</pre>
<h3>
<a id="useInDubbox" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪dubbox 2.8.4 调用？
</h3>
<p>dubbox 2.8.4 较为符合dubbo的服务规范，这里指dubbox支持RpcContext中的attachment。追踪方式和dubbo相同。</p>
<p>在客户端和服务端配置全局filter：swEnhanceFilter。</p>
<pre>
//客户端Spring配置文件
&lt;dubbo:consumer filter="swEnhanceFilter"/&gt;
//服务端Spring配置文件
&lt;dubbo:provider filter="swEnhanceFilter"/&gt;</pre>
<h3>
<a id="useInDubbox283" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪dubbox 2.8.3 以及之前的调用？
</h3>
<p>由于引入dubbox，主要目的是使用rest+json协议，所以以下方案都是在此种调用模式下的解决方案。其他协议未测试，请谅解，望大家提供测试结果与反馈。</p>
<p>dubbox 2.8.3 以及之前版本不能正确的支持RpcContext中的attachment，存在BUG（2.8.4已修复）。采用扩展参数对象的方法支持追踪的传递性。</p>
<p><span style="color:red">注意：依然推荐升级到dubbox 2.8.4，此时能更好的进行追踪，并对程序侵入性更小。</span></p>
<p>1.在客户端和服务端配置全局filter：swEnhanceFilter。</p>
<pre>
//客户端Spring配置文件
&lt;dubbo:consumer filter="swEnhanceFilter"/&gt;
//服务端Spring配置文件
&lt;dubbo:provider filter="swEnhanceFilter"/&gt;</pre>
<p>2.在客户端和服务端启动时，开启dubbox 2.8.3之前版本的修复功能。在服务启动前调用如下代码，或将com.ai.cloud.skywalking.plugin.dubbox.bugfix.below283.BugFixAcitve注册到Spring中。</p>
<pre>
new com.ai.cloud.skywalking.plugin.dubbox.bugfix.below283.BugFixAcitve();</pre>
<p>3.dubbox调用参数包含javabean参数，并继承com.ai.cloud.skywalking.plugin.dubbox.bugfix.below283.SWBaseBean。<span style="color:red">只包含java基础类型（如：String、Integer等）的调用，无法支持追踪传递</span></p>
<p>4.客户端如果直接使用非dubbox客户端发起调用，需要在发送的参数中设置contextData。</p>
<h3>
<a id="useInMySQL" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪MySQL访问？
</h3>
<p>1.设置特定的JDBC Driver</p>
<pre>Driver="com.ai.cloud.skywalking.plugin.jdbc.mysql.MySQLTracingDriver"</pre>
<p>2.设置特定的JDBC URL</p>
<p></p>
<pre>jdbc.url=tracing:jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8</pre>
<h3>
<a id="useInJDBC" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪MySQL之外的其他JDBC？
</h3>
<p>1.轻松实现自定义的JDBC Driver扩展</p>
<pre>import java.sql.Driver;
import java.sql.DriverManager;
import java.sql.SQLException;
import com.ai.cloud.skywalking.plugin.jdbc.TracingDriver;
public class XXXDBTracingDriver extends TracingDriver {
static {
try {
DriverManager.registerDriver(new XXXDBTracingDriver());
} catch (SQLException e) {
throw new RuntimeException("register "
+ MySQLTracingDriver.class.getName() + " driver failure.");
}
}
/**
* 继承自TracingDriver，返回真实的Driver
*/
@Override
protected Driver registerTracingDriver() {
try {
//示例：return new com.mysql.jdbc.Driver();
return new Driver();
} catch (SQLException e) {
throw new RuntimeException("create Driver failure.");
}
}
}
</pre>
<p>2.设置新实现的JDBC Driver</p>
<pre>Driver="XXXDBTracingDriver"</pre>
<p>3.设置特定的JDBC URL</p>
<pre>jdbc.url=tracing:jdbc:xxxdb://localhost:3306/test</pre>
<h3>
<a id="useInWebFilter" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何追踪web服务端访问？
</h3>
<p>服务端使用Filter追踪web请求</p>
<pre> &lt;filter&gt;
&lt;filter-namer&gt;tracingFilter&lt;/filter-namer&gt;
&lt;filter-classr&gt;com.ai.cloud.skywalking.plugin.web.SkyWalkingFilter&lt;/filter-class&gt;
&lt;init-param&gt;
&lt;param-name&gt;tracing-name&lt;/param-name&gt;
&lt;!--分布式埋点信息，默认放在request的header中，key=SkyWalking-TRACING-NAME,可根据需要修改--&gt;
&lt;param-value&gt;SkyWalking-TRACING-NAME&lt;/param-value&gt;
&lt;/init-param&gt;
&lt;/filterr&gt;
&lt;filter-mappingr&gt;
&lt;filter-name&gt;tracingFilter&lt;/filter-namer&gt;
&lt;!--追踪路径应为MVC的请求路径，不建议包括js/css/图片等资源路径--&gt;
&lt;url-patternr&gt;/request-uri&lt;/url-patternr&gt;
&lt;/filter-mappingr&gt;</pre>
<h3>
<a id="useInHttpClient" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何通过HttpClient追踪HTTP调用？
</h3>
<p>使用SWTracingHttpClient封装所需的httpClient，此httpClient所有调用都会被监控</p>
<pre>HttpClient httpclient = new SWTracingHttpClient(new DefaultHttpClient());</pre>
<p>上下文将被存储在http request head，中，默认名称和SkyWalkingFilter保持一致。<br/>如果服务端使用dubbox 2.8.4 的提供的http-rest，请使用方法重载</p>
<pre>HttpClient httpclient = new SWTracingHttpClient(new DefaultHttpClient(), "Dubbo-Attachments");</pre>
<!--------------------->
<h3>
<a id="useInHttpClient" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>能通过哪些渠道在应用中发现traceid？
</h3>
<p>1.通过向全链路监控绑定业务字段。建立traceid和业务字段的对应关系，在调用链路中，可以直接展现业务字段信息。</p>
<pre>String businessKey = "phoneNumber:" + phoneNumber + ",resourceId:" + resourceId + ",mail:" + mail;
BusinessKeyAppender.setBusinessKey2Trace(businessKey);</pre>
<p>2.主动获取traceid，保存到应用程序数据库或其他存储中。</p>
<pre>Tracing.getTraceId();</pre>
<p>3.通过web应用的http调用入口，通过返回的header信息，找到此次调用的traceid。</p>
<p>4.通过log4j或log4j2的扩展，在每行本地日志中，输出traceid。</p>
<p>log4j1.x配置</p>
<pre>log4j.appender.A1.layout=com.ai.cloud.skywalking.plugin.log.log4j.v1.x.TraceIdPatternLayout
#%x为traceid的转义符
log4j.appender.A1.layout.ConversionPattern=[%x] %-d{yyyy-MM-dd HH:mm:ss.SSS} %c %n[%p] %n%m%n</pre>
<p>log4j2.x配置</p>
<pre>&lt;!--%tid为traceid的转义符--&gt;
&lt;PatternLayout pattern="%d{HH:mm:ss.SSS} [%tid] [%t] %-5level %logger{36} - %msg%n"/&gt;</pre>
<footer class="site-footer">
<span class="site-footer-owner"><a href="http://wu-sheng.github.io/sky-walking">Sky Walking</a> is maintained by <a href="https://github.com/wu-sheng">吴晟</a>，<a href="https://github.com/ascrutae">张鑫</a>，<a href="https://github.com/tanzhen84">谭真</a>.</span>
</footer>
</section>
</body>
</html>
\ No newline at end of file
sample-code/css/style.css 已删除 100755 → 0
浏览文件 @ 488def5f
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
/* Global properties ======================================================== */
body {
/* background:#212222; */
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
color:#fff;
}
html { min-width:1000px;}
html, body { height:100%;}
/* Global Structure ============================================================= */
.container {
margin: 0 auto;
position: relative;
width: 1000px;
font-size:.8125em;
}
/* Header */
header{
height:72px;
overflow:hidden;
background:url(../images/header-bg.gif) 0 0 repeat-x;
}
/*Gallery*/
#gallery {
height:496px;
overflow:hidden;
background:url(../images/gallerry-bg.gif) 0 0 repeat-x;
}
/* Content */
#content {
float: left;
width: 572px;
}
/* Sidebar */
aside{
float: left;
width: 302px;
margin-right:52px;
}
/* Footer */
footer{
padding:20px 0 22px 0;
border-top:5px solid #eee;
}
/* Left & Right alignment */
.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}
.col-1, .col-2, .col-3 { float:left;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}
.wrapper {
width:100%;
overflow:hidden;
}
/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 32px 37px 50px 37px; }
/*----- form defaults -----*/
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- other -----*/
figure { margin-bottom:18px;}
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:15px;
}
.img-box figure {
float:left;
margin:0 20px 0 0;
padding:0;
}
.extra-wrap {
overflow:hidden;
}
p {margin-bottom:18px;}
.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;
}
/*----- txt, links, lines, titles -----*/
a {
color:#f27f02;
outline:none;
}
a:hover{
text-decoration:none;
}
h1 {
font-size:34px;
line-height:1.2em;
color:#fff;
font-weight:normal;
background:url(../images/logo.jpg) no-repeat 0 0;
padding:6px 0 8px 69px;
position:absolute;
left:39px;
top:6px;
}
h1 a {
color:#fff;
text-decoration:none;
}
h2 {
font-size:30px;
line-height:1.2em;
font-weight:normal;
color:#212222;
margin-bottom:22px;
}
h2 span {
color:#8a8a8a;
}
h3 {
font-size:1em;
margin-bottom:6px;
}
h3 a { color:#242424; }
h3 a:hover {
text-shadow: 1px 1px 1px #888;
}
/*==================boxes====================*/
.main-box {
border-top:5px solid #eaeaea;
background:#fff;
width:100%;
}
.contacts {
padding-bottom:20px;
}
.contacts li {
width:100%;
overflow:hidden;
}
.contacts li strong {
float:left;
width:95px;
}
.list1 {
margin-left:12px;
padding-bottom:18px;
}
.list1 li {
background:url(../images/arrow1.gif) no-repeat 0 6px;
padding:0 0 0 12px;
}
/*===== header =====*/
header nav {
float:right;
}
header nav ul li {
float:left;
}
header nav ul li a {
font-size:22px;
color:#fff;
height:67px;
line-height:67px;
text-decoration:none;
width:101px;
text-align:center;
float:left;
background:#433b8f;
background-image: gradient(top, #383282, #484095); /* FF3.6 */
background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */
}
header nav ul li a.current, header nav ul li a:hover {
padding-bottom:5px;
}
header nav ul li:nth-of-type(2) a {
background:#0184cd;
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
}
header nav ul li:nth-of-type(3) a {
background:#7cbc19;
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
}
header nav ul li:nth-of-type(4) a {
background:#ffbc00;
background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */
}
header nav ul li:nth-of-type(5) a {
background:#f07502;
background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */
}
header nav ul li:nth-of-type(6) a {
background:#d00110;
background-image: -moz-linear-gradient(top, #d00110, #da0116); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d00110),color-stop(1, #da0116)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116')"; /* IE8 */
}
/*===== gallery =====*/
.roundabout-holder {
width:850px;
height:496px;
margin:0 auto;
}
.roundabout-moveable-item {
width: 646px;
height: 416px;
cursor: pointer;
border:3px solid #ccc;
border:3px solid rgba(0, 0, 0, 0.08);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.roundabout-moveable-item img{
width:100%;
}
.roundabout-in-focus {
border:3px solid rgba(0, 0, 0, 0.2);
}
/*===== content =====*/
#content {
}
#content img, aside img {
border:3px solid #ebebeb;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#content img:hover {
border-color:#bbb;
}
/*--- news list styles ---*/
.news li {
overflow:hidden;
position:relative;
padding:0 0 26px 84px;
}
.news li:last-child {
padding-bottom:0;
}
.news li figure {
width:59px;
height:59px;
background:url(../images/date-bg1.gif) no-repeat 0 0;
position:absolute;
left:0;
top:0;
text-align:center;
border:3px solid #ebebeb;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
font-size:10px;
color:#fff;
text-transform:uppercase;
}
.news li figure strong {
display:block;
font-size:30px;
line-height:1.2em;
margin-bottom:-7px;
padding-top:4px;
}
.news li:nth-of-type(4n+2) figure {
background:url(../images/date-bg2.gif) no-repeat 0 0;
}
.news li:nth-of-type(4n+3) figure {
background:url(../images/date-bg3.gif) no-repeat 0 0;
}
.news li:nth-of-type(4n+4) figure {
background:url(../images/date-bg4.gif) no-repeat 0 0;
}
.team-list li {
width:100%;
overflow:hidden;
padding-bottom:43px;
}
.team-list li:last-child {
padding-bottom:0;
}
.team-list li figure {
float:left;
margin:0 20px 0 0;
padding:0;
}
/*--- loopedSlider styles ---*/
/*
* Required
*/
#loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
#loopedSlider .slides { position:absolute; top:0; left:0; }
#loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
/*
* Optional
*/
#loopedSlider { width:295px; position:relative; clear:both; }
#loopedSlider .nav-controls {
width:100%;
overflow:hidden;
padding-top:10px;
}
#loopedSlider li {
display:inline;
}
#loopedSlider li a.previous {
float:left;
}
#loopedSlider li a.next {
float:right;
}
/*===== footer =====*/
footer {
color:#fff;
}
footer .fleft {
padding-left:40px;
}
footer .fright {
padding-right:40px;
}
/*----- forms -----*/
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
}
#contacts-form label {
float:left;
width:110px;
line-height:18px;
padding-bottom:6px;
font-weight:bold;
}
#contacts-form input {
width:205px;
padding:1px 0 1px 3px;
background:none;
border:1px solid #e5e5e5;
color:#616161;
float:left
}
#contacts-form input:invalid {
border-color:red;
}
#contacts-form textarea {
width:450px;
height:215px;
padding:1px 0 1px 3px;
background:none;
border:1px solid #e5e5e5;
color:#616161;
margin-bottom:12px;
overflow:auto;
float:left;
}
#contacts-form div:last-child {
padding-left:110px;
}
/*==========================================*/
\ No newline at end of file
sample-code/js/gallery_init.js 已删除 100755 → 0
浏览文件 @ 488def5f
$(document).ready(function() {
$('#myRoundabout').roundabout({
shape: 'figure8',
minOpacity: 1
});
});
\ No newline at end of file
sample-code/js/jquery-1.4.2.min.js 已删除 100755 → 0
浏览文件 @ 488def5f
此差异已折叠。
sample-code/js/roundabout.js 已删除 100755 → 0
浏览文件 @ 488def5f
/**
* jQuery Roundabout - v1.1
* http://fredhq.com/projects/roundabout/
*
* Moves list-items of enabled ordered and unordered lists long
* a chosen path. Includes the default "lazySusan" path, that
* moves items long a spinning turntable.
*
* Terms of Use // jQuery Roundabout
*
* Open source under the BSD license
*
* Copyright (c) 2010, Fred LeBlanc
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* - Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* - Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials provided
* with the distribution.
* - Neither the name of the author nor the names of its contributors
* may be used to endorse or promote products derived from this
* software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
// creates a default shape to be used for pathing
jQuery.extend({
roundabout_shape: {
def: 'lazySusan',
lazySusan: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
}
}
});
jQuery.fn.roundabout = function() {
var options = (typeof arguments[0] != 'object') ? {} : arguments[0];
// set options and fill in defaults
options = {
bearing: (typeof options.bearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.bearing % 360.0),
tilt: (typeof options.tilt == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.tilt),
minZ: (typeof options.minZ == 'undefined') ? 100 : parseInt(options.minZ, 10),
maxZ: (typeof options.maxZ == 'undefined') ? 400 : parseInt(options.maxZ, 10),
minOpacity: (typeof options.minOpacity == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minOpacity),
maxOpacity: (typeof options.maxOpacity == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxOpacity),
minScale: (typeof options.minScale == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minScale),
maxScale: (typeof options.maxScale == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxScale),
duration: (typeof options.duration == 'undefined') ? 600 : parseInt(options.duration, 10),
btnNext: options.btnNext || null,
btnPrev: options.btnPrev || null,
easing: options.easing || 'swing',
clickToFocus: (options.clickToFocus !== false),
focusBearing: (typeof options.focusBearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.focusBearing % 360.0),
shape: options.shape || 'lazySusan',
debug: options.debug || false,
childSelector: options.childSelector || 'li',
startingChild: (typeof options.startingChild == 'undefined') ? null : parseInt(options.startingChild, 10),
reflect: (typeof options.reflect == 'undefined' || options.reflect === false) ? false : true
};
// assign things
this.each(function(i) {
var ref = jQuery(this);
var period = jQuery.roundabout_toFloat(360.0 / ref.children(options.childSelector).length);
var startingBearing = (options.startingChild === null) ? options.bearing : options.startingChild * period;
// set starting styles
ref
.addClass('roundabout-holder')
.css('padding', 0)
.css('position', 'relative')
.css('z-index', options.minZ);
// set starting options
ref.data('roundabout', {
'bearing': startingBearing,
'tilt': options.tilt,
'minZ': options.minZ,
'maxZ': options.maxZ,
'minOpacity': options.minOpacity,
'maxOpacity': options.maxOpacity,
'minScale': options.minScale,
'maxScale': options.maxScale,
'duration': options.duration,
'easing': options.easing,
'clickToFocus': options.clickToFocus,
'focusBearing': options.focusBearing,
'animating': 0,
'childInFocus': -1,
'shape': options.shape,
'period': period,
'debug': options.debug,
'childSelector': options.childSelector,
'reflect': options.reflect
});
// bind click events
if (options.clickToFocus === true) {
ref.children(options.childSelector).each(function(i) {
jQuery(this).click(function(e) {
var degrees = (options.reflect === true) ? 360.0 - (period * i) : period * i;
degrees = jQuery.roundabout_toFloat(degrees);
if (!jQuery.roundabout_isInFocus(ref, degrees)) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateAngleToFocus(degrees);
}
return false;
}
});
});
}
// bind next buttons
if (options.btnNext) {
jQuery(options.btnNext).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToNextChild();
}
return false;
});
}
// bind previous buttons
if (options.btnPrev) {
jQuery(options.btnPrev).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToPreviousChild();
}
return false;
});
}
});
// start children
this.roundabout_startChildren();
// callback once ready
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_startChildren = function() {
this.each(function(i) {
var ref = jQuery(this);
var data = ref.data('roundabout');
var children = ref.children(data.childSelector);
children.each(function(i) {
var degrees = (data.reflect === true) ? 360.0 - (data.period * i) : data.period * i;
// apply classes and css first
jQuery(this)
.addClass('roundabout-moveable-item')
.css('position', 'absolute');
// then measure
jQuery(this).data('roundabout', {
'startWidth': jQuery(this).width(),
'startHeight': jQuery(this).height(),
'startFontSize': parseInt(jQuery(this).css('font-size'), 10),
'degrees': degrees
});
});
ref.roundabout_updateChildPositions();
});
return this;
};
jQuery.fn.roundabout_setTilt = function(newTilt) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = newTilt;
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_setBearing = function(newBearing) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_toFloat(newBearing % 360, 2);
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustBearing = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_getBearing(jQuery(this)) + delta;
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustTilt = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = jQuery.roundabout_toFloat(jQuery(this).roundabout_get('tilt') + delta);
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_animateToBearing = function(bearing) {
bearing = jQuery.roundabout_toFloat(bearing);
var currentTime = new Date();
var duration = (typeof arguments[1] == 'undefined') ? null : arguments[1];
var easingType = (typeof arguments[2] == 'undefined') ? null : arguments[2];
var passedData = (typeof arguments[3] !== 'object') ? null : arguments[3];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout'), timer, easingFn, newBearing;
var thisDuration = (duration === null) ? data.duration : duration;
var thisEasingType = (easingType !== null) ? easingType : data.easing || 'swing';
if (passedData === null) {
passedData = {
timerStart: currentTime,
start: jQuery.roundabout_getBearing(ref),
totalTime: thisDuration
};
}
timer = currentTime - passedData.timerStart;
if (timer < thisDuration) {
data.animating = 1;
if (typeof jQuery.easing.def == 'string') {
easingFn = jQuery.easing[thisEasingType] || jQuery.easing[jQuery.easing.def];
newBearing = easingFn(null, timer, passedData.start, bearing - passedData.start, passedData.totalTime);
} else {
newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing - passedData.start, passedData.totalTime);
}
ref.roundabout_setBearing(newBearing, function() { ref.roundabout_animateToBearing(bearing, thisDuration, thisEasingType, passedData); });
} else {
bearing = (bearing < 0) ? bearing + 360 : bearing % 360;
data.animating = 0;
ref.roundabout_setBearing(bearing);
}
});
return this;
};
jQuery.fn.roundabout_animateToDelta = function(delta) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
delta = jQuery.roundabout_getBearing(jQuery(this)) + jQuery.roundabout_toFloat(delta);
jQuery(this).roundabout_animateToBearing(delta, duration, easing);
});
return this;
};
jQuery.fn.roundabout_animateToChild = function(childPos) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
if (data.childInFocus !== childPos && data.animating === 0) {
var child = jQuery(ref.children(data.childSelector)[childPos]);
ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_animateToNearbyChild = function(passedArgs, which) {
var duration = passedArgs[0], easing = passedArgs[1];
this.each(function(i) {
var data = jQuery(this).data('roundabout');
var bearing = jQuery.roundabout_toFloat(360.0 - jQuery.roundabout_getBearing(jQuery(this)));
var period = data.period, j = 0, range;
var reflect = data.reflect;
var length = jQuery(this).children(data.childSelector).length;
bearing = (reflect === true) ? bearing % 360.0 : bearing;
if (data.animating === 0) {
// if we're not reflecting and we're moving to next or
// we are reflecting and we're moving previous
if ((reflect === false && which === 'next') || (reflect === true && which !== 'next')) {
bearing = (bearing === 0) ? 360 : bearing;
// counterclockwise
while (true && j < length) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing <= range.upper && bearing > range.lower) {
jQuery(this).roundabout_animateToDelta(bearing - range.lower, duration, easing);
break;
}
j++;
}
} else {
// clockwise
while (true) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing >= range.lower && bearing < range.upper) {
jQuery(this).roundabout_animateToDelta(bearing - range.upper, duration, easing);
break;
}
j++;
}
}
}
});
return this;
};
jQuery.fn.roundabout_animateToNextChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'next');
};
jQuery.fn.roundabout_animateToPreviousChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'previous');
};
// moves a given angle to the focus by the shortest means possible
jQuery.fn.roundabout_animateAngleToFocus = function(target) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var delta = jQuery.roundabout_getBearing(jQuery(this)) - target;
delta = (Math.abs(360.0 - delta) < Math.abs(0.0 - delta)) ? 360.0 - delta : 0.0 - delta;
delta = (delta > 180) ? -(360.0 - delta) : delta;
if (delta !== 0) {
jQuery(this).roundabout_animateToDelta(delta, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_updateChildPositions = function() {
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
var inFocus = -1;
var info = {
bearing: jQuery.roundabout_getBearing(ref),
tilt: data.tilt,
stage: { width: Math.floor(ref.width() * 0.9), height: Math.floor(ref.height() * 0.9) },
animating: data.animating,
inFocus: data.childInFocus,
focusBearingRad: jQuery.roundabout_degToRad(data.focusBearing),
shape: jQuery.roundabout_shape[data.shape] || jQuery.roundabout_shape[jQuery.roundabout_shape.def]
};
info.midStage = { width: info.stage.width / 2, height: info.stage.height / 2 };
info.nudge = { width: info.midStage.width + info.stage.width * 0.05, height: info.midStage.height + info.stage.height * 0.05 };
info.zValues = { min: data.minZ, max: data.maxZ, diff: data.maxZ - data.minZ };
info.opacity = { min: data.minOpacity, max: data.maxOpacity, diff: data.maxOpacity - data.minOpacity };
info.scale = { min: data.minScale, max: data.maxScale, diff: data.maxScale - data.minScale };
// update child positions
ref.children(data.childSelector).each(function(i) {
if (jQuery.roundabout_updateChildPosition(jQuery(this), ref, info, i) && info.animating === 0) {
inFocus = i;
jQuery(this).addClass('roundabout-in-focus');
} else {
jQuery(this).removeClass('roundabout-in-focus');
}
});
// update status of who is in focus
if (inFocus !== info.inFocus) {
jQuery.roundabout_triggerEvent(ref, info.inFocus, 'blur');
if (inFocus !== -1) {
jQuery.roundabout_triggerEvent(ref, inFocus, 'focus');
}
data.childInFocus = inFocus;
}
});
return this;
};
//----------------
jQuery.roundabout_getBearing = function(el) {
return jQuery.roundabout_toFloat(el.data('roundabout').bearing) % 360;
};
jQuery.roundabout_degToRad = function(degrees) {
return (degrees % 360.0) * Math.PI / 180.0;
};
jQuery.roundabout_isInFocus = function(el, target) {
return (jQuery.roundabout_getBearing(el) % 360 === (target % 360));
};
jQuery.roundabout_triggerEvent = function(el, child, eventType) {
return (child < 0) ? this : jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType);
};
jQuery.roundabout_toFloat = function(number) {
number = Math.round(parseFloat(number) * 1000) / 1000;
return parseFloat(number.toFixed(2));
};
jQuery.roundabout_updateChildPosition = function(child, container, info, childPos) {
var ref = jQuery(child), data = ref.data('roundabout'), out = [];
var rad = jQuery.roundabout_degToRad((360.0 - ref.data('roundabout').degrees) + info.bearing);
// adjust radians to be between 0 and Math.PI * 2
while (rad < 0) {
rad = rad + Math.PI * 2;
}
while (rad > Math.PI * 2) {
rad = rad - Math.PI * 2;
}
var factors = info.shape(rad, info.focusBearingRad, info.tilt); // obj with x, y, z, and scale values
// correct
factors.scale = (factors.scale > 1) ? 1 : factors.scale;
factors.adjustedScale = (info.scale.min + (info.scale.diff * factors.scale)).toFixed(4);
factors.width = (factors.adjustedScale * data.startWidth).toFixed(4);
factors.height = (factors.adjustedScale * data.startHeight).toFixed(4);
// alter item
ref
.css('left', ((factors.x * info.midStage.width + info.nudge.width) - factors.width / 2.0).toFixed(1) + 'px')
.css('top', ((factors.y * info.midStage.height + info.nudge.height) - factors.height / 2.0).toFixed(1) + 'px')
.css('width', factors.width + 'px')
.css('height', factors.height + 'px')
.css('opacity', (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))
.css('z-index', Math.round(info.zValues.min + (info.zValues.diff * factors.z)))
.css('font-size', (factors.adjustedScale * data.startFontSize).toFixed(2) + 'px')
.attr('current-scale', factors.adjustedScale);
if (container.data('roundabout').debug === true) {
out.push('<div style="font-weight: normal; font-size: 10px; padding: 2px; width: ' + ref.css('width') + '; background-color: #ffc;">');
out.push('<strong style="font-size: 12px; white-space: nowrap;">Child ' + childPos + '</strong><br />');
out.push('<strong>left:</strong> ' + ref.css('left') + '<br /><strong>top:</strong> ' + ref.css('top') + '<br />');
out.push('<strong>width:</strong> ' + ref.css('width') + '<br /><strong>opacity:</strong> ' + ref.css('opacity') + '<br />');
out.push('<strong>z-index:</strong> ' + ref.css('z-index') + '<br /><strong>font-size:</strong> ' + ref.css('font-size') + '<br />');
out.push('<strong>scale:</strong> ' + ref.attr('current-scale'));
out.push('</div>');
ref.html(out.join(''));
}
return jQuery.roundabout_isInFocus(container, ref.data('roundabout').degrees);
};
\ No newline at end of file
sample-code/js/roundabout_shapes.js 已删除 100755 → 0
浏览文件 @ 488def5f
/**
* jQuery Roundabout Shapes v1.1
* http://fredhq.com/projects/roundabout-shapes/
*
* Provides additional paths along which items can move for the
* jQuery Roundabout plugin (v1.0+).
*
* Terms of Use // jQuery Roundabout Shapes
*
* Open source under the BSD license
*
* Copyright (c) 2009, Fred LeBlanc
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* - Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* - Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials provided
* with the distribution.
* - Neither the name of the author nor the names of its contributors
* may be used to endorse or promote products derived from this
* software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
jQuery.extend(jQuery.roundabout_shape,
{
theJuggler: function(r, a, t) {
return {
x: Math.sin(r + a),
y: Math.tan(Math.exp(Math.log(r)) + a) / (t - 1),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
figure8: function(r, a, t) {
return {
x: Math.sin(r * 2 + a),
y: (Math.sin(r + Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
waterWheel: function(r, a, t) {
return {
x: (Math.sin(r + Math.PI/2 + a) / 8) * t,
y: Math.sin(r + a) / (Math.PI/2),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
square: function(r, a, t) {
var sq_x, sq_y, sq_z;
if (r <= Math.PI/2) {
sq_x = (2/Math.PI) * r;
sq_y = -(2/Math.PI) * r + 1;
sq_z = -(1/Math.PI) * r + 1;
} else if (r > Math.PI/2 && r <= Math.PI) {
sq_x = -(2/Math.PI) * r + 2;
sq_y = -(2/Math.PI) * r + 1;
sq_z = -(1/Math.PI) * r + 1;
} else if (r > Math.PI && r <= (3 * Math.PI) / 2) {
sq_x = -(2/Math.PI) * r + 2;
sq_y = (2/Math.PI) * r - 3;
sq_z = (1/Math.PI) * r - 1;
} else {
sq_x = (2/Math.PI) * r - 4;
sq_y = (2/Math.PI) * r - 3;
sq_z = (1/Math.PI) * r - 1;
}
return {
x: sq_x,
y: sq_y * t,
z: sq_z,
scale: sq_z
}
},
conveyorBeltLeft: function(r, a, t) {
return {
x: -Math.cos(r + a),
y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.sin(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
conveyorBeltRight: function(r, a, t) {
return {
x: Math.cos(r + a),
y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.sin(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
goodbyeCruelWorld: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.tan(r + 3*Math.PI/2 + a) / 8) * (t + 0.5),
z: (Math.sin(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
diagonalRingLeft: function(r, a, t) {
return {
x: Math.sin(r + a),
y: -Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
diagonalRingRight: function(r, a, t) {
return {
x: Math.sin(r + a),
y: Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
rollerCoaster: function(r, a, t) {
return {
x: Math.sin(r + a),
y: Math.sin((2 + t) * r),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
}
},
tearDrop: function(r, a, t) {
return {
x: Math.sin(r + a),
y: -Math.sin(r/2 + t) + 0.35,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
}
}
});
\ No newline at end of file
sample-code/uiView.html 已删除 100755 → 0
浏览文件 @ 488def5f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Scene UI Preview</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/roundabout.js"></script>
<script type="text/javascript" src="js/roundabout_shapes.js"></script>
<script type="text/javascript" src="js/gallery_init.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/ie9.js"></script>
<![endif]-->
</head>
<body style="font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;padding:0;font-size:16px;line-height:1.5">
<section class="page-header" style="background-image: url(../images/backgroud.png);padding: 0.5rem 1rem;text-align:center;">
<h2 style="color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1.5">Sky Walking UI Preview</h2>
</section>
<section class="main-content">
<section id="gallery">
<div class="container">
<ul id="myRoundabout">
<li><img src="images/skywalkingClusterDeploy.jpeg" alt=""></li>
<li><img src="images/traceLogView.jpeg" alt=""></li>
<li><img src="images/AlarmMailSample.jpeg" alt=""></li>
<li><img src="images/traceErrorLogView.jpeg" alt=""></li>
<li><img src="images/sampleAppClusterView.jpeg" alt=""></li>
</ul>
</div>
</section>
<footer class="site-footer">
<span class="site-footer-owner">
<a href="http://wu-sheng.github.io/sky-walking">Sky Walking</a> is maintained by <a href="https://github.com/wu-sheng">吴晟</a>，<a href="https://github.com/ascrutae">张鑫</a>，<a href="https://github.com/tanzhen84">谭真</a>.</span>
</footer>
</section>
</body>
</html>
<style type="text/css">
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top: solid 1px #eff0f1;
color: #606c71;
}
.site-footer-owner {
display: block;
font-weight: bold;
text-align:center;
}
a {
color: #1e6bb8;
text-decoration: none; }
a:hover {
text-decoration: underline; }
</style>
\ No newline at end of file
stylesheets/github-dark.css 已删除 100644 → 0
浏览文件 @ 488def5f
/*
Copyright 2014 GitHub Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.pl-c /* comment */ {
color: #969896;
}
.pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
.pl-s .pl-v /* string variable */ {
color: #0099cd;
}
.pl-e /* entity */,
.pl-en /* entity.name */ {
color: #9774cb;
}
.pl-s .pl-s1 /* string source */,
.pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
color: #ddd;
}
.pl-ent /* entity.name.tag */ {
color: #7bcc72;
}
.pl-k /* keyword, storage, storage.type */ {
color: #cc2372;
}
.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
.pl-s /* string */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */ {
color: #3c66e2;
}
.pl-v /* variable */ {
color: #fb8764;
}
.pl-id /* invalid.deprecated */ {
color: #e63525;
}
.pl-ii /* invalid.illegal */ {
background-color: #e63525;
color: #f8f8f8;
}
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
color: #7bcc72;
font-weight: bold;
}
.pl-ml /* markup.list */ {
color: #c26b2b;
}
.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
color: #264ec5;
font-weight: bold;
}
.pl-mq /* markup.quote */ {
color: #00acac;
}
.pl-mi /* markup.italic */ {
color: #ddd;
font-style: italic;
}
.pl-mb /* markup.bold */ {
color: #ddd;
font-weight: bold;
}
.pl-md /* markup.deleted, meta.diff.header.from-file */ {
background-color: #ffecec;
color: #bd2c00;
}
.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
background-color: #eaffea;
color: #55a532;
}
.pl-mdr /* meta.diff.range */ {
color: #9774cb;
font-weight: bold;
}
.pl-mo /* meta.output */ {
color: #264ec5;
}
stylesheets/github-light.css 已删除 100644 → 0
浏览文件 @ 488def5f
/*
Copyright 2014 GitHub Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.pl-c /* comment */ {
color: #969896;
}
.pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
.pl-s .pl-v /* string variable */ {
color: #0086b3;
}
.pl-e /* entity */,
.pl-en /* entity.name */ {
color: #795da3;
}
.pl-s .pl-s1 /* string source */,
.pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
color: #333;
}
.pl-ent /* entity.name.tag */ {
color: #63a35c;
}
.pl-k /* keyword, storage, storage.type */ {
color: #a71d5d;
}
.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
.pl-s /* string */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */ {
color: #183691;
}
.pl-v /* variable */ {
color: #ed6a43;
}
.pl-id /* invalid.deprecated */ {
color: #b52a1d;
}
.pl-ii /* invalid.illegal */ {
background-color: #b52a1d;
color: #f8f8f8;
}
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
color: #63a35c;
font-weight: bold;
}
.pl-ml /* markup.list */ {
color: #693a17;
}
.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
color: #1d3e81;
font-weight: bold;
}
.pl-mq /* markup.quote */ {
color: #008080;
}
.pl-mi /* markup.italic */ {
color: #333;
font-style: italic;
}
.pl-mb /* markup.bold */ {
color: #333;
font-weight: bold;
}
.pl-md /* markup.deleted, meta.diff.header.from-file */ {
background-color: #ffecec;
color: #bd2c00;
}
.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
background-color: #eaffea;
color: #55a532;
}
.pl-mdr /* meta.diff.range */ {
color: #795da3;
font-weight: bold;
}
.pl-mo /* meta.output */ {
color: #1d3e81;
}
stylesheets/normalize.css 已删除 100644 → 0
浏览文件 @ 488def5f
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */ /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
stylesheets/styles.css 已删除 100644 → 0
浏览文件 @ 488def5f
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
html {
background: #6C7989;
background: #6c7989 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7989), color-stop(100%, #434b55)) fixed;
background: #6c7989 -webkit-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -moz-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -o-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -ms-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 linear-gradient(#6c7989, #434b55) fixed;
}
body {
padding: 50px 0;
margin: 0;
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
font-weight: 300;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy82LzEygrTcTAAAAFRJREFUSIljfPDggZRf5RIGGNjUHsNATz6jXmSL1Kb2GLiAX+USBnrymRgGGDCORgFmoNAXjEbBaBSMRsFoFIxGwWgUjEbBaBSMRsFoFIxGwWgUAABYNujumib3wAAAAABJRU5ErkJggg==') fixed;
}
.wrapper {
width: 640px;
margin: 0 auto;
background: #DEDEDE;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
}
header, section, footer {
display: block;
}
a {
color: #069;
text-decoration: none;
}
p {
margin: 0 0 20px;
padding: 0;
}
strong {
color: #222;
font-weight: 700;
}
header {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #C6EAFA;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ddfbfc), color-stop(100%, #c6eafa));
background: -webkit-linear-gradient(#ddfbfc, #c6eafa);
background: -moz-linear-gradient(#ddfbfc, #c6eafa);
background: -o-linear-gradient(#ddfbfc, #c6eafa);
background: -ms-linear-gradient(#ddfbfc, #c6eafa);
background: linear-gradient(#ddfbfc, #c6eafa);
position: relative;
padding: 15px 20px;
border-bottom: 1px solid #B2D2E1;
}
header h1 {
margin: 0;
padding: 0;
font-size: 24px;
line-height: 1.2;
color: #069;
text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
}
header.without-description h1 {
margin: 10px 0;
}
header p {
margin: 0;
color: #61778B;
width: 300px;
font-size: 13px;
}
header p.view {
display: none;
font-weight: 700;
text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
-webkit-font-smoothing: antialiased;
}
header p.view a {
color: #06c;
}
header p.view small {
font-weight: 400;
}
header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 1;
right: 20px;
top: 20px;
height: 38px;
padding: 1px 0;
background: #5198DF;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77b9fb), color-stop(100%, #3782cd));
background: -webkit-linear-gradient(#77b9fb, #3782cd);
background: -moz-linear-gradient(#77b9fb, #3782cd);
background: -o-linear-gradient(#77b9fb, #3782cd);
background: -ms-linear-gradient(#77b9fb, #3782cd);
background: linear-gradient(#77b9fb, #3782cd);
border-radius: 5px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
-moz-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
width: auto;
}
header ul:before {
content: '';
position: absolute;
z-index: -1;
left: -5px;
top: -4px;
right: -5px;
bottom: -6px;
background: rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
}
header ul li {
width: 79px;
float: left;
border-right: 1px solid #3A7CBE;
height: 38px;
}
header ul li.single {
border: none;
}
header ul li + li {
width: 78px;
border-left: 1px solid #8BBEF3;
}
header ul li + li + li {
border-right: none;
width: 79px;
}
header ul a {
line-height: 1;
font-size: 11px;
color: #fff;
color: rgba(255, 255, 255, 0.8);
display: block;
text-align: center;
font-weight: 400;
padding-top: 6px;
height: 40px;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
}
header ul a strong {
font-size: 14px;
display: block;
color: #fff;
-webkit-font-smoothing: antialiased;
}
section {
padding: 15px 20px;
font-size: 15px;
border-top: 1px solid #fff;
background: -webkit-gradient(linear, 50% 0%, 50% 700, color-stop(0%, #fafafa), color-stop(100%, #dedede));
background: -webkit-linear-gradient(#fafafa, #dedede 700px);
background: -moz-linear-gradient(#fafafa, #dedede 700px);
background: -o-linear-gradient(#fafafa, #dedede 700px);
background: -ms-linear-gradient(#fafafa, #dedede 700px);
background: linear-gradient(#fafafa, #dedede 700px);
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
padding: 0;
margin: 0 0 20px;
line-height: 1.2;
}
p, ul, ol, table, pre, dl {
margin: 0 0 20px;
}
h1, h2, h3 {
line-height: 1.1;
}
h1 {
font-size: 28px;
}
h2 {
color: #393939;
}
h3, h4, h5, h6 {
color: #494949;
}
blockquote {
margin: 0 -20px 20px;
padding: 15px 20px 1px 40px;
font-style: italic;
background: #ccc;
background: rgba(0, 0, 0, 0.06);
color: #222;
}
img {
max-width: 100%;
}
code, pre {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
color: #333;
font-size: 12px;
overflow-x: auto;
}
pre {
padding: 20px;
background: #3A3C42;
color: #f8f8f2;
margin: 0 -20px 20px;
}
pre code {
color: #f8f8f2;
}
li pre {
margin-left: -60px;
padding-left: 60px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 5px 10px;
border-bottom: 1px solid #aaa;
}
dt {
color: #222;
font-weight: 700;
}
th {
color: #222;
}
small {
font-size: 11px;
}
hr {
border: 0;
background: #aaa;
height: 1px;
margin: 0 0 20px;
}
footer {
width: 640px;
margin: 0 auto;
padding: 20px 0 0;
color: #ccc;
overflow: hidden;
}
footer a {
color: #fff;
font-weight: bold;
}
footer p {
float: left;
}
footer p + p {
float: right;
}
@media print, screen and (max-width: 740px) {
body {
padding: 0;
}
.wrapper {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
}
footer {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
padding: 20px;
width: auto;
}
footer p {
float: none;
margin: 0;
}
footer p + p {
float: none;
}
}
@media print, screen and (max-width:580px) {
header ul {
display: none;
}
header p.view {
display: block;
}
header p {
width: 100%;
}
}
@media print {
header p.view a small:before {
content: 'at https://github.com/';
}
}
stylesheets/stylesheet.css 已删除 100644 → 0
浏览文件 @ 488def5f
* {
box-sizing: border-box; }
body {
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #606c71; }
a {
color: #1e6bb8;
text-decoration: none; }
a:hover {
text-decoration: underline; }
.btn {
display: inline-block;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.btn + .btn {
margin-left: 1rem; }
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3); }
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem; } }
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem; }
.btn + .btn {
margin-top: 1rem;
margin-left: 0; } }
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
@media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
@media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
@media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem; } }
.main-content :first-child {
margin-top: 0; }
.main-content img {
max-width: 100%; }
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: normal;
color: #159957; }
.main-content p {
margin-bottom: 1em; }
.main-content code {
padding: 2px 4px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9rem;
color: #383e41;
background-color: #f3f6fa;
border-radius: 0.3rem; }
.main-content pre {
padding: 0.8rem;
margin-top: 0;
margin-bottom: 1rem;
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dce6f0;
border-radius: 0.3rem; }
.main-content pre > code {
padding: 0;
margin: 0;
font-size: 0.9rem;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0; }
.main-content .highlight {
margin-bottom: 1rem; }
.main-content .highlight pre {
margin-bottom: 0;
word-break: normal; }
.main-content .highlight pre, .main-content pre {
padding: 0.8rem;
overflow: auto;
font-size: 0.9rem;
line-height: 1.45;
border-radius: 0.3rem; }
.main-content pre code, .main-content pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0; }
.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
content: normal; }
.main-content ul, .main-content ol {
margin-top: 0; }
.main-content blockquote {
padding: 0 1rem;
margin-left: 0;
color: #819198;
border-left: 0.3rem solid #dce6f0; }
.main-content blockquote > :first-child {
margin-top: 0; }
.main-content blockquote > :last-child {
margin-bottom: 0; }
.main-content table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all; }
.main-content table th {
font-weight: bold; }
.main-content table th, .main-content table td {
padding: 0.5rem 1rem;
border: 1px solid #e9ebec; }
.main-content dl {
padding: 0; }
.main-content dl dt {
padding: 0;
margin-top: 1rem;
font-size: 1rem;
font-weight: bold; }
.main-content dl dd {
padding: 0;
margin-bottom: 1rem; }
.main-content hr {
height: 2px;
padding: 0;
margin: 1rem 0;
background-color: #eff0f1;
border: 0; }
@media screen and (min-width: 64em) {
.main-content {
max-width: 64rem;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding: 2rem 4rem;
font-size: 1.1rem; } }
@media screen and (max-width: 42em) {
.main-content {
padding: 2rem 1rem;
font-size: 1rem; } }
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top: solid 1px #eff0f1; }
.site-footer-owner {
display: block;
font-weight: bold; }
.site-footer-credits {
color: #819198; }
@media screen and (min-width: 64em) {
.site-footer {
font-size: 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size: 1rem; } }
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem; } }
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或