切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2017年06月24日

jquery插件jqdock打造苹果桌面

本文就“jquery插件jqdock打造苹果桌面”展开讨论，作者切版网，发布于2017年06月24日 全文共2344个字，预计阅读时长7分48秒。

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]

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。

更多相关文章

未分类

网站切版的优化有哪些方法？

发布时间:2023年06月10日 标签：,

1. 利用CSS Sprites技术来减少HTTP请求的数量。 2. 对于能使用CSS实现的效果，尽量避免使用 […]

未分类, 本站动态

微信小程序切图echarts层级太高解决方案

发布时间:2022年08月27日 标签：

摘要：项目中因为需求，底部的导航栏是自己写的，在开发者工具中一切正常但是在真机上页面滑动时，的层级比高，调过两 […]

未分类, 本站动态

解决移动端 click 事件延迟300ms插件fastclick.js

发布时间:2022年04月14日

这是一款绿色的提高用户体验的js插件，可以放心使用。为什么使用?解决触发元素的 click 事件延迟300ms […]

未分类

跨屏是一种趋势，企业顺势才能赢得未来

发布时间:2021年12月6日 标签：, ,

根据艾瑞网的统计，早在2014年中国移动互联网市场规模为2134.8亿元，突破千亿元大关，同比增长115.5% […]

未分类

什么是跨屏版网站？它和电脑版网站有什么不同？

发布时间:2021年12月6日 标签：,

跨屏版网站有很多种说法，比如响应式网站、自适应网站等等，我们暂且叫“跨屏版”，是因为它和 电脑版，触屏版等有一 […]

未分类

为什么网站需要跨屏？

发布时间:2021年12月6日 标签：, , ,

跨屏网页设计是近几年来广为流行的方式，跨屏建站方案替代了传统的多屏建站方案，多屏建站即为不同的终端单独建立一个 […]

查看更多