ui index.html,h-ui/index.html at master · jackying/h-ui · GitHub

最新推荐文章于 2023-12-19 10:42:48 发布

君子心理

最新推荐文章于 2023-12-19 10:42:48 发布

阅读量172

点赞数

文章标签： ui index.html

本文详细介绍了H-ui前端框架的使用，包括其可拖动排序的面板、表单元素、按钮样式、标签、提示信息、进度条、弹出窗口等功能，并提供了相关插件的版本和用法。H-ui是一个轻量级、免费且兼容性好的前端框架，适用于中国网站的快速开发。

摘要由CSDN通过智能技术生成

.ui-sortable .panel-header{ cursor:move}

Hi，H-ui v3.1



首页

组件

当前页面

Hi,H-ui!

开始前端之旅！

表单

邮箱：

用户名：

手机：

密码：

密码验证：

单选框：

男

女

保密

出生日期：

爱好：

上网

摄影

数量：

附件：

 浏览文件

所在城市：

选择省份

北京

上海

广州

选择城市

北京

上海

广州

网址：

备注：

按钮

buttoninputadisabled状态空心

默认默认主要主要次要次要成功成功警告警告危险危险链接链接

按钮大小

按钮class=""

size-XL size-L size-M 缺省值 size-S size-MINI

按钮组

左边按钮

中间按钮

右边按钮



















图片

《仙剑奇侠传》赵灵儿

(20张)

遮罩条

表格

表头表头表头

类别表格内容表格内容类别表格内容表格内容类别表格内容表格内容

选项卡

选项卡一

选项卡二

自适应宽度

内容一

内容二

内容三

便签与标号

class=""标签标号描述

label label-default radius 默认 1默认 label label-primary radius 主要 2主要 label label-secondary radius 次要 3次要 label label-success radius 成功 4成功 label label-warning radius 警告 5警告 label label-danger radius 危险 6危险

警告

成功状态提示

危险状态提示

错误状态提示

信息状态提示

进度条

弹出窗口

弹出对话框

消息框，2秒钟自动消失

分享到

window._bd_share_config={

"common":{

"bdSnsKey":{},

"bdText":"H-ui前端框架，架起设计与后端的桥梁轻量级前端框架，简单免费，兼容性好，服务中国网站。",

'bdDes':'国内免费轻量级前端框架',

'bdPopTitle':'H-ui前端框架',

"bdMini":"2",

"bdMiniList":false,

"bdPic":"http://static.h-ui.net/h-ui/images/logo-big.jpeg",

"bdStyle":"0",

"bdSize":"24"

"selectShare":{

"bdContainerClass":null,

"bdSelectMiniList":["weixin","qzone","sqq","tsina","tqq","douban"]

}

};

with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

标签

星星评价

描述相符：

tooltip效果

右边显示

上边显示

下边显示

左边显示

popover效果

左侧的 Popover

顶部的 Popover

底部的 Popover

右侧的 Popover

H-ui官方插件

需要升级到 H-ui.js v3.1 版本

名称版本号描述

jQuery.Huihover.js2.0hover jQuery.Huifocusblur.js2.0得到失去焦点 jQuery.Huifold.js2.0折叠 jQuery.Huipreview.js2.0图片预览 jQuery.Huispinner.js2.0微调器 jQuery.Huitab.js2.0选项卡 jQuery.Huitags.js2.0标签 jQuery.Huitextarealength.js2.0字数限制 jQuery.HuitogglePassword.js2.0隐藏显示密码 jQuery.Huitotop.js2.0返回顶部

H-ui.js v3.0 整合的第三方插件(引入了H-ui.js v3.0版本，无需再单独重复引用以下插件)

感谢以下插件！优秀的插件就像金子一样，处处发光

名称版本号描述

jQuery.cookie.js1.4.1jQuery cookie插件。 jQuery.form.js3.51.0jquey表单插件。 jQuery.lazyload.js1.9.3图片的延迟加载插件。jQuery.responsive-nav.js1.0.39响应式导航插件。jQuery.placeholder.js1.0IE浏览器支持placeholder。jQuery.emailsuggest.js1.0邮箱域名自动提示填充插件。jQuery.format.js1.0格式化字符串。jQuery.iCheck.js1.0单选框，复选框美化插件。jQuery.onePageNav.js1.0单页面滚动导航。jQuery.stickUp.js1.0网页滚动，元素固定置顶插件。jQuery.ColorPicker.js1.0颜色控件。Bootstrap.modal.js3.3.0Bootstrap模态窗口，弹窗插件。Bootstrap.dropdown.js3.3.0Bootstrap下拉框插件。Bootstrap.transition.js3.3.0Bootstrap过渡效果(Transition)插件。Bootstrap.tooltip.js3.3.0Bootstrap工具提示插件。Bootstrap.popover.js3.3.0Bootstrap弹出框插件。Bootstrap.alert.js3.3.0Bootstrap警告框插件。Bootstrap.slider.js1.0.1Bootstrap滑动条插件。Bootstrap.datetimepicker.js1.0Bootstrap日期插件。Bootstrap.Switch.js1.3Bootstrap 开关控件。

lib中的第三方插件

非必选插件，请有选择性的使用，用不上的可自行删除，减少框架体积

名称版本号描述

jQuery.js1.9.1jQuery库，可自行下载新版本，替换现有版本。Hui-iconfont1.0.8阿里图标字体库(H-ui定制)jquery.SuperSlide2.1.1幻灯片组件Validform5.3.2表单验证插件jquery.validation1.14.0表单验证插件My97DatePicker4.8日期插件datatables1.10.0表格插件nprogress0.2.0进度条插件layer2.4layer弹出层插件laypage1.2laypage 翻页插件html5shiv.js<3.7.0/td>html5插件，让低版本IE支持html5元素DD_belatedPNG_0.0.8a-min.js0.0.8a解决IE6png透明swfobject.js2.2Flash插件waterfall.min0.1.6瀑布流插件

未经允许，禁止转载、抄袭、镜像

用心做站，做不一样的站

//弹窗

function modaldemo(){

$("#modal-demo").modal("show");

}

//消息框

function modalalertdemo(){

$("body").Huimodalalert({

content: '我是消息框，2秒后我自动滚蛋！',

speed: 2000,

}, function () {

alert("我已滚蛋");

});

}

$(function(){

$(".input-text,.textarea").Huifocusblur();

//幻灯片

jQuery("#slider-3 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:3000,pnLoop:false,titOnClassName:"active"});

$(".panel").Huifold({

titCell:'.panel-header',

mainCell:'.panel-body',

type:1,

trigger:'click',

className:"selected",

speed:"first",

});

//邮箱提示

$("#email").emailsuggest();

//checkbox 美化

$('.skin-minimal input').iCheck({

checkboxClass: 'icheckbox-blue',

radioClass: 'iradio-blue',

increaseArea: '20%'

});

//日期插件

$("#datetimepicker").datetimepicker({

language: 'zh-cn',

format: 'yyyy-mm-dd',

minView: "month",

todayBtn: 1,

autoclose: 1,

endDate : new Date()

}).on('hide',function(e) {

//此处可以触发日期校验。

});

/*+1 -1效果*/

$("#spinner-demo").Huispinner({

value:1,

minValue:1,

maxValue:99,

dis:1

});

$(".textarea").Huitextarealength({

minlength:10,

maxlength:200.

});

$("#demoform").validate({

rules:{

email:{

required:true,

email:true,

username:{

required:true,

minlength:4,

maxlength:16

telephone:{

required:true,

isMobile:true,

password:{

required:true,

isPwd:true,

password2:{

required:true,

equalTo: "#password"

sex:{

required:true,

datetimepicker:{

required:true,

checkbox2:{

required:true,

city:{

required:true,

website:{

required:true,

url:true,

beizhu:{

maxlength:500,

}

onkeyup:false,

focusCleanup:true,

success:"valid",

submitHandler:function(form){

$("#modal-shenqing-success").modal("show");

$(form).ajaxSubmit();

}

});

//选项卡

$("#HuiTab-demo1").Huitab({

index:0

});

$("#Huitags-demo1").Huitags();

//返回顶部

$.Huitotop();

//hover效果

$('.maskWraper').Huihover();

//星级评价

$("#star-1").raty({

hints: ['1','2', '3', '4', '5'],//自定义分数

starOff: 'iconpic-star-S-default.png',//默认灰色星星

starOn: 'iconpic-star-S.png',//黄色星星

path: 'static/h-ui/images/star',//可以是相对路径

number: 5,//星星数量，要和hints数组对应

showHalf: true,

targetKeep : true,

click: function (score, evt) {//点击事件

//第一种方式：直接取值

$("#result-1").html('你的评分是'+score+'分');

}

});

$( ".ui-sortable" ).sortable({

//connectWith: ".panel",

items:".panel",

handle: ".panel-header",

//delay: 300, //时间延迟

//distance: 15, //距离延迟

placeholder: "ui-state-highlight", //占位符样式

update: function(event, ui){

}

}).disableSelection();

var _bodyHeight = $(window).height();

var _doch = $(document).height();

$(".containBox").height(_bodyHeight);

/*左右滑动菜单*/

$(".JS-nav-toggle").click(function() {

$("body").addClass('sideBox-open');

$(".containBox-bg").height(_bodyHeight).show();

});

$(".containBox-bg").click(function() {

$(this).hide();

$("body").removeClass('sideBox-open');

});

君子心理

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ui index.html,h-ui/index.html at master · jackying/h-ui · GitHub

.ui-sortable .panel-header{ cursor:move}Hi，H-ui v3.1登录/注册技术检索关于我们联系我们隐私保护免责声明支付方式H-ui前端框架H-ui简单 · 免费 · 适合中国网站首页核心脚本工具 Bug兼容性汇总web安全色Hui-iconfontweb工具箱JS/HTML格式化工具HTML/JS转换工具CSS代码格式化工具字母大小写转换工具繁体字、...
复制链接

扫一扫

ui index.html,h-ui/index.html at master · jackying/h-ui · GitHub

Hi,H-ui!

按钮大小

按钮组

对话框标题