haiwei 发表于 2026-8-20 21:03:47

仿Win10系统WIN10-UI系统PHP网站源码

Win10-UI是一款Win10风格的后台UI,让您轻松搭建一个别具一格的后台界面。Win10的动态磁贴,可定义方块大小,添加随机动画 桌面图标自动排序 任务栏结合iframe子窗口,与Windows一致的窗口管理体验 开始菜单+消息提示中心,满足后台UI的设计需求 极少的API,大部分功能可用html元素定义完成 响应式兼容,在手机浏览器也有不错的观感 目前只保证对主流现代浏览器的兼容性支持


快速入门:如何自定义桌面图标?
&lt;div id=&quot;win10-shortcuts&quot;&gt;   &lt;div class=&quot;shortcut&quot; onclick=&quot;//do something...&quot;&gt;      &lt;img src=&quot;图片地址&quot; class=&quot;icon&quot; /&gt;      &lt;div class=&quot;title&quot;&gt;图标底部文字&lt;/div&gt;   &lt;/div&gt;   &lt;div class=&quot;shortcut&quot; onclick=&quot;//do something...&quot;&gt;      &lt;div class=&quot;icon&quot;&gt;自定义任意html内容&lt;/div&gt;      &lt;div class=&quot;title&quot;&gt;图标底部文字&lt;/div&gt;   &lt;/div&gt;&lt;/div&gt;</pre>
图标应设置为图片或自定义html填充div
如何自定义开始菜单列表?&lt;div class=&quot;list win10-menu-hidden animated animated-slideOutLeft&quot;&gt;   &lt;div class=&quot;item&quot;&gt;一级菜单&lt;/div&gt;   &lt;div class=&quot;item&quot;&gt;一级菜单&lt;/div&gt;   &lt;div class=&quot;sub-item&quot;&gt;二级菜单&lt;/div&gt;   &lt;div class=&quot;sub-item&quot;&gt;二级菜单&lt;/div&gt;   &lt;div class=&quot;sub-item&quot;&gt;二级菜单&lt;/div&gt;   &lt;div class=&quot;item&quot;&gt;一级菜单&lt;/div&gt;   &lt;div class=&quot;item&quot;&gt;一级菜单&lt;/div&gt;&lt;/div&gt;</pre>一级菜单添加类item,二级添加sub-item。不需要用一级菜单“包裹”二级菜单,将自动识别二级菜单的归属,请注意排序。
如何自定义开始菜单磁贴?&lt;div class=&quot;blocks&quot;&gt;&lt;div class=&quot;menu_group&quot;&gt;    &lt;div class=&quot;title&quot;&gt;磁贴组标题1&lt;/div&gt;    &lt;div loc=&quot;1,1&quot; size=&quot;1,1&quot; class=&quot;block&quot;&gt;      &lt;div class=&quot;content&quot;&gt;磁贴1&lt;/div&gt;    &lt;/div&gt;    &lt;div loc=&quot;2,1&quot; size=&quot;1,1&quot; class=&quot;block&quot;&gt;      &lt;div class=&quot;content&quot;&gt;磁贴2&lt;/div&gt;    &lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;menu_group&quot;&gt;    &lt;div class=&quot;title&quot;&gt;磁贴组标题2&lt;/div&gt;    &lt;div loc=&quot;1,1&quot; size=&quot;2,2&quot; class=&quot;block&quot;&gt;      &lt;div class=&quot;content&quot;&gt;磁贴3&lt;/div&gt;    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</pre>磁贴区域被分成若干小格,每一行最多6格。loc=&#39;x,y&#39;中的x表示横坐标,y表示纵坐标(以左上方为1,1点)。size=&#39;w,h&#39;中的w和h表示格子的宽度和高度(以格为单位)。

效果图:
https://img.dkewl.com/202205/7edb02d247.png
https://img.dkewl.com/202205/049c34e367.png

下载地址:仿Win10系统WIN10-UI系统PHP网站源码.zip
页: [1]
查看完整版本: 仿Win10系统WIN10-UI系统PHP网站源码