fixed: 字体图标
zhizou
parent
66cdb1ed28
commit
6e6031f0a9
|
|
@ -1,11 +1,11 @@
|
||||||
@import "../lib/layui/css/layui.css";
|
@import "../lib/layui/css/layui.css";
|
||||||
@import "../lib/fonts/okfont.css";
|
@import "../lib/fonts/okfont/iconfont.css";
|
||||||
@import "../lib/fonts/myfont.css";
|
/*@import "../lib/fonts/myfont.css";*/
|
||||||
|
|
||||||
#navBar .layui-nav-child {
|
#navBar .layui-nav-child {
|
||||||
/*transition: height .5s;*/
|
/*transition: height .5s;*/
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 5px 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navBar .layui-nav-itemed .layui-nav-child,
|
#navBar .layui-nav-itemed .layui-nav-child,
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
"title": "控制台",
|
"title": "控制台",
|
||||||
"href": "pages/console.html",
|
"href": "pages/console.html",
|
||||||
"fontFamily": "ok-icon",
|
"fontFamily": "ok-icon",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"spread": true,
|
"spread": true,
|
||||||
"isCheck": true
|
"isCheck": true
|
||||||
},
|
},
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
"title": "控制台示例",
|
"title": "控制台示例",
|
||||||
"href": "",
|
"href": "",
|
||||||
"fontFamily": "ok-icon",
|
"fontFamily": "ok-icon",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "控制台一",
|
"title": "控制台一",
|
||||||
|
|
@ -55,8 +55,8 @@
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "地图",
|
"title": "地图",
|
||||||
"fontFamily": "my-icon",
|
"fontFamily": "ok-icon",
|
||||||
"icon": "my-iconditu",
|
"icon": "",
|
||||||
"spread": false,
|
"spread": false,
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
|
|
@ -75,8 +75,8 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "数据图",
|
"title": "数据图",
|
||||||
"fontFamily": "my-icon",
|
"fontFamily": "ok-icon",
|
||||||
"icon": "my-icontubiao",
|
"icon": "ok-icon-shuju1",
|
||||||
"spread": false,
|
"spread": false,
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
|
|
@ -166,7 +166,8 @@
|
||||||
{
|
{
|
||||||
"title": "系统管理",
|
"title": "系统管理",
|
||||||
"href": "",
|
"href": "",
|
||||||
"icon": "",
|
"fontFamily": "ok-icon",
|
||||||
|
"icon": "",
|
||||||
"spread": false,
|
"spread": false,
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
|
|
@ -243,7 +244,7 @@
|
||||||
{
|
{
|
||||||
"title": "多级导航",
|
"title": "多级导航",
|
||||||
"fontFamily": "ok-icon",
|
"fontFamily": "ok-icon",
|
||||||
"icon": "ok-iconnavigation-2",
|
"icon": "",
|
||||||
"spread": false,
|
"spread": false,
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
|
|
@ -305,36 +306,36 @@
|
||||||
{
|
{
|
||||||
"title": "框架使用",
|
"title": "框架使用",
|
||||||
"fontFamily": "ok-icon",
|
"fontFamily": "ok-icon",
|
||||||
"icon": "",
|
"icon": "ok-icon-yooxi",
|
||||||
"spread": false,
|
"spread": false,
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "字体图标",
|
"title": "字体图标",
|
||||||
"href": "pages/other/okfont.html",
|
"href": "pages/help/ok_font.html",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"spread": false
|
"spread": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "插件目录",
|
"title": "插件目录",
|
||||||
"href": "pages/help/plugDirectory.html",
|
"href": "pages/help/plug_directory.html",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"spread": false
|
"spread": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "内部添加导航",
|
"title": "内部添加导航",
|
||||||
"href": "pages/help/navOperate.html",
|
"href": "pages/help/nav_operate.html",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"spread": false
|
"spread": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "导航的图标",
|
"title": "导航的图标",
|
||||||
"href": "pages/help/navIcon.html",
|
"href": "pages/help/nav_icon.html",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"spread": false
|
"spread": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "导航的参数",
|
"title": "导航的参数",
|
||||||
"href": "pages/help/navParameter.html",
|
"href": "pages/help/nav_parameter.html",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"spread": false
|
"spread": false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
|
|
||||||
<li class="no-line layui-nav-item layui-hide-xs">
|
<li class="no-line layui-nav-item layui-hide-xs">
|
||||||
<a id="lock" class="flex-vc pr10 pl10" href="javascript:">
|
<a id="lock" class="flex-vc pr10 pl10" href="javascript:">
|
||||||
<i class="ok-iconlock_outline icon-head-i"></i><cite>锁屏</cite>
|
<i class="ok-icon ok-icon-lock icon-head-i"></i><cite>锁屏</cite>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
<ul id="navBar" class="layui-nav okadmin-nav okadmin-bg-20222A layui-nav-tree">
|
<ul id="navBar" class="layui-nav okadmin-nav okadmin-bg-20222A layui-nav-tree">
|
||||||
<li class="layui-nav-item layui-this">
|
<li class="layui-nav-item layui-this">
|
||||||
<a href="javascript:" lay-id="1" data-url="pages/console.html">
|
<a href="javascript:" lay-id="1" data-url="pages/console.html">
|
||||||
<i is-close=false class="ok-icon ok-iconairplay"></i>
|
<i is-close=false class="ok-icon ok-icon-kongzhitai"></i>
|
||||||
控制台
|
控制台
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -116,7 +116,7 @@
|
||||||
|
|
||||||
<ul id="tabTitle" class="layui-tab-title ok-tab-title not-scroll">
|
<ul id="tabTitle" class="layui-tab-title ok-tab-title not-scroll">
|
||||||
<li class="layui-this" lay-id="1" tab="index">
|
<li class="layui-this" lay-id="1" tab="index">
|
||||||
<i class="ok-icon ok-iconairplay"></i>
|
<i class="ok-icon ok-icon-kongzhitai"></i>
|
||||||
<cite is-close=false>控制台</cite>
|
<cite is-close=false>控制台</cite>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
@font-face {font-family: "my-icon";
|
|
||||||
src: url('myfont/iconfont.eot?t=1555493820158'); /* IE9 */
|
|
||||||
src: url('myfont/iconfont.eot?t=1555493820158#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('myfont/iconfont.woff?t=1555493820158') format('woff'),
|
|
||||||
url('myfont/iconfont.ttf?t=1555493820158') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
|
||||||
url('myfont/iconfont.svg?t=1555493820158#my-icon') format('svg'); /* iOS 4.1- */
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-icon {
|
|
||||||
font-family: "my-icon" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
.my-icontubiao:before {
|
|
||||||
content: "\e670";
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-iconditu:before {
|
|
||||||
content: "\e61f";
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
|
|
@ -1,32 +0,0 @@
|
||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
|
||||||
<!--
|
|
||||||
2013-9-30: Created.
|
|
||||||
-->
|
|
||||||
<svg>
|
|
||||||
<metadata>
|
|
||||||
Created by iconfont
|
|
||||||
</metadata>
|
|
||||||
<defs>
|
|
||||||
|
|
||||||
<font id="myfont" horiz-adv-x="1024" >
|
|
||||||
<font-face
|
|
||||||
font-family="myfont"
|
|
||||||
font-weight="500"
|
|
||||||
font-stretch="normal"
|
|
||||||
units-per-em="1024"
|
|
||||||
ascent="896"
|
|
||||||
descent="-128"
|
|
||||||
/>
|
|
||||||
<missing-glyph />
|
|
||||||
|
|
||||||
<glyph glyph-name="tubiao" unicode="" d="M929.295093 22.525032 119.673029 22.525032 63.904067 22.525032 63.904067 78.396323l0 586.341561c0 15.451584 12.484061 27.935645 27.935645 27.935645 15.451584 0 27.935645-12.484061 27.935645-27.935645l0-586.341561 809.622065 0c15.451584 0 27.935645-12.484061 27.935645-27.935645C957.230738 35.009094 944.746677 22.525032 929.295093 22.525032L929.295093 22.525032zM845.590487 134.267613l-55.87129 0c-30.800839 0-55.87129 24.968122-55.87129 55.87129L733.847906 525.059658c0 30.800839 24.968122 55.87129 55.87129 55.87129l55.87129 0c30.800839 0 55.87129-24.968122 55.87129-55.87129l0-335.023084C901.461777 159.235735 876.391326 134.267613 845.590487 134.267613L845.590487 134.267613zM566.438693 134.267613l-55.87129 0c-30.800839 0-55.87129 24.968122-55.87129 55.87129L454.696113 692.5712c0 30.800839 24.968122 55.87129 55.87129 55.87129l55.87129 0c30.800839 0 55.87129-24.968122 55.87129-55.87129l0-502.534626C622.207655 159.235735 597.239532 134.267613 566.438693 134.267613L566.438693 134.267613zM287.184571 134.267613l-55.87129 0c-30.800839 0-55.87129 24.968122-55.87129 55.87129L175.441991 413.419406c0 30.800839 24.968122 55.87129 55.87129 55.87129l55.87129 0c30.800839 0 55.87129-24.968122 55.87129-55.87129l0-223.382832C343.055861 159.235735 318.087739 134.267613 287.184571 134.267613L287.184571 134.267613z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="ditu" unicode="" d="M1234.510488 802.354994l-60.805127-27.42474c-2.769714-1.245272-6.094387-0.830745-8.447882 0.969485l-61.082606 47.36939c-0.277479 0.277479-0.692006 0.554958-0.969485 0.832437l-62.882836 65.789598c-1.384011 1.385703-3.32298 2.355188-5.26195 2.493927l-40.860477 3.600459c-1.80023 0.13874-3.739199-0.275787-5.263642-1.384011l-34.625659-22.716057c-1.663182-1.108224-2.908454-2.769714-3.463412-4.569944l-23.961328-81.441783c-0.692006-2.493927-2.493927-4.432896-4.847423-5.402381l-27.42474-10.94181c-3.185933-1.246964-5.263642-4.294157-5.263642-7.757569l0-28.116746c0-3.877938 2.769714-7.339658 6.510605-8.172095l56.094752-12.050034c7.202611-1.522751 9.002841-11.080549 2.769714-15.097227l-54.572001-35.319356c-0.275787-0.13874-0.553266-0.414527-0.830745-0.553266L781.175761 563.9836c-1.384011-1.245272-3.185933-1.80023-4.986163-1.938969l-52.770079-1.938969c-1.108224 0-2.077709-0.275787-3.047193-0.692006l-51.249021-22.714365c-2.214756-0.971177-4.847423-0.971177-6.925132 0.137048l-68.144786 32.965861c-0.830745 0.414527-1.663182 0.692006-2.632667 0.830745l-89.3364 10.664331c-3.047193 0.416219-5.541121 2.355188-6.647653 5.124902l-12.604992 30.888152c-0.830745 1.938969-2.216448 3.46172-4.155417 4.292465l-77.147626 37.121278c-2.632667 1.245272-4.432896 3.739199-4.710375 6.647653l-1.522751 16.619978c0 0.277479 0 0.693698 0 0.971177l0.969485 35.319356c0 1.66149-0.416219 3.184241-1.246964 4.569944l-32.825429 52.494292c-2.355188 3.739199-7.34135 4.986163-11.219289 2.769714l-53.463777-31.717205c-0.554958-0.416219-1.108224-0.832437-1.663182-1.246964l-11.911294-11.911294c-1.80023-1.801922-4.431205-2.632667-7.063871-2.355188l-27.147261 3.739199c-3.600459 0.554958-7.202611-1.522751-8.725362-4.847423l-12.880779-28.808751c-1.385703-3.047193-4.432896-4.986163-7.757569-4.849115l-35.041877 0.832437c-3.739199 0.137048-7.063871-2.355188-8.172095-5.8186l-19.667171-64.128108c-0.832437-2.908454-3.324672-5.124902-6.233126-5.678168l-93.354769-19.668863c-0.416219-0.13874-0.830745-0.13874-1.246964-0.414527l-51.247329-19.115597c-3.739199-1.384011-5.955647-5.26195-5.263642-9.278628l3.877938-21.469093c0.13874-0.554958 0.277479-1.108224 0.416219-1.524443l33.933653-86.150467c0-0.13874 0.13874-0.277479 0.13874-0.416219 1.938969-4.155417 31.580158-68.144786 31.163939-74.516651-0.416219-5.402381-15.097227-43.213973-20.222129-55.956012-1.108224-2.632667-0.692006-5.67986 0.969485-7.896308l13.296997-18.281468c0.416219-0.554958 0.830745-1.108224 1.385703-1.524443l111.636238-93.07729c0.554958-0.553266 1.246964-0.830745 1.940661-1.245272l172.302625-76.318573c1.66149-0.692006 3.46172-0.830745 5.124902-0.553266l103.464142 22.575625c1.938969 0.416219 4.016678 0.13874 5.816908-0.830745l40.305519-22.161098c3.463412-1.938969 5.124902-5.955647 3.87963-9.694846l-24.516286-79.641553c-0.969485-3.185933 0-6.649345 2.630975-8.727053l88.783134-75.208657c2.355188-1.938969 5.541121-2.493927 8.449574-1.385703l109.005263 43.352712c2.353496 0.969485 5.124902 0.693698 7.34135-0.692006l71.05324-43.352712c0.277479-0.13874 0.416219-0.277479 0.692006-0.416219l31.857637-23.822589c0.692006-0.553266 1.522751-0.969485 2.355188-1.246964l13.989003-4.569944c4.986163-1.663182 10.249804 1.66149 10.80307 6.925132l1.522751 14.543961c0.277479 2.630975 1.801922 5.12321 4.294157 6.370174l178.121225 98.340932c1.384011 0.830745 2.630975 1.938969 3.32298 3.46172l63.436102 122.441c0.693698 1.246964 0.971177 2.630975 0.971177 4.016678l-2.910146 97.785974c0 1.80023-0.692006 3.600459-1.938969 4.986163l-37.672852 45.569161-27.008522 34.211132c-2.355188 3.047193-2.355188 7.34135 0.137048 10.388544l41.413743 50.416584c0.830745 0.969485 1.80023 1.66149 2.908454 2.216448l0 0c6.926824 3.32298 6.094387 13.434045-1.384011 15.511754l-18.975166 5.263642c-0.693698 0.13874-1.385703 0.277479-2.216448 0.277479l-50.832802 0c-2.630975 0-5.124902 1.245272-6.647653 3.32298l-12.466252 17.174936c-2.630975 3.602151-1.938969 8.727053 1.524443 11.496768l61.497133 48.200135c5.539429 4.432896 13.711524 0.13874 13.434045-6.925132l-0.553266-10.94181c-0.277479-6.233126 5.955647-10.527283 11.633815-8.033356l26.040729 11.633815c0.830745 0.416219 1.522751 0.830745 2.077709 1.385703l122.439308 109.005263c1.524443 1.384011 2.632667 3.324672 2.769714 5.539429l5.402381 65.099284c0.277479 4.155417 3.739199 7.478398 7.894616 7.617137l12.327513 0.416219c4.294157 0.13874 7.617137 3.46172 7.894616 7.755877l5.816908 80.472299C1246.699261 800.416025 1240.188656 804.987661 1234.510488 802.354994L1234.510488 802.354994zM1084.922227 81.564335l-17.728202-54.018735 22.853104-32.133424 17.729894 34.211132 13.572785 36.288841-9.419059 25.901989L1084.922227 81.564335 1084.922227 81.564335zM796.827946-91.709467l-24.930813-15.513446 17.728202-20.775395 22.853104 5.124902 26.039037 24.930813-8.309143 14.543961L796.827946-91.709467 796.827946-91.709467z" horiz-adv-x="1247" />
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</font>
|
|
||||||
</defs></svg>
|
|
||||||
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,155 +0,0 @@
|
||||||
body {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #555;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
small {
|
|
||||||
font-size: .66666667em;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #e74c3c;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover, a:focus {
|
|
||||||
box-shadow: 0 1px #e74c3c;
|
|
||||||
}
|
|
||||||
.bshadow0, input {
|
|
||||||
box-shadow: inset 0 -2px #e7e7e7;
|
|
||||||
}
|
|
||||||
input:hover {
|
|
||||||
box-shadow: inset 0 -2px #ccc;
|
|
||||||
}
|
|
||||||
input, fieldset {
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 1em;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
color: inherit;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 1.5em;
|
|
||||||
padding: .25em 0;
|
|
||||||
}
|
|
||||||
input:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: inset 0 -2px #449fdb;
|
|
||||||
}
|
|
||||||
.glyph {
|
|
||||||
font-size: 16px;
|
|
||||||
width: 15em;
|
|
||||||
padding-bottom: 1em;
|
|
||||||
margin-right: 4em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.liga {
|
|
||||||
width: 80%;
|
|
||||||
width: calc(100% - 2.5em);
|
|
||||||
}
|
|
||||||
.talign-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.talign-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.bgc1 {
|
|
||||||
background: #f1f1f1;
|
|
||||||
}
|
|
||||||
.fgc1 {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.fgc0 {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-top: 1em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
.mvm {
|
|
||||||
margin-top: .75em;
|
|
||||||
margin-bottom: .75em;
|
|
||||||
}
|
|
||||||
.mtn {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.mtl, .mal {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
.mbl, .mal {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
.mal, .mhl {
|
|
||||||
margin-left: 1.5em;
|
|
||||||
margin-right: 1.5em;
|
|
||||||
}
|
|
||||||
.mhmm {
|
|
||||||
margin-left: 1em;
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
.mls {
|
|
||||||
margin-left: .25em;
|
|
||||||
}
|
|
||||||
.ptl {
|
|
||||||
padding-top: 1.5em;
|
|
||||||
}
|
|
||||||
.pbs, .pvs {
|
|
||||||
padding-bottom: .25em;
|
|
||||||
}
|
|
||||||
.pvs, .pts {
|
|
||||||
padding-top: .25em;
|
|
||||||
}
|
|
||||||
.unit {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.unitRight {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.size1of2 {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.size1of1 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.clearfix:before, .clearfix:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.hidden-true {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.textbox0 {
|
|
||||||
width: 3em;
|
|
||||||
background: #f1f1f1;
|
|
||||||
padding: .25em .5em;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 1.5em;
|
|
||||||
}
|
|
||||||
#testDrive {
|
|
||||||
display: block;
|
|
||||||
padding-top: 24px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.fs0 {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.fs1 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.fs2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
if (!('boxShadow' in document.body.style)) {
|
|
||||||
document.body.setAttribute('class', 'noBoxShadow');
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.addEventListener("click", function(e) {
|
|
||||||
var target = e.target;
|
|
||||||
if (target.tagName === "INPUT" &&
|
|
||||||
target.getAttribute('class').indexOf('liga') === -1) {
|
|
||||||
target.select();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var fontSize = document.getElementById('fontSize'),
|
|
||||||
testDrive = document.getElementById('testDrive'),
|
|
||||||
testText = document.getElementById('testText');
|
|
||||||
function updateTest() {
|
|
||||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
|
||||||
if (window.icomoonLiga) {
|
|
||||||
window.icomoonLiga(testDrive);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function updateSize() {
|
|
||||||
testDrive.style.fontSize = fontSize.value + 'px';
|
|
||||||
}
|
|
||||||
fontSize.addEventListener('change', updateSize, false);
|
|
||||||
testText.addEventListener('input', updateTest, false);
|
|
||||||
testText.addEventListener('change', updateTest, false);
|
|
||||||
updateSize();
|
|
||||||
}());
|
|
||||||
|
|
@ -1,539 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'okicomoon';
|
|
||||||
src: url('okfont/okicomoon.eot?m7seco');
|
|
||||||
src: url('okfont/okicomoon.eot?m7seco#iefix') format('embedded-opentype'),
|
|
||||||
url('okfont/okicomoon.ttf?m7seco') format('truetype'),
|
|
||||||
url('okfont/okicomoon.woff?m7seco') format('woff'),
|
|
||||||
url('okfont/okicomoon.svg?m7seco#okicomoon') format('svg');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="ok-icon"], [class*=" ok-icon"] {
|
|
||||||
/* use !important to prevent issues with browser extensions that change fonts */
|
|
||||||
font-family: 'okicomoon' !important;
|
|
||||||
speak: none;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
font-variant: normal;
|
|
||||||
text-transform: none;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
/* Better Font Rendering =========== */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ok-iconlock1:before {
|
|
||||||
content: "\e897";
|
|
||||||
}
|
|
||||||
.ok-iconlock_open:before {
|
|
||||||
content: "\e898";
|
|
||||||
}
|
|
||||||
.ok-iconlock_outline:before {
|
|
||||||
content: "\e899";
|
|
||||||
}
|
|
||||||
.ok-iconactivity:before {
|
|
||||||
content: "\e900";
|
|
||||||
}
|
|
||||||
.ok-iconairplay:before {
|
|
||||||
content: "\e901";
|
|
||||||
}
|
|
||||||
.ok-iconalert-circle:before {
|
|
||||||
content: "\e902";
|
|
||||||
}
|
|
||||||
.ok-iconalert-octagon:before {
|
|
||||||
content: "\e903";
|
|
||||||
}
|
|
||||||
.ok-iconalert-triangle:before {
|
|
||||||
content: "\e904";
|
|
||||||
}
|
|
||||||
.ok-iconalign-center:before {
|
|
||||||
content: "\e905";
|
|
||||||
}
|
|
||||||
.ok-iconalign-justify:before {
|
|
||||||
content: "\e906";
|
|
||||||
}
|
|
||||||
.ok-iconalign-left:before {
|
|
||||||
content: "\e907";
|
|
||||||
}
|
|
||||||
.ok-iconalign-right:before {
|
|
||||||
content: "\e908";
|
|
||||||
}
|
|
||||||
.ok-iconanchor:before {
|
|
||||||
content: "\e909";
|
|
||||||
}
|
|
||||||
.ok-iconarchive:before {
|
|
||||||
content: "\e90b";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-down-circle:before {
|
|
||||||
content: "\e90c";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-down-left:before {
|
|
||||||
content: "\e90d";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-down-right:before {
|
|
||||||
content: "\e90e";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-down:before {
|
|
||||||
content: "\e90f";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-left-circle:before {
|
|
||||||
content: "\e910";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-left:before {
|
|
||||||
content: "\e911";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-right-circle:before {
|
|
||||||
content: "\e912";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-right:before {
|
|
||||||
content: "\e913";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-up-circle:before {
|
|
||||||
content: "\e914";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-up-left:before {
|
|
||||||
content: "\e915";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-up-right:before {
|
|
||||||
content: "\e916";
|
|
||||||
}
|
|
||||||
.ok-iconarrow-up:before {
|
|
||||||
content: "\e917";
|
|
||||||
}
|
|
||||||
.ok-iconbar-chart-2:before {
|
|
||||||
content: "\e91a";
|
|
||||||
}
|
|
||||||
.ok-iconbar-chart:before {
|
|
||||||
content: "\e91b";
|
|
||||||
}
|
|
||||||
.ok-iconbattery-charging:before {
|
|
||||||
content: "\e91c";
|
|
||||||
}
|
|
||||||
.ok-iconbattery:before {
|
|
||||||
content: "\e91d";
|
|
||||||
}
|
|
||||||
.ok-iconbell:before {
|
|
||||||
content: "\e91f";
|
|
||||||
}
|
|
||||||
.ok-iconbluetooth:before {
|
|
||||||
content: "\e920";
|
|
||||||
}
|
|
||||||
.ok-iconcamera-off:before {
|
|
||||||
content: "\e928";
|
|
||||||
}
|
|
||||||
.ok-iconcamera:before {
|
|
||||||
content: "\e929";
|
|
||||||
}
|
|
||||||
.ok-iconcheck-circle:before {
|
|
||||||
content: "\e92b";
|
|
||||||
}
|
|
||||||
.ok-iconcheck-square:before {
|
|
||||||
content: "\e92c";
|
|
||||||
}
|
|
||||||
.ok-iconcheck:before {
|
|
||||||
content: "\e92d";
|
|
||||||
}
|
|
||||||
.ok-iconchevron-down:before {
|
|
||||||
content: "\e92e";
|
|
||||||
}
|
|
||||||
.ok-iconchevron-left:before {
|
|
||||||
content: "\e92f";
|
|
||||||
}
|
|
||||||
.ok-iconchevron-right:before {
|
|
||||||
content: "\e930";
|
|
||||||
}
|
|
||||||
.ok-iconchevron-up:before {
|
|
||||||
content: "\e931";
|
|
||||||
}
|
|
||||||
.ok-iconchevrons-down:before {
|
|
||||||
content: "\e932";
|
|
||||||
}
|
|
||||||
.ok-iconchevrons-left:before {
|
|
||||||
content: "\e933";
|
|
||||||
}
|
|
||||||
.ok-iconchevrons-right:before {
|
|
||||||
content: "\e934";
|
|
||||||
}
|
|
||||||
.ok-iconchevrons-up:before {
|
|
||||||
content: "\e935";
|
|
||||||
}
|
|
||||||
.ok-iconcircle:before {
|
|
||||||
content: "\e937";
|
|
||||||
}
|
|
||||||
.ok-iconclipboard:before {
|
|
||||||
content: "\e938";
|
|
||||||
}
|
|
||||||
.ok-iconclock:before {
|
|
||||||
content: "\e939";
|
|
||||||
}
|
|
||||||
.ok-iconcode:before {
|
|
||||||
content: "\e940";
|
|
||||||
}
|
|
||||||
.ok-iconcopy:before {
|
|
||||||
content: "\e945";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-down-left:before {
|
|
||||||
content: "\e946";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-down-right:before {
|
|
||||||
content: "\e947";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-left-down:before {
|
|
||||||
content: "\e948";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-left-up:before {
|
|
||||||
content: "\e949";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-right-down:before {
|
|
||||||
content: "\e94a";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-right-up:before {
|
|
||||||
content: "\e94b";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-up-left:before {
|
|
||||||
content: "\e94c";
|
|
||||||
}
|
|
||||||
.ok-iconcorner-up-right:before {
|
|
||||||
content: "\e94d";
|
|
||||||
}
|
|
||||||
.ok-iconcrop:before {
|
|
||||||
content: "\e950";
|
|
||||||
}
|
|
||||||
.ok-icondelete:before {
|
|
||||||
content: "\e953";
|
|
||||||
}
|
|
||||||
.ok-icondisc:before {
|
|
||||||
content: "\e954";
|
|
||||||
}
|
|
||||||
.ok-icondownload-cloud:before {
|
|
||||||
content: "\e956";
|
|
||||||
}
|
|
||||||
.ok-icondownload:before {
|
|
||||||
content: "\e957";
|
|
||||||
}
|
|
||||||
.ok-iconedit-3:before {
|
|
||||||
content: "\e95a";
|
|
||||||
}
|
|
||||||
.ok-iconedit:before {
|
|
||||||
content: "\e95b";
|
|
||||||
}
|
|
||||||
.ok-iconexternal-link:before {
|
|
||||||
content: "\e95c";
|
|
||||||
}
|
|
||||||
.ok-iconeye-off:before {
|
|
||||||
content: "\e95d";
|
|
||||||
}
|
|
||||||
.ok-iconeye:before {
|
|
||||||
content: "\e95e";
|
|
||||||
}
|
|
||||||
.ok-iconfacebook:before {
|
|
||||||
content: "\e95f";
|
|
||||||
}
|
|
||||||
.ok-iconfast-forward:before {
|
|
||||||
content: "\e960";
|
|
||||||
}
|
|
||||||
.ok-iconfile-minus:before {
|
|
||||||
content: "\e963";
|
|
||||||
}
|
|
||||||
.ok-iconfile-plus:before {
|
|
||||||
content: "\e964";
|
|
||||||
}
|
|
||||||
.ok-iconfile-text:before {
|
|
||||||
content: "\e965";
|
|
||||||
}
|
|
||||||
.ok-iconfile:before {
|
|
||||||
content: "\e966";
|
|
||||||
}
|
|
||||||
.ok-iconflag:before {
|
|
||||||
content: "\e969";
|
|
||||||
}
|
|
||||||
.ok-iconfolder-minus:before {
|
|
||||||
content: "\e96a";
|
|
||||||
}
|
|
||||||
.ok-iconfolder-plus:before {
|
|
||||||
content: "\e96b";
|
|
||||||
}
|
|
||||||
.ok-iconfolder:before {
|
|
||||||
content: "\e96c";
|
|
||||||
}
|
|
||||||
.ok-icongit-branch:before {
|
|
||||||
content: "\e96f";
|
|
||||||
}
|
|
||||||
.ok-icongit-commit:before {
|
|
||||||
content: "\e970";
|
|
||||||
}
|
|
||||||
.ok-icongit-merge:before {
|
|
||||||
content: "\e971";
|
|
||||||
}
|
|
||||||
.ok-icongit-pull-request:before {
|
|
||||||
content: "\e972";
|
|
||||||
}
|
|
||||||
.ok-icongithub:before {
|
|
||||||
content: "\e973";
|
|
||||||
}
|
|
||||||
.ok-iconglobe:before {
|
|
||||||
content: "\e975";
|
|
||||||
}
|
|
||||||
.ok-icongrid:before {
|
|
||||||
content: "\e976";
|
|
||||||
}
|
|
||||||
.ok-iconheadphones:before {
|
|
||||||
content: "\e979";
|
|
||||||
}
|
|
||||||
.ok-iconheart:before {
|
|
||||||
content: "\e97a";
|
|
||||||
}
|
|
||||||
.ok-iconhelp-circle:before {
|
|
||||||
content: "\e97b";
|
|
||||||
}
|
|
||||||
.ok-iconhome:before {
|
|
||||||
content: "\e97c";
|
|
||||||
}
|
|
||||||
.ok-iconimage:before {
|
|
||||||
content: "\e97d";
|
|
||||||
}
|
|
||||||
.ok-iconinbox:before {
|
|
||||||
content: "\e97e";
|
|
||||||
}
|
|
||||||
.ok-iconinfo:before {
|
|
||||||
content: "\e97f";
|
|
||||||
}
|
|
||||||
.ok-iconinstagram:before {
|
|
||||||
content: "\e980";
|
|
||||||
}
|
|
||||||
.ok-iconitalic:before {
|
|
||||||
content: "\e981";
|
|
||||||
}
|
|
||||||
.ok-iconkey:before {
|
|
||||||
content: "\e982";
|
|
||||||
}
|
|
||||||
.ok-iconlayers:before {
|
|
||||||
content: "\e983";
|
|
||||||
}
|
|
||||||
.ok-iconlink-2:before {
|
|
||||||
content: "\e986";
|
|
||||||
}
|
|
||||||
.ok-iconlink:before {
|
|
||||||
content: "\e987";
|
|
||||||
}
|
|
||||||
.ok-iconlinkedin:before {
|
|
||||||
content: "\e988";
|
|
||||||
}
|
|
||||||
.ok-iconlist:before {
|
|
||||||
content: "\e989";
|
|
||||||
}
|
|
||||||
.ok-iconloader:before {
|
|
||||||
content: "\e98a";
|
|
||||||
}
|
|
||||||
.ok-iconlock:before {
|
|
||||||
content: "\e98b";
|
|
||||||
}
|
|
||||||
.ok-iconmail:before {
|
|
||||||
content: "\e98e";
|
|
||||||
}
|
|
||||||
.ok-iconmap-pin:before {
|
|
||||||
content: "\e98f";
|
|
||||||
}
|
|
||||||
.ok-iconmaximize-2:before {
|
|
||||||
content: "\e991";
|
|
||||||
}
|
|
||||||
.ok-iconmaximize:before {
|
|
||||||
content: "\e992";
|
|
||||||
}
|
|
||||||
.ok-iconmenu:before {
|
|
||||||
content: "\e994";
|
|
||||||
}
|
|
||||||
.ok-iconmic-off:before {
|
|
||||||
content: "\e997";
|
|
||||||
}
|
|
||||||
.ok-iconmic:before {
|
|
||||||
content: "\e998";
|
|
||||||
}
|
|
||||||
.ok-iconminimize-2:before {
|
|
||||||
content: "\e999";
|
|
||||||
}
|
|
||||||
.ok-iconminimize:before {
|
|
||||||
content: "\e99a";
|
|
||||||
}
|
|
||||||
.ok-iconminus-circle:before {
|
|
||||||
content: "\e99b";
|
|
||||||
}
|
|
||||||
.ok-iconminus-square:before {
|
|
||||||
content: "\e99c";
|
|
||||||
}
|
|
||||||
.ok-iconminus:before {
|
|
||||||
content: "\e99d";
|
|
||||||
}
|
|
||||||
.ok-iconmonitor:before {
|
|
||||||
content: "\e99e";
|
|
||||||
}
|
|
||||||
.ok-iconmoon:before {
|
|
||||||
content: "\e99f";
|
|
||||||
}
|
|
||||||
.ok-iconmore-horizontal:before {
|
|
||||||
content: "\e9a0";
|
|
||||||
}
|
|
||||||
.ok-iconmore-vertical:before {
|
|
||||||
content: "\e9a1";
|
|
||||||
}
|
|
||||||
.ok-iconmouse-pointer:before {
|
|
||||||
content: "\e9a2";
|
|
||||||
}
|
|
||||||
.ok-iconmove:before {
|
|
||||||
content: "\e9a3";
|
|
||||||
}
|
|
||||||
.ok-iconnavigation-2:before {
|
|
||||||
content: "\e9a5";
|
|
||||||
}
|
|
||||||
.ok-iconnavigation:before {
|
|
||||||
content: "\e9a6";
|
|
||||||
}
|
|
||||||
.ok-iconpaperclip:before {
|
|
||||||
content: "\e9a9";
|
|
||||||
}
|
|
||||||
.ok-iconpie-chart:before {
|
|
||||||
content: "\e9b5";
|
|
||||||
}
|
|
||||||
.ok-iconplay-circle:before {
|
|
||||||
content: "\e9b6";
|
|
||||||
}
|
|
||||||
.ok-iconplay:before {
|
|
||||||
content: "\e9b7";
|
|
||||||
}
|
|
||||||
.ok-iconpower:before {
|
|
||||||
content: "\e9bc";
|
|
||||||
}
|
|
||||||
.ok-iconprinter:before {
|
|
||||||
content: "\e9bd";
|
|
||||||
}
|
|
||||||
.ok-iconradio:before {
|
|
||||||
content: "\e9be";
|
|
||||||
}
|
|
||||||
.ok-iconrefresh-ccw:before {
|
|
||||||
content: "\e9bf";
|
|
||||||
}
|
|
||||||
.ok-iconrefresh-cw:before {
|
|
||||||
content: "\e9c0";
|
|
||||||
}
|
|
||||||
.ok-iconrepeat:before {
|
|
||||||
content: "\e9c1";
|
|
||||||
}
|
|
||||||
.ok-iconrewind:before {
|
|
||||||
content: "\e9c2";
|
|
||||||
}
|
|
||||||
.ok-iconrotate-ccw:before {
|
|
||||||
content: "\e9c3";
|
|
||||||
}
|
|
||||||
.ok-iconrotate-cw:before {
|
|
||||||
content: "\e9c4";
|
|
||||||
}
|
|
||||||
.ok-iconrss:before {
|
|
||||||
content: "\e9c5";
|
|
||||||
}
|
|
||||||
.ok-iconsave:before {
|
|
||||||
content: "\e9c6";
|
|
||||||
}
|
|
||||||
.ok-iconsend:before {
|
|
||||||
content: "\e9c9";
|
|
||||||
}
|
|
||||||
.ok-iconsettings:before {
|
|
||||||
content: "\e9cb";
|
|
||||||
}
|
|
||||||
.ok-iconshare-2:before {
|
|
||||||
content: "\e9cc";
|
|
||||||
}
|
|
||||||
.ok-iconshare:before {
|
|
||||||
content: "\e9cd";
|
|
||||||
}
|
|
||||||
.ok-iconshopping-cart:before {
|
|
||||||
content: "\e9d1";
|
|
||||||
}
|
|
||||||
.ok-iconshuffle:before {
|
|
||||||
content: "\e9d2";
|
|
||||||
}
|
|
||||||
.ok-iconskip-back:before {
|
|
||||||
content: "\e9d4";
|
|
||||||
}
|
|
||||||
.ok-iconskip-forward:before {
|
|
||||||
content: "\e9d5";
|
|
||||||
}
|
|
||||||
.ok-iconslash:before {
|
|
||||||
content: "\e9d7";
|
|
||||||
}
|
|
||||||
.ok-iconsliders:before {
|
|
||||||
content: "\e9d8";
|
|
||||||
}
|
|
||||||
.ok-iconstar:before {
|
|
||||||
content: "\e9dd";
|
|
||||||
}
|
|
||||||
.ok-iconstop-circle:before {
|
|
||||||
content: "\e9de";
|
|
||||||
}
|
|
||||||
.ok-iconsun:before {
|
|
||||||
content: "\e9df";
|
|
||||||
}
|
|
||||||
.ok-icontag:before {
|
|
||||||
content: "\e9e3";
|
|
||||||
}
|
|
||||||
.ok-iconterminal:before {
|
|
||||||
content: "\e9e5";
|
|
||||||
}
|
|
||||||
.ok-iconthermometer:before {
|
|
||||||
content: "\e9e6";
|
|
||||||
}
|
|
||||||
.ok-iconthumbs-down:before {
|
|
||||||
content: "\e9e7";
|
|
||||||
}
|
|
||||||
.ok-iconthumbs-up:before {
|
|
||||||
content: "\e9e8";
|
|
||||||
}
|
|
||||||
.ok-icontrash-2:before {
|
|
||||||
content: "\e9eb";
|
|
||||||
}
|
|
||||||
.ok-icontrash:before {
|
|
||||||
content: "\e9ec";
|
|
||||||
}
|
|
||||||
.ok-icontrello:before {
|
|
||||||
content: "\e9ed";
|
|
||||||
}
|
|
||||||
.ok-icontrending-down:before {
|
|
||||||
content: "\e9ee";
|
|
||||||
}
|
|
||||||
.ok-icontrending-up:before {
|
|
||||||
content: "\e9ef";
|
|
||||||
}
|
|
||||||
.ok-iconwifi:before {
|
|
||||||
content: "\ea09";
|
|
||||||
}
|
|
||||||
.ok-iconwind:before {
|
|
||||||
content: "\ea0a";
|
|
||||||
}
|
|
||||||
.ok-iconx-circle:before {
|
|
||||||
content: "\ea0b";
|
|
||||||
}
|
|
||||||
.ok-iconx-octagon:before {
|
|
||||||
content: "\ea0c";
|
|
||||||
}
|
|
||||||
.ok-iconx-square:before {
|
|
||||||
content: "\ea0d";
|
|
||||||
}
|
|
||||||
.ok-iconx:before {
|
|
||||||
content: "\ea0e";
|
|
||||||
}
|
|
||||||
.ok-iconyoutube:before {
|
|
||||||
content: "\ea0f";
|
|
||||||
}
|
|
||||||
.ok-iconzap-off:before {
|
|
||||||
content: "\ea10";
|
|
||||||
}
|
|
||||||
.ok-iconzap:before {
|
|
||||||
content: "\ea11";
|
|
||||||
}
|
|
||||||
.ok-iconzoom-in:before {
|
|
||||||
content: "\ea12";
|
|
||||||
}
|
|
||||||
.ok-iconzoom-out:before {
|
|
||||||
content: "\ea13";
|
|
||||||
}
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 238 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>导航的图标</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
||||||
<style>
|
|
||||||
.ok-body {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="ok-body">
|
|
||||||
<blockquote class="layui-elem-quote">
|
|
||||||
<p>主要讲述如何设置导航的图标。</p>
|
|
||||||
</blockquote>
|
|
||||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
|
||||||
<p>特别注意：必须要遵守指定的写法</p>
|
|
||||||
<p>1.默认的图标指向的值layui内置图标</p>
|
|
||||||
<p>2.要想使用ok-icon图标必须设置navs.json中的fontFamily属性和icon属性</p>
|
|
||||||
</blockquote>
|
|
||||||
<pre lay-title="JavaScript">
|
|
||||||
{
|
|
||||||
"title": "后台首页",
|
|
||||||
"fontFamily":"ok-icon",
|
|
||||||
"icon":"ok-iconairplay",
|
|
||||||
"href": "pages/home.html",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "后台首页",
|
|
||||||
"fontFamily":"ok-icon",
|
|
||||||
"icon":"&#xe9a6;",
|
|
||||||
"href": "pages/home.html",
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<script src="../../lib/layui/layui.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
layui.use(['code'], function () {
|
|
||||||
var code = layui.code;
|
|
||||||
code({
|
|
||||||
elem: 'pre'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>用户列表</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
||||||
<style>
|
|
||||||
.ok-body {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="ok-body">
|
|
||||||
<blockquote class="layui-elem-quote">
|
|
||||||
<p>主要讲述如何在内部页面添加导航。</p>
|
|
||||||
</blockquote>
|
|
||||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
|
||||||
<p>特别注意：添加导航的同时必须要遵守指定的写法</p>
|
|
||||||
<p>1.必须指定一个html元素</p>
|
|
||||||
<p>2.此元素的属性必须有data-url和lay-id</p>
|
|
||||||
<p>3.data-url属性表示指定的页面且必须是网站的绝对路径</p>
|
|
||||||
<p>4.lay-id属性，请不要以数字开头，推荐以字母开头，长度不限</p>
|
|
||||||
<p>5.当lay-id重复时，那么则只会打开一个，后者只会定位到当前选项卡</p>
|
|
||||||
</blockquote>
|
|
||||||
<pre lay-title="JavaScript">
|
|
||||||
layui.use(function(){
|
|
||||||
var okTab = parent.objOkTab;//获取父级的okTab;layui.okTab()不推荐这样获取
|
|
||||||
var page = '<div lay-id="add-1" data-url="/pages/user/user.html">个人中心</div>';
|
|
||||||
okTab.tabAdd(page);
|
|
||||||
})
|
|
||||||
</pre>
|
|
||||||
<div class="layui-card">
|
|
||||||
<button class="layui-btn" id="addNav1">
|
|
||||||
<i class="layui-icon"></i>新的选项卡1
|
|
||||||
</button>
|
|
||||||
<button class="layui-btn" id="addNav2">
|
|
||||||
<i class="layui-icon"></i>新的选项卡2
|
|
||||||
</button>
|
|
||||||
<button class="layui-btn" id="addNav3" lay-id="add-3" data-url="https://cn.vuejs.org/v2/api/">
|
|
||||||
<i class="layui-icon"></i>新的选项卡3
|
|
||||||
</button>
|
|
||||||
<button class="layui-btn" id="addNav4" data-url="/pages/user/user.html">
|
|
||||||
<i class="layui-icon"></i>没有加lay-id
|
|
||||||
</button>
|
|
||||||
<a class="layui-btn" href="../../pages/user/user.html">普通跳转页</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="layui-card">
|
|
||||||
<button class="param layui-btn" data-url="/pages/help/navOperate.html?param=a">
|
|
||||||
跳转传参a
|
|
||||||
</button>
|
|
||||||
<button class="param layui-btn" data-url="/pages/help/navOperate.html?param=b">
|
|
||||||
跳转传参b
|
|
||||||
</button>
|
|
||||||
<button class="param2 layui-btn">
|
|
||||||
不会被关闭的导航c
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<script src="../../lib/layui/layui.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
function getUrlParam(name) {
|
|
||||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
|
||||||
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
|
||||||
if (r != null) return unescape(r[2]);
|
|
||||||
return null; //返回参数值
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
layui.use(['element', 'table', 'form', 'jquery', 'okTab', 'laydate', 'code'], function () {
|
|
||||||
|
|
||||||
var $ = layui.jquery,
|
|
||||||
p_layer = parent.layer || layer;
|
|
||||||
var okTab = layui.okTab();//获取父级的oktab
|
|
||||||
var code = layui.code;
|
|
||||||
code({
|
|
||||||
elem: 'pre'
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#addNav1").click(function () {
|
|
||||||
//方式一（推荐）
|
|
||||||
var url = "pages/user/user.html";
|
|
||||||
var page = '<div lay-id="add-1" data-url="' + url + '"><cite>个人中心</cite></div>';
|
|
||||||
okTab.tabAdd(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#addNav2").click(function () {
|
|
||||||
//方式二(获取父级对象进行添加)
|
|
||||||
var p_layui = parent.layui;//获取父级的layui
|
|
||||||
var p_okTab = p_layui.okTab();//拿到导航操作对象
|
|
||||||
var url = "pages/user/user.html";
|
|
||||||
var page = '<a lay-id="u-1" href="javascript:;" data-url="' + url + '"><cite>个人中心</cite><span class="layui-badge-dot"></span></a>';
|
|
||||||
p_okTab.tabAdd(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#addNav3,#addNav4").click(function () {
|
|
||||||
okTab.tabAdd(this);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("button.param").click(function () {
|
|
||||||
var url = $(this).attr("data-url");
|
|
||||||
var page = '<div lay-id="param" data-url="' + url + '"><cite>选项卡传参</cite></div>';
|
|
||||||
okTab.tabAdd(page);
|
|
||||||
});
|
|
||||||
$("button.param2").click(function () {
|
|
||||||
var url = '/pages/help/navOperate.html?param=c';
|
|
||||||
var page = '<div lay-id="param2" is-close="false" data-url="' + url + '">不会被关闭</div>';
|
|
||||||
okTab.tabAdd(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
var getParam = getUrlParam("param");
|
|
||||||
if (getParam) {
|
|
||||||
layer.msg("参数为" + getParam);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>用户列表</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
||||||
<style>
|
|
||||||
.ok-body {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="ok-body">
|
|
||||||
<blockquote class="layui-elem-quote">
|
|
||||||
<p>主要讲述导航参数的说明。</p>
|
|
||||||
</blockquote>
|
|
||||||
<pre lay-title="导航参数">
|
|
||||||
{
|
|
||||||
"title": "后台首页", //导航标题
|
|
||||||
"fontFamily": "ok-icon", //标题的字体图标来源
|
|
||||||
"icon": "ok-iconairplay", //制定字体图标
|
|
||||||
"href": "pages/home.html", //指向的页面路径
|
|
||||||
"isClose": true, //设置导航页是否关闭(默认true)
|
|
||||||
"spread": false, //设置是否打开
|
|
||||||
"isCheck": false //是否选中
|
|
||||||
"target":"_blank" //打开方式 _blank：覆盖当前窗口
|
|
||||||
"children": [{}] //子导航 参数同上（可嵌套无限个）
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<script src="../../lib/layui/layui.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
layui.use(['code'], function () {
|
|
||||||
var code = layui.code;
|
|
||||||
code({
|
|
||||||
elem: 'pre'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>插件目录</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
||||||
<style>
|
|
||||||
.ok-body {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="ok-body">
|
|
||||||
<blockquote class="layui-elem-quote">
|
|
||||||
<p>主要描述插件的目录和插件的引入。</p>
|
|
||||||
</blockquote>
|
|
||||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
|
||||||
<p>1.如果你想使用countUp数字步进器，那么你需要引入一个countUp插件</p>
|
|
||||||
</blockquote>
|
|
||||||
<pre lay-title="导航参数">
|
|
||||||
引入插件并加载一个插件
|
|
||||||
layui.use(['countUp'], function () {
|
|
||||||
var countUp = layui.countUp;
|
|
||||||
var page = '<div lay-id="add-1" data-url="/pages/user/user.html">个人中心</div>';
|
|
||||||
okTab.tabAdd(page);
|
|
||||||
});
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<script src="../../lib/layui/layui.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
layui.use(['code'], function () {
|
|
||||||
var code = layui.code;
|
|
||||||
code({
|
|
||||||
elem: 'pre'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue