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 操作符整理[推荐收藏]
Nov 15 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
详解ES6中的let命令
Apr 05 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP 常见郁闷问题答解
2006/11/25 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python缩进和冒号详解
2016/06/01 Python
python如何重载模块实例解析
2018/01/25 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Python 实现一个简单的web服务器
2021/01/03 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
实习护士自我鉴定
2013/10/13 职场文书
大学新生入学教育方案
2014/05/16 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
力学专业求职信
2014/07/23 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
干部理论学习心得体会
2016/01/21 职场文书
总结几个非常实用的Python库
2021/06/26 Python