jquery toolbar与网页浮动工具条具体实现代码


Posted in Javascript onJanuary 12, 2014

jquery 实现toolbar与网页浮动工具条jQuery实现方法
/*
基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码。

我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和“隐藏按钮列表”(添加到隐藏工具栏)。
我们还可以期待一个“显示按钮”,它是有用的,当面板隐藏,我们要重新激活它。基于这个原因,我们添加id为toolbarbut div标签。

HTML和CSS代码
在这里,网页的基本结构。

html 代码

<div id=”toolbarbut”> 
<!? hide button ?> 
</div> <div id=”toolbar”> <!? toolbar container ?> 
<div class=”leftside”> 
<!? all icons in floating left side ?> 
</div> 
<div class=”rightside”> <!? all things in floating right side ?> 
<!? hide button ?> 
<!? quick menu list ?> 
</div> 
</div>

css代码
div#toolbar, div#toolbarbut { 
position: fixed; /* set fixed position for the bar */ 
bottom: 0px; 
right: 0px; 
z-index: 9999; /* keep the bar on top */ 
height: 36px; 
background: url(images/bcktool.png); 
/* CSS3 */ 
-moz-border-radius-topleft: 8px; 
-khtml-border-radius-topleft: 8px; 
-webkit-border-top-left-radius: 8px; 
-moz-border-radius-topright: 8px; 
-khtml-border-radius-topright: 8px; 
-webkit-border-top-right-radius: 8px; 
-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */ 
-khtml-box-shadow: 0px 1px 10px #666; 
-webkit-box-shadow: 0px 1px 10px #666; 
/* CSS3 end */ 
border-top: 1px solid #eee; 
border-left: 1px solid #eee; 
border-right: 1px solid #eee; 
} div#toolbar { 
width: 85%; 
min-width: 700px; /* to limit the width when there is an excessive window resize */ 
margin: 0px auto; /* centered toolbar */ 
left: 0px; 
} 
div#toolbar a:hover { 
border: none; /* fix ‘hover' (a:hover {border-bottom: 1px dotted #666;}) border in the News Aggregator */ 
} 
div#toolbarbut { /* div for the ‘hide status' */ 
width: 60px; 
height: 15px; 
margin-right: 3%; 
display: none; 
} 
.leftside { 
float: left; 
} 
.rightside { 
float: right; 
}

显示/隐藏按钮现在,我们可以添加“显示按钮”的代码。
<div id=”toolbarbut”> <!? hide button ?> 
<span class=”showbar”><a href=”#”>show bar</a></span> 
</div>

下面的属性相对CSS类。
span.showbar a { /* show button */ 
padding: 5px; 
font-size: 10px; 
color: #989898; 
}

我们完成了后来的右侧,但现在我们可以添加“隐藏按钮”在ID为rightside分区,如图所示。
<div class=”rightside”> 
<span class=”downarr”> <!? hide button ?> 
<a href=”#”></a> 
</span> <!? other stuff in floating right side ?> 
</div>

css
span.downarr { /* hide button */ 
float: right; 
border-left: 1px solid #a4a4a4; 
} span.downarr a { 
display: block; 
width: 36px; 
height: 26px; 
padding: 25px 0 0 10px; 
background: url(images/downarrow.png) no-repeat 5px 7px; 
}

显示/隐藏效果与jQuery首先我们需要下载的jQuery(复制正确的文件夹中),并激活头index.php的标记。
<head> 
<!? … ?> 
<script type=”text/javascript教程” src=”js/jquery-1.3.2.min.js”></script> 
</head>

我们要隐藏面板上“隐藏按钮”,点击工具栏时,应当有不可见的“显示按钮”,使我们能够恢复的面板。我们可以使用下面的jQuery的解决方案(<body>标记后添加的代码)。
<script type=”text/javascript”> $(document).ready(function(){ 
//hide toolbar and make visible the ‘show' button 
$(“span.downarr a”).click(function() { 
$(“#toolbar”).slideToggle(“fast”); 
$(“#toolbarbut”).fadeIn(“slow”); 
}); 
//show toolbar and hide the ‘show' button 
$(“span.showbar a”).click(function() { 
$(“#toolbar”).slideToggle(“fast”); 
$(“#toolbarbut”).fadeOut(); 
}); 
}); 
</script>

现在我们可以隐藏和显示的bar

HTML和CSS代码的左侧
更新索引用下面的XHTML代码。我们添加一个普通无序列表(ID为社会)来创建的图标顺序,一个DIV标签(与类一角)范围内的总表,以实现工具提示气泡里的标签嵌套。

html 
<div class=”leftside”> <!? all things in floating left side ?> 
<ul id=”social”> 
<li><a class=”rss” href=”#”></a><!? icon ?> 
<div id=”tiprss” class=”tip”><!? tooltip ?> 
<ul> 
<li><a href=”#”>580 Readers</a></li> 
<li><a href=”#”><small>[Subscribe]</small></a></li> 
</ul> 
</div> 
</li> 
<li><a class=”facebook” href=”#”></a> 
<div id=”tipfacebook” class=”tip”> 
<ul> 
<li><a href=”#”>Share Page</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”twitter” href=”#”></a> 
<div id=”tiptwitter” class=”tip”> 
<ul> 
<li><a href=”#”>ReTweet</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”delicious” href=”#”></a> 
<div id=”tipdelicious” class=”tip”> 
<ul> 
<li><a href=”#”>Bookmark</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”digg” href=”#”></a> 
<div id=”tipdigg” class=”tip”> 
<ul> 
<li><a href=”#”>Digg</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”stumble” href=”#”></a> 
<div id=”tips教程tumble” class=”tip”> 
<ul> 
<li><a href=”#”>Stumble</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
</ul> 
</div> css代码 
*? Left Side ?*/ 
ul#social li { 
display: inline; 
} 
a.rss { 
display: inline-block; 
width: 104px; 
height: 35px; 
margin-left: 5px; 
background: url(images/rss.png) no-repeat; 
} 
a.facebook, a.twitter, a.digg, a.delicious, a.stumble { 
display: inline-block; 
width: 40px; 
height: 35px; 
margin-top: 1px; 
} 
a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover { 
background-position: 1px 1px; /* simple css hover effect */ 
} 
a.facebook { 
background: url(images/facebook.png) no-repeat; 
} 
a.twitter { 
background: url(images/twitter.png) no-repeat; 
} 
a.delicious { 
background: url(images/delicious.png) no-repeat; 
} 
a.digg { 
background: url(images/digg.png) no-repeat; 
} 
a.stumble { 
background: url(images/stumble.png) no-repeat; 
} 
.tip { 
position: absolute; /* important */ 
top: -75px; 
width: 250px; 
height: 78px; 
background: url(images/tip.png) no-repeat; 
float: left; 
display: none; 
} 
/* custom distances for the icons */ 
#tipfacebook { 
left: 75px; 
} 
#tiptwitter { 
left: 120px; 
} 
#tipdelicious { 
left: 165px; 
} 
#tipdigg { 
left: 210px; 
} 
#tipstumble { 
left: 255px; 
} 
.tip ul { 
padding: 22px 0 0 25px; 
} 
.tip ul li { 
display: inline; 
padding-left: 3px; 
} 
.tip ul li a { 
font-size: 18px; 
color: #989898; 
} 
.tip ul li a:hover { 
color: #666; 
} 
.tip ul li small { 
font-size: 10px; 
} 
jquery代码 
//show tooltip when the mouse is moved over a list element 
$(“ul#social li”).hover(function() { 
$(this).find(“div”).fadeIn(“fast”).show(); //add ‘show()” for IE 
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element 
$(this).find(“div”).hide(); 
}); 
}); 
OK好了,我们的jquery 实现toolbar与网页浮动工具条jQuery实现方法就讲完了。 
?>
Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 #Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 #Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 #Javascript
You might like
php学习之运算符相关概念
2011/06/09 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
asp批量修改记录的代码
2008/06/25 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
python妹子图简单爬虫实例
2015/07/07 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
基于Python的OCR实现示例
2020/04/03 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Python中的面向接口编程示例详解
2021/01/17 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
孝老爱亲模范事迹
2014/01/24 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
毕业设计致谢词
2015/05/14 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL