[英]How can I have multiple jQuery button styles on one page?
我正在使用以下外部CSS文件:
<link href="/jquery_custom/green/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="/jquery_custom/css/blue/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" /></script>
和JavaScript:
<script language = "javascript" type="text/javascript">
$(document).ready(function () {
$("button").button();
});
</script>
我注意到jQuery UI網站上有一個Advanced選項:
我需要做什么才能使一個頁面具有多個樣式? 包括兩個單獨的外部ui-custom js文件會導致問題。 而且我注意到Facebook有兩個不同顏色的按鈕:
如何才能做到這一點?
您是說每個按鈕都有不同的顏色/樣式? 您可以只使用CSS來做到這一點,就像這樣:
CSS
a.button {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
}
a.red {
color:#fff;
background: red;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
}
a.green {
background: #7FFF24;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
}
HTML
<a href="#" class="button">Gray Button</a>
<a href="#" class="button red">Red Button</a>
<a href="#" class="button green">Green Button</a>
您發布的JavaScript不會創建按鈕UI,它只是處理click事件,因此不確定在這里為什么重要。 無論您是在html中添加了<input type="button" />
元素,還是在javascript中生成了它們-無論哪種方式,都只需使用類或ID標識符並在自己的CSS中修改按鈕的外觀即可。
jQuery ui css主題對於某些復雜的ui控件(例如日期選擇器)的操作至關重要,但是對於簡單的按鈕,我將jquery css視為進行修改的堅實起點。 在jQuery用戶界面ui之后包含css文件,因此您可以僅修改所需的樣式,而無需進行其他任何修改。
好的,既然您已經弄清楚了,請簽出: 在單個頁面中使用多個jQuery主題您可以告訴每個主題僅適用於頁面的特定部分。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.