# emotion

aa

示例

<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

aa

使用

<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/

aa

使用

<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>

# 二维码

img

使用

<div id="qrcode"></div>
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.qrcode('#qrcode', 'http://www.houdunren.com');
    })
</script>

# 剪贴板

剪贴板的功能是复制元素的内容到系统的剪贴板中。

依赖组件https://clipboardjs.com/

# 复制表单值

通过设置 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

aa

查看演示效果

使用

<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>

# 选择图标

aa

<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>

# 城市选择

aa

<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>

# 预览图片

aa

<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>

# 百度地图

# 选择地图坐标

aa

<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>

# 验证码

发送短信或邮箱验证码,并拥有倒计时显示效果。

# 前台代码

aa

<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>

# 加载中效果

aa

<script>
    require(['hdjs'], function (hdjs) {
        hdjs.loading(function(obj){
            setTimeout(function(){
                //移动加载动画
                obj.remove();
            },3000)
        });
    })
</script>

# css加载动画

aa

<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内容');
})

更多个性化定制请参考组件依赖组件 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 构建

使用

aa

<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>