Javascript交互

常用的Javascript交互效果,如页面工具、对话框、提示、表单验证等。

概述

Javascript组件是由一系列CSS及元件配合JS的效果,实现众多的交互效果。



窗口工具

设为首页,加入收藏

给元素加入.win-homepage或.win-favorite样式,实现设为首页及加入收藏功能。

<button class="button win-homepage icon-home"> 设为首页</button> <button class="button win-favorite icon-star"> 加入收藏</button>

前进后退及返回顶部

给元素加.win-forward,.win-back,.win-backtop样式,实现前进、后退、返回顶部效果。

<button class="button win-back icon-arrow-left"> 后退</button> <button class="button win-forward"> 前进 <span class="icon-arrow-right"></span> </button> <button class="button win-backtop"> 返回顶部 <span class="icon-arrow-up"></span> </button>

刷新,打印,关闭窗口

给元素添加.win-refresh,.win-print,.win-close样式,实现页面刷新,打印,关闭窗口等功能。

<button class="button win-refresh icon-refresh"> 刷新</button> <button class="button win-print icon-print"> 打印</button> <button class="button win-close icon-times-circle"> 关闭</button>


选项标签

标签样式

通过样式及js配合,实现内容标签功能。

拼图框架使用准备、基本的设置等信息。
重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。
常见的、可重复使用的样式组合,图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。
<div class="tab"> <div class="tab-head"> <strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span> <ul class="tab-nav"> <li class="active"><a href="#tab-start">...</a> </li> <li><a href="#tab-css">...</a> </li> <li><a href="#tab-units">...</a> </li> </ul> </div> <div class="tab-body"> <div class="tab-panel active" id="tab-start"> ...</div> <div class="tab-panel" id="tab-css"> ...</div> <div class="tab-panel" id="tab-units"> ...</div> </div> </div>
标题及更多 标题及更多,在使用中可根据需要使用或删除。

内容盒子

将tab-body添加tab-body-bordered,内容将包含在盒子里。
拼图框架使用准备、基本的设置等信息。
重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。
常见的、可重复使用的样式组合,图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。
<div class="tab" data-toggle="hover"> <div class="tab-head"> <strong>...</strong> <span class="tab-more"><a href="#">...</a></span> <ul class="tab-nav"> <li class="active"><a href="#tab-start2">...</a> </li> <li><a href="#tab-css2">...</a> </li> <li><a href="#tab-units2">...</a> </li> </ul> </div> <div class="tab-body tab-body-bordered"> <div class="tab-panel active" id="tab-start2"> ...</div> <div class="tab-panel" id="tab-css2"> ...</div> <div class="tab-panel" id="tab-units2"> ...</div> </div> </div>

导航右侧显示

给.tab-head添加.text-right样式,导航居右显示。
拼图框架使用准备、基本的设置等信息。
重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。
常见的、可重复使用的样式组合,图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。
<div class="tab"> <div class="tab-head text-right"> <strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span> <ul class="tab-nav"> <li class="active"><a href="#tab-start3">...</a> </li> <li><a href="#tab-css3">...</a> </li> <li><a href="#tab-units3">...</a> </li> </ul> </div> <div class="tab-body"> <div class="tab-panel active" id="tab-start3"> ...</div> <div class="tab-panel" id="tab-css3"> ...</div> <div class="tab-panel" id="tab-units3"> ...</div> </div> </div>

较小的标签

给.tab添加.tab-small样式,可以使用更小的标签效果。
拼图框架使用准备、基本的设置等信息。
重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。
常见的、可重复使用的样式组合,图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。
<div class="tab tab-small"> ...</div>

边框颜色

给.tab样式加上.border-(*)样式,可以改变边框颜色。

拼图框架使用准备、基本的设置等信息。
重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。
常见的、可重复使用的样式组合,图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。


拼图框架使用准备、基本的设置等信息。
重新定义常用的CSS,对文本、图像、按钮、背景、表格等样式重新设置。
常见的、可重复使用的样式组合,图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。
<div class="tab border-main"> ....</div> <div class="tab border-sub tab-small" data-toggle="hover"> <div class="tab-head text-right"> ...</div> <div class="tab-body tab-body-bordered"> ...</div> </div>

参数

选项标签只有一个参数供使用,即在.tab标签上,添加触发器data-toggle的效果,默认为点击。

参数 类型 默认值 可选值 说明
data-toggle 字符串 click click 鼠标点击时显示
hover 鼠标经过时显示
<div class="tab" data-toggle="hover"> ...</div>


对话框

基本样式

对话框的基本样式,包含标题,内容在底部。

对话框标题
对话框内容
<div class="dialog"> <div class="dialog-head"> <span class="dialog-close close rotate-hover"></span><strong>对话框标题</strong> </div> <div class="dialog-body"> 对话框内容</div> <div class="dialog-foot"> <button class="dialog-close button"> 取消</button> <button class="button bg-green"> 确认</button> </div> </div>

去掉头部或底部

对话框标题
对话框内容

对话框内容

对话框内容
<div class="dialog open"> <div class="dialog-head"> <span class="dialog-close close rotate-hover"></span><strong>对话框标题</strong> </div> <div class="dialog-body"> 对话框内容</div> </div> <div class="dialog open"> <div class="dialog-body"> 对话框内容</div> <div class="dialog-foot"> <button class="button button-small dialog-close"> 取消</button> <button class="button button-small bg-green"> 确认</button> </div> </div> <div class="dialog open"> <div class="dialog-body"> 对话框内容</div> </div>

点击弹出

点击按钮,弹出对话框实例。

对话框标题
对话框内容
<button class="button button-big bg-main dialogs" data-toggle="click" data-target="#mydialog" data-mask="1" data-width="50%"> 弹出对话框</button> <div id="mydialog"> <div class="dialog"> <div class="dialog-head"> <span class="close rotate-hover"></span><strong>对话框标题</strong> </div> <div class="dialog-body"> 对话框内容</div> <div class="dialog-foot"> <button class="button dialog-close"> 取消</button> <button class="button bg-green"> 确认</button> </div> </div> </div>

参数

对话框参数包含触发事件data-toggle,对话框宽度限制data-width,是否显示遮罩层data-mask,对象data-target和异步加载data-url组成。

参数 类型 默认值 可选值 说明
data-toggle 字符串 click click 鼠标点击时显示
hover 鼠标经过时显示
data-width 字符串 80% 对话框的宽度,带单位,可以使用px,%,em等。
data-mask 整数 1 是否显示遮罩层:(可选)默认为1,当为其他值是不显示。
data-target 字符串 获取显示元素的对象,可以是#id,也可以是.class
data-url 路径 显示对应地址的内容,如:/images/dialog.html


提示

基本案例

提示信息的基本案例效果。

示例

拼图 Pintuer:国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、 网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面,让前端开发像玩游戏一下快乐而轻松。

拼图前端框架在传统CSS框架的基本上,增加了HTML5、CSS3、JS等技术组合应用,应用于最新的浏览器技术,同时兼容较早的浏览器,新旧结合,承前启后,开发者只需把框架文件引入到项目中,就可以初现快速的共同开发,改变以往建立PC网站同时,再建立手机网站的局面,初站一站响应所有设备,大大提高了开发效率。

使用方法

给元素添加.tips样式,并配置相关参数,快速实现信息提示。

<button class="button tips" data-toggle="hover" data-place="left" title="提示信息"> 悬浮左方提示</button> <button class="button tips" data-toggle="click" data-place="top" title="提示信息"> 点击上方提示</button> <button class="button tips" data-toggle="hover" data-place="right" title="提示信息"> 悬浮右方提示</button> <button class="button tips" data-toggle="hover" data-place="bottom" data-image="/image/128.png"> 悬浮下方图片提示</button>

参数

信息提示包含了多个参数,包含触发、位置、样式、宽、标题、图片、内容、对象和异步加载地址等。

参数 类型 默认值 可选值 说明
title 字符串 提示信息的标题
content 字符串 提示信息的内容
data-toggle 字符串 hover hover 鼠标悬停时显示
click 鼠标点击时显示
show 直接显示
data-place 字符串 top left 显示在左边
top 显示在上方
right 显示在右侧
bottom 显示在下方
data-style 字符串 bg-(*)或border-(*) 框架内的背景及边框组合使用,如:bg-main border-main
data-width 字符串 自定义 提示信息的宽度,如:200px
data-image 路径 提示图片的路径,如:/images/128.png
data-target 字符串 显示对应元素的内容,如:#id或.class
data-url 路径 显示对应地址的内容,如:/images/tip.html


警告框

基本样式

提示:请按照要求填写内容。
<div class="alert"> <span class="close rotate-hover"></span><strong>提示:</strong>请按照要求填写内容。</div>

颜色

警告框分为红、黄、蓝、绿四种,样式分别为:alert-red、alert-yellow、alert-blue、alert-green

操作失败

请重新操作。


注意:请按照要求填写内容。

提示:请按照要求填写内容。

恭喜:操作成功。
<div class="alert alert-red"> <span class="close rotate-hover"></span><strong>操作失败</strong> <p> 请重新操作。</p> <button class="button bg"> 取消</button> <button class="button bg-red"> 确认</button> </div> <div class="alert alert-yellow"> <span class="close rotate-hover"></span><strong>注意:</strong>请按照要求填写内容。</div> <div class="alert alert-blue"> <span class="close rotate-hover"></span><strong>提示:</strong>请按照要求填写内容。</div> <div class="alert alert-green"> <span class="close rotate-hover"></span><strong>恭喜:</strong>操作成功。</div>


单选多选

单选

单选的radio效果。

单选





<div class="button-group radio"> <label class="button active"> <input name="pintuer" value="yes" checked="checked" type="radio">是 </label> <label class="button"> <input name="pintuer" value="no" type="radio">否 </label> </div> <div class="button-group radio"> <label class="button active"> <input name="pintuer" value="yes" checked="checked" type="radio"><span class="icon icon-check"></span> 是 </label> <label class="button"> <input name="pintuer" value="no" type="radio"><span class="icon icon-times"></span> 否 </label> </div> <div class="button-group radio"> <label class="button active"> <input name="pintuer" value="1" checked="checked" type="radio">起步 </label> <label class="button"> <input name="pintuer" value="2" type="radio">CSS </label> <label class="button"> <input name="pintuer" value="3" type="radio">元件 </label> <label class="button"> <input name="pintuer" value="4" type="radio">JS组件 </label> <label class="button"> <input name="pintuer" value="5" type="radio">模块 </label> </div>

多选

多选的checkbox。



<div class="button-group checkbox"> <label class="button active"> <input name="pintuer" value="1" type="checkbox"><span class="icon icon-check"></span> 同意条款 </label> </div> <div class="button-group border-main checkbox"> <label class="button active"> <input name="pintuer" value="1" type="checkbox" checked="checked">起步 </label> <label class="button"> <input name="pintuer" value="2" type="checkbox">CSS </label> <label class="button"> <input name="pintuer" value="3" type="checkbox">元件 </label> <label class="button"> <input name="pintuer" value="4" type="checkbox">JS组件 </label> <label class="button"> <input name="pintuer" value="5" type="checkbox">模块 </label> </div>


表单验证

基本样式

在表单组的基础上,使用验证方式。

<form method="post" class="form form-block"> <div class="form-group"> <div class="label"> <label for="username"> 账号</label> </div> <div class="field"> <input type="text" class="input" id="username" name="username" size="50" data-validate="required:必填" placeholder="手机/邮箱/账号" /> </div> </div> <div class="form-group"> <div class="label"> <label for="password"> 密码</label> </div> <div class="field"> <input type="password" class="input" id="password" name="password" size="50" data-validate="required:必填" placeholder="请输入密码" /> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>

验证结果状态

验证包含验证失败、通过验证两种状态,对应红和绿两种色彩提示。
示例

验证方法

文本框、文件域、单选框、复选框及下拉菜单等控制的验证方法。

单行及多行文本框

给文本框添加data-validate属性,属性值为相关的验证规则。
<form method="post"> <div class="form-group"> <div class="label"> <label for="username"> 姓名</label> </div> <div class="field"> <input type="text" class="input" id="username" name="username" size="30" data-validate="required:必填" placeholder="手机/邮箱/账号" /> </div> </div> <div class="form-group"> <div class="label"> <label for="detail"> 介绍</label> </div> <div class="field"> <textarea class="input" id="detail" name="detail" placeholder="请介绍一下自己" data-validate="required:必填"></textarea> </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form>

文件域验证

方法与文本框一样,文件域添加data-validate属性,并填写验证的规则。
<form> <div class="form-group"> <div class="label"> <label for="upfile"> 文件浏览</label> </div> <div class="field"> <a class="button input-file" href="javascript:void(0);">+ 请选择上传文件 <input size="100" data-validate="required:请选择文件,regexp#.+.(jpg|jpeg|png|gif)$:只能上传jpg|gif|png格式文件" type="file" /> </a> </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form>

单选框

单选框判断是否选择,对应的单选框,至少有一个添加:data-validate="radio:..."。
拼图

拼图
<form> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field label-block"> <label> <input name="pintuer" type="radio" data-validate="radio:请选择">起步 </label> ... </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form> <form> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field"> <div class="button-group radio"> <label class="button"> <input name="pintuer" value="1" type="radio" data-validate="radio:请选择">起步 </label> ... </div> </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form>

复选框

多个复选框时须为每个选项添加验证属性。
拼图


拼图
<form> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field label-block"> <label> <input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">起步 </label> ... </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form> <form> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field"> <div class="button-group checkbox"> <label class="button"> <input name="pintuer" value="1" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">起步 </label> ... </div> </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form>

下拉菜单

验证下拉菜单是否选值,只需要添加:data-validate="required:..."
<form> <div class="form-group"> <div class="label"> <label for="pintuer"> 拼图</label> </div> <div class="field"> <select class="input" name="pintuer" id="pintuer" data-validate="required:请选择拼图内容"> <option value="">请选择</option> ... </select> </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form>

验证信息显示方式

给form添加.form-tips样式,可改变验证信息的显示方式。

<form method="post" class="form-tips"> ...</form>

重设

给表单添加重设按钮,并加上.form-reset样式,可清除表单的验证状态。
<form method="post"> ... <button class="form-reset" type="reset"> 重设</button> </form>

叠加验证

对于输入的值,需要多重验证,才能确保数据正确,比如用户的年龄,验证是否填写的同时,还需要验证是否数字,同时还要限制在0-150之间;拼图前端框架提供强大的组合验证功能,多个验证用","号分开,让验证灵活而又准确。

<form method="post" class="form form-block"> <div class="form-group"> <div class="label"> <label for="age"> 年龄</label> </div> <div class="field"> <input type="text" class="input" id="age" name="age" size="50" data-validate="required:必填,number:年龄只能填写数字,compare#<150:年龄介于0-150之间" placeholder="请输入您的年龄" /> </div> </div> <div class="form-button"> <button class="button" type="submit"> 提交</button> </div> </form>

ajax请求前验证新增

对于使用ajax请求方式提交表单信息,在此之前需要验证,直接调用此方法。

<form method="post" onsubmit="return false;" id="ajaxForm"> <div class="form-group"> <div class="label"> <label for="age"> 年龄</label> </div> <div class="field"> <input type="text" class="input" id="age" name="age" size="50" data-validate="required:必填,number:年龄只能填写数字,compare#<150:年龄介于0-150之间" placeholder="请输入您的年龄" /> </div> </div> <div class="form-button"> <button class="button" type="button" id="btnAjaxSubmit"> 提交</button> </div> <script> $(function() { $("#btnAjaxSubmit").click(function() { $("#ajaxForm").ajaxSubmit(function() { alert('在没有成功验证前你是看不到我滴...'); }); }); }); </script> </form>

验证参数

拼图提供了多种预设参数及方法供使用,具体参数对应下表使用。

直接验证

使用方法为:data-validate="参数(required):错误提示(不为空)"
参数 说明
required 不为空
chinese 纯汉字
number 纯数字
integer 正负整数
plusinteger 正整数
double 正负小数
plusdouble 正小数
english 英文字符
username 英文字母开头的字母、下划线、数字
mobile 手机号码
phone 电话
tel 手机号码或者电话
email 电子邮箱
url 网址
ip IP地址
currency 货币
zip 邮编
qq QQ号
radio 单选框是否选择

对比验证

包含数值对比、长度对比,使用方法为:data-validate="参数(compare或length)#对比值(>10):错误提示(请输入大于10的数字)"。
类型 参数 运算符 描述 示例
数值对比 compare == 等于 compare#==10:等于10,length#==10:字符长度为10
!= 不等于 compare#!=10:不等于10,length#!=10:字符长度不为10
> 大于 compare#>10:数值须大于10,length#>10:字符长度大于10位
字符长度对比 length < 小于 compare# <10:数值须小于10,length#<10:字符长度小于10位
>= 大于等于 compare#>=10:数值须大于或等于10,length#>=10:字符长度大于或等于10位
<=< /td> 小于等于 compare# <=10:数值须小于或等于10,length#<=10:字符长度小于或等于10位

比较验证

类型 参数 使用方法 说明
正则表达式 regexp 参数(regexp)#正则表达式(.+.(jpg|gif)$):错误提示(图片格式为jpg,gif) 输入的值是否符合正则表达式的规则。
重复密码 repeat 参数(repeat)#比较对象(password):错误提示(两次输入的密码不一致) 当前密码与name="passwrod"的进行比较,看是否相同。
异步验证 ajax 参数(ajax)#验证地址(demo/getdata.html?username={value}):错误提示(用户已注册)
  • 验证地址须带参数,最后一个值为当前输入框的值;
  • 异步返回结果为{"getdata":"true"}时通过验证,其他则为不通过。


基本的轮播效果,通常用于广告图或横幅效果等。

<div class="banner"> <div class="carousel"> <div class="item"> ...</div> <div class="item"> ...</div> <div class="item"> ...</div> </div> </div>

在设置不同参数下的轮播效果示例。

<div class="banner" data-pointer="1" data-interval="6" data-item="2" data-small="3" data-middle="4" data-big="5" data-style="border-red"> <ul class="carousel"> <li class="item">...</li>... </ul> </div>

轮播参数包含显示分页、间隔时间,响应式显示数目等。

参数 类型 默认值 可选值 说明
data-pointer 布尔值 1 1 显示点式分页
0 不显示
data-style 字符串 border-(*) 点式分页的边框色,如border-main
data-interval 正整数 5 任意正整数 轮播间隔时间
data-item 正整数 1 任意正整数 (可选)一屏内显示的数量
data-small 正整数 任意正整数 (可选)小屏内显示的数量
data-middle 正整数 任意正整数 (可选)中屏内显示的数量
data-big 正整数 任意正整数 (可选)大屏内显示的数量
响应式设置 默认及移动设备的情况下,显示的数量使用data-item值,当小屏下使用则为data-small数值,中屏及大屏分别使用data-middle及data-big的数值,使得轮播显示可在不同的设备下响应显示。


置顶或置底

基本案例

当页面滚动时,元素超过窗口顶部(底部)时,会固定显示在顶部(底部)。

示例
别离开我,我要回去。

我先在底部呆着,到站了才回去。

使用方法

在需要置顶或置底的元素上添加.fixed样式,默认为置顶,当设置data-style属性值为fixed-bottom时,则为置底。

<div class="fixed"> ...</div> <div class="fixed" data-style="fixed-bottom" data-offset-fixed="10"> ...</div>

参数

置顶或置底参数包含置顶样式data-style和偏离值data-offset-fixed

参数 类型 默认值 可选值 说明
data-style 字符串 fixed-top fixed-top 元素置顶,如:data-style="fixed-top"
fixed-bottom 元素置底,如:data-style="fixed-bottom"
data-offset-fixed 整数 0 偏离的高底值,如data-offset-fixed="10",单位为px。


滚动监听

基本案例

当内容滚动时,导航条状态会对应改变。

示例


拼图介绍


国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面,让前端开发像玩游戏一样快乐而轻松。

拼图应用


拼图前端框架在传统CSS框架的基本上,增加了HTML5、CSS3、JS等技术组合应用,应用最新的浏览器技术,同时兼容较早的浏览器,新旧结合,承前启后,开发者只需把框架文件引入到项目中,就可以初现快速的共同开发,改变以往建立PC网站同时,再建立手机网站的局面,实现一站响应所有设备,大大提高了开发效率。

功能特色


移动优先、跨屏响应


拼图以移动设备为基点,优先适应于移动设备;从移动设备扩大到平板、桌面电脑等设备,实现跨屏响应,兼容桌面浏览器的同时,更适应了移动互联网的潮流。

组件丰富、海量插件


拼图前端框架重新定义了CSS基础、常用元件及JS组件,可快速构架前端界面,实现跨屏响应。同时兼容所有jQuery插件,在项目中可以灵活使用,让前端开发如虎添翼。

轻量高效、国产开源


拼图基于应用广泛jQuery插件,轻量高效;相对于国外的前端框架,拼图前端框架侧重于对中文的支持,符合国人的视觉及体验,实现到国内主流浏览器的支持,减少兼容性测试时间,提高开发效率。

使用方法

首先在监听状态元素上添加.spy样式;同时设置监听的对象属性data-target,当为空为窗口滚动;也可设置滚动的偏离值data-offset-spy,单位为px。

<ul class="nav nav-sub bg-main bg-inverse radius spy" data-target=".spy-content" data-offset-spy="10"> <li class="active"><a href="#spy1">...</a> </li> ... </ul> <div class="spy-content"> <h4 id="spy1"> ...</h4> ... </div>

参数

滚动监听包含监听对象(data-target)和垂直偏离(data-offset-spy)两个值。

参数 类型 默认值 可选值 说明
data-target 字符串 window 监听对象,如:data-target="#id"或data-target=".class"
data-offset-spy 整数 0 垂直偏离,如data-offset-spy="10",单位为px。


折叠

基本案例

基本案例

拼图前端框架

拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。

拼图前端框架

拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。

拼图前端框架

拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
<div class="collapse"> <div class="panel active"> <div class="panel-head"> <h4> ...</h4> </div> <div class="panel-body"> ...</div> </div> <div class="panel"> <div class="panel-head"> <h4> ...</h4> </div> <div class="panel-body"> ...</div> </div> <div class="panel"> <div class="panel-head"> <h4> ...</h4> </div> <div class="panel-body"> ...</div> </div> </div>

使用方法

给元素添加.collapse样式,并给当前显示的子类,添加.actvie样式。

反复折叠案例

反复折叠案例新增

拼图前端框架

拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。

拼图前端框架

拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。

拼图前端框架

拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
<div class="collapse-toggle"> <div class="panel"> <div class="panel-head"> <h4> ...</h4> </div> <div class="panel-body"> ...</div> </div> <div class="panel"> <div class="panel-head"> <h4> ...</h4> </div> <div class="panel-body"> ...</div> </div> <div class="panel"> <div class="panel-head"> <h4> ...</h4> </div> <div class="panel-body"> ...</div> </div> </div>

使用方法

给元素添加.collapse-toggle样式,并给当前显示的子类,添加.active样式。