DIV教程之CSS3网页实例:丑化网页下拉列表

只看该作者 · 发表于 2015-1-15 22:58:36

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
破洛洛文章简介：CSS3网页实例:丑化网页下拉列表.
<!doctypehtml>
<html>
<head>
<metacharset="utf-8"/>
<title>一致下拉列表款式并完成select款式高度自界说的jQuery插件@Mr.Think</title>
<linkrel="stylesheet"href="http://mrthink.net/demo/css/base.css"/>
<linkrel="shortcuticon"type="image/x-icon"href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico"/>
<metaname="author"content="Mr.Think别名青鸟简称i"/>
<metaname="keywords"content="i,Mr.Think,前端开辟,WEB前端,前端手艺,前端开辟,WEB前端开辟,用户体验,网站筹划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP喜好者"/>
<metaname="description"content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开辟,同时也是一名PHP的喜好者.爱思索,有点代码洁癖,生吃过螃蟹腿,喜欢肉食.这里是我纪录常识与生存杂事的中央."/>
<linkrel="pingback"href="http://mrthink.net/xmlrpc.php"/>
<linkrel="alternate"type="application/rss+xml"title="Mr.Think的博客RSSFeed"href="http://mrthink.net/feed/"/>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
p{float:left;margin:20px;font-size:14px}
/*styleforiSimulateSelect*/
.i_selectbox{margin-top:20px;height:32px;position:relative;font-size:14px}
.i_selectbox.i_currentselected{width:220px;height:32px;background:#fffurl(http://mrthink.net/demo/images/bg-select.gif)righttopno-repeat;border:1pxsolid#555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-indent:10px;line-height:32px;cursor:pointer}
.i_selectbox.i_selectoption{overflow-x:hidden;overflow-y:auto;position:absolute;left:-5px;top:-2px;padding:5px;background-color:#fff;background:rgba(255,255,255,.9);-webkit-box-shadow:-2px3px5pxrgba(0,0,0,.3);-moz-box-shadow:-2px3px5pxrgba(0,0,0,.3);box-shadow:-2px3px5pxrgba(0,0,0,.3);border-radius:5px;border-right:1pxsolid#eee}
.i_selectbox.i_selectoptiondt{height:24px;background-color:#eee;text-indent:5px;font-style:italic;color:#555;line-height:24px;}
.i_selectbox.i_selectoptiondd{height:30px;border-bottom:1pxdashed#ccc;cursor:pointer;text-indent:10px;line-height:30px}
.i_selectbox.i_selectoptiondd:hover{background-color:#888;color:#fff}
.i_selectbox.i_selectoptiondd.selected{background-color:#555;color:#fff}
</style>
</head>
<body>
<divid="d_head">
<h1><atitle="前往Mr.Think的博客"href="http://mrthink.net/">Mr.Think的博客</a><em>可自在转载及利用,但请说明出处.</em></h1>
<h2><span><atitle="定阅Mr.Think的博客"href="http://mrthink.net/feed/">RSSFeed</a></span>@专注Web前端手艺,酷爱PHP,崇尚复杂生存的伧夫俗人.</h2>
</div>
<divclass="return">前往文章页:<ahref="http://mrthink.net/jquery-select-iSimulateSelect/">一致下拉列表款式并完成select款式高度自界说的jQuery插件@Mr.Think</a></div>

<divid="demo">
<p>
<selectclass="iselect">
<optgrouplabel="战国人人">
<optionvalue="0">请选择你喜好的人</option>
<optionvalue="1">墨子</option>
<optionvalue="2">老子</option>
<optionvalue="3">庄子</option>
<optionvalue="4">荀子</option>
</optgroup>
<optgrouplabel="秦国将军">
<optionvalue="5">蒙恬</option>
<optionvalue="6">王贲</option>
<optionvalue="7">王翦</option>
<optionvalue="8">白起</option>
<optionvalue="9">司马错</option>
</optgroup>
<optgrouplabel="秦国名臣">
<optionvalue="10">蒙毅</option>
<optionvalue="11">李斯</option>
<optionvalue="12">张仪</option>
<optionvalue="13">卫鞅</option>
</optgroup>
</select>
</p>

<p>
<selectclass="iselect">
<optionvalue="1">秦孝公(前361—前338年)</option>
<optionvalue="2">秦惠文王(前337—前311年)</option>
<optionvalue="4">秦昭襄王(前306—前251年)</option>
<optionvalue="5">秦孝文王(前250年)</option>
<optionvalue="6">秦庄襄王(前250—前247年)</option>
<optionvalue="7"selected="selected">秦始天子(前246—前210年)</option>
<optionvalue="8">秦二世(前209—前207年)</option>
<optionvalue="9">秦王子婴(前206年)</option>
</select>
</p>

<selectstyle="float:right">
<optionvalue="0">我是个没穿衣服的select</option>
<optionvalue="1">我是个没穿衣服的select</option>
<optionvalue="2">我是个没穿衣服的select</option>
<optionvalue="3">我是个没穿衣服的select</option>
<optionvalue="4">我是个没穿衣服的select</option>
</select>

</div>
<script>
;(function($){
/*
*一致select款式并完成款式高度自界说的jQuery插件@Mr.Think(http://mrthink.net/)
*/
$.fn.iSimulateSelect=function(iSet){
iSet=$.extend({
selectBoxCls:i_selectbox,//string范例,核心class名
curSCls:i_currentselected,//string范例,默许显现class名
optionCls:i_selectoption,//string范例,下拉列表class名
selectedCls:selected,//string范例,以后选中class名
width:222,//number范例，摹拟select的宽度
height:300,//number范例，摹拟select的最年夜高度
zindex:20//层级按次
},iSet||{});
this.hide();
returnthis.each(function(){
varself=this;
varthisCurVal,thisSelect,cIndex=0;
//盘算摹拟select宽度
if(iSet.width==0){
iSet.width=$(self).width();
}
varhtml=<divclass="+iSet.selectBoxCls+"style="z-index:+iSet.zindex+"><divclass="+iSet.curSCls+"style="width:+iSet.width+px">+$(self).find(option:selected).text()+</div><dlclass="+iSet.optionCls+"style="display:none;width:+iSet.width+px">;
//判别select中是不是有optgroup
//用dt替换optgroup，用dd替换option
if($(self).find(optgroup).size()>0){
$(this).find(optgroup).each(function(){
html+=<dt>+$(this).attr(label)+</dt>;
$(this).find(option).each(function(){
if($(this).is(:selected)){
html+=<ddclass="+iSet.selectedCls+">+$(this).text()+</dd>;
}else{
html+=<dd>+$(this).text()+</dd>;
}
});
});
}else{
$(this).find(option).each(function(){
if($(this).is(:selected)){
html+=<ddclass="+iSet.selectedCls+">+$(this).text()+</dd>;
}else{
html+=<dd>+$(this).text()+</dd>;
}
});
}
//将摹拟dl拔出到select前面
$(self).after(html);
//以后摹拟select核心box元素
thisBox=$(self).next(.+iSet.selectBoxCls);
//以后摹拟select初始值元素
thisCurVal=thisBox.find(.+iSet.curSCls);
//以后摹拟select列表
thisSelect=thisBox.find(.+iSet.optionCls);
/*
若同页面另有其他原生select,请前去https://github.com/brandonaaron/bgiframe下载bgiframe，同时在此处挪用thisSelect.bgiframe()
*/
//thisSelect.bgiframe();

//弹出摹拟下拉列表
thisCurVal.click(function(){
$(.+iSet.optionCls).hide();
$(.+iSet.selectBoxCls).css(zIndex,iSet.zindex);
$(self).next(.+iSet.selectBoxCls).css(zIndex,iSet.zindex+1);
thisSelect.show();
});
//若摹拟select高度超越限制高度，则主动overflow-y:auto
if(thisSelect.height()>iSet.height){
thisSelect.height(iSet.height);
}
//摹拟列表点击事务-赋值-改动y坐标地位-...
thisSelect.find(dd).click(function(){
$(this).addClass(iSet.selectedCls).siblings().removeClass(iSet.selectedCls);
cIndex=thisSelect.find(dd).index(this);
thisCurVal.text($(this).text());
$(self).find(option).eq(cIndex).attr(selected,selected);
$(.+iSet.selectBoxCls).css(zIndex,iSet.zindex);
thisSelect.hide();
});
//非摹拟列表处点击埋没摹拟列表
//$(document)点击事务不兼容部分挪动设备
$(html,body).click(function(e){
if(e.target.className.indexOf(iSet.curSCls)==-1){
thisSelect.hide();
$(.+iSet.selectBoxCls).css(zIndex,iSet.zindex);
}
});
//作废模块列表处作废默许事务
thisSelect.click(function(e){
e.stopPropagation();
});
});
}
})(jQuery);
$(function(){
//插件挪用
$(.iselect).iSimulateSelect();
})
</script>



<divclass="clear"></div>
<divid="adsense"></div>
<script>
vargaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");
document.write(unescape("%3Cscriptsrc="+gaJsHost+"google-analytics.com/ga.jstype=text/javascript%3E%3C/script%3E"));
</script>
<script>
try{
varpageTracker=_gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
}catch(err){}
</script>

</body>
</html>

</p>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

只看该作者 · 发表于 2015-1-17 20:07:34

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-2-5 05:15:21

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-2-11 06:57:02

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-2 00:30:21

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-3-11 03:39:18

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-17 21:33:16

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS3网页实例:丑化网页下拉列表

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子