mirror of https://github.com/1099438829/macUI.git
优化逻辑和样式
This commit is contained in:
parent
777cd1fd82
commit
1d06f4cc84
58
README.md
58
README.md
|
|
@ -10,12 +10,12 @@ v1.1.2.5
|
|||
|
||||
> 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。
|
||||
> 更新方式：基本无须修改html文件，覆盖css和win10.js文件。
|
||||
> 关于html文件的修改，只是添加一行代码。在#win10>.desktop div下，添加一个div `<div id="win10-desktop-scene"></div>`到末尾。
|
||||
> 关于html文件的修改，只是添加一行代码。在#mac>.desktop div下，添加一个div `<div id="mac-desktop-scene"></div>`到末尾。
|
||||
> 对于实在不想修改html的用户，我们在js中添加了自动修正的代码，所以不修改也会有正常的效果。但是这种修正代码将会在未来版本被取消，只作为临时使用。
|
||||
|
||||
## 预览
|
||||
|
||||
![1] http://mac.apecloud.cn
|
||||
![1] http://mac.apecloud.ltd
|
||||
|
||||
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ v1.1.2.5
|
|||
#### 如何自定义桌面图标？
|
||||
|
||||
```html
|
||||
<div id="win10-shortcuts">
|
||||
<div id="mac-shortcuts">
|
||||
<div class="shortcut" onclick="//do something...">
|
||||
<img src="图片地址" class="icon" />
|
||||
<div class="title">图标底部文字</div>
|
||||
|
|
@ -58,7 +58,7 @@ v1.1.2.5
|
|||
#### 如何自定义开始菜单列表?
|
||||
|
||||
```html
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="list mac-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item">一级菜单</div>
|
||||
<div class="item">一级菜单</div>
|
||||
<div class="sub-item">二级菜单</div>
|
||||
|
|
@ -72,19 +72,19 @@ v1.1.2.5
|
|||
|
||||
|
||||
## API
|
||||
* 调用：Win10-ui的api应当在其初始化之后被调用
|
||||
* 调用：Macui-ui的api应当在其初始化之后被调用
|
||||
```html
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
//Win10-ui初始化完成后将执行此处代码
|
||||
Macui.onReady(function () {
|
||||
//Macui-ui初始化完成后将执行此处代码
|
||||
});
|
||||
</script>
|
||||
```
|
||||
> 所有方法都需要加``Win10.``前缀。
|
||||
> 所有方法都需要加``Macui.``前缀。
|
||||
|
||||
* setBgUrl(bgs) 设置背景图片 ``Win10.setBgUrl({main:'宽屏壁纸url',mobile:'竖屏壁纸url',})``
|
||||
* setBgUrl(bgs) 设置背景图片 ``Macui.setBgUrl({main:'宽屏壁纸url',mobile:'竖屏壁纸url',})``
|
||||
* openUrl(url,title,areaAndOffset) ** 打开一个子窗口,参数列表：url,标题，[尺寸，区域]\(同layer的area和offset的设置格式，也可以传入'max'强制最大化，例如``[['30%','30%'],['50px','50px']]``\)
|
||||
* onReady(handle) win10-ui初始化完毕后的回调
|
||||
* onReady(handle) mac-ui初始化完毕后的回调
|
||||
* menuOpen() 开始菜单打开
|
||||
* menuClose() 开始菜单关闭
|
||||
* menuToggle() 开始菜单打开/关闭
|
||||
|
|
@ -111,7 +111,7 @@ v1.1.2.5
|
|||
|
||||
#### 设计思路
|
||||
|
||||
* Win10-UI应当作为你网站模块的主入口，而具体功能页面适合用子窗口的形式打开。子窗口是以iframe实现的，减少了js、css冲突，保证了独立性。同时父子页之间也可以通过Win10_child.js的API进行沟通
|
||||
* Macui-UI应当作为你网站模块的主入口，而具体功能页面适合用子窗口的形式打开。子窗口是以iframe实现的，减少了js、css冲突，保证了独立性。同时父子页之间也可以通过Macui_child.js的API进行沟通
|
||||
* 桌面图标适用于最常用的操作，菜单适用于构建所有操作的清单（这里的操作不限于打开子窗口）
|
||||
* 小磁贴视觉冲击力强，除了可以做出醒目的按钮，也可以用作信息展板，甚至于在磁贴的方块空间内构建复杂的应用（如音乐播放器）
|
||||
|
||||
|
|
@ -120,8 +120,8 @@ v1.1.2.5
|
|||
本着极简的设计风格，所有图标相关的辅助类都设置为'icon'
|
||||
```html
|
||||
<div class="shortcut">
|
||||
<img class="icon" src="./img/icon/win10.png"/>
|
||||
<div class="title">Win10-UI官网</div>
|
||||
<img class="icon" src="./img/icon/mac.png"/>
|
||||
<div class="title">Macui-UI官网</div>
|
||||
</div>
|
||||
```
|
||||
>在桌面图标中，设置img.icon声明该图片是一个图标
|
||||
|
|
@ -129,14 +129,14 @@ v1.1.2.5
|
|||
```html
|
||||
<div class="shortcut">
|
||||
<i class="fa fa-camera-retro icon"></i>
|
||||
<div class="title">Win10-UI官网</div>
|
||||
<div class="title">Macui-UI官网</div>
|
||||
</div>
|
||||
```
|
||||
>在桌面图标中，用.icon声明一个字体图标（以font awesome为例）
|
||||
|
||||
```html
|
||||
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>字体图标");
|
||||
Macui.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/mac.png\"/>Macui-UI官网");
|
||||
Macui.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");
|
||||
```
|
||||
>没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></
|
|||
#### 父子页沟通
|
||||
|
||||
* 要使用子页工具集，请先引入win10.child.js
|
||||
* 自由的使用Win10_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Win10_parent对象，将指向父页的Win10对象。
|
||||
* 自由的使用Macui_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Macui_parent对象，将指向父页的Macui对象。
|
||||
* 父页打开子窗口的函数openUrl会返回索引index，使用getLayeroByIndex(index)获得子窗口对象,然后就可以方便的控制子窗口的行为了。
|
||||
|
||||
#### 颜色预定义
|
||||
|
|
@ -189,35 +189,35 @@ Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></
|
|||
|
||||
#### 右键菜单配置
|
||||
|
||||
Win10.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。
|
||||
Macui.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。
|
||||
其中jq_dom是jq对象或选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自定义菜单)
|
||||
~~~js
|
||||
//典型用法(桌面菜单)
|
||||
Win10.setContextMenu('#win10>.desktop',[
|
||||
Macui.setContextMenu('#mac>.desktop',[
|
||||
'菜单标题', //单字符串，不带回调
|
||||
['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调
|
||||
['退出全屏',function () {Win10.disableFullScreen()}],
|
||||
['进入全屏',function () {Macui.enableFullScreen()}], //菜单项+点击回调
|
||||
['退出全屏',function () {Macui.disableFullScreen()}],
|
||||
'|', //分隔符
|
||||
['关于',function () {Win10.aboutUs()}],
|
||||
['关于',function () {Macui.aboutUs()}],
|
||||
]);
|
||||
|
||||
//设置menu为true会起到禁用系统默认菜单的作用
|
||||
Win10.setContextMenu('#win10',true);
|
||||
Macui.setContextMenu('#mac',true);
|
||||
~~~
|
||||
> 点击回调函数可以声明一个参数e,将传入点击事件的对象。特别的，e.data是触发右键菜单的对象。
|
||||
|
||||
#### 桌面舞台
|
||||
|
||||
为了让广大开发者能更自由的定义自己的桌面，Win10-UI自v1.1.2.3版本起加入桌面舞台。
|
||||
桌面舞台是一个`id`为`win10-desktop-scene`的div，位于`#win10>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。
|
||||
为了让广大开发者能更自由的定义自己的桌面，Macui-UI自v1.1.2.3版本起加入桌面舞台。
|
||||
桌面舞台是一个`id`为`mac-desktop-scene`的div，位于`#mac>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。
|
||||
借助此特性，你甚至可以发挥想象力，制作出动态壁纸。
|
||||
> 使用`getDesktopScene`函数可以快捷获取桌面舞台的jq对象。
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面舞台的支持特性，可以去官方群下载补丁`win10_desktop_scene_support.js`。
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面舞台的支持特性，可以去官方群下载补丁`#mac_desktop_scene_support.js`。
|
||||
|
||||
#### 子窗口事件自动绑定
|
||||
|
||||
所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`win10_bind_open_windows.js`。
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`#mac_bind_open_windows.js`。
|
||||
|
||||
* 标签属性说明
|
||||
* data-title:窗口标题
|
||||
|
|
@ -230,7 +230,7 @@ Win10.setContextMenu('#win10',true);
|
|||
* 特别的，如果子节点有icon和title的css类，可以自动识别为图标和标题，无须设置data-title和data-icon-image(font)
|
||||
|
||||
~~~html
|
||||
<div class="shortcut win10-open-window"
|
||||
<div class="shortcut mac-open-window"
|
||||
data-url="http://www.baidu.com"
|
||||
data-title="我是百度"
|
||||
data-icon-image="https://www.baidu.com/img/bd_logo1.png"
|
||||
|
|
@ -244,7 +244,7 @@ Win10.setContextMenu('#win10',true);
|
|||
> 这是所有可选项都用上的完整写法。
|
||||
|
||||
~~~html
|
||||
<div class="shortcut win10-open-window" data-url="www.baidu.com" >
|
||||
<div class="shortcut mac-open-window" data-url="www.baidu.com" >
|
||||
<i class="icon fa fa-fw fa-user-circle blue" ></i>
|
||||
<div class="title">百度</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<style>
|
||||
* {
|
||||
color: gray;
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu,sans-serif
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -31,16 +31,16 @@
|
|||
<div class="btn" onclick="f3()">关闭子页</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
||||
<script src="./js/win10.child.min.js"></script>
|
||||
<script src="./js/mac.child.min.js"></script>
|
||||
<script>
|
||||
function f1() {
|
||||
Win10_child.newMsg('子页的问候', '这是从iframe页调用APi发送的消息哦');
|
||||
Macui_child.newMsg('子页的问候', '这是从iframe页调用APi发送的消息哦');
|
||||
}
|
||||
function f2() {
|
||||
Win10_child.openUrl('http://win10ui.yuri2.cn', '<img class=\'icon\' src=\'./img/icon/win10.png\'/>', 'Win10-UI官网')
|
||||
Macui_child.openUrl('http://win10ui.yuri2.cn', '<img class=\'icon\' src=\'./img/icon/mac.png\'/>', 'Macui-UI官网')
|
||||
}
|
||||
function f3() {
|
||||
Win10_child.close();
|
||||
Macui_child.close();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
976
css/index.css
976
css/index.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
143
demo.html
143
demo.html
|
|
@ -16,77 +16,82 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="win10">
|
||||
<div id="win10_task_bar" class="backgroud_blur">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
<div id="mac">
|
||||
<div id="mac_task_bar" class="backgroud_blur">
|
||||
<div id="mac_btn_group_left" class="btn_group">
|
||||
<div id="mac_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_btn_time"></div>
|
||||
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||
<div id="mac_btn_group_middle" class="btn_group"></div>
|
||||
<div id="mac_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="mac_btn_time"></div>
|
||||
<div class="btn" id="mac_btn_command"><span id="mac-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="mac_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div id="win10-shortcuts" class="shortcuts-hidden">
|
||||
<div id="mac-shortcuts" class="shortcuts-hidden">
|
||||
<div class="shortcut"
|
||||
onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">OS官网</div>
|
||||
</div>
|
||||
<div class="shortcut"
|
||||
onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||
<img class="icon" src="./img/icon/safari.png" />
|
||||
<div class="title">safari</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('./app/todo','<img class=\'icon\' src=\'./img/icon/notes.png\'/>','notes')">
|
||||
onclick="Macui.openUrl('./app/todo','<img class=\'icon\' src=\'./img/icon/notes.png\'/>','note')">
|
||||
<img class="icon" src="./img/icon/notes.png" />
|
||||
<div class="title">notes</div>
|
||||
<div class="title">Note</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('https://developer.apple.com/game-center','<img class=\'icon\' src=\'./img/icon/gamecenter.png\'/>','GameCenter')">
|
||||
<div class="shortcut"
|
||||
onclick="Macui.openUrl('https://developer.apple.com/game-center','<img class=\'icon\' src=\'./img/icon/gamecenter.png\'/>','GameCenter')">
|
||||
<img class="icon" src="./img/icon/gamecenter.png" />
|
||||
<div class="title">GameCenter</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])">
|
||||
<div class="shortcut" onclick="Macui.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])">
|
||||
<img class="icon" src="./img/icon/calendar.png" />
|
||||
<div class="title">Calendar</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Macui.openUrl('./app/calculator','<img class=\'icon\' src=\'./img/icon/calculator.png\'/>','Calculator',[['387px','613px'],'auto'])">
|
||||
<img class="icon" src="./img/icon/calculator.png" />
|
||||
<div class="title">Calculator</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('https://www.icloud.com/')">
|
||||
<img class="icon" src="./img/icon/icloud.png" />
|
||||
<div class="title">iCloud</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('https://map.baidu.com','<img class=\'icon\' src=\'./img/icon/maps.png\'/>','Map')">
|
||||
<div class="shortcut"
|
||||
onclick="Macui.openUrl('https://map.baidu.com','<img class=\'icon\' src=\'./img/icon/maps.png\'/>','Map')">
|
||||
<img class="icon" src="./img/icon/maps.png" />
|
||||
<div class="title">地图</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('https://github.com/yuri2peter/win10-ui/archive/master.zip')">
|
||||
<div class="shortcut"
|
||||
onclick="window.open('https://github.com/yuri2peter/mac-ui/archive/master.zip')">
|
||||
<img class="icon" src="./img/icon/prefapp.png" />
|
||||
<div class="title">设置</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('./login.html','<i class=\'fa fa-user icon black-green\'></i>','登录页')">
|
||||
<div class="shortcut"
|
||||
onclick="window.open('./login.html','<i class=\'fa fa-user icon black-green\'></i>','登录页')">
|
||||
<i class="fa fa-user icon black-green"></i>
|
||||
<div class="title">登录页</div>
|
||||
</div>
|
||||
<div class="shortcut win10-open-window flipInX animated" data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;">
|
||||
<div class="shortcut mac-open-window flipInX animated"
|
||||
data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;">
|
||||
<img class="icon" src="./img/icon/DesktopScreenEffectsPref.png" />
|
||||
<div class="title">切换壁纸</div>
|
||||
</div>
|
||||
<div class="shortcut win10-drawer">
|
||||
<div class="shortcut mac-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png" />
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-drawer">
|
||||
<div class="mac-drawer-box">
|
||||
<div class="shortcut-drawer mac-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png" />
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<div class="mac-drawer-box">
|
||||
<div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
|
|
@ -99,41 +104,39 @@
|
|||
</div>
|
||||
<div class="background blur"></div>
|
||||
</div>
|
||||
<div id="win10-menu" class="hidden backgroud_blur">
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
|
||||
<div id="mac-menu" class="hidden backgroud_blur">
|
||||
<div class="list mac-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item"><i class="icon fa fa-wrench fa-fw"></i><span>API测试</span></div>
|
||||
<div class="sub-item" onclick="Macui.openUrl('./child.html','子页')">父子页沟通</div>
|
||||
<div class="sub-item" onclick="Macui.commandCenterOpen()">打开消息中心</div>
|
||||
<div class="sub-item"
|
||||
onclick="Win10.openUrl('./child.html','<span class=\'icon fa fa-cubes\'></span>','子页')">父子页沟通</div>
|
||||
<div class="sub-item" onclick="Win10.commandCenterOpen()">打开消息中心</div>
|
||||
<div class="sub-item"
|
||||
onclick="Win10.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">
|
||||
onclick="Macui.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">
|
||||
发送带回调的消息</div>
|
||||
<div class="sub-item" onclick="Win10.menuClose()">关闭菜单</div>
|
||||
<div class="sub-item" onclick="Macui.menuClose()">关闭菜单</div>
|
||||
<div class="item"><i class="icon fa fa-gavel fa-fw"></i>辅助工具</div>
|
||||
<div class="sub-item"
|
||||
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','<span class=\'icon fa fa-cubes\'></span>','图标代码生成器')">
|
||||
桌面图标代码生成器</div>
|
||||
<div class="sub-item"
|
||||
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','<span class=\'icon fa fa-cubes\'></span>','磁贴代码生成器')">
|
||||
onclick="Macui.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','图标代码生成器')">桌面图标代码生成器
|
||||
</div>
|
||||
<div class="sub-item" onclick="Macui.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','磁贴代码生成器')">
|
||||
磁贴代码生成器</div>
|
||||
<div class="sub-item"
|
||||
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','<span class=\'icon fa fa-cubes\'></span>','菜单代码生成器')">
|
||||
<div class="sub-item" onclick="Macui.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','菜单代码生成器')">
|
||||
菜单代码生成器</div>
|
||||
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
<div class="item" onclick="Macui.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Macui.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right backgroud_blur">
|
||||
<div id="mac_command_center" class="hidden_right backgroud_blur">
|
||||
<div class="command-header">
|
||||
<div class="tab-today active">今天</div>
|
||||
<div class="tab-msg">通知</div>
|
||||
</div>
|
||||
<div class="command-body today"></div>
|
||||
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
|
||||
<!-- <span id="mac_btn_command_center_clean_all">全部清除</span> -->
|
||||
<div class="command-body msgs"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="dock backgroud_blur">
|
||||
<div class="dock" id="dock">
|
||||
<div class="dock-container backgroud_blur">
|
||||
<ul>
|
||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a
|
||||
onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')">
|
||||
|
|
@ -141,6 +144,8 @@
|
|||
<li><span class="dock-tips">safari<span class="arrow"></span></span><a
|
||||
onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||
<img src="./img/icon/safari.png"></a></li>
|
||||
<li class="launchpad"><span class="dock-tips ">launchpad<span class="arrow"></span></span><a>
|
||||
<img src="./img/icon/launchpad.png"></a></li>
|
||||
<li><span class="dock-tips">computer<span class="arrow"></span></span><a
|
||||
onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')">
|
||||
<img src="./img/icon/computer.png"></a></li>
|
||||
|
|
@ -177,6 +182,32 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="launchpad" class="launchpad backgroud_blur hidden">
|
||||
<div id="app-serach-box" class="app-serach-box">
|
||||
<form action="" class="search">
|
||||
<div class="serach-box">
|
||||
<input type="text" class="input-search" name="input-search" pattern=".{1,}" required>
|
||||
<label>Search</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="app-shortcuts" class="app-shortcuts">
|
||||
<div class="shortcut"
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('./demo.html')">
|
||||
<img class="icon" src="./img/icon/demo.png" />
|
||||
<div class="title">查看DEMO</div>
|
||||
</div>
|
||||
<div class="shortcut"
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
|
||||
|
|
@ -184,29 +215,29 @@
|
|||
<script type="text/javascript" src="./js/index.min.js"></script>
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
Macui.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
Macui.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
Macui.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Win10.enableFullScreen();
|
||||
Macui.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Macui.enableFullScreen();
|
||||
});
|
||||
Win10.newMsg('最新资讯', '最新资讯信息', function () {
|
||||
Macui.newMsg('最新资讯', '最新资讯信息', function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
skin: 'mac-open-iframe',
|
||||
offset: 'rb',
|
||||
content: './broadcast.html'
|
||||
});
|
||||
|
|
@ -219,7 +250,7 @@
|
|||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
skin: 'mac-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
112
index.html
112
index.html
|
|
@ -16,27 +16,27 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="win10">
|
||||
<div id="win10_task_bar" class="backgroud_blur">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_btn_time"></div>
|
||||
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||
<div id="mac">
|
||||
<div id="mac_task_bar" class="backgroud_blur">
|
||||
<div id="mac_btn_group_left" class="btn_group">
|
||||
<div id="mac_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
</div>
|
||||
<div id="mac_btn_group_middle" class="btn_group"></div>
|
||||
<div id="mac_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="mac_btn_time"></div>
|
||||
<div class="btn" id="mac_btn_command"><span id="mac-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="mac_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div id="win10-shortcuts" class="shortcuts-hidden">
|
||||
<div id="mac-shortcuts" class="shortcuts-hidden">
|
||||
<div class="shortcut"
|
||||
onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">OS官网</div>
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
<div class="shortcut"
|
||||
onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||
onclick="Macui.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||
<img class="icon" src="./img/icon/safari.png" />
|
||||
<div class="title">safari</div>
|
||||
</div>
|
||||
|
|
@ -44,21 +44,21 @@
|
|||
<img class="icon" src="./img/icon/demo.png" />
|
||||
<div class="title">查看DEMO</div>
|
||||
</div>
|
||||
<div class="shortcut win10-drawer">
|
||||
<div class="shortcut mac-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png" />
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-drawer">
|
||||
<div class="mac-drawer-box">
|
||||
<div class="shortcut-drawer mac-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png" />
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<div class="mac-drawer-box">
|
||||
<div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
|
|
@ -71,32 +71,37 @@
|
|||
</div>
|
||||
<div class="background blur"></div>
|
||||
</div>
|
||||
<div id="win10-menu" class="hidden backgroud_blur">
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
<div id="mac-menu" class="hidden backgroud_blur">
|
||||
<div class="list mac-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item" onclick="Macui.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Macui.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right backgroud_blur">
|
||||
<div id="mac_command_center" class="hidden_right backgroud_blur">
|
||||
<div class="command-header">
|
||||
<div class="tab-today active">今天</div>
|
||||
<div class="tab-msg">通知</div>
|
||||
</div>
|
||||
<div class="command-body today"></div>
|
||||
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
|
||||
<!-- <span id="mac_btn_command_center_clean_all">全部清除</span> -->
|
||||
<div class="command-body msgs"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="dock backgroud_blur">
|
||||
<div class="dock" id="dock">
|
||||
<div class="dock-container backgroud_blur">
|
||||
<ul>
|
||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a
|
||||
onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')">
|
||||
<img src="./img/icon/finder.png"></a></li>
|
||||
<li>
|
||||
<span class="dock-tips">finder<span class="arrow"></span></span>
|
||||
<a onclick="Macui.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')">
|
||||
<img src="./img/icon/finder.png">
|
||||
</a>
|
||||
</li>
|
||||
<li><span class="dock-tips">safari<span class="arrow"></span></span><a
|
||||
onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||
onclick="Macui.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||
<img src="./img/icon/safari.png"></a></li>
|
||||
<li class="launchpad"><span class="dock-tips ">launchpad<span class="arrow"></span></span><a>
|
||||
<img src="./img/icon/launchpad.png"></a></li>
|
||||
<li><span class="dock-tips">computer<span class="arrow"></span></span><a
|
||||
onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')">
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')">
|
||||
<img src="./img/icon/computer.png"></a></li>
|
||||
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img
|
||||
src="./img/icon/gamecenter.png"></a></li>
|
||||
|
|
@ -111,28 +116,55 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="launchpad" class="launchpad backgroud_blur hidden">
|
||||
<div id="app-serach-box" class="app-serach-box">
|
||||
<form action="" class="search">
|
||||
<div class="serach-box">
|
||||
<input type="text" class="input-search" name="input-search" pattern=".{1,}" required>
|
||||
<label>Search</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="app-shortcuts" class="app-shortcuts">
|
||||
<div class="shortcut"
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('./demo.html')">
|
||||
<img class="icon" src="./img/icon/demo.png" />
|
||||
<div class="title">查看DEMO</div>
|
||||
</div>
|
||||
<div class="shortcut"
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layer/3.5.1/layer.min.js"></script>
|
||||
<script type="text/javascript" src="./js/index.min.js"></script>
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
Macui.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
Macui.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
Macui.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Win10.enableFullScreen();
|
||||
Macui.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Macui.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
|
|
@ -142,7 +174,7 @@
|
|||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
skin: 'mac-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
|
|
|
|||
2252
js/index.js
2252
js/index.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
717
js/interface.js
717
js/interface.js
|
|
@ -1,717 +0,0 @@
|
|||
/*
|
||||
* Interface elements for jQuery - http://interface.eyecon.ro
|
||||
*
|
||||
* Copyright (c) 2006 Stefan Petre
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
jQuery.iUtil = {
|
||||
getPosition: function(e) {
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
var restoreStyle = false;
|
||||
var es = e.style;
|
||||
if (jQuery(e).css('display') == 'none') {
|
||||
oldVisibility = es.visibility;
|
||||
oldPosition = es.position;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
restoreStyle = true
|
||||
}
|
||||
var el = e;
|
||||
while (el) {
|
||||
x += el.offsetLeft + (el.currentStyle && !jQuery.browser.opera ? parseInt(el.currentStyle.borderLeftWidth) || 0: 0);
|
||||
y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ? parseInt(el.currentStyle.borderTopWidth) || 0: 0);
|
||||
el = el.offsetParent
|
||||
}
|
||||
el = e;
|
||||
while (el && el.tagName && el.tagName.toLowerCase() != 'body') {
|
||||
x -= el.scrollLeft || 0;
|
||||
y -= el.scrollTop || 0;
|
||||
el = el.parentNode
|
||||
}
|
||||
if (restoreStyle) {
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility
|
||||
}
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
getPositionLite: function(el) {
|
||||
var x = 0,
|
||||
y = 0;
|
||||
while (el) {
|
||||
x += el.offsetLeft || 0;
|
||||
y += el.offsetTop || 0;
|
||||
el = el.offsetParent
|
||||
}
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
getSize: function(e) {
|
||||
var w = jQuery.css(e, 'width');
|
||||
var h = jQuery.css(e, 'height');
|
||||
var wb = 0;
|
||||
var hb = 0;
|
||||
var es = e.style;
|
||||
if (jQuery(e).css('display') != 'none') {
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight
|
||||
} else {
|
||||
oldVisibility = es.visibility;
|
||||
oldPosition = es.position;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility
|
||||
}
|
||||
return {
|
||||
w: w,
|
||||
h: h,
|
||||
wb: wb,
|
||||
hb: hb
|
||||
}
|
||||
},
|
||||
getSizeLite: function(el) {
|
||||
return {
|
||||
wb: el.offsetWidth || 0,
|
||||
hb: el.offsetHeight || 0
|
||||
}
|
||||
},
|
||||
getClient: function(e) {
|
||||
var h,
|
||||
w,
|
||||
de;
|
||||
if (e) {
|
||||
w = e.clientWidth;
|
||||
h = e.clientHeight
|
||||
} else {
|
||||
de = document.documentElement;
|
||||
w = window.innerWidth || self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
|
||||
h = window.innerHeight || self.innerHeight || (de && de.clientHeight) || document.body.clientHeight
|
||||
}
|
||||
return {
|
||||
w: w,
|
||||
h: h
|
||||
}
|
||||
},
|
||||
getScroll: function(e) {
|
||||
var t,
|
||||
l,
|
||||
w,
|
||||
h,
|
||||
iw,
|
||||
ih;
|
||||
if (e && e.nodeName.toLowerCase() != 'body') {
|
||||
t = e.scrollTop;
|
||||
l = e.scrollLeft;
|
||||
w = e.scrollWidth;
|
||||
h = e.scrollHeight;
|
||||
iw = 0;
|
||||
ih = 0
|
||||
} else {
|
||||
if (document.documentElement && document.documentElement.scrollTop) {
|
||||
t = document.documentElement.scrollTop;
|
||||
l = document.documentElement.scrollLeft;
|
||||
w = document.documentElement.scrollWidth;
|
||||
h = document.documentElement.scrollHeight
|
||||
} else if (document.body) {
|
||||
t = document.body.scrollTop;
|
||||
l = document.body.scrollLeft;
|
||||
w = document.body.scrollWidth;
|
||||
h = document.body.scrollHeight
|
||||
}
|
||||
iw = self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
|
||||
ih = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
|
||||
}
|
||||
return {
|
||||
t: t,
|
||||
l: l,
|
||||
w: w,
|
||||
h: h,
|
||||
iw: iw,
|
||||
ih: ih
|
||||
}
|
||||
},
|
||||
getMargins: function(e, toInteger) {
|
||||
var el = jQuery(e);
|
||||
var t = el.css('marginTop') || '';
|
||||
var r = el.css('marginRight') || '';
|
||||
var b = el.css('marginBottom') || '';
|
||||
var l = el.css('marginLeft') || '';
|
||||
if (toInteger) return {
|
||||
t: parseInt(t) || 0,
|
||||
r: parseInt(r) || 0,
|
||||
b: parseInt(b) || 0,
|
||||
l: parseInt(l)
|
||||
};
|
||||
else return {
|
||||
t: t,
|
||||
r: r,
|
||||
b: b,
|
||||
l: l
|
||||
}
|
||||
},
|
||||
getPadding: function(e, toInteger) {
|
||||
var el = jQuery(e);
|
||||
var t = el.css('paddingTop') || '';
|
||||
var r = el.css('paddingRight') || '';
|
||||
var b = el.css('paddingBottom') || '';
|
||||
var l = el.css('paddingLeft') || '';
|
||||
if (toInteger) return {
|
||||
t: parseInt(t) || 0,
|
||||
r: parseInt(r) || 0,
|
||||
b: parseInt(b) || 0,
|
||||
l: parseInt(l)
|
||||
};
|
||||
else return {
|
||||
t: t,
|
||||
r: r,
|
||||
b: b,
|
||||
l: l
|
||||
}
|
||||
},
|
||||
getBorder: function(e, toInteger) {
|
||||
var el = jQuery(e);
|
||||
var t = el.css('borderTopWidth') || '';
|
||||
var r = el.css('borderRightWidth') || '';
|
||||
var b = el.css('borderBottomWidth') || '';
|
||||
var l = el.css('borderLeftWidth') || '';
|
||||
if (toInteger) return {
|
||||
t: parseInt(t) || 0,
|
||||
r: parseInt(r) || 0,
|
||||
b: parseInt(b) || 0,
|
||||
l: parseInt(l) || 0
|
||||
};
|
||||
else return {
|
||||
t: t,
|
||||
r: r,
|
||||
b: b,
|
||||
l: l
|
||||
}
|
||||
},
|
||||
getPointer: function(event) {
|
||||
var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0;
|
||||
var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0;
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
traverseDOM: function(nodeEl, func) {
|
||||
func(nodeEl);
|
||||
nodeEl = nodeEl.firstChild;
|
||||
while (nodeEl) {
|
||||
jQuery.iUtil.traverseDOM(nodeEl, func);
|
||||
nodeEl = nodeEl.nextSibling
|
||||
}
|
||||
},
|
||||
purgeEvents: function(nodeEl) {
|
||||
jQuery.iUtil.traverseDOM(nodeEl,
|
||||
function(el) {
|
||||
for (var attr in el) {
|
||||
if (typeof el[attr] === 'function') {
|
||||
el[attr] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
centerEl: function(el, axis) {
|
||||
var clientScroll = $.iUtil.getScroll();
|
||||
var windowSize = $.iUtil.getSize(el);
|
||||
if (!axis || axis == 'vertically') $(el).css({
|
||||
top: clientScroll.t + ((Math.max(clientScroll.h, clientScroll.ih) - clientScroll.t - windowSize.hb) / 2) + 'px'
|
||||
});
|
||||
if (!axis || axis == 'horizontally') $(el).css({
|
||||
left: clientScroll.l + ((Math.max(clientScroll.w, clientScroll.iw) - clientScroll.l - windowSize.wb) / 2) + 'px'
|
||||
})
|
||||
},
|
||||
fixPNG: function(el, emptyGIF) {
|
||||
var images = $('img[@src*="png"]', el || document),
|
||||
png;
|
||||
images.each(function() {
|
||||
png = this.src;
|
||||
this.src = emptyGIF;
|
||||
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + png + "')"
|
||||
})
|
||||
}
|
||||
}; [].indexOf || (Array.prototype.indexOf = function(v, n) {
|
||||
n = (n == null) ? 0: n;
|
||||
var m = this.length;
|
||||
for (var i = n; i < m; i++) if (this[i] == v) return i;
|
||||
return - 1
|
||||
});
|
||||
jQuery.fxCheckTag = function(e) {
|
||||
if (/^tr$|^td$|^tbody$|^caption$|^thead$|^tfoot$|^col$|^colgroup$|^th$|^body$|^header$|^script$|^frame$|^frameset$|^option$|^optgroup$|^meta$/i.test(e.nodeName)) return false;
|
||||
else return true
|
||||
};
|
||||
jQuery.fx.destroyWrapper = function(e, old) {
|
||||
var c = e.firstChild;
|
||||
var cs = c.style;
|
||||
cs.position = old.position;
|
||||
cs.marginTop = old.margins.t;
|
||||
cs.marginLeft = old.margins.l;
|
||||
cs.marginBottom = old.margins.b;
|
||||
cs.marginRight = old.margins.r;
|
||||
cs.top = old.top + 'px';
|
||||
cs.left = old.left + 'px';
|
||||
e.parentNode.insertBefore(c, e);
|
||||
e.parentNode.removeChild(e)
|
||||
};
|
||||
jQuery.fx.buildWrapper = function(e) {
|
||||
if (!jQuery.fxCheckTag(e)) return false;
|
||||
var t = jQuery(e);
|
||||
var es = e.style;
|
||||
var restoreStyle = false;
|
||||
var oldStyle = {};
|
||||
oldStyle.position = t.css('position');
|
||||
if (t.css('display') == 'none') {
|
||||
oldVisibility = t.css('visibility');
|
||||
es.visibility = 'hidden';
|
||||
es.display = '';
|
||||
restoreStyle = true
|
||||
}
|
||||
oldStyle.sizes = jQuery.iUtil.getSize(e);
|
||||
oldStyle.margins = jQuery.iUtil.getMargins(e);
|
||||
var oldFloat = e.currentStyle ? e.currentStyle.styleFloat: t.css('float');
|
||||
oldStyle.top = parseInt(t.css('top')) || 0;
|
||||
oldStyle.left = parseInt(t.css('left')) || 0;
|
||||
var wid = 'w_' + parseInt(Math.random() * 10000);
|
||||
var wr = document.createElement(/^img$|^br$|^input$|^hr$|^select$|^textarea$|^object$|^iframe$|^button$|^form$|^table$|^ul$|^dl$|^ol$/i.test(e.nodeName) ? 'div': e.nodeName);
|
||||
jQuery.attr(wr, 'id', wid);
|
||||
wr.className = 'fxWrapper';
|
||||
var wrs = wr.style;
|
||||
var top = 0;
|
||||
var left = 0;
|
||||
if (oldStyle.position == 'relative' || oldStyle.position == 'absolute') {
|
||||
top = oldStyle.top;
|
||||
left = oldStyle.left
|
||||
}
|
||||
wrs.display = 'none';
|
||||
wrs.top = top + 'px';
|
||||
wrs.left = left + 'px';
|
||||
wrs.position = oldStyle.position != 'relative' && oldStyle.position != 'absolute' ? 'relative': oldStyle.position;
|
||||
wrs.overflow = 'hidden';
|
||||
wrs.height = oldStyle.sizes.hb + 'px';
|
||||
wrs.width = oldStyle.sizes.wb + 'px';
|
||||
wrs.marginTop = oldStyle.margins.t;
|
||||
wrs.marginRight = oldStyle.margins.r;
|
||||
wrs.marginBottom = oldStyle.margins.b;
|
||||
wrs.marginLeft = oldStyle.margins.l;
|
||||
if (jQuery.browser.msie) {
|
||||
wrs.styleFloat = oldFloat
|
||||
} else {
|
||||
wrs.cssFloat = oldFloat
|
||||
}
|
||||
e.parentNode.insertBefore(wr, e);
|
||||
es.marginTop = '0px';
|
||||
es.marginRight = '0px';
|
||||
es.marginBottom = '0px';
|
||||
es.marginLeft = '0px';
|
||||
es.position = 'absolute';
|
||||
es.listStyle = 'none';
|
||||
es.top = '0px';
|
||||
es.left = '0px';
|
||||
if (restoreStyle) {
|
||||
es.display = 'none';
|
||||
es.visibility = oldVisibility
|
||||
}
|
||||
wr.appendChild(e);
|
||||
wrs.display = 'block';
|
||||
return {
|
||||
oldStyle: oldStyle,
|
||||
wrapper: jQuery(wr)
|
||||
}
|
||||
};
|
||||
jQuery.fx.namedColors = {
|
||||
aqua: [0, 255, 255],
|
||||
azure: [240, 255, 255],
|
||||
beige: [245, 245, 220],
|
||||
black: [0, 0, 0],
|
||||
blue: [0, 0, 255],
|
||||
brown: [165, 42, 42],
|
||||
cyan: [0, 255, 255],
|
||||
darkblue: [0, 0, 139],
|
||||
darkcyan: [0, 139, 139],
|
||||
darkgrey: [169, 169, 169],
|
||||
darkgreen: [0, 100, 0],
|
||||
darkkhaki: [189, 183, 107],
|
||||
darkmagenta: [139, 0, 139],
|
||||
darkolivegreen: [85, 107, 47],
|
||||
darkorange: [255, 140, 0],
|
||||
darkorchid: [153, 50, 204],
|
||||
darkred: [139, 0, 0],
|
||||
darksalmon: [233, 150, 122],
|
||||
darkviolet: [148, 0, 211],
|
||||
fuchsia: [255, 0, 255],
|
||||
gold: [255, 215, 0],
|
||||
green: [0, 128, 0],
|
||||
indigo: [75, 0, 130],
|
||||
khaki: [240, 230, 140],
|
||||
lightblue: [173, 216, 230],
|
||||
lightcyan: [224, 255, 255],
|
||||
lightgreen: [144, 238, 144],
|
||||
lightgrey: [211, 211, 211],
|
||||
lightpink: [255, 182, 193],
|
||||
lightyellow: [255, 255, 224],
|
||||
lime: [0, 255, 0],
|
||||
magenta: [255, 0, 255],
|
||||
maroon: [128, 0, 0],
|
||||
navy: [0, 0, 128],
|
||||
olive: [128, 128, 0],
|
||||
orange: [255, 165, 0],
|
||||
pink: [255, 192, 203],
|
||||
purple: [128, 0, 128],
|
||||
red: [255, 0, 0],
|
||||
silver: [192, 192, 192],
|
||||
white: [255, 255, 255],
|
||||
yellow: [255, 255, 0]
|
||||
};
|
||||
jQuery.fx.parseColor = function(color, notColor) {
|
||||
if (jQuery.fx.namedColors[color]) return {
|
||||
r: jQuery.fx.namedColors[color][0],
|
||||
g: jQuery.fx.namedColors[color][1],
|
||||
b: jQuery.fx.namedColors[color][2]
|
||||
};
|
||||
else if (result = /^rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)$/.exec(color)) return {
|
||||
r: parseInt(result[1]),
|
||||
g: parseInt(result[2]),
|
||||
b: parseInt(result[3])
|
||||
};
|
||||
else if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)$/.exec(color)) return {
|
||||
r: parseFloat(result[1]) * 2.55,
|
||||
g: parseFloat(result[2]) * 2.55,
|
||||
b: parseFloat(result[3]) * 2.55
|
||||
};
|
||||
else if (result = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/.exec(color)) return {
|
||||
r: parseInt("0x" + result[1] + result[1]),
|
||||
g: parseInt("0x" + result[2] + result[2]),
|
||||
b: parseInt("0x" + result[3] + result[3])
|
||||
};
|
||||
else if (result = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(color)) return {
|
||||
r: parseInt("0x" + result[1]),
|
||||
g: parseInt("0x" + result[2]),
|
||||
b: parseInt("0x" + result[3])
|
||||
};
|
||||
else return notColor == true ? false: {
|
||||
r: 255,
|
||||
g: 255,
|
||||
b: 255
|
||||
}
|
||||
};
|
||||
jQuery.fx.cssProps = {
|
||||
borderBottomWidth: 1,
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
borderTopWidth: 1,
|
||||
bottom: 1,
|
||||
fontSize: 1,
|
||||
height: 1,
|
||||
left: 1,
|
||||
letterSpacing: 1,
|
||||
lineHeight: 1,
|
||||
marginBottom: 1,
|
||||
marginLeft: 1,
|
||||
marginRight: 1,
|
||||
marginTop: 1,
|
||||
maxHeight: 1,
|
||||
maxWidth: 1,
|
||||
minHeight: 1,
|
||||
minWidth: 1,
|
||||
opacity: 1,
|
||||
outlineOffset: 1,
|
||||
outlineWidth: 1,
|
||||
paddingBottom: 1,
|
||||
paddingLeft: 1,
|
||||
paddingRight: 1,
|
||||
paddingTop: 1,
|
||||
right: 1,
|
||||
textIndent: 1,
|
||||
top: 1,
|
||||
width: 1,
|
||||
zIndex: 1
|
||||
};
|
||||
jQuery.fx.colorCssProps = {
|
||||
backgroundColor: 1,
|
||||
borderBottomColor: 1,
|
||||
borderLeftColor: 1,
|
||||
borderRightColor: 1,
|
||||
borderTopColor: 1,
|
||||
color: 1,
|
||||
outlineColor: 1
|
||||
};
|
||||
jQuery.fx.cssSides = ['Top', 'Right', 'Bottom', 'Left'];
|
||||
jQuery.fx.cssSidesEnd = {
|
||||
'borderWidth': ['border', 'Width'],
|
||||
'borderColor': ['border', 'Color'],
|
||||
'margin': ['margin', ''],
|
||||
'padding': ['padding', '']
|
||||
};
|
||||
jQuery.fn.extend({
|
||||
animate: function(prop, speed, easing, callback) {
|
||||
return this.queue(function() {
|
||||
var opt = jQuery.speed(speed, easing, callback);
|
||||
var e = new jQuery.fxe(this, opt, prop)
|
||||
})
|
||||
},
|
||||
pause: function(speed, callback) {
|
||||
return this.queue(function() {
|
||||
var opt = jQuery.speed(speed, callback);
|
||||
var e = new jQuery.pause(this, opt)
|
||||
})
|
||||
},
|
||||
stop: function(step) {
|
||||
return this.each(function() {
|
||||
if (this.animationHandler) jQuery.stopAnim(this, step)
|
||||
})
|
||||
},
|
||||
stopAll: function(step) {
|
||||
return this.each(function() {
|
||||
if (this.animationHandler) jQuery.stopAnim(this, step);
|
||||
if (this.queue && this.queue['fx']) this.queue.fx = []
|
||||
})
|
||||
}
|
||||
});
|
||||
jQuery.extend({
|
||||
pause: function(elem, options) {
|
||||
var z = this,
|
||||
values;
|
||||
z.step = function() {
|
||||
if (jQuery.isFunction(options.complete)) options.complete.apply(elem)
|
||||
};
|
||||
z.timer = setInterval(function() {
|
||||
z.step()
|
||||
},
|
||||
options.duration);
|
||||
elem.animationHandler = z
|
||||
},
|
||||
easing: {
|
||||
linear: function(p, n, firstNum, delta, duration) {
|
||||
return (( - Math.cos(p * Math.PI) / 2) + 0.5) * delta + firstNum
|
||||
}
|
||||
},
|
||||
fxe: function(elem, options, prop) {
|
||||
var z = this,
|
||||
values;
|
||||
var y = elem.style;
|
||||
var oldOverflow = jQuery.css(elem, "overflow");
|
||||
var oldDisplay = jQuery.css(elem, "display");
|
||||
var props = {};
|
||||
z.startTime = (new Date()).getTime();
|
||||
options.easing = options.easing && jQuery.easing[options.easing] ? options.easing: 'linear';
|
||||
z.getValues = function(tp, vp) {
|
||||
if (jQuery.fx.cssProps[tp]) {
|
||||
if (vp == 'show' || vp == 'hide' || vp == 'toggle') {
|
||||
if (!elem.orig) elem.orig = {};
|
||||
var r = parseFloat(jQuery.css(elem, tp));
|
||||
elem.orig[tp] = r && r > -10000 ? r: (parseFloat(jQuery.css(elem, tp)) || 0);
|
||||
vp = vp == 'toggle' ? (oldDisplay == 'none' ? 'show': 'hide') : vp;
|
||||
options[vp] = true;
|
||||
props[tp] = vp == 'show' ? [0, elem.orig[tp]] : [elem.orig[tp], 0];
|
||||
if (tp != 'opacity') y[tp] = props[tp][0] + (tp != 'zIndex' && tp != 'fontWeight' ? 'px': '');
|
||||
else jQuery.attr(y, "opacity", props[tp][0])
|
||||
} else {
|
||||
props[tp] = [parseFloat(jQuery.css(elem, tp)), parseFloat(vp) || 0]
|
||||
}
|
||||
} else if (jQuery.fx.colorCssProps[tp]) props[tp] = [jQuery.fx.parseColor(jQuery.css(elem, tp)), jQuery.fx.parseColor(vp)];
|
||||
else if (/^margin$|padding$|border$|borderColor$|borderWidth$/i.test(tp)) {
|
||||
var m = vp.replace(/\s+/g, ' ').replace(/rgb\s*\(\s*/g, 'rgb(').replace(/\s*,\s*/g, ',').replace(/\s*\)/g, ')').match(/([^\s]+)/g);
|
||||
switch (tp) {
|
||||
case 'margin':
|
||||
case 'padding':
|
||||
case 'borderWidth':
|
||||
case 'borderColor':
|
||||
m[3] = m[3] || m[1] || m[0];
|
||||
m[2] = m[2] || m[0];
|
||||
m[1] = m[1] || m[0];
|
||||
for (var i = 0; i < jQuery.fx.cssSides.length; i++) {
|
||||
var nmp = jQuery.fx.cssSidesEnd[tp][0] + jQuery.fx.cssSides[i] + jQuery.fx.cssSidesEnd[tp][1];
|
||||
props[nmp] = tp == 'borderColor' ? [jQuery.fx.parseColor(jQuery.css(elem, nmp)), jQuery.fx.parseColor(m[i])] : [parseFloat(jQuery.css(elem, nmp)), parseFloat(m[i])]
|
||||
}
|
||||
break;
|
||||
case 'border':
|
||||
for (var i = 0; i < m.length; i++) {
|
||||
var floatVal = parseFloat(m[i]);
|
||||
var sideEnd = !isNaN(floatVal) ? 'Width': (!/transparent|none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(m[i]) ? 'Color': false);
|
||||
if (sideEnd) {
|
||||
for (var j = 0; j < jQuery.fx.cssSides.length; j++) {
|
||||
nmp = 'border' + jQuery.fx.cssSides[j] + sideEnd;
|
||||
props[nmp] = sideEnd == 'Color' ? [jQuery.fx.parseColor(jQuery.css(elem, nmp)), jQuery.fx.parseColor(m[i])] : [parseFloat(jQuery.css(elem, nmp)), floatVal]
|
||||
}
|
||||
} else {
|
||||
y['borderStyle'] = m[i]
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
y[tp] = vp
|
||||
}
|
||||
return false
|
||||
};
|
||||
for (p in prop) {
|
||||
if (p == 'style') {
|
||||
var newStyles = jQuery.parseStyle(prop[p]);
|
||||
for (np in newStyles) {
|
||||
this.getValues(np, newStyles[np])
|
||||
}
|
||||
} else if (p == 'className') {
|
||||
if (document.styleSheets) for (var i = 0; i < document.styleSheets.length; i++) {
|
||||
var cssRules = document.styleSheets[i].cssRules || document.styleSheets[i].rules || null;
|
||||
if (cssRules) {
|
||||
for (var j = 0; j < cssRules.length; j++) {
|
||||
if (cssRules[j].selectorText == '.' + prop[p]) {
|
||||
var rule = new RegExp('\.' + prop[p] + ' {');
|
||||
var styles = cssRules[j].style.cssText;
|
||||
var newStyles = jQuery.parseStyle(styles.replace(rule, '').replace(/}/g, ''));
|
||||
for (np in newStyles) {
|
||||
this.getValues(np, newStyles[np])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.getValues(p, prop[p])
|
||||
}
|
||||
}
|
||||
y.display = oldDisplay == 'none' ? 'block': oldDisplay;
|
||||
y.overflow = 'hidden';
|
||||
z.step = function() {
|
||||
var t = (new Date()).getTime();
|
||||
if (t > options.duration + z.startTime) {
|
||||
clearInterval(z.timer);
|
||||
z.timer = null;
|
||||
for (p in props) {
|
||||
if (p == "opacity") jQuery.attr(y, "opacity", props[p][1]);
|
||||
else if (typeof props[p][1] == 'object') y[p] = 'rgb(' + props[p][1].r + ',' + props[p][1].g + ',' + props[p][1].b + ')';
|
||||
else y[p] = props[p][1] + (p != 'zIndex' && p != 'fontWeight' ? 'px': '')
|
||||
}
|
||||
if (options.hide || options.show) for (var p in elem.orig) if (p == "opacity") jQuery.attr(y, p, elem.orig[p]);
|
||||
else y[p] = "";
|
||||
y.display = options.hide ? 'none': (oldDisplay != 'none' ? oldDisplay: 'block');
|
||||
y.overflow = oldOverflow;
|
||||
elem.animationHandler = null;
|
||||
if (jQuery.isFunction(options.complete)) options.complete.apply(elem)
|
||||
} else {
|
||||
var n = t - this.startTime;
|
||||
var pr = n / options.duration;
|
||||
for (p in props) {
|
||||
if (typeof props[p][1] == 'object') {
|
||||
y[p] = 'rgb(' + parseInt(jQuery.easing[options.easing](pr, n, props[p][0].r, (props[p][1].r - props[p][0].r), options.duration)) + ',' + parseInt(jQuery.easing[options.easing](pr, n, props[p][0].g, (props[p][1].g - props[p][0].g), options.duration)) + ',' + parseInt(jQuery.easing[options.easing](pr, n, props[p][0].b, (props[p][1].b - props[p][0].b), options.duration)) + ')'
|
||||
} else {
|
||||
var pValue = jQuery.easing[options.easing](pr, n, props[p][0], (props[p][1] - props[p][0]), options.duration);
|
||||
if (p == "opacity") jQuery.attr(y, "opacity", pValue);
|
||||
else y[p] = pValue + (p != 'zIndex' && p != 'fontWeight' ? 'px': '')
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
z.timer = setInterval(function() {
|
||||
z.step()
|
||||
},
|
||||
13);
|
||||
elem.animationHandler = z
|
||||
},
|
||||
stopAnim: function(elem, step) {
|
||||
if (step) elem.animationHandler.startTime -= 100000000;
|
||||
else {
|
||||
window.clearInterval(elem.animationHandler.timer);
|
||||
elem.animationHandler = null;
|
||||
jQuery.dequeue(elem, "fx")
|
||||
}
|
||||
}
|
||||
});
|
||||
jQuery.parseStyle = function(styles) {
|
||||
var newStyles = {};
|
||||
if (typeof styles == 'string') {
|
||||
styles = styles.toLowerCase().split(';');
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
rule = styles[i].split(':');
|
||||
if (rule.length == 2) {
|
||||
newStyles[jQuery.trim(rule[0].replace(/\-(\w)/g,
|
||||
function(m, c) {
|
||||
return c.toUpperCase()
|
||||
}))] = jQuery.trim(rule[1])
|
||||
}
|
||||
}
|
||||
}
|
||||
return newStyles
|
||||
};
|
||||
jQuery.iFisheye = {
|
||||
build: function(options) {
|
||||
return this.each(function() {
|
||||
var el = this;
|
||||
el.fisheyeCfg = {
|
||||
items: jQuery(options.items, this),
|
||||
container: jQuery(options.container, this),
|
||||
pos: jQuery.iUtil.getPosition(this),
|
||||
itemWidth: options.itemWidth,
|
||||
itemsText: options.itemsText,
|
||||
proximity: options.proximity,
|
||||
valign: options.valign,
|
||||
halign: options.halign,
|
||||
maxWidth: options.maxWidth
|
||||
};
|
||||
jQuery.iFisheye.positionContainer(el, 0);
|
||||
jQuery(window).bind('resize',
|
||||
function() {
|
||||
el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);
|
||||
jQuery.iFisheye.positionContainer(el, 0);
|
||||
jQuery.iFisheye.positionItems(el)
|
||||
});
|
||||
jQuery.iFisheye.positionItems(el);
|
||||
el.fisheyeCfg.items.bind('mouseover',
|
||||
function() {
|
||||
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block'
|
||||
}).bind('mouseout',
|
||||
function() {
|
||||
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none'
|
||||
});
|
||||
jQuery(document).bind('mousemove',
|
||||
function(e) {
|
||||
var pointer = jQuery.iUtil.getPointer(e);
|
||||
var toAdd = 0;
|
||||
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center') var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - el.fisheyeCfg.itemWidth / 2;
|
||||
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right') var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
|
||||
else var posx = pointer.x - el.fisheyeCfg.pos.x;
|
||||
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2, 2);
|
||||
el.fisheyeCfg.items.each(function(nr) {
|
||||
distance = Math.sqrt(Math.pow(posx - nr * el.fisheyeCfg.itemWidth, 2) + posy);
|
||||
distance -= el.fisheyeCfg.itemWidth / 2;
|
||||
distance = distance < 0 ? 0: distance;
|
||||
distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity: distance;
|
||||
distance = el.fisheyeCfg.proximity - distance;
|
||||
extraWidth = el.fisheyeCfg.maxWidth * distance / el.fisheyeCfg.proximity;
|
||||
this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
|
||||
this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
|
||||
toAdd += extraWidth
|
||||
});
|
||||
jQuery.iFisheye.positionContainer(el, toAdd)
|
||||
})
|
||||
})
|
||||
},
|
||||
positionContainer: function(el, toAdd) {
|
||||
if (el.fisheyeCfg.halign) if (el.fisheyeCfg.halign == 'center') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - toAdd / 2 + 'px';
|
||||
else if (el.fisheyeCfg.halign == 'left') el.fisheyeCfg.container.get(0).style.left = -toAdd / el.fisheyeCfg.items.size() + 'px';
|
||||
else if (el.fisheyeCfg.halign == 'right') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd / 2 + 'px';
|
||||
el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px'
|
||||
},
|
||||
positionItems: function(el) {
|
||||
el.fisheyeCfg.items.each(function(nr) {
|
||||
this.style.width = el.fisheyeCfg.itemWidth + 'px';
|
||||
this.style.left = el.fisheyeCfg.itemWidth * nr + 'px'
|
||||
})
|
||||
}
|
||||
};
|
||||
jQuery.fn.Fisheye = jQuery.iFisheye.build;
|
||||
51
js/login.js
51
js/login.js
|
|
@ -1,37 +1,36 @@
|
|||
$(document).ready(function () {
|
||||
|
||||
$(document).ready(function() {
|
||||
var animating = false,
|
||||
submitPhase1 = 1100,
|
||||
submitPhase2 = 400,
|
||||
logoutPhase1 = 800,
|
||||
$login = $(".login"),
|
||||
$app = $(".app");
|
||||
|
||||
submitPhase1 = 1100,
|
||||
submitPhase2 = 400,
|
||||
logoutPhase1 = 800,
|
||||
$login = $(".login"),
|
||||
$app = $(".app");
|
||||
|
||||
function ripple(elem, e) {
|
||||
$(".ripple").remove();
|
||||
var elTop = elem.offset().top,
|
||||
elLeft = elem.offset().left,
|
||||
x = e.pageX - elLeft,
|
||||
y = e.pageY - elTop;
|
||||
var $ripple = $("<div class='ripple'></div>");
|
||||
$ripple.css({ top: y, left: x });
|
||||
elem.append($ripple);
|
||||
let elTop = elem.offset().top,
|
||||
elLeft = elem.offset().left,
|
||||
x = e.pageX - elLeft,
|
||||
y = e.pageY - elTop;
|
||||
let ripple = $("<div class='ripple'></div>");
|
||||
ripple.css({top: y, left: x});
|
||||
elem.append(ripple);
|
||||
};
|
||||
|
||||
$(document).on("click", ".login__submit", function (e) {
|
||||
|
||||
$(document).on("click", ".login__submit", function(e) {
|
||||
if (animating) return;
|
||||
animating = true;
|
||||
var that = this;
|
||||
ripple($(that), e);
|
||||
$(that).addClass("processing");
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
$(that).addClass("success");
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
$app.show();
|
||||
$app.css("top");
|
||||
$app.addClass("active");
|
||||
}, submitPhase2 - 70);
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
$login.hide();
|
||||
$login.addClass("inactive");
|
||||
animating = false;
|
||||
|
|
@ -39,24 +38,24 @@ $(document).ready(function () {
|
|||
}, submitPhase2);
|
||||
}, submitPhase1);
|
||||
});
|
||||
|
||||
$(document).on("click", ".app__logout", function (e) {
|
||||
|
||||
$(document).on("click", ".app__logout", function(e) {
|
||||
if (animating) return;
|
||||
$(".ripple").remove();
|
||||
animating = true;
|
||||
var that = this;
|
||||
let that = this;
|
||||
$(that).addClass("clicked");
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
$app.removeClass("active");
|
||||
$login.show();
|
||||
$login.css("top");
|
||||
$login.removeClass("inactive");
|
||||
}, logoutPhase1 - 120);
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
$app.hide();
|
||||
animating = false;
|
||||
$(that).removeClass("clicked");
|
||||
}, logoutPhase1);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -1 +1 @@
|
|||
$(document).ready((function(){var animating=!1,submitPhase1=1100,submitPhase2=400,logoutPhase1=800,$login=$(".login"),$app=$(".app");function ripple(elem,e){$(".ripple").remove();var elTop=elem.offset().top,elLeft=elem.offset().left,x=e.pageX-elLeft,y=e.pageY-elTop,$ripple=$("<div class='ripple'></div>");$ripple.css({top:y,left:x}),elem.append($ripple)}$(document).on("click",".login__submit",(function(e){if(!animating){animating=!0;var that=this;ripple($(that),e),$(that).addClass("processing"),setTimeout((function(){$(that).addClass("success"),setTimeout((function(){$app.show(),$app.css("top"),$app.addClass("active")}),330),setTimeout((function(){$login.hide(),$login.addClass("inactive"),animating=!1,$(that).removeClass("success processing")}),400)}),1100)}})),$(document).on("click",".app__logout",(function(e){if(!animating){$(".ripple").remove(),animating=!0;var that=this;$(that).addClass("clicked"),setTimeout((function(){$app.removeClass("active"),$login.show(),$login.css("top"),$login.removeClass("inactive")}),680),setTimeout((function(){$app.hide(),animating=!1,$(that).removeClass("clicked")}),800)}}))}));
|
||||
$(document).ready((function(){var animating=!1,submitPhase1=1100,submitPhase2=400,logoutPhase1=800,$login=$(".login"),$app=$(".app");function ripple(elem,e){$(".ripple").remove();let elTop=elem.offset().top,elLeft=elem.offset().left,x=e.pageX-elLeft,y=e.pageY-elTop,ripple=$("<div class='ripple'></div>");ripple.css({top:y,left:x}),elem.append(ripple)}$(document).on("click",".login__submit",(function(e){if(!animating){animating=!0;var that=this;ripple($(that),e),$(that).addClass("processing"),setTimeout((function(){$(that).addClass("success"),setTimeout((function(){$app.show(),$app.css("top"),$app.addClass("active")}),330),setTimeout((function(){$login.hide(),$login.addClass("inactive"),animating=!1,$(that).removeClass("success processing")}),400)}),1100)}})),$(document).on("click",".app__logout",(function(e){if(animating)return;$(".ripple").remove(),animating=!0;let that=this;$(that).addClass("clicked"),setTimeout((function(){$app.removeClass("active"),$login.show(),$login.css("top"),$login.removeClass("inactive")}),680),setTimeout((function(){$app.hide(),animating=!1,$(that).removeClass("clicked")}),800)}))}));
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* Created by Yuri2 on 2017/7/31.
|
||||
*/
|
||||
//此处代码适合在子页面使用
|
||||
window.Macui_parent=parent.Macui; //获取父级Macui对象的句柄
|
||||
window.Macui_child={
|
||||
close:function () {
|
||||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||||
Macui_parent._closeWin(index);
|
||||
},
|
||||
newMsg: function (title, content,handle_click){
|
||||
Macui_parent.newMsg(title, content,handle_click)
|
||||
},
|
||||
openUrl: function (url, title,max){
|
||||
var click_lock_name=Math.random();
|
||||
Macui_parent._iframe_click_lock_children[click_lock_name]=true;
|
||||
var index=Macui_parent.openUrl(url, title,max);
|
||||
setTimeout(function () {
|
||||
delete Macui_parent._iframe_click_lock_children[click_lock_name];
|
||||
},1000);
|
||||
return index;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
window.Macui_parent=parent.Macui,window.Macui_child={close:function(){var index=parent.layer.getFrameIndex(window.name);Macui_parent._closeWin(index)},newMsg:function(title,content,handle_click){Macui_parent.newMsg(title,content,handle_click)},openUrl:function(url,title,max){var click_lock_name=Math.random();Macui_parent._iframe_click_lock_children[click_lock_name]=!0;var index=Macui_parent.openUrl(url,title,max);return setTimeout((function(){delete Macui_parent._iframe_click_lock_children[click_lock_name]}),1e3),index}};
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* Created by Yuri2 on 2017/7/31.
|
||||
*/
|
||||
//此处代码适合在子页面使用
|
||||
window.Win10_parent = parent.Win10; //获取父级Win10对象的句柄
|
||||
window.Win10_child = {
|
||||
close: function () {
|
||||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||||
Win10_parent._closeWin(index);
|
||||
},
|
||||
newMsg: function (title, content, handle_click) {
|
||||
Win10_parent.newMsg(title, content, handle_click)
|
||||
},
|
||||
openUrl: function (url, title, max) {
|
||||
var click_lock_name = Math.random();
|
||||
Win10_parent._iframe_click_lock_children[click_lock_name] = true;
|
||||
var index = Win10_parent.openUrl(url, title, max);
|
||||
setTimeout(function () {
|
||||
delete Win10_parent._iframe_click_lock_children[click_lock_name];
|
||||
}, 1000);
|
||||
return index;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
window.Win10_parent=parent.Win10,window.Win10_child={close:function(){var index=parent.layer.getFrameIndex(window.name);Win10_parent._closeWin(index)},newMsg:function(title,content,handle_click){Win10_parent.newMsg(title,content,handle_click)},openUrl:function(url,title,max){var click_lock_name=Math.random();Win10_parent._iframe_click_lock_children[click_lock_name]=!0;var index=Win10_parent.openUrl(url,title,max);return setTimeout((function(){delete Win10_parent._iframe_click_lock_children[click_lock_name]}),1e3),index}};
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.win10-drawer-box{
|
||||
.mac-drawer-box{
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -20,11 +20,9 @@
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
|
|
@ -40,7 +38,7 @@
|
|||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
height: 36px;
|
||||
/*height: 36px;*/
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
display:-webkit-box;
|
||||
|
|
@ -60,7 +58,7 @@
|
|||
font-size: 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: 0;
|
||||
}
|
||||
.drawer.layui-layer{
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
//该插件提供桌面图标二级分类的支持
|
||||
Win10.onReady(function () {
|
||||
Macui.onReady(function () {
|
||||
//注册打开事件
|
||||
(function () {
|
||||
// 注册事件委派 打开url窗口
|
||||
$('body').on('click', '.shortcut-drawer.win10-open-window', function () {
|
||||
$('body').on('click', '.shortcut-drawer.mac-open-window', function () {
|
||||
//>> 获取当前点击的对象
|
||||
$this = $(this);
|
||||
//>> 判断url地址是否为空 如果为空 不予处理
|
||||
|
|
@ -36,27 +36,26 @@ Win10.onReady(function () {
|
|||
}
|
||||
}
|
||||
//>> 调用win10打开url方法
|
||||
Win10.openUrl($this.data('url'), icon, title, areaAndOffset);
|
||||
Macui.openUrl($this.data('url'), icon, title, areaAndOffset);
|
||||
}
|
||||
})
|
||||
})(),
|
||||
})();
|
||||
|
||||
|
||||
$('body').on('click', '.win10-drawer', function () {
|
||||
var content = $(this).find('.win10-drawer-box').html();
|
||||
var title = $(this).children('.title').html();
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
skin: 'drawer',
|
||||
area: [Win10.isSmallScreen() ? "80%" : "60%", "50%"],
|
||||
closeBtn: 0,
|
||||
title: title,
|
||||
content: content,
|
||||
});
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
layero.find('.shortcut-drawer').click(function () {
|
||||
layer.close(index);
|
||||
})
|
||||
$('body').on('click', '.mac-drawer', function () {
|
||||
var content = $(this).find('.mac-drawer-box').html();
|
||||
var title = $(this).children('.title').html();
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
skin: 'drawer',
|
||||
area: Macui.isSmallScreen() ? "80%" : "60%",
|
||||
closeBtn: 0,
|
||||
title: title,
|
||||
content: content,
|
||||
});
|
||||
var layero = Macui.getLayeroByIndex(index);
|
||||
layero.find('.shortcut-drawer').click(function () {
|
||||
layer.close(index);
|
||||
})
|
||||
})
|
||||
});
|
||||
|
|
@ -1 +1 @@
|
|||
.win10-drawer-box{height:0;overflow:hidden}.shortcut-drawer{width:80px;overflow:hidden;cursor:pointer;padding:0;transition:all .5s;display:inline-block}.shortcut-drawer:hover{background-color:rgba(255,255,255,.11)}.shortcut-drawer>.icon{width:50px;height:50px;overflow:hidden;margin:0 auto;color:#fff;box-sizing:border-box;margin-bottom:5px;margin-top:5px;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;font-size:37px;line-height:50px}.shortcut-drawer .title{color:#fff;font-size:12px;text-align:center;line-height:18px;margin-bottom:5px;height:36px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer.layui-layer{border-radius:.5em;overflow:auto;background:0 0}.drawer.layui-layer>.layui-layer-title{background:0 0;text-align:center;padding:0;color:#fff;font-size:20px;height:30px;line-height:30px;border-radius:4px 4px 0 0;border:0}.drawer.layui-layer{box-shadow:none}.drawer.layui-layer>.layui-layer-content{background-color:rgba(255,255,255,.5);padding:1em;border-radius:1em}.drawer .black-green{background:#009688!important}.drawer .green{background:#5fb878!important}.drawer .black{background:#393d49!important}.drawer .blue{background:#1e9fff!important}.drawer .orange{background:#f7b824!important}.drawer .red{background:#ff5722!important}.drawer .dark{background:#2f4056!important}.drawer .purple{background:#b074e6!important}
|
||||
.mac-drawer-box{height:0;overflow:hidden}.shortcut-drawer{width:80px;overflow:hidden;cursor:pointer;padding:0;transition:all .5s;display:inline-block}.shortcut-drawer:hover{background-color:rgba(255,255,255,.11)}.shortcut-drawer>.icon{width:50px;height:50px;overflow:hidden;color:#fff;box-sizing:border-box;margin:5px auto;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;font-size:37px;line-height:50px}.shortcut-drawer .title{color:#fff;font-size:12px;text-align:center;line-height:18px;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer.layui-layer{border-radius:.5em;overflow:auto;background:0 0}.drawer.layui-layer>.layui-layer-title{background:0 0;text-align:center;padding:0;color:#fff;font-size:20px;height:30px;line-height:30px;border-radius:4px 4px 0 0;border:0}.drawer.layui-layer{box-shadow:none}.drawer.layui-layer>.layui-layer-content{background-color:rgba(255,255,255,.5);padding:1em;border-radius:1em}.drawer .black-green{background:#009688!important}.drawer .green{background:#5fb878!important}.drawer .black{background:#393d49!important}.drawer .blue{background:#1e9fff!important}.drawer .orange{background:#f7b824!important}.drawer .red{background:#ff5722!important}.drawer .dark{background:#2f4056!important}.drawer .purple{background:#b074e6!important}
|
||||
|
|
@ -1 +1 @@
|
|||
Win10.onReady((function(){(function(){$("body").on("click",".shortcut-drawer.win10-open-window",(function(){if($this=$(this),""!==$this.data("url")){var title=$this.data("title")||"",areaAndOffset,icon,bg=$this.data("icon-bg")?$this.data("icon-bg"):"";$this.data("icon-image")&&(icon='<img class="icon '+bg+'" src="'+$this.data("icon-image")+'"/>'),$this.data("icon-font")&&(icon='<i class="fa fa-fw fa-'+$this.data("icon-font")+" icon "+bg+'"></i>'),title||1!==$this.children(".icon").length||1!==$this.children(".title").length||(title=$this.children(".title").html(),icon||(icon=$this.children(".icon").prop("outerHTML"))),$this.data("area-offset")&&(areaAndOffset=$this.data("area-offset"),-1!==areaAndOffset.indexOf(",")&&(areaAndOffset=eval(areaAndOsffset))),Win10.openUrl($this.data("url"),icon,title,areaAndOffset)}}))})(),$("body").on("click",".win10-drawer",(function(){var content=$(this).find(".win10-drawer-box").html(),title=$(this).children(".title").html(),index=layer.open({type:1,shadeClose:!0,skin:"drawer",area:[Win10.isSmallScreen()?"80%":"60%","50%"],closeBtn:0,title:title,content:content}),layero;Win10.getLayeroByIndex(index).find(".shortcut-drawer").click((function(){layer.close(index)}))}))}));
|
||||
Macui.onReady((function(){!function(){$("body").on("click",".shortcut-drawer.mac-open-window",(function(){if($this=$(this),""!==$this.data("url")){var title=$this.data("title")||"",areaAndOffset,icon,bg=$this.data("icon-bg")?$this.data("icon-bg"):"";$this.data("icon-image")&&(icon='<img class="icon '+bg+'" src="'+$this.data("icon-image")+'"/>'),$this.data("icon-font")&&(icon='<i class="fa fa-fw fa-'+$this.data("icon-font")+" icon "+bg+'"></i>'),title||1!==$this.children(".icon").length||1!==$this.children(".title").length||(title=$this.children(".title").html(),icon||(icon=$this.children(".icon").prop("outerHTML"))),$this.data("area-offset")&&(areaAndOffset=$this.data("area-offset"),-1!==areaAndOffset.indexOf(",")&&(areaAndOffset=eval(areaAndOsffset))),Macui.openUrl($this.data("url"),icon,title,areaAndOffset)}}))}(),$("body").on("click",".mac-drawer",(function(){var content=$(this).find(".mac-drawer-box").html(),title=$(this).children(".title").html(),index=layer.open({type:1,shadeClose:!0,skin:"drawer",area:Macui.isSmallScreen()?"80%":"60%",closeBtn:0,title:title,content:content}),layero;Macui.getLayeroByIndex(index).find(".shortcut-drawer").click((function(){layer.close(index)}))}))}));
|
||||
Loading…
Reference in New Issue