# emotion
示例
<input class="form-control" name="icon" placeholder="点击文本框选择表情">
<script>
require(['hdjs','bootstrap'], function (hdjs) {
$(function () {
hdjs.emotion({
//点击的元素，可以为任何元素触发
btn: "[name='icon']",
//选中图标后填入的文本框
input: "[name='icon']",
//选择图标后执行的回调函数
callback: function (con, btn, input) {
console.log('选择表情后的执行的回调函数');
}
});
});
});
# 图表
更多个性化定制请参考组件依赖组件 http://www.chartjs.org
使用
<div style="width: 500px;height: 100px;">
<canvas id="myChart"></canvas>
</div>
<script>
require(['hdjs'], function (hdjs) {
let options = {
type: 'bar',
data: {
labels: ["hdjs", "hdphp", "hdcms", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2
}]
},
options: {
title: {
display: true,
text: '后盾人 人人做后盾'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
};
hdjs.chart('#myChart',options);
})
</script>
# 拾色器
更多个性化定制请参考组件依赖的 http://bgrins.github.io/spectrum/
使用
<input id="hd">
<script>
require(['hdjs'], function (hdjs) {
hdjs.colorpicker('#hd',{
color: "#ffd966",
//回调函数
change: function(color) {
console.log(color.toHexString());
}
});
})
</script>
# GET
###获取
获取url中的GET参数
<script>
require(['hdjs'], function (hdjs) {
console.log(hdjs.get.get('id'));
})
</script>
默认使用当前的链接，也可以通过设置第二个参数指定操作的链接
<script>
require(['hdjs'], function (hdjs) {
console.log(hdjs.get.get('id','http://hdphp.com?id=2118'));
})
</script>
# 设置或更改
设置或更改GET参数变量
<script>
require(['hdjs'], function (hdjs) {
console.log(hdjs.get.set('name','hdphp'));
})
</script>
默认使用当前的链接，也可以通过设置第三个参数指定操作的链接
<script>
require(['hdjs'], function (hdjs) {
console.log(hdjs.get.set('name','hdphp','http://hdphp.com?name=hdcms'));
})
</script>
# 二维码
使用
<div id="qrcode"></div>
<script>
require(['hdjs'], function (hdjs) {
hdjs.qrcode('#qrcode', 'http://www.houdunren.com');
})
</script>
# 剪贴板
剪贴板的功能是复制元素的内容到系统的剪贴板中。
# 复制表单值
通过设置 data-clipboard-target 属性用于设置复制的表单。
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" class="form-control">
<button class="btn btn-default" data-clipboard-target="#foo">复制</button>
<script>
require(['hdjs'], function (hdjs) {
var clipboard = hdjs.clipboard('.btn', {},function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
hdjs.notify('复制成功');
e.clearSelection();
})
})
</script>
# 复制元素属性
通过设置 data-clipboard-text 属性用于指定剪贴板中的内容。
<a href="javascript:;" class="copy" data-clipboard-text="我是复制的内容">点我复制</a>
<script>
require(['hdjs'], function (hdjs) {
hdjs.clipboard('.copy',{},function(e){
hdjs.notify('复制成功');
e.clearSelection();
})
});
</script>
# 动态设置
text 选项函数返回的内容记得到剪贴板中。
<div class="input-group mb-3">
<input type="text" class="form-control" name="content" value="后盾人 人人做后盾 houdunren.com" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary hdphp" type="button">复制指定表单内容</button>
</div>
</div>
<script>
require(['hdjs'], function (hdjs) {
hdjs.clipboard('.hdphp', {
//函数返回内容将保存在剪贴板中
text: function (trigger) {
return $("[name='content']").val();
}
}, function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
})
})
</script>
其他具体使用请阅读 参考文档
# 光标控制
更多个性化定制请参考组件依赖库 https://github.com/accursoft/caret
实例操作
<div class="form-group">
<textarea id="text" cols="30" rows="10" class="form-control">后盾人 人人做后盾</textarea>
</div>
<button id="bt1" class="btn btn-success btn-sm">插入到尾部</button>
<button id="bt2" class="btn btn-success btn-sm">插入到第二个字</button>
<button id="bt3" class="btn btn-success btn-sm">获取当前位置</button>
<script>
require(['hdjs','bootstrap'], function (hdjs) {
$("#bt1").click(function () {
//插入到文本框尾部
hdjs.caret('#text', -1)
});
$("#bt2").click(function () {
//插入到指定位置
hdjs.caret('#text', 2)
});
$("#bt3").click(function () {
//获取位置
hdjs.caret('#text', function (pos) {
alert('当前位置'+pos);
})
});
})
</script>
# 幻灯片
更多个性化定制请参考组件依赖库 http://www.swiper.com.cn/api/basic/2014/1213/16.html
使用
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://oss.hdcms.com/1502963276236c0417.jpg">
</div>
<div class="swiper-slide">
<img src="http://oss.hdcms.com/150183869614d9919.jpg">
</div>
<div class="swiper-slide">
<img src="http://www.houdunwang.com/attachment/69661487768411.jpg">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<script>
require(['hdjs'], function (hdjs) {
hdjs.swiper('.swiper-container', {
loop: true,
//自动轮换
autoplay: {
delay: 1000,
},
//如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true
},
//如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
})
</script>
# 图标库
参考文档: http://fontawesome.dashgame.com
# 基本使用
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
<script>
require(['hdjs',''])
</script>
# 选择图标
<script>
require(['hdjs'], function (hdjs) {
hdjs.font(function(icon){
alert(icon)
})
})
</script>
# md5
生成md5哈希字符串
使用
<script>
require(['hdjs','bootstrap'], function (hdjs) {
hdjs.md5('houdunren.com',function(hash){
console.log(hash);
});
});
</script>
# OSS
# 安装组件
请先安装 阿里云OSS 后台管理组件，并参考文档正确配置。
# 生成签名
使用签名可以安全的实现上传，并保护阿里云帐号信息。
echo \houdunwang\oss\Oss::sign();
# 前台
<div id="container">
<div class="row">
<h1 class="text-center"></h1>
<div class="input-group">
<input type="text" name="file" class="form-control" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="selectfiles">选择文件</button>
<button class="btn btn-outline-secondary" type="button" id="postfiles">开始上传</button>
</div>
</div>
</div>
</div>
<script>
require(['oss', 'bootstrap'], function (oss) {
oss.upload({
//容器
container: 'container',
//文件选择按钮
pick: 'selectfiles',
//开始上传按钮
upButton: 'postfiles',
//获取签名
serverUrl: '/test/php/ossSign.php?',
//上传目录
dir: 'houdunren/',
//local_name本地文件名 random_name随机文件名
name_type: 'random_name',
//允许上传类型
filters: {
//文件类型
mime_types: [
//只允许上传图片和zip,rar文件
{title: "Image files", extensions: "jpg,gif,png,bmp,jpeg"},
{title: "Zip files", extensions: "zip,rar"},
{title: "Video", extensions: "mp4"}
],
//最大只能上传10mb的文件
max_file_size: '10000mb',
//不允许选取重复文件
prevent_duplicates: true
},
event: {
//选择文件
select: function (file) {
$('h1').html('0%');
},
//开始上传
start: function (up, file) {
console.log('开始上传');
},
progress: function (up, file) {
//上传进度
$('h1').html('<span>' + file.percent + "%</span>");
},
success: function (up, file, info) {
$("[name='file']").val(file.name);
$("h1").remove();
},
error: function (up, file, info) {
alert(info.response);
}
}
});
})
</script>
# 视频播放器
<!--如果需要加速则需要添加class VideoSpeed-->
<video id="my-video" class="video-js vjs-big-play-centered VideoSpeed" controls preload="auto" width="1200" height="550" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<p class="vjs-no-js">
要查看此视频，请启用JavaScript，并考虑升级到web浏览器
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script>
require(['hdjs'], function (hdjs) {
hdjs.video('my-video',function(obj){
alert('播放器准备后执行');
//video.js对象
console.log(obj);
});
})
</script>
# 城市选择
<select name="address[province]" class="form-control"></select>
<select name="address[city]" class="form-control"></select>
<select name="address[area]" class="form-control"></select>
<script>
require(['hdjs'], function (hdjs) {
hdjs.city({
//省份标签
province: document.querySelector('[name="address[province]"]'),
//城市标签
city: document.querySelector('[name="address[city]"]'),
//地区标签
area: document.querySelector('[name="address[area]"]'),
}, {
//默认省
province: '福建省',
//默认市
city:'厦门市',
//默认地区
area:'海沧区',
});
})
</script>
# 预览图片
<script>
require(['hdjs','bootstrap'], function (hdjs) {
hdjs.preview('http://hdcms.oss-cn-hangzhou.aliyuncs.com/1-01.jpg',{
width:'50%'
})
})
</script>
# 元素固定
使用插件 https://github.com/garand/sticky 构建，细节设置请参考插件官网。
<script>
require(['jquerySticky'],function(){
$("#jqueryPin").sticky({topSpacing:0});
})
</script>
# 设备检测
用于检测桌面端、移动端。
<script>
require(['hdjs'],function(hdjs){
alert(hdjs.isMobile()?'移动端':'桌面端');
})
</script>
# 百度地图
# 选择地图坐标
<buttoon class="btn btn-success" onclick="showmap()">打开地图</buttoon>
<script>
//引入Bootstrap样式
require(['bootstrap'])
function showmap() {
require(['hdjs'], function (hdjs) {
hdjs.map('', function (res) {
//返回值是数组
console.log("地址:" + res.address + ";经度" + res.lng + ";纬度:" + res.lat);
});
});
}
</script>
# 设置地图坐标
<buttoon class="btn btn-success" onclick="coord()">显示上海市</buttoon>
<script>
//引入Bootstrap样式
require(['bootstrap'])
function coord() {
require(['hdjs'], function (hdjs) {
hdjs.map({lng:121.480237,lat:31.236305}, function (res) {
//返回值是数组
alert("地址:" + res.address + ";经度" + res.lng + ";纬度:" + res.lat);
});
});
}
</script>
# 验证码
发送短信或邮箱验证码，并拥有倒计时显示效果。
# 前台代码
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" name="username" value="230007112@qq.com" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="bt">发送验证码</button>
</div>
</div>
<script>
require(['hdjs','bootstrap'], function (hdjs) {
let option = {
//按钮
el: '#bt',
//后台链接
url: 'php/validCode.php',
//验证码等待发送时间
timeout: 10,
//表单，手机号或邮箱的INPUT表单
input: '[name="username"]'
};
hdjs.validCode(option);
})
</script>
# 后台代码
发送邮件可以使用阿里云的 https://packagist.org/packages/houdunwang/aliyunsms 组件或者https://packagist.org/packages/houdunwang/mail 组件进行后台发送。
返回数据
后台服务器返回的信息JSON数据格式如下:
<?php
//发送验证码可以使用 composer require houdunwang/aliyunsms 发送短信
//或 composer require houdunwang/mail 发送邮件
$json = json_encode(['code' => 0, 'message' => '发送成功']);
die($json);
| 参数 | 说明 |
|---|---|
| valid | 1 成功 0 失败 |
| message | 成功或失败的消息内容 |
# 页面滚动
$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单位。
# 使用
语法
hdjs.scrollTo(容器,滚动到的容器内的元素,滚动时间, 选项);
示例
<button onclick="scrollToBottom()" class="btn btn-success" id="bt">滚动到底部</button>
<script>
require(['bootstrap']);
function scrollToBottom() {
require(['hdjs'], function (hdjs) {
hdjs.scrollTo('body','#bottom',1000, {queue:true});
});
}
</script>
<div style="background: red;height: 2000px;"></div>
<h2 id="bottom">会滚动到这里</h2>
# 数据验证
更多个性化定制请参考组件依赖库 https://github.com/chriso/validator.js
<script>
require(['validator'], function (validator) {
console.log(validator.isEmail('2300071698@qq.com'));
});
</script>
# 加载中效果
<script>
require(['hdjs'], function (hdjs) {
hdjs.loading(function(obj){
setTimeout(function(){
//移动加载动画
obj.remove();
},3000)
});
})
</script>
# css加载动画
<div hd-loading="">
<span class="timer-loader">Loading…</span>
<script>
require(['hdjs'],function(hdjs){
hdjs.spinners();
})
</script>
</div>
# MarkdownIt
MarkdownIt 用于将 markdown 转为 html
使用方法
require(['MarkdownIt'], function (MarkdownIt) {
let md = new MarkdownIt();
let content = md.render('#这是markdown内容');
})
# Cookie
更多个性化定制请参考组件依赖组件 https://www.npmjs.com/package/js-cookie
###创建
<button class="btn btn-default" onclick="set()">设置</button>
<script>
function set() {
require(['hdjs'], function (hdjs) {
hdjs.cookie(function (Cookie) {
Cookie.set('hdjs', '这是使用 hdjs 创建的cookie');
})
})
}
</script>
# 删除
<button class="btn btn-default" onclick="remove()">删除</button>
<script>
function remove() {
require(['hdjs'], function (hdjs) {
hdjs.cookie(function (Cookie) {
Cookie.remove('hdjs');
})
})
}
</script>
# 获取所有
<button class="btn btn-default" onclick="alls()">获取所有</button>
<script>
function alls() {
require(['hdjs'], function (hdjs) {
hdjs.cookie(function (Cookie) {
console.log(Cookie.get());
})
})
}
</script>
其他使用方法请参考 插件文档
# moment
moment是高效的JavaScript 日期处理类库。
<script>
require(['moment'],function(moment){
})
</script>
# 代码高亮
# prismjs
组件使用 prismjs 构建
使用
<pre><code class="language-javascript line-numbers">
window.hdjs = {};
window.hdjs.base = '../';
window.hdjs.uploader = 'php/uploader.php?';
window.hdjs.filesLists = 'php/filesLists.php?';
</code></pre>
<script>
require(['prism'])
</script>
可用语言 插件基本支持所有开发语言，具体请查看 https://prismjs.com/#languages-list 。
使用方式是 language-xxxx 比如 language-css
# highlight
highlight 也是一个代码高亮插件，https://highlightjs.org
使用方法
<div id="markdown">
{!! $article['Markdown'] !!}
</div>
<script>
require(['hdjs', 'marked', 'highlight'], function (hdjs, marked) {
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
})
</script>
# Vue.js
框架支持require.js中直接调用vue.js 。
<script>
require(['vue'],function(Vue){
new Vue();
})
</script>
# axios
框架内部集成了 axios 异步通信组件，可实现方便的异步操作，参考文档
简单示例
require(['axios'],function(axios){
axios.post('/user', {firstName: 'Fred', lastName: 'Flintstone' })
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
})
# lodash
Lodash 是一个高效的前端工具库，详细使用请参考 (https://www.lodashjs.com/docs/4.17.5.html)[中文文档]
<script>
require(['lodash'],function(_){
...
})
</script>
# jQuery
框架内部已经打包了jQuery，不需要在页面中再次引入了，使用方式如下。
<script>
require(['jquery'],function($){
$('#el').html();
})
</script>
← 编辑器