关于ui

将html,js,css做成组件,使web开发更方便.这种思路在桌面程序中早就有了,比如winfrom.较早些时候,当前后端还没有分离,还是以服务端编程时,惯用的是JQUERY,还有各用基于JQUERY的UI.

后来,有了Bootstrap.学习它的scss后,认为这是一种先进的思想.于是模仿练习.它是OOP的,使用scss编写生成css.生成各种组件,布局,工具的css样式.

一套webui是一些组件的集合,一个组件就是html模板加css显示加js功能的组合.按bootstrap的思路,编写这种组合就得到了一套UI.

看过一些其它的ui框架,都是bootstrap的形式,或者直接基于它开发的.看起来,这更是一种web前端编程思路突破,真正的将web前端工程化了,就像服务端工程化那样.

所以,使用造组件的思路,可以造出各种各样的ui来.

主题

主色调和基准字体大小使用了css变量,用JS修改变量的值就能改变主题色和字体大小.css变量在":root"伪类下查找,下面是字体和主题色变量

--font-size: 14px;

--primary: #6c6;

js修改方法: document.body.style.setProperty('--primary', 'blue');

修改主色primary

#6c6 #17a2b8 #ffc107

修改字体大小

12px 14px(默认) 16px 18px 22px

主题色

部分主题色值来自bootstrap4.0

primary

danger

success

info

warning

主题色加深,primary - paimaryse , info - infose

primary-se

danger-se

success-se

info-se

warning-se

册格系统

册格布局是bootstrap的经典,现在css已经自带了.可以直接使用自带的.

对div使用样式 {display:grid ; grid-template-columns: repeat(12,8.3333%);} 就实现了

.demo-grids {
  display: grid;
  grid-template-columns: repeat(12,8.3333%);
}
1 2 3 4 5 6 7 8 9 10 11 12

册格便利类

为了使用方便,制做栅格便利类

.grids-n n=(1~12) 使用 display: grid 实现

.grids-n {
  display: grid;
  grid-template-columns: repeat(n, 1/n*100%);
  overflow: hidden;
}

在div册格容器上使用样式 .grids-7 其下项目会自动均分1/7宽度

1 / 7 2 / 7 3 / 7 4 / 7 5 / 7 6 / 7 7 / 7

grids支持屏幕尺寸便利类

grids-sm-2 在屏幕宽度大于576px时,其下项目均分为2

grids-md-3 在屏幕宽度大于768px时,其下项目均分为3

grids-lg-4 在屏幕宽度大于992px时,其下项目均分为4

grids-xl-5 在屏幕宽度大于1200px时,其下项目均分为5

.grids .grid 使用 display: flex 实现

在div册格容器上使用样式 .grids, 同时在其下项目上使用样式 .grid ,则项目自动根据个数均分宽度

1 / 9 2 / 9 3 / 9 4 / 9 5 / 9 6 / 9 7 / 9 8 / 9 9 / 9

在div册格的项目元素上使用样式 .grid-n n=(1~12) 则项目占比n/12

grid-3 grid-4 grid-5

在div册格的项目元素上混合使用样式 .grid和.grid-n,其中grid-n占用指定宽度,grid则均分剩于空间

均分
固定占grid-5
均分
均分

便利grids类使用的是flex布局.需要注意一种情况,display:flex会对其子元素大小产生影响.例如:

<div class="grids">
  <span class="grid-2">背景图片</span>
    <span class="grid-8"></h3>
    <span class="grid-2"></span>
</div>

栅格的第一个span,是设置有背景图片的.display:inline-block;width:48px;height:48px;大小48X48,但是放在

grid栅格容器里,大小不是48X48了,(图片走样了),受到flex父元素影响.可以在span上设置如下css解决:

  background-size:contain;

标题段落

对h1~h6和p标签的样式

h1-h6

h1 标题 X2.5

h2 标题 X2.2

h3 标题 X1.8

h4 标题 X1.3

h5 标题 基准字体大小,14px
h6 标题 12px

p

简单的设置了下边margin-bottom 14px

第 0 段,.....

第 1 段,.....

第 2 段,.....

第 3 段,.....

第 4 段,.....

第 5 段,.....

hr分隔线

class="line"


class="line primary"


class="line danger"


class="line success"


class="line info"


class="line warning"


按钮

标记使用a span button,添加.btn样式.

btn normal 链接式 圆角
<span class="btn">btn normal</span>

<a class="btn link">链接式</a>

<button class="btn disabled">禁用</button>

<a class="btn cir">圆角</a>

<button class="btn loading">等待中</button>

颜色,尺寸,块级

<a> class="btn primary">primary</a>

<a> class="btn link primary">primary link</a>

 <a class="btn lg">lg 尺寸</a>

<a class="btn block">块级按钮</a>

等待效果

调用 "$ui.isBtnLoading(btn)" 给按钮加等待效果

点击等待

按钮等待时.调用 "$ui.clsBtnLoading(btn,2000)" 消除等待

2秒后等待消除

表格

一个简单的表格样式,有隔行颜色,鼠标hover,外边框

简单表格

#名字职位
1关羽前将军
2张飞右将军
3马超左将军
4黄忠后将军
5赵云翊将军

<table class="table">
    <tr><th>#</th><th>名字</th><th>职位</th></tr>
    <tr><td>1</td><td>关羽</td><td>前将军</td></tr>
</table>

hover隔行色

#名字职位
1关羽前将军
2张飞右将军
3马超左将军
4黄忠后将军
5赵云翊将军

隔行色可加主题色

#名字职位
1关羽前将军
2张飞右将军
3马超左将军
4黄忠后将军
5赵云翊将军

<table class="table hover"></table>
<table class="table hover primary"></table>

外边框

#名字职位
1关羽前将军
2张飞右将军
3马超左将军
4黄忠后将军
5赵云翊将军

<table class="table border"></table>

内外边框

#名字职位
1关羽前将军
2张飞右将军
3马超左将军
4黄忠后将军
5赵云翊将军

<table class="table border-all"></table>

表单元素

几种表单元素的样式.另外做了两种纸质风格的样式.

input框


<label class="input-label">文本框</label>
<input class="input-text" type="text" value="123456" />

<label class="input-label">密码框</label>
<input class="input-text" type="password" value="123456" />

<label class="input-label">Email</label>
<input class="input-text" type="email" value="xxx@mirror.com" />

四种大小,sm md(默认) lg xl

<div class="grids">
  <label class="input-label sm grid-1">sm尺寸</label>
  <input class="input-text sm grid-3" type="text" value="sm font-size=12px" />
</div>

textarea

<label class="textarea-label grid-2">多行文本框</label>
<textarea class="textarea grid-10">多行文本框的高度为100px,且禁止手动调整大小.文本框没有分大小号</textarea>

文件选择

采用将input控件透明化,覆盖在标题控件之上的办法

由一个外层DIV包含input-file控件,和一个说明标题.都使用绝对定位,其中,input-file控件位于标题控件之上,并且是透明的.

选择文件后,文件名会显示在标签中,多个文件会用逗号隔开.这个功能需要给控件添加onchange事件,方法是$ui.inputFileChange(this)


清空选择的文件: $ui.clsInputFile(forminputfile1)

清空文件
<div class="input-file-box">
  <input class="input-file" onchange="$ui.inputFileChange(this)" type="file" multiple />
  <label class="input-file-label">选择文件</label>
</div>

单选与复选

使用label与input关联,透明化原生input,单选与复选的框是label下的b元素实现,选中的勾和圆点,通过b元素的伪类实现

input需要指定ID,label要指定FOR,label内含的b元素是选择框

默认的单选与复选框是白底色,选中时勾和点为黑色



<input class="input-check" type="checkbox" id="testcheck" />
<label class="input-check-label" for="testcheck"><b class="check"></b>复选框</label>
 
<input class="input-check" name="radiogroup1" type="radio" id="testradio" />
<label class="input-check-label" for="testradio"><b class="radio"></b>单选框</label>

四种大小,默认14px.在label上加上样式 sm lg xl


主题颜色.在label上加上主题样式 primary danger success



<input class="input-check" type="checkbox" id="colorchec" />
<label class="input-check-label xl" for="colorcheck"><b class="check"></b>大号复选框</label>

<input class="input-check" name="colorgroup1" type="radio" id="colorradio" />
<label class="input-check-label danger" for="colorradio"><b class="radio"></b>红色单选框</label>

select

下拉框.有四种大小.

<select class="select sm">
  <option>明月几时有</option>
  <option>把酒问青天</option>
  <option>不知天上宫阙</option>
  <option>今昔是何年</option>
</select>

表单栅格布局

可以将表单元素放到栅格里,做横向布局.可以用栅格框分组表单元素

<div class="grids mg-b-5">
  <label class="input-label bg-gray text-center grid-1">姓名</label>
  <input class="input-text grid-5" type="text" name="name1" value="mirror" />
</div>
<div class="grids mg-b-5">
  <label class="input-label bg-gray text-center grid-1">国家</label>
  <input class="input-text grid-2" type="text" name="name2" value="China" />
  <label class="input-label bg-gray text-center grid-1">WebSite</label>
  <input class="input-text grid-2" type="text" name="name3" value="mirrortom.date" />
</div>

纸质风格表单

纸质风格表单是模仿的传统表格式的风格,整个表单是一个大表格,里面按表单项合理布局.有外边框和表单项边框.

html结构组成:最外层是div.form-table-box 每一行是一个册格行div.grids,里面是表单项,添加册格类占用宽度.不必填满12册格.

这种实现办法,优点是类纸质传统风格,就像填写单据一样,习惯易用.缺点在于布局不够灵活,同一行的表单项必须高度一样,不像表格那样可以使用rowspan或colspan跨行列

这个例子使用现有的样式实现简易的版本,复杂的表格需要采用传统的table布局,还有新的display:grid布局完成.

苏东坡


<div class="form-table-box">
  <div class="grids">
    <label class="input-label grid-1">姓名</label>
    <input class="input-text grid-1" value="苏东坡" />
  </div>
</div>

图片

自动适应父容器大小 class="img-autosize" 圆角class="img-rounded" 圆形class="img-circle"

列表

<ul class="list">

使用ul,ol标记,加list类. <ul class="list"> <ol class="list">

根据原有的ul,ol的样式,稍微调整了li的padding上下.在嵌套时的padding左.另外,加了数值和字母序列

  • 主食
    • 面包
    • 米饭
    • 馒头
  • 饮料
    • 咖啡
    • 白酒
    • 绿茶

方块,圆,主题色

  1. 尊前拟把归期说,欲语春容先惨咽
  2. 人生自是有情痴,此恨不关风与月
  3. 离歌且莫翻新阕,一曲能教肠寸结
  4. 直须看尽洛城花,始共春风容易别
  1. 两个黄鹂鸣翠柳, // 两只黄鹂在翠绿的柳树间婉转地歌唱
  2. 一行白鹭上青天. // 一队整齐的白鹭直冲向蔚蓝的天空
  3. 窗含西岭千秋雪, // 窗前可以望见西岭上堆积着终年不化的积雪
  4. 门泊东吴万里船. // 门前停泊着自万里外的东吴远行而来的船只
// 方块
<ul class="list square">
// 圆
<ul class="list cir">
// 主题色
<ul class="list square primary">

数值,字母样式

嵌套的序列使用了css的 "counter-reset" "counter-increment" "counters()" 这三个属性和方法

  • 主食
    • 面包
    • 米饭
    • 馒头
  • 饮料
    • 咖啡
    • 白酒
      • 绿茶
      • 红茶
  • 餐具
    • 大碗
    • 竹筷
    • 汤勺
  • 优惠
    • 会员9折
    • 会员100减5
    • 优惠劵
      • 200酒
      • 100饮料(除酒)
// 数值
<ul class="list num">
// 字母
<ul class="list abc">
注意:嵌套的ul,ol,也要加上 class="list num|abc" 样式

垂直对齐问题

列表前的方块,圆,数值,abc和列表的内容没有垂直对齐,仔细看是有一点差距的.这个情况发生在"li"的内容是文本节点的时候:

  • 没有对齐(文本直接在li里)
  • 对齐了(文本包在span里)
// li下的文本节点
<li>没有对齐</li>
// 包一层span
<li><span>对齐了</span></li>

如果文本包一层元素就能对齐.li设置了子元素垂直对齐 { li > * : vertical-align: middle }

便利样式

为了方便使用,做一些单独的样式类

文本超出时,显示省略号

需要给元素设置宽度width或者max-width,否则没有效果.'text-overflow'类设置了max-width:100%

class="text-overflow" 文本超出时,显示省略号

文本对齐

class="text-left" 左

class="text-center" 中

class="text-right" 右

文本大小

class="text-sm" 小号字12px

class="text-lg" 大

class="text-xl" 巨大

文本颜色

主题文本色

class="text-primary"

class="text-danger"

class="text-success"

class="text-info"

class="text-warning"

深色

class="text-primaryse"

class="text-dangerse"

class="text-successse"

class="text-infose"

class="text-warningse"

其它

白色文字 class="text-white" 灰色文字 class="text-gray" 加深灰色文字 class="text-grayse"

背景颜色

主题背景颜色

class="bg-primary"

class="bg-danger"

class="bg-success"

class="bg-info"

class="bg-warning"

深色

class="bg-primaryse"

class="bg-dangerse"

class="bg-successse"

class="bg-infose"

class="bg-warningse"

其它

灰色背景 class="bg-gray" 加深灰色背景 class="bg-grayse" 暗色背景 class="bg-dark"

边距margin 内容距padding

pd-n(n=5,10,15,..,45,50) 四个方向(l,r,t,b) pd-l-n pd-r-n pd-t-n pd-b-n, 可以组合上下与左右 pd-lr-n pd-tb-n

class="pd-10" class="pd-t-10" 上 class="pd-b-10" 下 class="mg-lr-20" 左右 class="mg-tb-20" 上下

隐藏与显示

d-none d-block 媒体查询:针对不同大小屏幕 d-sm-none d-md-none d-lg-none d-xl-none

例1,只在sm(576px以下小屏幕)显示: class='d-block d-sm-none'

例2,只在lg(992px以上大屏幕)显示: class='d-none d-lg-block'

sm 576px以下显示 sm 576px以上显示 lg 992px以上显示 lg 1200px以上显示

媒体查询

媒体查询可以实现不同屏幕尺寸显示不同样式

@media only screen and (min-width: 576px) {
  #mediaquerydiv1 {
    color: green;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1200px) {
  #mediaquerydiv1 {
    color: blue;
  }
}
@media only screen and (min-width: 1200px) {
  #mediaquerydiv1 {
    color: black;
    font-weight:bold;
  }
}

576px以下:红色文字 | 576px以上:绿色文字 | 980px ~ 1200px 蓝色文字 | 1200px以上 黑色文字加粗

调整浏览器大小查看效果

按钮组

按钮组包含多个按钮,一般用于一组性质相近的功能.

按钮组容器使用inline-flex布局,注意是个行内flex布局,元素会变为行为元素.里面按钮flex:auto(1 1 auto)

同一组的按钮大小要相同

横向按钮组

加粗 下划线 倾斜 字体 复制 剪切     

1 2 3 4 5 6 7 8 9 10
<span class="btn-group">
  <a class="btn">加粗</a>
  <a class="btn">下划线</a>
  <a class="btn">倾斜</a>
  <a class="btn">字体</a>
  <a class="btn">复制</a>
  <a class="btn">剪切</a>
</span>

<div class="btn-group cir"></div>

下拉式按钮组

第1个按钮用于下拉框标题,用伪类加三角符号.当鼠标hover下拉框时btn-list-group,显示下拉按钮组btn-list-area

btn-list-group绝对定位于btn-list-group,里面包含下拉按钮列表.

注意:下拉式按钮组使用行内元素

悬停 新建 编辑 打开 导出 导入 退出
<span class="btn-list-group">
  <a class="btn">悬停</a>
  <span class="btn-list-area">
    <a class="btn primary">新建</a>
    <a class="btn">编辑</a>
    <a class="btn info">打开</a>
    <a class="btn danger">导出</a>
    <a class="btn warning">导入</a>
    <a class="btn success">退出</a>
  </span>
</span>

混合按钮组

将下拉式按钮组放在横向按钮组里

标签

默认标签背景颜色继承父级,可以自定义标签背景色,文字色,也可以使用主题背景色

默认标签 暗色背景 class="bg-dark"
primary danger success info warning
sm 尺寸 lg 尺寸 xl 尺寸
<span class="label primary xl">默认标签</span>

<span class="label text-white bg-dark">暗色背景 class="bg-dark"</span>

段落标题

段落标题用于一段文字的分割标题

默认标题

primary

danger

success

info

warning

sm 尺寸

lg 尺寸

xl 尺寸

<p class="article-title">默认标题</p>

<p class="article-title xl primary">标题</p>

信息面板

内容包含标题和一段文字.也可无标题.标题使用h1~h6,段落使用p.

标题h1~h6

可用于介绍说明,有一个醒目的标题和简短的文字描述.

Primary

class="msgpanel primary",应用主题色时,标题跟随主题色

<div class="msgpanel">
  <h2>标题h1~h6</h2>
  <p>可用于介绍说明,有一个醒目的标题和简短的文字描述.</p>
</div>

面板

像广告牌,分两部分,上面是大标题,下面是简介.面板是个容器,可放入其它零件.

在panel-head或者panel-body上加背景色,可做出不同颜色的面板

标题h2

面板内容,使用了p标记

垓下歌-项羽

力拔山兮气盖世。时不利兮骓不逝。

骓不逝兮可奈何!虞兮虞兮奈若何!

泊船瓜洲-王安石

京口瓜洲一水间,钟山只隔数重山。

春风又绿江南岸,明月何时照我还?

短歌行-曹操

慨当以慷,忧思难忘。何以解忧?唯有杜康。

青青子衿,悠悠我心。但为君故,沉吟至今。


<div class="panel">
  <div class="panel-head">
    <h2>标题</h2>
  </div>
  <div class="panel-body">
    内容
  </div>
</div>
<div class="panel">
  <div class="panel-head bg-danger">
    <h4>泊船瓜洲-王安石</h4>
  </div>
  <div class="panel-body">
    内容
  </div>
</div>

选项卡

切换选项卡,显示相应页面.很常用的组件

单击或者鼠标移入选项卡,激活该选项页.选项卡与页由索引顺序相关联,例如:激活第2个选项卡时,则激活第2个面板.

当前活动的选项卡和对应页面有类名active,class="tabs-label active" class="tabs-panel active" 默认第1个是激活的

苏轼 陆游 李清照

饮湖上初晴后雨二首·其二

水光潋滟晴方好

山色空蒙雨亦奇

欲把西湖比西子

淡妆浓抹总相宜

卜算子 咏梅

驿外断桥边

寂寞开无主

已是黄昏独自愁

更著风和雨

无意苦争春

一任群芳妒

零落成泥碾作尘

只有香如故

一剪梅 红藕香残玉蕈秋

红藕香残玉蕈秋

轻解罗裳

独上兰舟

云中谁寄锦书来

雁字回时

月满西楼

花自飘零水自流

一种相思

两处闲愁

此情无计可消除

才下眉头

却上心头

选项1 选项2 选项3
鼠标划入切换onmouseenter
选项2-内容
选项3-内容

选项卡标签均分

选项卡平均整行,加上full类.class="tabs-box full"

卓文君 上官婉儿 秦观

白头吟

皑如山上雪 皎若云间月 闻君有两意 故来相决绝

今日斗酒会 明旦沟水头 躞蹀御沟上 沟水东西流

凄凄复凄凄 嫁娶不须啼 愿得一心人 白头不相离

竹竿何袅袅 鱼尾何簁簁 男儿重意气 何用钱刀为

彩书怨

叶下洞庭初 思君万里余 露浓香被冷 月落锦屏虚

欲奏江南曲 贪封蓟北书 书中无别意 惟怅久离居

鹊桥仙 纤云弄巧

纤云弄巧 飞星传恨 银汉迢迢暗度 金风玉露一相逢 便胜却人间无数

柔情似水 佳期如梦 忍顾鹊桥归路 两情若是久长时 又岂在朝朝暮暮


主题颜色

选项1 选项2 区别
添加样式 class="tabs-box primary"
选项2-内容
区别在于选项卡标签的颜色,还有标签和面板分界线的颜色

选项1 选项2 区别
添加样式 class="tabs-box danger"
选项2-内容
区别在于选项卡标签的颜色,还有标签和面板分界线的颜色

选项1 选项2 区别
添加样式 class="tabs-box success"
选项2-内容
区别在于选项卡标签的颜色,还有标签和面板分界线的颜色

选项1 选项2 区别
添加样式 class="tabs-box info"
选项2-内容
区别在于选项卡标签的颜色,还有标签和面板分界线的颜色

选项1 选项2 区别
添加样式 class="tabs-box warning"
选项2-内容
区别在于选项卡标签的颜色,还有标签和面板分界线的颜色

列表形式

加上list类 class="tabs-box list"

选项1 选项2 选项3
选项1-竖直排列的选项卡标签
选项2-内容
选项3-内容

HTML结构,js调用

<div id="mytabs1" class="tabs-box">
    <div class="tabs-header">
        <span class="tabs-label">苏轼</span>
        <span class="tabs-label">陆游</span>
        <span class="tabs-label">李清照</span>
    </div >
    <div class="tabs-panel">...</div>
    <div class="tabs-panel">...</div >
    <div class="tabs-panel">...</div >
</div>
// js调用,传入tabs的id.默认激活0位置面板
tabs('mytabs1');
// 切换方式(参数3) 1=点击 2=鼠标移入
tabs('mytabs1',0,2);
// 指定第2个面板激活,索引从0开始
tabs('mytabs1',1);

事件

tab1.onTabActive(tabLabel)

选项卡激活后执行事件,tabLabel是选项卡标签的dom对象

let tabs1 = tabs('mytabs1');
tabs1.onTabActive = (tabLabel) => {
  msgbox.alert('激活面板标题是: ' + tabLabel.innerTEXT);
}

选项1 选项2 选项3
选项1-内容
选项2-内容
选项3-内容

方法

选项1 选项2 选项3
选项1-内容
选项2-内容
选项3-内容
tab1.activeTab(index)激活选项2激活选项卡,index是选项卡索引
tab1.addTab(title, index)添加选项卡到第2位置添加一个选项卡. title:选项卡标题, index:添加到这个索引位置,默认加到最后
tab1.delTab(index, tagType)删除第2位置的选项卡删除一个选项卡. index:要删除的选项卡索引或pid.tagType:'index'(默认) | 'pid'(表示index指的是pid值)
tab1.getCount()选项卡个数返回选项卡个数

弹出框

原理来自研究bootstrap的弹出层.模仿实现三种系统弹出框alert confirm prompt

msgbox.alert(文本消息,[回调事件],[按钮样式:primary,danger,success],[弹出位置:center,top,bottom])

alert

confirm

 

prompt

 

自定义弹出层

自定义框是一个HTML片段,弹出的本质是在将它显示在弹出层父级上

    <div style="background-color:#eee;width:400px;height:140px;border:1px solid #666;align-self:center;padding:15px">
        <h3>自定义弹出层标题</h3>
        <p>弹出框原理分析学习,模仿了系统的三种弹出框.实现弹出自定义html片段</p>
        <div style="text-align:center"><button onclick="msgbox.close()">取消</button><button onclick="msgbox.close()">确定</button></div>
    </div>
    

日期时间

日期控件,兼容PC与手机端.js插件模式.支持日期和日期时间基本功能

// 日期
<input onclick="MyDatePick()" type="text">
// 日期时间
<input onclick="MyDatePick({fmt:'datetime'})" type="text">

实现思路

开始参考了火狐浏览器自带日期控件的样子.实现时,将日期看做一个四行七列的表格.首行为年月日今天按钮,第二行放星期,三行为日,四行为小时区.布局后,放入对应按钮,然后绑定各自事件

控件的复杂处在于事件比较多,但js和css并没有太多难度,只是代码有点多而已.在判断当天所在月的日期时,需要一个计算,最终要算出这个月1号的前几天和最后一号的后几天

分页导航

参考了天猫京东的分页条,最后设计成包含如下按钮.上一页,1页,当前页前几页,当前页,当前页后几页,最后页,下一页,总页数,跳转页输入框,确定

使用

pagenum(cfg);

<nav class="pagenum" id="pagenumId"></nav>
<nav class="pagenum primary" id="pagenumId2"></nav>
// 调用方法
function newpagenum(pnnum) {
    let cfg = {
        // 容器id(必须)
        domId: 'testpagenumbox1',
        // 点击事件(必须)
        pageClickE: newpagenum,
        // 总数(必须) >0 由后端返回新的总数
        totalData: 96,
        // 当前页码(必须) >0 由后端返回当前页码,或者页面记住当前请求页面
        pageIndex: pnnum,
        // 每页数量 [5-50]
        pageSize: 10,
        // 显示几个按钮[5-10]
        totalBtn: 5
    }
    pagenum(cfg);
}
newpagenum(1);

刷新分页和无刷新分页的使用区别

pageClickE这个方法将绑定到页码按钮的点击事件上,如果是整页面刷新分页,那么该方法执行跳转到新页面,新页面再生成分页条即可.

web前端一般是无刷新分页,pageClickE方法会包含一个ajax请求,这个请求的回调方法里,再执行生成新的分页条,并且配置参数中的pageClickE,再次指向ajax方法自己

// ajax请求示例方法
function getdata()
{
  var para = {};
  $.post('/api/html/PageNumber', { k:v }, function (data)
  {
  if (data.length == 0)
  {
  // 如果没有数据返回,可以不用生成分页条.
      return;
  }
  // 再生成新分页条
  let cfg=
  {
     // 这里绑定getdata方法自己
  pageClickE:function(){ getdata() },
      // 总数(必须) >0 由后端返回新的总数
  totalData:data.总数,
      // 当前页码(必须) >0 由后端返回当前页码,或者页面记住当前请求页面
      pageIndex:data.当前页码,
      // 每页数量 [5-50]
      pageSize:10,
      // 显示几个按钮[5-10]
      totalBtn:5
  }
  pagenum(cfg);
}

侧边菜单

html结构

最外层是nav容器,包含ul列表,每个ul是一组菜单.ul里的li为菜单项容器.里面的a是菜单项,每个ul内第1个span是组标题.

<nav class="sidemenu-box" id="main_menubox">
  <ul class="sidemenu-group">
    <li>
      <span class="sidemenu-label">零件<i class="sidemenu-arrdown"></i></span>
    </li>
    <li><a class="sidemenu-item" href="#grid">册格</a></li>
    <li><a class="sidemenu-item" href="#typography">标题段落</a></li>
    <li><a class="sidemenu-item" href="#btn">按钮</a></li>
    <li><a class="sidemenu-item" href="#table">表格</a></li>
    <li><a class="sidemenu-item" href="#form">表单</a></li>
  </ul>
  ...
</nav>

菜单超长

菜单内容项设置了超长显示省略号的样式,但需要给菜单容器设定一个宽度,自适应宽度可能不行

<nav class="sidemenu-box" style="width:220px;">


// 实例化
let menu=sidemenu('sidemenudemo1');
// 点击第0个菜单
menu.activeItem(0);
// 点击菜单后执行一个方法
sidemenu('sidemenudemo1','方法')

CachePage

缓存页,每显示一个页面时,缓存当前的页面

主题

管理系统

实现逻辑

使用document.createDocumentFragment这个方法,将当前页面移到 "片段"中,"片段"并不在document中,所以不会引起混乱.保持一个对它的引用,在显示曾经打开过的页面时, 再添加到document中即可.如此可实现不用iframe的方案.

选项卡HMTL

组件只包含选项卡部分,菜单和内容容器部分是自由定义的

换主题色,在选项卡html容器上加primary,success,danger

选项卡html内容由js生成,但是外层容器需要写出


  <div class="tabsbox primary" id="tabsbox1">
      // 向左按钮
      <a class="tabsbox-left"></a>

      // 导航区
      <nav class="tabsbox-navbox"><div class="tabsbox-nav"></div></nav> 

      // 向右按钮
      <a class="tabsbox-right"></a>

      // 功能按钮组
      <span class="tabsbox-menutitle">功能</span>
      <div class="tabsbox-menugroup">
          <span class="tabsbox-goto-active">定位当前页</span>
          <span class="tabsbox-close-all">关闭全部</span>
          <span class="tabsbox-close-other">关闭其它</span>
      </div>
  </div>
        

功能与特点

  • 点击左侧菜单时,缓存当前页面,新增选项卡,显示新页面.如果菜单已经打开过,则显示对应选项卡.
  • 导航按钮:每个选项卡对应一个缓存页面,当选项卡超出可视范围后,使用前进后退按钮滚动选项卡框
  • 当被点击的选项卡靠近选项卡框的两端,则调整该选项卡到中间位置
  • 关闭所有选项卡.关闭除活动选项卡外的.定位当前活动选项卡,当其不在可视范围内时.
  • 当前活动页面不缓存,页面由缓存到显示后,其对应缓存会删除
  • 缓存页面使用document.createDocumentFragment,加入其中的DOM会从当前文档中脱离.用以替代经典的iframe方法
  • 经过测试,一个填写过的表单页面在放入文档片段对象之后,再取出来时,其状态不变.

用途

该功能用于一个经典的场景,在管理系统中,左侧菜单,右侧显示页面.点击左侧菜单时,打开多个页面.

为了避免页面冲突,通常是使用iframe来解决的,这个方案用于替代iframe.

用法

在点击菜单时,调用cachepage.load方法,会将当前活动页面加入到缓存中,然后显示菜单对应页面到显示区

// 新建实例,tabsDom:选项卡容器DOM,contDom:显示内容的容器DOM
let cpg = cachepage(tabsDom, contDom);

// load方法,{pid:菜单唯一标识,title:选项卡标题,onload:载入时执行}, 点击左侧菜单时,调用此方法
// pid不能重复,每个菜单一个pid,可以在绑定菜单点击方法时,统一分配.
let cacheDoms = cpg.load(pid, title, onload);

// onload(loadType)方法
// 调用load()方法后,可以执行这个一个方法,loadType的值如下.当loadType==3时,可以做新页面载入操作
// loadType=1: 菜单是当前页面
// loadType=2: 菜单之前载入过
// loadType=3: 是新载入菜单,其对应的页面没有载入过,需要做载入新页面的操作

经典布局结构

左侧菜单,右侧分为2部分,上面是选项卡,下面是内容区

<div class="box">
  <div class="left"><ul>菜单区域</ul></div>
  <div class="right">
    <div class="top">选项卡区域</div>
    <div>内容区域</div>
  </div>
</div>

表单设计

表单一直是重点,应用系统中更是如此.表单填写是工作人员最不喜欢的工作之一,因为很没意思.看到一大堆要填写还可能填错的东西,马上失去耐心.

在设计上减少工作人员的反感程度,可以从表单外观样式,填写方便程度这两点来改进.

纸质风格

不同行业不同业务场景的表单不会完全一样,在样式上应该都尽量简洁明了.可以参考传统纸质风格的表单样子

传统纸质风格的单子,就是一个表格,里面有各种要填写的信息和标题.依照这种风格实现电子版本的话,工作人员

看起来就很熟悉,在计算机上操作填写时,感觉如同拿笔填写一样.不用改习惯,学习使用成本非常低.

编辑与查看

上面是新建表单时的情景,如果需要查看与修改表单,有的解决办法是做两个页面,一个查看,一个修改.这样做其实

多做了查看页面,因为编辑页面也有查看的功能.不仅多一个页面,还多一按钮.与简洁必须原则不相符合.

在查看页面点击编辑,就可以修改,这样查看页面变成了编辑页面.这种就好多了.

分段修改

一般在编辑表单时,只会编辑表单的某一项或者几项,并不会全部修改.而在保存时,却不会加以区别.总是保存

这个表单的所有字段,不管它有没修改过.这也是一个不好的地方.应该做到修改哪个保存哪个,如果修改的这个

字段也会引起其它字段的变化,那么其它字段也应做为修改字段,只不过它是自动修改的.

如何做到保存修改项,有的网站设计的是将表单的项分成小组,每个小组有一个编辑保存按钮.这样每次修改的就只

限于这个小组的几个字段,而不是整个表单.这种做法显然好多了.