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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
理解javascript中的with关键字
Feb 15 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
vue实现简单跑马灯效果
May 25 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
isset和empty的区别
2007/01/15 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
Python单例模式实例详解
2017/03/01 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
高一历史教学反思
2014/01/13 职场文书
机关出纳岗位职责
2014/04/03 职场文书
综合内勤岗位职责
2014/04/14 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python