jQuery(实例)

1.开关灯效果




    
    Title
    


    
    
class="c1 hide">假装现在有效果了
View Code

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">

主机名:

IP地址:

端口号:

View Code

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">内容三
View Code



    
    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">在线
View Code

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">
View Code

6.点赞




    
    Title
    


    
class="container">
class="item">
class="container">
class="item">
class="container">
class="item">
class="container">
class="item">
View Code

7.随鼠标移动的框




    
    


    
View Code

8.表单验证




    
    Title
    


    
View Code

9.轮播图




    
    Title
    


     
class="out">
    class="img">
    class="num">
class="left btn"><
class="right btn">>
View Code

10.返回顶部




    
    Title
    


    
class="divH">
class="divT hide" onclick="ReturnTop();">返回顶部
View Code

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
View Code

12.显示和隐藏




    
    Title


    
    
    
    

    

hello

View Code

13.滑动和隐藏




    
    Title
    



    
出现
隐藏
toggle
helloworld
View Code

14.添加与删除




    
    Title


class="outer">
class="section">
class="icons" style="display: inline-block">
class="inputs" style="display: inline-block">
View Code

15.商品放大镜




    
    
    
    购物商城

    



    
class="outer">
class="small-box">
class="mark">
class="float-box" >
class="big-box">
View Code

16.商品分类




    
    Title
    


    
class="pg-header">
class="header-menu">
class="container narrow hide">
View Code

 

你可能感兴趣的:(jQuery(实例))