shiny examples for CSS

shiny_CSS_study.R

@@ -0,0 +1,70 @@
+参考：http://shiny.rstudio.com/articles/css.html
+
+两种方式：
+一是直接引用css文件！
+shinyUI(fluidPage(
+
+  includeCSS("styles.css"), ## 可以是网页url地址，或者本地文件，相对路径。
+
+  headerPanel("New Application"),
+
+  sidebarPanel(
+    sliderInput("obs", "Number of observations:", 
+                min = 1, max = 1000, value = 500)
+  ),
+
+  mainPanel(plotOutput("distPlot"))
+))
+而是直接用tags$style
+
+shinyUI(fluidPage(
+
+  tags$head(
+    tags$style(HTML("
+      @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
+      
+      h1 {
+        font-family: 'Lobster', cursive;
+        font-weight: 500;
+        line-height: 1.1;
+        color: #48ca3b;
+      }
+
+    ")) ## end for tags
+  ), ## end for head
+
+  headerPanel("New Application"),
+
+  sidebarPanel(
+    sliderInput("obs", "Number of observations:", 
+                min = 1, max = 1000, value = 500)
+  ),
+
+  mainPanel(plotOutput("distPlot"))
+))
+Add CSS to a Shiny UI just as you would add CSS to a web page.
+
+To get CSS into your Shiny App, you can:
+
+Link to an external CSS file
+Include CSS in the header of the web page that the app is built on, or
+Pass style information to individual HTML elements in your app.
+My examples give a glimpse into the options CSS offers your Shiny App. Explore more at Bootswatch and see what you can create.
+
+## 一个成功的例子
+在UI端，我加入下面这个代码：
+  tags$style(HTML("
+            .bigger_image:hover{
+                   width : 358px;
+                  height : 358px
+                  }
+                  
+                  ") 
+  )
+# 一个很简单的css,就是对所有的class等于bigger_image的标签的图片都添加一个动作，就是鼠标放在图片上面，图片就变大了~
+genes_img=paste0("<img src='http://~~~~~~~~~~~~'  alt='No boxplot!'   class='bigger_image'  width=100 height=100  ></img>")
+##那么这一系列图片都是可以调整大小的啦！
+
+
+
+