欢迎使用响应式前端框架
QQ:522588122

概述

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-content添加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字符串clickclick鼠标点击时显示
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字符串clickclick鼠标点击时显示
hover鼠标经过时显示
data-width字符串80%无对话框的宽度，带单位，可以使用px,%,em等。
data-mask整数1无是否显示遮罩层：(可选)默认为1，当为其他值是不显示。
data-target字符串无无获取显示元素的对象，可以是#id，也可以是.class
data-url路径无无显示对应地址的内容，如：http://www.p.com/images/dialog.html


提示

基本案例

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

示例

推客前端框架：国内优秀的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字符串hoverhover鼠标悬停时显示
click鼠标点击时显示
show直接显示
data-place字符串topleft显示在左边
top显示在上方
right显示在右侧
bottom显示在下方
data-style字符串无bg-(*)或border-(*)框架内的背景及边框组合使用，如：bg-main border-main
data-width字符串无自定义提示信息的宽度，如：200px
data-image路径无无提示图片的路径，如：http://www.p.comlogo.png
data-target字符串无无显示对应元素的内容，如：#id或.class
data-url路径无无显示对应地址的内容，如：http://www.p.com/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="p" value="yes" checked="checked" type="radio">是</label> <label class="button"><input name="p" value="no" type="radio">否</label> </div> <div class="button-group radio"> <label class="button active"><input name="p" value="yes" checked="checked" type="radio"><span class="icon icon-check"></span> 是</label> <label class="button"><input name="p" value="no" type="radio"><span class="icon icon-times"></span> 否</label> </div> <div class="button-group radio"> <label class="button active"><input name="p" value="1" checked="checked" type="radio">起步</label> <label class="button"><input name="p" value="2" type="radio">CSS</label> <label class="button"><input name="p" value="3" type="radio">元件</label> <label class="button"><input name="p" value="4" type="radio">JS组件</label> <label class="button"><input name="p" value="5" type="radio">模块</label> </div>

多选

多选的checkbox。



<div class="button-group checkbox"> <label class="button active"><input name="p" 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="p" value="1" type="checkbox" checked="checked">起步</label> <label class="button"><input name="p" value="2" type="checkbox">CSS</label> <label class="button"><input name="p" value="3" type="checkbox">元件</label> <label class="button"><input name="p" value="4" type="checkbox">JS组件</label> <label class="button"><input name="p" 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="p" 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="p" 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="p" 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="p" 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="p">推客</label></div> <div class="field"> <select class="input" name="p" id="p" 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>

验证参数

推客提供了多种预设参数及方法供使用，具体参数对应下表使用。

直接验证

使用方法为：data-validate="参数(required):错误提示(不为空)"
参数说明
required不为空
chinese纯汉字
number纯数字
integer正负整数
plusinteger正整数
double正负小数
plusdouble正小数
english英文字符
username英文字母开头的字母、下划线、数字
mobile手机号码
phone电话
tel手机号码或者电话
email电子邮箱
url网址
ipIP地址
currency货币
zip邮编
qqQQ号
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位
<= 小于等于 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布尔值11显示点式分页
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-topfixed-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样式。



版权所有 © domsn.com