在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:macUI开源软件地址:https://gitee.com/muziys/macUI开源软件介绍:MAC_UIMAC_UI基于WIN10UI打造的mac风格的后台UI,让你轻松搭建一个眼前一亮的后台界面 版本v1.1.2.5
预览特性
前置组件
快速入门如何自定义桌面图标?<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>
如何自定义开始菜单列表?<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>
API
<script> Win10.onReady(function () { //Win10-ui初始化完成后将执行此处代码 });</script>
进阶篇
设计思路
icon辅助类本着极简的设计风格,所有图标相关的辅助类都设置为'icon' <div class="shortcut"> <img class="icon" src="./img/icon/win10.png"/> <div class="title">Win10-UI官网</div></div>
<div class="shortcut"> <i class="fa fa-camera-retro icon"></i> <div class="title">Win10-UI官网</div></div>
Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官网");Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");
<div class="item"><i class=" icon fa fa-wrench fa-fw"></i><span>API测试</span></div><div class="item"><img class="icon" src="./img/icon/doc.png"><span>文档图片图标</span></div>
小磁贴设计
小磁贴辅助类你可以放置两个content,并赋予detail和cover的辅助类,将得到炫酷的封面切换主体的动画效果。 <div loc="1,1" size="6,3" class="block"> <div class="content red detail" > 我是主体 </div> <div class="content red cover"> 我是封面 </div></div> 父子页沟通
颜色预定义各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010
右键菜单配置Win10.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。其中jq_dom是jq对象或选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自定义菜单) //典型用法(桌面菜单)Win10.setContextMenu('#win10>.desktop',[ '菜单标题', //单字符串,不带回调 ['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调 ['退出全屏',function () {Win10.disableFullScreen()}], '|', //分隔符 ['关于',function () {Win10.aboutUs()}],]);//设置menu为true会起到禁用系统默认菜单的作用Win10.setContextMenu('#win10',true);
桌面舞台为了让广大开发者能更自由的定义自己的桌面,Win10-UI自v1.1.2.3版本起加入桌面舞台。桌面舞台是一个
子窗口事件自动绑定所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数,无须用onclick手动绑定
<div class="shortcut win10-open-window" data-url="http://www.baidu.com" data-title="我是百度" data-icon-image="https://www.baidu.com/img/bd_logo1.png" data-icon-font="star" data-icon-bg="red" data-area-offset="[['300px', '380px'],'rt']"> <i class="icon fa fa-fw fa-user-circle blue" ></i> <div class="title">百度</div></div>
<div class="shortcut win10-open-window" data-url="www.baidu.com" > <i class="icon fa fa-fw fa-user-circle blue" ></i> <div class="title">百度</div></div>
联系作者联系邮箱:[email protected] |
请发表评论