添加样式

jaywcjlove · Apr 18, 2015 · 2cd3f47 · 2cd3f47
1 parent 586d904
commit 2cd3f47
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,37 @@
-#升级浏览器
+# 升级浏览器
 
 
+## 兼容浏览器
+
+IE 6+, Chrome, Firefox ...  
 
 ## 调用方法
+`outdatedbrowser` 不传参数默认使用已定义好的
 
 ```js
-window.outdatedbrowser({
-    "firefox":{
-        "url":"http://baidu.com"
-    }
+window.onload = function  (argument) {
+    window.outdatedbrowser()
+};
+```
+
+
 
-})
-```
+
+## 不使用默认数据
+
+```js
+window.onload = function  (argument) {
+    window.outdatedbrowser({
+        "chrome":{
+            "url":"http://www.google.com/chrome",
+            // "available":["windows","mac","linux"],
+            "title":"GOOGLE CHROMSSSSSE"
+        },
+        "firefox":{
+            "url":"http://www.mozilla.org/firefox/new/",
+            "available":["windows","mac","linux"],
+            "title":"Mozilla Firefox"
+        }
+    })
+};
+```
diff --git a/lib/outdatedbrowser.js b/lib/outdatedbrowser.js
@@ -27,7 +27,7 @@
 		}
 	},
 	imgURL='browsers-bg.png',
-	style = 'body,html,.outdatedbrowser i.icon{margin:0;padding:0}body,html{height:100%;}.outdatedbrowser{position:absolute;top:0;left:0;height:100%;width:100%;z-index:999;overflow:auto;text-align:center;}.outdatedbrowser a{border:1px solid #fff}.outdatedbrowser .browser{text-decoration:blink;padding:30px 0 30px 0;display:inline-block;width:230px;overflow:hidden;vertical-align:middle;background:#e6e6e6;margin:0 5px 0 5px}.outdatedbrowser .btn{padding:7px 19px;border-radius:5px;background:#007a09;color:#fff}.outdatedbrowser h2,.outdatedbrowser h4,.outdatedbrowser p{display:block;color:#333;font-size:18px;$block}.outdatedbrowser p span{font-size:12px;padding:0 5px 0 5px}.outdatedbrowser h1{position:absolute;display:block;width:100%;padding-top:20px;color:#046d00}.outdatedbrowser .split{display:inline-block;height:100%;vertical-align:middle}.outdatedbrowser i.icon{display:block;position:relative;width:89px;height:89px;margin:0 auto 35px;background:transparent url("'+imgURL+'") no-repeat}.outdatedbrowser a:hover .btn{text-decoration:underline}.outdatedbrowser .chrome i.icon{background-position:-6px -6px}.outdatedbrowser .firefox i.icon{background-position:-105px -6px}.outdatedbrowser .internetExplorer i.icon{background-position:-206px -6px}.outdatedbrowser .safari i.icon{background-position:-306px -6px}.outdatedbrowser .opera i.icon{background-position:-406px -6px}.outdatedbrowser .chrome:hover i.icon{background-position:-6px -108px}.outdatedbrowser .firefox:hover i.icon{background-position:-105px -108px}.outdatedbrowser .internetExplorer:hover i.icon{background-position:-206px -108px}.outdatedbrowser .safari:hover i.icon{background-position:-306px -108px}.outdatedbrowser .opera:hover i.icon{background-position:-406px -108px}';
+	style = 'body,html,.outdatedbrowser h2,.outdatedbrowser h4,.outdatedbrowser p,.outdatedbrowser i.icon{margin:0;padding:0}body,html{height:100%;}.outdatedbrowser{position:absolute;top:0;left:0;height:100%;width:100%;z-index:999;overflow:auto;text-align:center;background:#fff;}.outdatedbrowser a{border:1px solid #fff}.outdatedbrowser .browser{text-decoration:blink;padding:30px 0 30px 0;display:inline-block;width:230px;overflow:hidden;vertical-align:middle;background:#e6e6e6;margin:0 5px 0 5px}.outdatedbrowser .btn{padding:7px 19px;border-radius:5px;background:#007a09;color:#fff}.outdatedbrowser h2,.outdatedbrowser h4,.outdatedbrowser p{display:block;color:#333;font-size:18px}.outdatedbrowser span{display:inline-block;margin:20px 0}.outdatedbrowser p span{font-size:12px;padding:0 5px 0 5px}.outdatedbrowser h1{position:absolute;display:block;width:100%;padding-top:20px;left:0;top:0;color:#046d00}.outdatedbrowser .split{display:inline-block;height:100%;vertical-align:middle}.outdatedbrowser i.icon{display:block;position:relative;width:89px;height:89px;margin:0 auto 35px;background:transparent url("'+imgURL+'") no-repeat}.outdatedbrowser a:hover .btn{text-decoration:underline}.outdatedbrowser .chrome i.icon{background-position:-6px -6px}.outdatedbrowser .firefox i.icon{background-position:-105px -6px}.outdatedbrowser .internetExplorer i.icon{background-position:-206px -6px}.outdatedbrowser .safari i.icon{background-position:-306px -6px}.outdatedbrowser .opera i.icon{background-position:-406px -6px}.outdatedbrowser .chrome:hover i.icon{background-position:-6px -108px}.outdatedbrowser .firefox:hover i.icon{background-position:-105px -108px}.outdatedbrowser .internetExplorer:hover i.icon{background-position:-206px -108px}.outdatedbrowser .safari:hover i.icon{background-position:-306px -108px}.outdatedbrowser .opera:hover i.icon{background-position:-406px -108px}'
 
 	window.outdatedbrowser=function(json){
 		this.container = document.createElement('div'),

diff --git a/lib/outdatedbrowser.styl b/lib/outdatedbrowser.styl
@@ -14,6 +14,7 @@ body,html
 	z-index: 999
 	overflow: auto
 	text-align: center
+	background: #FFF
 	a
 		border:1px solid #fff
 	.browser
@@ -31,10 +32,13 @@ body,html
 		background: #007A09;
 		color: #fff;
 	h2,h4,p
+		@extend $block
 		display:block
 		color:#333
 		font-size:18px
-		$block
+	span
+		display: inline-block;
+		margin:20px 0
 	p
 		span
 			font-size:12px

diff --git a/test/index.html b/test/index.html
@@ -3,9 +3,29 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <title>过时的浏览器</title>
+    <script type="text/javascript" src="../lib/outdatedbrowser.js"></script>
     <link rel="stylesheet" type="text/css" href="outdatedbrowser.css">
 </head>
 <body>
+<script type="text/javascript">
+    // outdatedbrowser()
+
+
+window.outdatedbrowser({
+    "chrome":{
+        "url":"http://www.google.com/chrome",
+        // "available":["windows","mac","linux"],
+        "title":"GOOGLE CHROMSSSSSE"
+    },
+    "firefox":{
+        "url":"http://www.mozilla.org/firefox/new/",
+        "available":["windows","mac","linux"],
+        "title":"Mozilla Firefox"
+    }
+})
+</script>
+
+asdfasdfsdf
 <!-- <div class="outdatedbrowser">
     <h1>请更新浏览器</h1>
     <span class="split"></span>
@@ -36,23 +56,5 @@ <h4>在以下操作系统可用 </h4>
         <p><span class="windows">Windows</span><span class="windows">Mac OS</span><span class="windows">Linux</span></p>
     </a>
 </div> -->
-    <script type="text/javascript" src="../lib/outdatedbrowser.js"></script>
-<script type="text/javascript">
-    // outdatedbrowser()
-
-
-window.outdatedbrowser({
-    "chrome":{
-        "url":"http://www.google.com/chrome",
-        // "available":["windows","mac","linux"],
-        "title":"GOOGLE CHROMSSSSSE"
-    },
-    "firefox":{
-        "url":"http://www.mozilla.org/firefox/new/",
-        "available":["windows","mac","linux"],
-        "title":"Mozilla Firefox"
-    }
-})
-</script>
 </body>
 </html>
diff --git a/test/outdatedbrowser.css b/test/outdatedbrowser.css