.ui-sortable .panel-header{ cursor:move}
Hi,H-ui v3.1Hi,H-ui!
开始前端之旅!
邮箱:
用户名:
手机:
密码:
密码验证:
单选框:
男
女
保密
出生日期:
爱好:
上网
摄影
数量:
附件:
所在城市:
选择省份
北京
上海
广州
选择城市
北京
上海
广州
网址:
备注:
(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)];
描述相符:
右边显示
上边显示
下边显示
左边显示
左侧的 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瀑布流插件|
|
Copyright ©2013-2017 H-ui.net All Rights Reserved.
未经允许,禁止转载、抄袭、镜像
用心做站,做不一样的站
//弹窗
function modaldemo(){
$("#modal-demo").modal("show");
}
//消息框
function modalalertdemo(){
$.Huimodalalert('我是消息框,2秒后我自动滚蛋!',2000);
}
$(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({
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');
});
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史