html模板

高仿WIN10界面的WIN10-UI后台模板
2022-05-24 精准像素

高仿WIN10界面的WIN10-UI后台模板

  • 模板编号:2463
  • 点击次数:
  • 模板终端:电脑端
  • 适用版本:静态模板
  • 模板编码:UTF-8
  • 下载权限:VIP / 积分
  • 模板售价:VIP / 10积分
  • 下载次数:0

模板介绍

一款仿WIN10界面风格的后台模板,最新v1.1.2.5终极版。

Win10的动态磁贴,可定义方块大小,添加随机动画,桌面图标自动排序

任务栏结合iframe子窗口,与Windows一致的窗口管理体验

开始菜单+消息提示中心,满足后台UI的设计需求

极少的API,大部分功能可用html元素定义完成

响应式兼容,在手机浏览器也有不错的观感

高仿WIN10界面的WIN10-UI后台模板
后台模板截图

模板技术框架

layer(v3.0.3)

animated.css

jquery(v2.2.4)

font-awesome

模板使用方法

如何自定义桌面图标?

<div id="win10-shortcuts">
<div class="shortcut" onclick="//do something...">
<img src="图片地址" class="icon" />           <div class="title">图标底部文字</div>
</div>
<div class="shortcut" onclick="//do something...">
<div class="icon">自定义任意html内容</div>
<div class="title">图标底部文字</div>
</div></div>

图标应设置为图片或自定义html填充div

如何自定义开始菜单列表?

<div class="list win10-menu-hidden animated animated-slideOutLeft">
<div class="item">一级菜单</div>
<div class="item">一级菜单</div>
<div class="sub-item">二级菜单</div>
<div class="sub-item">二级菜单</div>
<div class="sub-item">二级菜单</div>
<div class="item">一级菜单</div>
<div class="item">一级菜单</div></div>

一级菜单添加类item,二级添加sub-item。不需要用一级菜单“包裹”二级菜单,将自动识别二级菜单的归属,请注意排序。

如何自定义开始菜单磁贴?

<div class="blocks">
<div class="menu_group">
<div class="title">磁贴组标题1</div>
<div loc="1,1" size="1,1" class="block">
<div class="content">磁贴1</div>
</div>
<div loc="2,1" size="1,1" class="block">
<div class="content">磁贴2</div>
</div>
</div>
<div class="menu_group">
<div class="title">磁贴组标题2</div>
<div loc="1,1" size="2,2" class="block">
<div class="content">磁贴3</div>
</div>
</div></div>

磁贴区域被分成若干小格,每一行最多6格。loc='x,y'中的x表示横坐标,y表示纵坐标(以左上方为1,1点)。size='w,h'中的w和h表示格子的宽度和高度(以格为单位)。

API

调用:Win10-ui的api应当在其初始化之后被调用

<script>
Win10.onReady(function () {
//Win10-ui初始化完成后将执行此处代码
});</script>

所有方法都需要加Win10.前缀。

setBgUrl(bgs) 设置背景图片 Win10.setBgUrl({main:'宽屏壁纸url',mobile:'竖屏壁纸url',})

openUrl(url,title,areaAndOffset) ** 打开一个子窗口,参数列表:url,标题,[尺寸,区域](同layer的area和offset的设置格式,也可以传入'max'强制最大化,例如[['30%','30%'],['50px','50px']])

onReady(handle) win10-ui初始化完毕后的回调

menuOpen() 开始菜单打开

menuClose() 开始菜单关闭

menuToggle() 开始菜单打开/关闭

commandCenterOpen() 信息中心打开

commandCenterClose() 信息中心关闭

commandCenterToggle() 信息中心打开/关闭

renderShortcuts() 重新渲染桌面图标(可用与动态添加或删除了桌面图标之后)

renderMenuBlocks() 重新渲染磁贴(可用与动态添加或删除了磁贴之后)

buildList() 重新预处理菜单列表(可用与动态添加或删除了菜单项之后)

newMsg(title, content,handle_click) 发送一个消息提醒,handle_click是点击回调

isSmallScreen() 如果屏幕宽度小于768px返回true,否则返回false

setAnimated(animated_classes,animated_liveness) 用css的类来设置磁贴动画。animated_liveness设置动画的触发概率(0~1)。animated_classes中存放css class数组,如['class1','class2','class3-1 class3-2']。磁贴将随机选择一个动画来播放(最多3秒)。

exit() 关闭整个页面(有确认提示)

aboutUs() 关于信息

lang(cn,en) 简单的双语支持,如果是中文环境返回cn,否则返回en

getLayeroByIndex(index) 根据openUrl返回的索引,返回窗体的jq对象

hideWins() 最小化所有窗口

setContextMenu(jq_dom, menu) 右键菜单配置(详见进阶篇)

getDesktopScene() 返回桌面舞台的jq对象(用于高级用户diy壁纸)

相关专题
网站后台模板
网站后台模板
2020-02-25 706

精准像素为您提供免费网站后台模板下载,包含热门的CMS后台模板、静态网站后台模板、HTML后台模板等等。

下载地址

· 积分下载:下载扣除10积分,不扣除下载次数
· 会员免费:VIP会员免费下载,扣除下载次数
· 下载即代表您已阅读并同意 [服务条款]

相关推荐
  • html后台模板
  • 后台模板
  • 蓝色通用HTML全套完整后台模板
    蓝色通用HTML全套完整后台模板

    蓝色通用HTML后台模板,包含首页、列表、表单、会员控制面板等等HTML页面

    html模板 937 2年前
  • html通用后台管理网站模板
    html通用后台管理网站模板

    后台管理网站模板说明html通用后台管理网站模板共分为13个后台页面,包括登录、系统首页、产品管理、图片管理、交易管理、支付管理、会员管理、店铺管理、消息管理、文章管理、系统管理、管理员管...

    html模板 402 2年前
  • HTML后台登录界面网站模板
    HTML后台登录界面网站模板

    HTML后台登录界面网站模板说明单页面后台登录界面模板,绿色风格中国风山水画背景。

    html模板 553 2年前
  • 帝国CMS后台登陆界面美化+自适应版
    帝国CMS后台登陆界面美化+自适应版

    帝国CMS后台登陆界面美化+自适应版说明支持认证码输入,支持验证码输入,不支持密码提示问题!请注意,只是登陆界面美化! 帝国CMS后台登陆界面美化+自适应版使用方法使用方法也很简单,下载压缩包,解压得到...

    帝国cms模板 4298 4年前
  • 帝国cms经典后台登录模板
    帝国cms经典后台登录模板

    帝国CMS模板使用方法:解压文件覆盖到帝国CMS目录\e\admin下。---------------------------------------------完善的会员系统 ·灵活的会员组功能:通过会员组功能对会员进行权限级别划分,可设...

    帝国cms模板 1403 8年前
  • 蓝色OA风格帝国cms后台登录模板
    蓝色OA风格帝国cms后台登录模板

    帝国CMS后台模板为utf8编码,其他编码请自行转码,帝国CMS7.0版本。安装方法:覆盖e目录即可。--------------------------------------------帝国CMS7.2版本Fckeditor编辑器更新如下:1、更新让编辑器默...

    帝国cms模板 1859 7年前