js下拉菜单语言选项简单实现


旗子图片


代码如下:

(function($) {
var jSelect = $(".jsSelect");
$(jSelect).find("li:first").hover(function(){
$(".s").css("background","url(images/68_60.png) 54px 0px no-repeat");
h=$(this).parent("ul").find("li").length;
$(this).parent("ul").css("height",28*h)
$(this).siblings("li:not(.s)").mouseenter(function(){
$(".s").css("background","url(images/68_60.png) 54px 0px no-repeat");
$(this).css("background","#428bca").css("color","#FFFFFF")
});
$(this).siblings("li:not(.s)").mouseleave(function(){
$(this).css("background","none").css("color","#428bca")
$(".s").css("background","url(images/68_60.png) 54px -30px no-repeat");
});

$(this).parent(jSelect).mouseleave(function(){
$(this).css("height",28)
});
});
$(jSelect).find("li:not(.s)").click(function(){
var cContent=$(jSelect).find("li:first").html();
var cdContent = $(this).html();
$(jSelect).find("li:first").html(cdContent);
$(this).html(cContent);
$(this).find('a').removeClass('s');
$(this).find('a').removeAttr('style');
$(jSelect).find("li:first").addClass('s');
$(this).parent("ul").css("height",28);
});
$(".s").css("background","url(images/68_60.png) 54px -30px no-repeat");

})(jQuery);

代码如下:

<ul id="language" class="jsSelect"><li><a href="#" class="s"><i class="flag-en-us"></i>English</a></li><li><a href="#"> <i class="flag-zh-cn"></i>简体中文</a></li><li><a href="#"><i class="flag-zh-tw"></i>繁体中文</a></li>
</ul>

代码如下:

<link href="/public/css/flags.css" rel="stylesheet" type="text/css" />
<style>
*{
margin:0px;
padding: 0px;
}
body{
margin: 10px;
}

ul.jsSelect {
width:121px;
height: 28px;
display:inline;
margin-left:-2px;
overflow:hidden;
background:#FFF;
float:left;
border:1px solid #ccc;
padding:0;
}
ul.jsSelect li {
margin:0px;
width:118px;
height:28px;
line-height:30px;
font-size: 14px;
font-weight: bold;
cursor:pointer;
padding:0px 3px;
color:#ccc;
border:none;
list-style: none;
}
ul.jsSelect li a{
text-decoration: none;
}
ul.jsSelect .s {
margin:0;
display: block;
margin-left: 0px;
cursor: pointer;
color: #666;
border: none;
background-image: url(images/68_60.png);
background-repeat: no-repeat;
background-position: 54px -30px;
}

</style>

flag.css


代码如下:

[class^="flag-"],[class*=" flag-"] {display: inline-block;margin-top:2px;width: 16px;height: 11px;line-height: 11px;vertical-align: text-top;background-image: url("http://file.aconf.org/public/images/icons/flags.png");background-repeat: no-repeat;*margin-right: .3em;margin-right: 0.3em}
[class^="flag-"]:last-child,[class*=" flag-"]:last-child {*margin-left: 0 }
.flag-ad{background-position:0 0}
.flag-ae{background-position:0 -31px}
.flag-af{background-position:0 -62px}
.flag-ag{background-position:0 -93px}
.flag-ai{background-position:0 -124px}
.flag-al{background-position:0 -155px}
.flag-am{background-position:0 -186px}
.flag-an{background-position:0 -217px}
.flag-ao{background-position:0 -248px}
.flag-ar{background-position:0 -279px}
.flag-as{background-position:0 -310px}
.flag-at{background-position:0 -341px}
.flag-au{background-position:0 -372px}
.flag-aw{background-position:0 -403px}
.flag-ax{background-position:0 -434px}
.flag-az{background-position:0 -465px}
.flag-ba{background-position:0 -496px}
.flag-bb{background-position:0 -527px}
.flag-bd{background-position:0 -558px}
.flag-be{background-position:0 -589px}
.flag-bf{background-position:0 -620px}
.flag-bg{background-position:0 -651px}
.flag-bh{background-position:0 -682px}
.flag-bi{background-position:0 -713px}
.flag-bj{background-position:0 -744px}
.flag-bm{background-position:0 -775px}
.flag-bn{background-position:0 -806px}
.flag-bo{background-position:0 -837px}
.flag-br{background-position:0 -868px}
.flag-bs{background-position:0 -899px}
.flag-bt{background-position:0 -930px}
.flag-bv{background-position:0 -961px}
.flag-bw{background-position:0 -992px}
.flag-by{background-position:0 -1023px}
.flag-bz{background-position:0 -1054px}
.flag-ca{background-position:0 -1085px}
.flag-catalonia{background-position:0 -1116px}
.flag-cc{background-position:0 -1147px}
.flag-cd{background-position:0 -1178px}
.flag-cf{background-position:0 -1209px}
.flag-cg{background-position:0 -1240px}
.flag-ch{background-position:2px -1271px}
.flag-ci{background-position:0 -1302px}
.flag-ck{background-position:0 -1333px}
.flag-cl{background-position:0 -1364px}
.flag-cm{background-position:0 -1395px}
.flag-zh-cn{background-position:0 -1426px}
.flag-co{background-position:0 -1457px}
.flag-cr{background-position:0 -1488px}
.flag-cs{background-position:0 -1519px}
.flag-cu{background-position:0 -1550px}
.flag-cv{background-position:0 -1581px}
.flag-cx{background-position:0 -1612px}
.flag-cy{background-position:0 -1643px}
.flag-cz{background-position:0 -1674px}
.flag-de{background-position:0 -1705px}
.flag-dj{background-position:0 -1736px}
.flag-dk{background-position:0 -1767px}
.flag-dm{background-position:0 -1798px}
.flag-do{background-position:0 -1829px}
.flag-dz{background-position:0 -1860px}
.flag-ec{background-position:0 -1891px}
.flag-ee{background-position:0 -1922px}
.flag-eg{background-position:0 -1953px}
.flag-eh{background-position:-36px 0}
.flag-england{background-position:-36px -31px}
.flag-er{background-position:-36px -62px}
.flag-es{background-position:-36px -93px}
.flag-et{background-position:-36px -124px}
.flag-europeanunion{background-position:-36px -155px}
.flag-fam{background-position:-36px -186px}
.flag-fi{background-position:-36px -217px}
.flag-fj{background-position:-36px -248px}
.flag-fk{background-position:-36px -279px}
.flag-fm{background-position:-36px -310px}
.flag-fo{background-position:-36px -341px}
.flag-fr{background-position:-36px -372px}
.flag-ga{background-position:-36px -403px}
.flag-gb{background-position:-36px -434px}
.flag-gd{background-position:-36px -465px}
.flag-ge{background-position:-36px -496px}
.flag-gf{background-position:-36px -527px}
.flag-gh{background-position:-36px -558px}
.flag-gi{background-position:-36px -589px}
.flag-gl{background-position:-36px -620px}
.flag-gm{background-position:-36px -651px}
.flag-gn{background-position:-36px -682px}
.flag-gp{background-position:-36px -713px}
.flag-gq{background-position:-36px -744px}
.flag-gr{background-position:-36px -775px}
.flag-gs{background-position:-36px -806px}
.flag-gt{background-position:-36px -837px}
.flag-gu{background-position:-36px -868px}
.flag-gw{background-position:-36px -899px}
.flag-gy{background-position:-36px -930px}
.flag-hk{background-position:-36px -961px}
.flag-hm{background-position:-36px -992px}
.flag-hn{background-position:-36px -1023px}
.flag-hr{background-position:-36px -1054px}
.flag-ht{background-position:-36px -1085px}
.flag-hu{background-position:-36px -1116px}
.flag-id{background-position:-36px -1147px}
.flag-ie{background-position:-36px -1178px}
.flag-il{background-position:-36px -1209px}
.flag-in{background-position:-36px -1240px}
.flag-io{background-position:-36px -1271px}
.flag-iq{background-position:-36px -1302px}
.flag-ir{background-position:-36px -1333px}
.flag-is{background-position:-36px -1364px}
.flag-it{background-position:-36px -1395px}
.flag-jm{background-position:-36px -1426px}
.flag-jo{background-position:-36px -1457px}
.flag-jp{background-position:-36px -1488px}
.flag-ke{background-position:-36px -1519px}
.flag-kg{background-position:-36px -1550px}
.flag-kh{background-position:-36px -1581px}
.flag-ki{background-position:-36px -1612px}
.flag-km{background-position:-36px -1643px}
.flag-kn{background-position:-36px -1674px}
.flag-kp{background-position:-36px -1705px}
.flag-kr{background-position:-36px -1736px}
.flag-kw{background-position:-36px -1767px}
.flag-ky{background-position:-36px -1798px}
.flag-kz{background-position:-36px -1829px}
.flag-la{background-position:-36px -1860px}
.flag-lb{background-position:-36px -1891px}
.flag-lc{background-position:-36px -1922px}
.flag-li{background-position:-36px -1953px}
.flag-lk{background-position:-72px 0}
.flag-lr{background-position:-72px -31px}
.flag-ls{background-position:-72px -62px}
.flag-lt{background-position:-72px -93px}
.flag-lu{background-position:-72px -124px}
.flag-lv{background-position:-72px -155px}
.flag-ly{background-position:-72px -186px}
.flag-ma{background-position:-72px -217px}
.flag-mc{background-position:-72px -248px}
.flag-md{background-position:-72px -279px}
.flag-me{background-position:-72px -310px}
.flag-mg{background-position:-72px -342px}
.flag-mh{background-position:-72px -373px}
.flag-mk{background-position:-72px -404px}
.flag-ml{background-position:-72px -435px}
.flag-mm{background-position:-72px -466px}
.flag-mn{background-position:-72px -497px}
.flag-mo{background-position:-72px -528px}
.flag-mp{background-position:-72px -559px}
.flag-mq{background-position:-72px -590px}
.flag-mr{background-position:-72px -621px}
.flag-ms{background-position:-72px -652px}
.flag-mt{background-position:-72px -683px}
.flag-mu{background-position:-72px -714px}
.flag-mv{background-position:-72px -745px}
.flag-mw{background-position:-72px -776px}
.flag-mx{background-position:-72px -807px}
.flag-my{background-position:-72px -838px}
.flag-mz{background-position:-72px -869px}
.flag-na{background-position:-72px -900px}
.flag-nc{background-position:-72px -931px}
.flag-ne{background-position:-72px -962px}
.flag-nf{background-position:-72px -993px}
.flag-ng{background-position:-72px -1024px}
.flag-ni{background-position:-72px -1055px}
.flag-nl{background-position:-72px -1086px}
.flag-no{background-position:-72px -1117px}
.flag-np{background-position:-68px -1148px}
.flag-nr{background-position:-72px -1179px}
.flag-nu{background-position:-72px -1210px}
.flag-nz{background-position:-72px -1241px}
.flag-om{background-position:-72px -1272px}
.flag-pa{background-position:-72px -1303px}
.flag-pe{background-position:-72px -1334px}
.flag-pf{background-position:-72px -1365px}
.flag-pg{background-position:-72px -1396px}
.flag-ph{background-position:-72px -1427px}
.flag-pk{background-position:-72px -1458px}
.flag-pl{background-position:-72px -1489px}
.flag-pm{background-position:-72px -1520px}
.flag-pn{background-position:-72px -1551px}
.flag-pr{background-position:-72px -1582px}
.flag-ps{background-position:-72px -1613px}
.flag-pt{background-position:-72px -1644px}
.flag-pw{background-position:-72px -1675px}
.flag-py{background-position:-72px -1706px}
.flag-qa{background-position:-72px -1737px}
.flag-re{background-position:-72px -1768px}
.flag-ro{background-position:-72px -1799px}
.flag-rs{background-position:-72px -1830px}
.flag-ru{background-position:-72px -1861px}
.flag-rw{background-position:-72px -1892px}
.flag-sa{background-position:-72px -1923px}
.flag-sb{background-position:-72px -1954px}
.flag-sc{background-position:-108px 0}
.flag-scotland{background-position:-108px -31px}
.flag-sd{background-position:-108px -62px}
.flag-se{background-position:-108px -93px}
.flag-sg{background-position:-108px -124px}
.flag-sh{background-position:-108px -155px}
.flag-si{background-position:-108px -186px}
.flag-sj{background-position:-108px -217px}
.flag-sk{background-position:-108px -248px}
.flag-sl{background-position:-108px -279px}
.flag-sm{background-position:-108px -310px}
.flag-sn{background-position:-108px -341px}
.flag-so{background-position:-108px -372px}
.flag-sr{background-position:-108px -403px}
.flag-st{background-position:-108px -434px}
.flag-sv{background-position:-108px -465px}
.flag-sy{background-position:-108px -496px}
.flag-sz{background-position:-108px -527px}
.flag-tc{background-position:-108px -558px}
.flag-td{background-position:-108px -589px}
.flag-tf{background-position:-108px -620px}
.flag-tg{background-position:-108px -651px}
.flag-th{background-position:-108px -682px}
.flag-tj{background-position:-108px -713px}
.flag-tk{background-position:-108px -744px}
.flag-tl{background-position:-108px -775px}
.flag-tm{background-position:-108px -806px}
.flag-tn{background-position:-108px -837px}
.flag-to{background-position:-108px -868px}
.flag-tr{background-position:-108px -899px}
.flag-tt{background-position:-108px -930px}
.flag-tv{background-position:-108px -961px}
.flag-zh-tw{background-position:-108px -992px}
.flag-tz{background-position:-108px -1023px}
.flag-ua{background-position:-108px -1054px}
.flag-ug{background-position:-108px -1085px}
.flag-um{background-position:-108px -1116px}
.flag-en-us{background-position:-108px -1147px}
.flag-uy{background-position:-108px -1178px}
.flag-uz{background-position:-108px -1209px}
.flag-va{background-position:-108px -1240px}
.flag-vc{background-position:-108px -1271px}
.flag-ve{background-position:-108px -1302px}
.flag-vg{background-position:-108px -1333px}
.flag-vi{background-position:-108px -1364px}
.flag-vn{background-position:-108px -1395px}
.flag-vu{background-position:-108px -1426px}
.flag-wales{background-position:-108px -1457px}
.flag-wf{background-position:-108px -1488px}
.flag-ws{background-position:-108px -1519px}
.flag-ye{background-position:-108px -1550px}
.flag-yt{background-position:-108px -1581px}
.flag-za{background-position:-108px -1612px}
.flag-zm{background-position:-108px -1643px}
.flag-zw{background-position:-108px -1674px}

(0)

相关推荐

  • asp.net后台如何动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGenericControl(); myCss .TagName = "link"; myCss .Attributes.Add("type", "text/css"); myCss .Attributes.Add("rel", "s

  • js下拉菜单中自动信息轮换播放

    要完成此效果把如下代码加入到<body>区域中 Welcome To Typhoon Start. JavaScript Fairyland. 我们_www.jb51.net. 我只是提出这种思路,其它要靠自己发挥喽. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

  • js jquery分别实现动态的文件上传操作按钮的添加和删除

    javascript实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

  • 基于JavaScript实现单选框下拉菜单添加文件效果

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

  • css+js下拉菜单

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • js下拉菜单语言选项简单实现

    旗子图片 复制代码 代码如下: (function($) { var jSelect = $(".jsSelect"); $(jSelect).find("li:first").hover(function(){ $(".s").css("background","url(images/68_60.png) 54px 0px no-repeat"); h=$(this).parent("ul&qu

  • Vue.js下拉菜单组件使用方法详解

    本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • js下拉菜单生成器dropMenu使用方法详解

    本文实例为大家分享了下拉菜单生成器dropMenu的使用方法,供大家参考,具体内容如 HTML <div class="input-group"> <span class="input-group-addon" style="width: 100px" >职级:</span> <input type="text" class="units form-control"

  • js 下拉菜单点击旁边收起实现(踩坑记)

    背景: 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表.接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现) 带有bug的版本演示图 备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行 问题抛出 当我点击上面的联想词的时候它的onSearch并不能执行 demo代码展示 <template lang="h

  • JS实多级联动下拉菜单类,简单实现省市区联动菜单!

    作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.

  • JQuery设置获取下拉菜单某个选项的值(比较全)

    JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置sele

  • js 下拉菜单实现代码

    *{padding:0;margin:0;} .nav{width:850px;margin:50px auto;position:relative;} .nav li{display:inline;margin-right:50px;} .nav ol{background-color:#f5f5f5;border:1px solid #ccc;display:none;padding:15px;} .nav ol li{display:block;margin-bottom:15px;} v

  • JavaScript实现非常简单实用的下拉菜单效果

    本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

随机推荐