添加微信好友
jquery有很多好玩的插件，今天向大家分享一个使用jqDock与jquery实现的桌面效果。
[codesyntax lang=”div”]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Leopard Dashboard</title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/draggable.jquery.ui.js" type="text/javascript"></script>
<script src="js/dashboard.js" type="text/javascript"></script>
<script src="js/jquery.jqDock.min.js" type="text/javascript"></script>
<style type="text/css">
@import url(style.css);
</style>
</head>
<body>
<div id="wrapper">
<div class="draggableWindow">
<h1><span></span>Leopard Dashboard with jQuery</h1>
<div class="content">
<h2>jQuery is awesome!</h2>
<p>jQuery is pretty cool. I mean, look at all this cool stuff it can do. A dock (<a href="http://www.wizzud.com/jqDock/">Sourced from Wizzud.com! Thanks!</a>), a dashboard, and draggable windows! Awesome! If you didn't get here via it, this is the demo of a tutorial from <a href="http://nettuts.com">Nettuts</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="draggableWindow" id="smaller">
<h1><span></span>A smaller window</h1>
<div class="content">
<p>A small dialogue window styled in style.css</p>
</div>
</div>
<div id="dashboardWrapper">
<ul>
<li class="widget"><img src="images/widgets/googlesearch.png" alt="" /></li>
<li class="widget"><img src="images/widgets/date.png" alt="" /></li>
<li class="widget"><img src="images/widgets/dictionary.png" alt="" /></li>
<li class="widget" id="notepad">This is a text widget! You can make any type of widget you want, simply by adding the class 'widget' to an li element within the Dashboard unordered list. Don't stop there though, create custom looking widgets by adding another class (e.g. myClass) and styling that in style.css. Like this one! <a href="http://nettuts.com/">Nettuts</a></li>
</ul>
</div>
</div>
<div id="dock">
<img src="images/finder.png" alt="Finder" title="finder"/>
<img src="images/dashboard.png" alt="Dashboard" id="dashboardLaunch" title="Dashboard" />
<img src="images/mail.png" alt="Mail" title="finder" />
<img src="images/coda.png" alt="Coda" title="Coda" />
</div>
</body>
</html>
[/codesyntax]
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
1. 利用CSS Sprites技术来减少HTTP请求的数量。 2. 对于能使用CSS实现的效果，尽量避免使用 […]
发布时间:2022年08月27日 标签：echarts
摘要：项目中因为需求，底部的导航栏是自己写的，在开发者工具中一切正常但是在真机上页面滑动时，的层级比高，调过两 […]
发布时间:2022年04月14日
这是一款绿色的提高用户体验的js插件，可以放心使用。为什么使用?解决触发元素的 click 事件延迟300ms […]
发布时间:2021年12月6日 标签：建站, 网站建设, 跨屏
根据艾瑞网的统计，早在2014年中国移动互联网市场规模为2134.8亿元，突破千亿元大关，同比增长115.5% […]
跨屏版网站有很多种说法，比如响应式网站、自适应网站等等，我们暂且叫“跨屏版”，是因为它和 电脑版，触屏版等有一 […]
发布时间:2021年12月6日 标签：建站, 网站建设, 跨屏, 适配
跨屏网页设计是近几年来广为流行的方式，跨屏建站方案替代了传统的多屏建站方案，多屏建站即为不同的终端单独建立一个 […]
