css配合jquery美化 select


Posted in Javascript onNovember 29, 2013

一个简单的css配合jq美化select
css配合jquery美化 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>
Javascript 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 #Javascript
JS实现多物体缓冲运动实例代码
Nov 29 #Javascript
JS实现匀速运动的代码实例
Nov 29 #Javascript
JS实现侧悬浮浮动实例代码
Nov 29 #Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 #Javascript
JS实现日期加减的方法
Nov 29 #Javascript
js弹出层永远居中实现思路及代码
Nov 29 #Javascript
You might like
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php与paypal整合方法
2010/11/28 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python记录程序运行时间的三种方法
2017/07/14 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python增加图像对比度的方法
2019/07/12 Python
Django中间件基础用法详解
2019/07/18 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
基于python图像处理API的使用示例
2020/04/03 Python
python中return如何写
2020/06/18 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
八年级语文教学反思
2014/02/11 职场文书
土建施工员岗位职责
2015/04/11 职场文书
正规欠条模板
2015/07/03 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
浅谈Java父子类加载顺序
2021/08/04 Java/Android