一、遇到的問題及解決方案(心得)
1.讓select下拉列表項目中的文字居中
~~~
.layui-form-select dl dd{
text-align: center;
}
~~~
2.讓表單label標簽的寬度自動取其自身寬度
~~~
.layui-form-pane .layui-form-label {
width: auto;
}
~~~
3.數據表格行背景色設置
數據表格中有開啟隔行變色的效果,設置隔行變色的背景如下:
~~~
.layui-table[lay-even] tr:nth-child(even){
background-color: #fafafa;
}
~~~
設置鼠標懸浮的行背景色:
~~~
.layui-table tbody tr:hover,.layui-table-hover{
background-color: #e4efff!important;
}
~~~
設置鼠標點擊(或選擇)某行后的背景色:
~~~
.layui-table-click{
background-color:#f2f2f2!important;
}
~~~
4.讓彈出層信息框寬度自動取其自身寬度
~~~
.layui-layer-msg{
min-width: auto!important;
}
~~~
5.讓彈出層按鈕分散居中對齊,并讓其中表單元素寬度自動調整
這個稍稍有些復雜,直接上代碼
CSS:
~~~
.layui-form-pane .layui-form-label {
width: auto;
}
.layui-form-radio{
padding-right: 0;
margin-right:0;
}
.layui-form-select dl dd{
text-align: center;
}
.layui-form-pane .layui-input-inline, .layui-form-pane .layui-inline,.layui-form-pane .layui-form-mid {
margin-right: 0;
}
.layui-form-item .layui-input-block{
float:left;
margin-left: 0!important;
}
~~~
HTML/JS
~~~
<form class="layui-form layui-form-pane" id="layerform" style="display: none;padding:5px">
<input type="hidden" name="id">
<div class="layui-form-item" widthoffset="15">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline col12">
<input type="text" name="name" autocomplete="off" placeholder="請輸入姓名" class="layui-input" lay-verify="required" lay-verType="tips">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年齡</label>
<div class="layui-input-inline" width="45">
<input type="text" name="age" autocomplete="off" class="layui-input" lay-verify="positiveInteger" lay-verType="tips">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性別</label>
<div class="layui-input-inline" width="70">
<select name="sex">
<option value="-1">保密</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否飲酒</label>
<div class="layui-input-inline" width="132">
<input type="radio" name="drink" value="1" title="是">
<input type="radio" name="drink" value="0" title="否" checked>
</div>
</div>
</div>
<div class="layui-form-item" widthoffset="15">
<div class="layui-inline">
<label class="layui-form-label">身高(cm)</label>
<div class="layui-input-inline" width="45">
<input type="text" name="height" autocomplete="off" class="layui-input" lay-verify="positiveInteger" lay-verType="tips">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">體重(kg)</label>
<div class="layui-input-inline" width="45">
<input type="text" name="weight" autocomplete="off" class="layui-input" lay-verify="positiveInteger" lay-verType="tips">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">電話</label>
<div class="layui-input-inline col12">
<input type="text" name="telphone" autocomplete="off" placeholder="手機或電話" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否吸煙</label>
<div class="layui-input-inline" width="132">
<input type="radio" name="smoke" value="1" title="是">
<input type="radio" name="smoke" value="0" title="否" checked>
</div>
</div>
</div>
<div class="layui-form-item" widthoffset="10">
<div class="layui-inline">
<label class="layui-form-label">微信</label>
<div class="layui-input-inline col4">
<input type="text" name="wechat" autocomplete="off" placeholder="請輸入微信" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">QQ</label>
<div class="layui-input-inline col4">
<input type="text" name="qq" autocomplete="off" placeholder="請輸入QQ" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">電子郵箱</label>
<div class="layui-input-inline col4">
<input type="text" name="email" autocomplete="off" placeholder="請輸入Email" class="layui-input" lay-verify="email" lay-verType="tips">
</div>
</div>
</div>
<div class="layui-form-item" widthoffset="4">
<label class="layui-form-label">地址</label>
<div class="layui-input-block col12">
<input type="text" name="address" autocomplete="off" placeholder="請輸入地址" class="layui-input">
</div>
</div>
<div class="layui-form-item" widthoffset="4">
<label class="layui-form-label">備注</label>
<div class="layui-input-block col12">
<input type="text" name="comment" autocomplete="off" class="layui-input">
</div>
</div>
<!--<div class="layui-form-item btns">
<div class="layui-input-block">
<button class="layui-btn layui-btn-radius" lay-submit lay-filter="layerForm">確定</button>
<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
</div>
</div>-->
</form>
<script>
//按鈕分散對齊
function locateBtns(layero, $) {
var layerBtns = layero.find(".layui-layer-btn a");
var btns = layero.find(".btns .layui-btn");
var sumWidth = 0;
layui.each(layerBtns, function (i, e) {
sumWidth += $(e).outerWidth();
});
var gap = (layero.width() - sumWidth) / (layerBtns.length + 1);
layui.each(layerBtns, function (i, e) {
$(e).css({
position: "relative",
left: gap * (i + 1)
});
});
sumWidth = 0;
layui.each(btns, function (i, e) {
sumWidth += $(e).outerWidth();
});
var pLeft = parseInt(layero.find(".layui-layer-wrap").css("padding-left"));
var pRight = parseInt(layero.find(".layui-layer-wrap").css("padding-right"));
gap = (layero.width() - pLeft - pRight - sumWidth) / (btns.length + 1);
layui.each(btns, function (i, e) {
$(e).css({
position: "relative",
left: gap * (i + 1)
});
});
}
//表單元素寬度自適應
function resizeForm(layero, $) {
var items=layero.find(".layui-form-item");
layui.each(items,function (i,e) {
var widthoffset=$(e).attr("widthoffset");
var widthSum=0;
layui.each($(e).find(".layui-form-label"),function (i,e) {
widthSum+=$(e).outerWidth(true);
});
layui.each($(e).find(".layui-input-inline[width]"),function (i,e) {
var jdom=$(e);
jdom.width(jdom.attr("width"));
widthSum+=jdom.outerWidth(true);
});
var totalWidth=$(e).width()-widthSum;
if(widthoffset){
totalWidth-=widthoffset;
}
for (var i = 0; i < 12; i++) {
var cells=$(e).find(".col"+(i+1));
cells.width(totalWidth*(i+1)/12);
}
});
locateBtns(layero, $);
}
//入口函數,綁定事件并調用彈出層
function layerForm(layer,jquery,options){
var resizing=options.resizing;
var full=options.full;
var restore=options.restore;
var success=options.success;
var $=jquery;
options.btnAlign="l";
options.resizing=function(layero){
resizeForm(layero, $);
resizing && resizing(layero);
}
options.full=function(layero){
resizeForm(layero, $);
full && full(layero);
}
options.restore=function(layero){
resizeForm(layero, $);
restore && restore(layero);
}
options.success=function(layero, index){
resizeForm(layero, $);
success && success(layero, index);
}
return layer.open(options);
}
//彈出層調用
var index=layerForm(layer,$,{
title:"查看",
content:$("#layerform"),
type:1,
area: "710px",
maxmin: true,
btn:['確定','取消']
});
</script>
~~~
6.讓加載層文字居中,寬度自適應不會換行
~~~
.layui-layer-loading .layui-layer-content{
padding-top: 40px!important;
width: auto!important;
height: auto!important;
background-position-x: 50%!important;
color:#FF5722;
}
~~~
7.修復數據表格初始化時不會顯示加載提示BUG
版本layui-v2.2.5
layui table首次加載沒有顯示loading,通過修改源碼可以實現
方法:在layui.all.js文件中的下面位置添加js代碼
~~~
if(n.url){i=i||a.loading();}
~~~
8.表單增強插件,主要使用表單自動填充功能
首先這里須要修改幾行代碼,否則無法在同一個頁面使用該插件同時操作多個表單(多個EnhanceForm對象)!
代碼中原有前10行內容如下:
~~~
layui.define(['jquery', 'form'],
function(exports) {
var $ = layui.jquery,
form = layui.form,
formObj,
hint = layui.hint();
var EnhanceForm = function(options) {
this.options = options;
formObj = $(options.elem);
};
~~~
將其替換為如下內容:
~~~
layui.define(['jquery', 'form'],
function(exports) {
var $ = layui.jquery,
form = layui.form,
hint = layui.hint();
var EnhanceForm = function(options) {
this.options = options;
this.formObj = $(options.elem);
};
~~~
并且將后續代碼中出現的所有formObj變量改為this.formObj
同時我在其基礎上添加了幾個功能:
~~~
//將表單轉化為json對象
EnhanceForm.prototype.serializeJson = function() {
var serializeObj={};
var array=this.formObj.serializeArray();
var str=this.formObj.serialize();
layui.each(array,function(i,e){
if(serializeObj[e.name]){
if($.isArray(serializeObj[e.name])){
serializeObj[e.name].push(e.value);
}else{
serializeObj[e.name]=[serializeObj[e.name],e.value];
}
}else{
serializeObj[e.name]=e.value;
}
});
return serializeObj;
};
//禁用所有表單元素
EnhanceForm.prototype.disableAll = function() {
var eles=this.formObj.find("input,select,textarea");
eles.attr("disabled","disabled");
form.render();
};
//啟用所有表單元素
EnhanceForm.prototype.enableAll = function() {
var eles=this.formObj.find("input,select,textarea");
eles.removeAttr("disabled");
form.render();
};
~~~
9.form表單提交事件bug
表單綁定提交事件如下:
~~~
form.on('submit(filterName)', function(data){
});
~~~
其中參數data.field包含當前表單容器的全部表單字段,名值對形式:{name: value}
但是如果表單中含有checkbox則會出現bug,如:
表單中含有如下3個checkbox:
~~~
<input type="checkbox" name="interest" title="寫作" value="writing">
<input type="checkbox" name="interest" title="音樂" value="music">
<input type="checkbox" name="interest" title="電影" value="movie">
~~~
用戶同時選中“寫作”、“電影”兩項
此時data.field中只有{interest:"movie"}這一項。
解決方案:
修改layui的form模塊源碼form.js
原來477-478行代碼如下:
~~~
if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
field[item.name] = item.value;
將其修改為:
if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
if(field[item.name]){
if(!(field[item.name] instanceof Array)){
field[item.name]=[field[item.name]];
}
field[item.name].push(item.value);
}else{
field[item.name] = item.value;
}
~~~
這是data.field中為{interest:["writing","movie"]}
PS:如果你的表單中有多個name相同的其他類型表單元素也同理!同時不會影響類似于下面這種數組name表單:
~~~
<input type="text" name="test[0]">
<input type="text" name="test[1]">
<input type="text" name="test[2]">
~~~
10.關于laydate控件
首先,用一個頁面綁定多個laydate控件bug,這個問題貌似有很多人提出過,其中有人已經給出了解決方案:http://fly.layui.com/jie/14329/。
不過貌似版本升級后源碼已經發生了變化,現在需要做如下修改,原來的laydate.js的1802-1806行代碼如下:
~~~
if(e.target === options.elem[0]
|| e.target === options.eventElem[0]
|| e.target === lay(options.closeStop)[0]){
return;
}
~~~
修改后如下:
~~~
var elem=options.elem.some(function (el) { return e.target === el });
var eventElem=options.eventElem.some(function (el) { return e.target === el });
var closeStop=lay(options.closeStop).some(function (el) { return e.target === el });
if(elem||eventElem||closeStop){
return;
}
~~~
有時還會報如下錯誤:
~~~
laydate.js:797 Uncaught TypeError: Cannot read property 'appendChild' of undefined
at Class.hint (VM13097 laydate.js:797)
at Class.checkDate (VM13097 laydate.js:922)
at Class.remove (VM13097 laydate.js:742)
at HTMLDocument.<anonymous> (VM13097 laydate.js:1809)
~~~
可以修改源碼修復,源碼834-837行如下:
~~~
Class.prototype.checkDate = function(fn){
var that = this
,thisDate = new Date()
,options = that.config
~~~
添加一個非空判斷,修改如下:
~~~
Class.prototype.checkDate = function(fn){
if(!this.elem){
return ;
}
var that = this
,thisDate = new Date()
,options = that.config
~~~
另外,我還在原有done、change回調基礎上添加了一個參數
~~~
done: function(dom,value, date, endDate){
console.log(dom);//觸發當前時期選擇事件的dom對象
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期時間對象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得結束的日期時間對象,開啟范圍選擇(range: true)才會返回。對象成員同上。
}
~~~
源碼1473行如下:
~~~
param = param || 【that.parse(), start, end】;//(這里貌似是社區編輯器的一個bug,源碼中【】符號為英文中括號[])
~~~
修改如下:
~~~
param = param || 【that.bindElem,that.parse(), start, end】;//(這里貌似是社區編輯器的一個bug,源碼中【】符號為英文中括號[])
~~~
11.調整layui-btn按鈕之間的間距
~~~
.layui-btn+.layui-btn{
margin-left: 1px;
}
~~~
12.關于數據表格修改行數據后模版渲染的BUG
數據表格可以定義模板以便以自己的方式顯示數據,模板有三種方式:綁定模版選擇器、函數轉義、直接賦值模版字符
如果使用函數轉義如:
~~~
{field:'sex', title: '性別',width:60,align:'center'
, templet:function(d){
if(d.sex==1){
return "男";
}else if(d.sex==0){
return "女";
}else{
return "保密";
}
}
}
~~~
并且此時再修改行數據時就會出現BUG,修改后性別直接顯示1、0、-1,而不會經過函數轉義了。
使用綁定模版選擇器或直接賦值模版字符不會出現此BUG
修改table.js源碼如下:
源碼1140行如下:
templet ? laytpl($(templet).html() || value).render(data) : value
將其修改為:
templet ?(typeof templet === 'function'?templet(data):laytpl($(templet).html() || value).render(data)):value
13.關于數據表格排序
目前數據表格排序功能最多只能針對某一列做排序,但是有時可能需要同時對多列排序,并且需要根據排序參數重新請求后臺,為了實現這個功能,我對table.js源碼修改如下:
源碼403-405行如下:
~~~
if(typeof options.initSort === 'object'){
that.sort(options.initSort.field, options.initSort.type);
}
~~~
修改如下:
~~~
if(options.initSort instanceof Array){
layui.each(options.initSort,function (i,e) {
that.sort(e.field, e.sort);
})
}
~~~
源碼416行如下:
`params[request.limitName] = options.limit;`
在其后插入如下代碼:
~~~
if(options.initSort!=null && options.initSort.length>0){
params["sorts"]=JSON.stringify(options.initSort);
}
~~~
源碼694行如下:
`that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); //清除其它標題排序狀態`
將其刪除或注釋
源碼702-705行如下:
~~~
that.sortKey = {
field: field
,sort: type
};
~~~
在其后插入如下代碼:
~~~
var sortIndex=-1;
if(options.initSort instanceof Array){
layui.each(options.initSort,function (i,e) {
if(e.field==field){
sortIndex=i;
return false;
}
});
}else{
options.initSort=[];
}
if(sortIndex==-1){
options.initSort.push(that.sortKey);
sortIndex=options.initSort.length-1;
}
if(type){
options.initSort[sortIndex].sort=type;
}else{
options.initSort.splice(sortIndex,1);
}
~~~
源碼719-724行如下:
~~~
if(formEvent){
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', {
field: field
,type: type
});
}
~~~
修改如下:
~~~
if(formEvent){
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', {
field: field
,type: type
,sorts: options.initSort
});
}
};
~~~
修改后數據表格可以同時對多列排序,并結合排序事件監聽實現后臺排序。
同時數據表格在翻頁或重載時,會自動以sorts為鍵值自動向后臺傳遞排序請求參數,形如:{sorts:[{"field":"height","sort":"asc"},{"field":"age","sort":"desc"}]}
并且排序事件的參數obj會增加一個屬性sorts,內容與排序請求參數一致,如:
~~~
table.on('sort(test)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對應的值"
console.log(obj.field); //當前排序的字段名
console.log(obj.type); //當前排序類型:desc(降序)、asc(升序)、null(空對象,默認排序)
console.log(this); //當前排序的 th 對象
console.log(obj.sorts)//排序參數
//盡管我們的 table 自帶排序功能,但并沒有請求服務端。
//有些時候,你可能需要根據當前排序的字段,重新向服務端發送請求,從而實現服務端排序,如:
table.reload('idTest');
});
~~~
二、建議
我原來是使用EasyUI的,所以初次使用layui時很多思路還是和原來一樣,但是有時候layui很多功能沒有EasyUI完善,用起來就很不爽,希望心姐多多借鑒一下EasyUI的做法
1.為什么不把表單元素設計成類似于下面的形式
~~~
<div class="layui-form-item">
<div class="layui-input-block">
<label class="layui-form-label">地址
<input type="text" name="address" autocomplete="off" placeholder="請輸入地址" class="layui-input">
</label>
</div>
</div>
~~~
這樣用戶直接點擊標簽的文字光標就能直接定位到相應的文本框,用戶體驗更好
2.添加一個類似于如下的日歷控件
3.關于form表單
EasyUI中有個form模塊可以直接以ajax方式提交表單及自動填充表單(自動渲染),非常簡單兩行代碼就搞定了,現在layui實現相同功能需要自己手動寫代碼或依賴大量插件輔助,很麻煩!我在EnhanceForm插件中已經實現了簡單的ajax提交表單,不過沒有充分測試,心姐可以完善后整合到layui中!
現在表單驗證只能在點擊提交按鈕時提交表單時才會觸發,但是有時候項目中表單驗證并不是通過表單提交觸發的,程序員希望自己手動調用js方法觸發驗證效果,所以建議為form添加一個validate方法,用于在表單驗證框架基礎上做表單驗證,返回true、false表示驗證是否通過,同時如果驗證不通過自動顯示提示等。
4.建議為數據表格增加一個添加行的方法(類似于EasyUI的appendRow、insertRow方法)
5.為數據表格增加獲取所有行數據的方法(類似于EasyUI的getRows方法)
6.數據表格列寬度權重
建議為數據表格增加一個列寬度設置為權重的功能,假設數據表格共A、B、C、D四列,其中A、C列為固定寬度50px,B列寬度權重為1,D列寬度權重為2,則渲染效果為,B列寬度=(數據表格總寬度-100px)*1/3,D列寬度=(數據表格總寬度-100px)*2/3
7.添加功能:數據表格數據行區域也能實現類似于復雜表頭跨行跨列的功能
8.單元格編輯類型目前只支持:text(輸入框),建議添加下拉列表、日期選擇、文件上傳等類型,或者開發接口可以讓用戶自定義編輯器,同時可以添加驗證規則,添加進入編輯狀態前的觸發事件,添加讓單元格進入編輯狀態的方法
9.添加功能:彈出層左上角標題文字旁也可以設置一個可愛的小圖標^_^
10.添加類似于EasyUI中ComboTree(樹形下拉框)和ComboGrid(數據表格下拉框)控件
11.添加屬性:數據表格開啟復選框時,可以設置singleSelect模式,即只允許選擇一行
12.添加屬性:數據表格開啟復選框時,可以設置checkOnSelect,如果為true,當用戶點擊行的時候該復選框就會被選中或取消選中。如果為false,當用戶僅在點擊該復選框的時候才會被選中或取消。
- 序言
- 基礎知識
- thinkphp基礎知識
- Thinkphp5CURD
- 數據庫創建
- 數據庫刪除
- 數據庫更新
- 數據庫查詢
- thinkphp5控制器
- 空操作空控制器
- 控制器基類
- 請求信息
- 行為和鉤子
- thinkphp5路由設置
- 變量路由
- 常用方法清單
- 環境搭建
- lnmp
- 升級php
- window環境
- Thinkphp小案例
- 分類管理
- 數據庫設計
- 模型
- 控制器
- 視圖
- 文件上傳
- 上傳接口
- 視圖
- 表單提交
- 視圖設計
- 控制器
- 權限控制
- 案例解釋說明
- 登錄驗證
- Laravel5.3登錄模式
- redis使用
- 一鍵安裝
- 程序設計與實現
- 頁面設計
- 功能設計
- 安裝功能實際
- 函數庫
- 配置文件
- 清除緩存
- 狀態值修改
- 數據庫備份還原
- controller.php
- common.php
- index.html
- importlist.html
- 完整的增刪查改
- 查詢語句
- 多語言支持
- JpGraph圖表類庫
- 微信支付
- payBase.php
- Order.php
- Oauth.php
- Jspay.php
- 下載遠程地址中的圖片
- URL重寫隱藏入口文件
- 圖片水印
- 整合百度編輯器
- Ueditor
- ueditor完整配置項
- 配置信息常見的方式
- HTTP 斷點續傳(PHP實現)
- layui.upload上傳文件或圖片
- QQ微信域名防封 預防域名封禁 強制跳轉至瀏覽器
- 蜘蛛篇
- 超簡單實現php谷歌驗證
- 采集金山詞霸每日一句
- think-swoole
- 原生PHP小案例
- 查詢修改數據庫
- mysql支付回調源碼
- pdo連接微信退款
- 前端小案例
- html快捷查詢
- layui經驗總結
- layui 表單增強插件
- Vue列表Ajax實戰教程
- PHP基礎
- 類的自動載入
- php基礎函數- 字符串函數
- php基礎函數-數學函數
- php基礎函數-數組函數
- PHP常見排序算法學習
- 請求第三方
- 從網絡下載文件
- 檢查網站是否宕機
- file_get_contents
- 算法
- php 抽獎算法(適合九宮格和大轉盤)
- 自己動手豐衣足食
- 入口文件
- start.php
- app.php
- load.php
- route.php
- JqHttp
- Jqfile
- Jqutil
- pdo連接數據庫類
- 常見的php類
- php數據接口類
- 生成多層樹狀下拉選框的工具模型
- 上傳下載類
- 微信用戶相關類
- Zip壓縮類
- 列表樹生成工具類
- 日期時間操作類
- 文件及文件夾處理類
- 字符串處理類
- php守護進程類
- RSA算法類
- php支持中英文的加密解密類
- CURL多線程請求
- 通用數據庫操作類
- 緩存類
- cookie類
- 常見的驗證方法
- 隨機密鑰
- 日志Log
- php-redis 操作類 封裝
- OpensslRsa 加密、解密、簽名、驗簽類
- 模板輸出類
- 發送郵件
- 封裝的mysqli類
- PHP時間段分割類庫
- PHP apk解包識版本號信息和ipa包信息
- 訪問客戶端信息
- http請求
- PHP 無數據庫讀寫配置文件
- 自己動手寫一個jwt類
- php實現對圖片對稱加解密(適用身份證加密等場景)
- 常見php函數
- 無限分類
- 獲取文章圖片
- 加密解密
- JSON數據輸出(適合在tp中)
- 刪除目錄和文件
- 判斷是否為手機訪問
- 獲取客戶端真實IP
- 隨機生成ip地址
- 字符串與二進制進行轉換
- 對數組進行排序
- 格式化字節大小
- 時間戳格式化
- 獲取數據的所有子孫數據的id值
- 取得視頻文件的縮略圖
- 圖片裁剪函數
- 按照每過0:00算一天
- 下載文件
- PHP隨機密碼生成
- 判斷數字大小
- 報文組成
- 通過ip定位城市
- PDO方式連接MySQL數據庫
- 數組與xml
- php字符串處理函數
- 判斷是否ajax提交
- 生成概率,用于抽獎
- 斷點續傳
- PHP使用星號替代用戶名手機和郵箱
- 獲取毫秒級別的時間戳
- php日志函數
- 隨機顏色生成器
- 時間差異計算函數
- 黑名單過濾
- 常見PHP 正則表達式
- php獲取瀏覽器類型
- 郵件發送
- 獲取qq昵稱
- 正則獲取手機號歸屬地
- 判斷是否是移動客戶端 移動設備
- gbk和utf8編碼自動識別方法
- 人性化時間顯示
- 請求API接口
- 數據庫備份
- PHP并發下安全讀寫文件函數
- PHP讀取exe軟件版本號
- PHP為任意頁面設置訪問密碼
- PHP利用百度當圖床
- 秒/分鐘/小時前
- 常見的js函數
- 短信驗證函數
- 上下收縮菜單
- jQuery 樹插件zTree
- 頁面刷新跳轉
- jquery導出報表
- js實現定時效果
- 獲取當前經緯度
- JQuery實現圖片大小自適應
- 網站運行時間
- 判斷瀏覽器類型
- 百度推送
- js對指定數據進行排序
- 常見工具方法
- JSPinyin
- 技術相關文章
- 高級PHP工程師所應該具備哪些技能
- 最簡潔的PHP程序員學習路線及建議
- 優化PHP代碼的一些建議
- TP5性能優化建議
- 程序猿專用代碼注釋:佛祖保佑,永無BUG
- 一組匹配中國大陸手機號碼的正則表達式
- Apache/Nginx/PHP服務器反爬蟲代碼大全
- 番外
- 配置shadowsocks服務端
- python
- go
- 如何在1分鐘內黑掉任何網站!
- 百度貼吧敏感詞
- 貼吧手工養號發帖教程
- 搞笑的注釋代碼
- Heroku