jQuery(实例)
1.开关灯效果
Title
class="c1 hide">假装现在有效果了
2.模态对话框
Title
主机名
IP
端口
操作
c1.com
1.1.1.1
8888
Edit
c2.com
1.1.1.1
8888
Edit
c3.com
1.1.1.1
8888
Edit
.com
1.1.1.1
8888
Edit
class="shade hide">
class="modal hide">
3.点击菜单显示对应的内容
Title
class="menu">
class="menu-item active" a="1">菜单一
class="menu-item" a="2">菜单二
class="menu-item" a="3">菜单三
class="content">
内容一
class="hide" b="2">内容二
class="hide" b="3">内容三
Title
class="menu">
class="menu-item active" a="1">菜单一
class="menu-item" a="2">菜单二
class="menu-item" a="3">菜单三
class="content">
内容一
class="hide" b="2">内容二
class="hide" b="3">内容三
索引菜单栏.html
通过索引实现菜单更方便
4.编辑功能
| 选择 | 主机名 | 端口 | 状态 |
|---|---|---|---|
| v1 | v11 | global-key="STATUS">在线 | |
| v1 | v11 | global-key="STATUS">下线 | |
| v1 | v11 | global-key="STATUS">在线 |
5.模态对话框添加删除功能
Title
添加
| 1.1.1.11 | 80 | 80 | class="edit">编辑 | class="del">删除 |
| 1.1.1.12 | 80 | 80 | class="edit">编辑 | class="del">删除 |
| 1.1.1.13 | 80 | 80 | class="edit">编辑 | class="del">删除 |
| 1.1.1.14 | 80 | 80 | class="edit">编辑 | class="del">删除 |
class="modal hide">
class="shadow hide">
6.点赞
Title
class="container">
class="item">
赞
class="container">
class="item">
赞
class="container">
class="item">
赞
class="container">
class="item">
赞
7.随鼠标移动的框
8.表单验证
Title
9.轮播图
Title
class="out">
class="img">
class="num">
class="left btn"><
class="right btn">>
10.返回顶部
Title
class="divH">
class="divT hide" onclick="ReturnTop();">返回顶部
11.左侧菜单
Title
class="outer">
class="menu">
class="item">
class="title" onclick="Show(this);">菜单一
class="con">
111
111
111
class="item">
class="title" onclick="Show(this);">菜单二
class="con hide">
222
222
222
class="item">
class="title" onclick="Show(this);">菜单三
class="con hide">
333
333
333
12.显示和隐藏
Title
hello
13.滑动和隐藏
Title
出现
隐藏
toggle
helloworld
14.添加与删除
Title
15.商品放大镜
购物商城
class="outer">
class="small-box">
class="mark">
class="float-box" >
class="big-box">
16.商品分类
Title
class="pg-header">
class="header-nav">
class="container narrow bg">
class="nav-allgoods left">
class="menuEvent">
class="catName">全部商品分类>
class="arrow" style="display: inline-block;vertical-align: top;">
class="header-menu">
class="container narrow hide">