css配合jquery美化 select
更新時間：2013年11月29日 16:59:19 作者：
select的美化在之前的文章中也有介紹過，在本文將為大家介紹下使用css配合jquery美化select，感興趣的朋友可以參考下
一個簡單的css配合jq美化select
<div id="main">
<section id="basic-usage">
<select id="basic-usage-demo">
<option value="">請選擇…</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</section>
</div>
<script>
$(document).ready(function() {
$('#basic-usage-demo').fancySelect();
// Boilerplate
var repoName = 'fancyselect'
$.get('' + repoName, function(repo) {
var el = $('#top').find('.repo');
el.find('.stars').text(repo.watchers_count);
el.find('.forks').text(repo.forks_count);
});
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
} else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
<style type="text/css">
div#main { font-size: 16px; line-height: 26px; color: #fff; }
div#main div.fancy-select { margin: 0 auto 60px; width: 200px; }
</style>
復制代碼 代碼如下:
<div id="main">
<section id="basic-usage">
<select id="basic-usage-demo">
<option value="">請選擇…</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</section>
</div>
復制代碼 代碼如下:
<script>
$(document).ready(function() {
$('#basic-usage-demo').fancySelect();
// Boilerplate
var repoName = 'fancyselect'
$.get('' + repoName, function(repo) {
var el = $('#top').find('.repo');
el.find('.stars').text(repo.watchers_count);
el.find('.forks').text(repo.forks_count);
});
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
} else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
復制代碼 代碼如下:
<style type="text/css">
div#main { font-size: 16px; line-height: 26px; color: #fff; }
div#main div.fancy-select { margin: 0 auto 60px; width: 200px; }
</style>
相關文章
這篇文章主要介紹了基于jQuery實現搜索關鍵字自動匹配功能，自動匹配搜索關鍵詞功能廣泛應用到搜索引擎當中，感興趣的小伙伴們可以參考一下2015-10-10
jQuery旋轉插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
網上發(fā)現一個很有意思的jQuery旋轉插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現,感興趣的朋友可以了解下2013-01-01
動態(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法
下面小編就為大家?guī)硪黄獎討B(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了jQuery iScroll.js 移動端滾動條美化插件的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了使用jquery清空、復位整個輸入域，非常的簡單實用，這里推薦給大家,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery擴展，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了JQuery基礎動畫操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
jquery 彈出層注冊頁面,盡力提高用戶體驗，吸引用戶注冊。2010-06-06
這篇文章主要分享了使用FlexiGrid實現Extjs表格效果方法，非常的實用，這里推薦給有相同需求的小伙伴2014-12-12
用jQuery做網頁換膚確實是很一個很巧妙，很好的選擇，這是本人在學習jQuery中學的知識，感覺很有用，寫了下來，希望大家有更好的方法或者代碼不足的地方請諒解，本人也是初學者啊，希望大家互相勉勵互相學習。2011-04-04