当前位置： 移动技术网 > IT编程>开发语言>JavaScript > css配合jquery美化 select

css配合jquery美化 select

2019年05月06日  | 移动技术网IT编程  | 我要评论

一个简单的css配合jq美化select
\

. 代码如下:


<p 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>
</p>


. 代码如下:


<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">

p#main { font-size: 16px; line-height: 26px; color: #fff; }
p#main p.fancy-select { margin: 0 auto 60px; width: 200px; }

</style>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网