$.Msg

消息提示

语法

$.Msg(content, time)

参数说明
content(string) 必填
需要提示的文本信息
class(string)
提示框的class
time(int)
显示时长
单位:毫秒,默认:2000毫秒

实例

codewebstr.top

/*默认时间*/
$.Msg("我是提示框");
/*自定义时间*/
$.Msg("我能消失5秒",5000);

$.loading

加载提示

语法

$.loading(content)

参数说明
content(string)必填
加载提示的文本信息
type(number)
加载方式,0覆盖重载,1内容追加,2替换最后一行文本,默认:0
style(string)
文本css

实例

codewebstr.top

$.loading("加载中");

$.alert

错误提示,警告提示

语法

$.alert(content, title, aftertitle)

参数说明
content(string) 必填
alert的文本信息
title(string)
标题
aftertitle(string)
副标题
callback(function)
回调函数

实例

codewebstr.top

$.alert("必填项不能为空!");

$.confirm

对话提示框

语法

$.confirm(content, title, okback, noback)

参数说明
content(string) 必填
对话框的文本信息
title(string)
标题
okback(function)
确定按钮回调函数
noback(function)
取消按钮回调函数

实例

codewebstr.top

$.confirm("你要关闭吗?", "重要提示", function(){ $.Msg("你选择关闭"); }, function(){ $.Msg("你放弃了"); });

$.popup

内容弹出层

语法

$.popup(content, object)

参数说明
content(string) 必填
内容信息,可HTML。
object(object)
配置信息
type:弹出方式,center,left,right,top,bottom。默认“center”
title:标题
titleHtml:html格式的头部
bottomHtml:html格式的底部
class:附加css类名
after:弹出层加载后回调函数
closeCallback:弹出层关闭后回调函数
shadeClose:点击遮幕关闭,默认true

实例

codewebstr.top

var popDom=$.popup("弹出层内容",{title:"我是标题"});

TAB切换

TAB切换框

实例

codewebstr.top

<div class="tab_list"> <a href="#tab1" class="tab_link active">TAB1</a> <a href="#tab2" class="tab_link">TAB2</a> <a href="#tab3" class="tab_link">TAB3</a> </div> <div class="tabs"> <ul id="tab1" class="tab active">this is TAB1</ul> <ul id="tab2" class="tab">this is TAB2</ul> <ul id="tab3" class="tab">this is TAB3</ul> </div>

    this is TAB1
    this is TAB2
    this is TAB3

悬浮吸顶

元素吸顶或置底效果/TAB切换吸顶

语法

$(dom).fixedTab(object)

参数说明
object.unit(string)
数字单位,默认px
object.space(number)
距离,置顶或置底的距离
object.relDom(object)
相对元素的DOM对象,当为空时,则为吸顶效果。

实例

codewebstr.top

/** data-space:距离顶部/底部的距离 data-unit:单位,默认px **/ //注意:当元素设置有data-space,data-unit自定义属性时,将会覆盖object的配置 <div class="fixed_tab" data-space="55" data-unit="px">距离顶部55px的时候吸顶</div> PS:$(".fixed_tab").fixedTab()激活

距离顶部55px的时候吸顶

$.ajaxpost / $.ajaxget

ajax post/get请求

语法

$.ajaxpost(url, params, callback, errCallback, async)
$.ajaxget(url, params, callback, errCallback, async)

参数说明
url(url)
请求地址
params(string/object)
请求参数
callback(function)
success回调函数
errCallback(function)
ajax错误回调函数
async(number/boolean)
ture:异步;false:同步

实例

codewebstr.top

$.ajaxpost("./test",{name:"测试", code:"4567"},function(res){ console.log(res) //进行你的逻辑操作 });

$.ajaxpage

异步加载页面

语法

$.ajaxpage(url, isReturn)

参数说明
url(url)必填
请求地址
params(number/boolean)
ture:返回HTML代码;false:HTML写入config.ajaxPageDom定义的元素内

实例

codewebstr.top

//返回HTML代码
var html=$.ajaxpage("./test.html",true);
$(".demo").html(html)

//默认异步
/**
*data-page:触发标识,页面链接地址
*data-title:页面的title
*JS变量window.param,POST提交参数
**/
<a data-page="./test.html" data-title="这是异步加载">异步加载页面</a>

$.setcookie

设置网页cookie

语法

$.setcookie(name, value, time, path, domain)

参数说明
name(string)必填
cookie名称
value(string)必填
cookie值
time(number)必填
cookie保存时间(天),支持小数
path(string)
cookie保存的服务器路径
domain(string)
cookie保存的域名

实例

codewebstr.top

$.setcookie("name","username",1);

$.getcookie

获取网页指定cookie

语法

$.getcookie(name)

参数说明
name(string)
cookie名称

实例

codewebstr.top

$.getcookie("name");

$.gettime

获取当前时间,多种选择

语法

$.gettime(string)

参数说明
string(string)
可获取指定时间,默认当前时间。
格式支持:时间戳/年月日(三个参数)

返回实例

方法说明
getDateObj()格式化后的时间,包括:年月日时分秒周
getMonthDays()获取月的天数
getWeek()获取周(汉字)
getLunarDate()获取农历,包含:农历、干支年月日、属相、节气、节日
getCalendarNow()获取当月日历数据
getCalendarPrev()获取上月日历数据(补齐,非全月数据)
getCalendarNext()获取下月日历数据(补齐,非全月数据)

实例

codewebstr.top

var dateTime=$.gettime(); console.log(dateTime.getDateObj())

$.checkform

输入数据验证

语法

$.checkform(content, type)

参数说明
content(string)
需要验证的数据
type(string)
验证的类型
email:邮箱
phone:手机
qq:QQ
telephone:固话
number:数字
en:大小写英文字母
url:网址

实例

codewebstr.top

$.checkform("22ff@qq.com","email");

$.m_vibration(time,c)

手机振动(仅限安卓)

语法

$.m_vibration(time, c)

参数说明
time(string/object)
数字:连续振动指定秒
数组:间歇振动,格式[振动,暂停,振动...]
c(string)
忘记这个参数干什么了......

$.m_line(onlineFun,offlineFun)

网络状态提示

语法

$.m_line(onlineFun,offlineFun)

参数说明
onlineFun(function)
网络上线回调
offlineFun(function)
网络掉线回调,默认$.Msg('掉线了')

$.m_shake(callback, config)

摇一摇(仅手机端),默认事件结束后不在继续监听,如果需要再次使用,可在业务处理完成后调用reset()

语法

$.m_shake(callback, config)

config参数说明
threshold(number)
阙值,可理解为灵敏度
time(number)
时间差,可理解为速度

实例

codewebstr.top

var shake=$.m_shake(function(){ alert("触发了摇一摇"); shake.reset(); });

$.fullScreen(DOM,isFull)

设置全屏显示

语法

$.fullScreen(DOM,isFull)

参数说明
DOM(object)
全屏显示的DOM元素,默认document.documentElement
isFull(boolean)
是否退出全屏,默认false

永久性本地缓存操作

$.localStorage.set(name,value,expire)

设置本地缓存

语法

$.localStorage.set(name,value,expire)

参数说明
name(string)
缓存名称
value(string/object)
缓存值,可字符串、数组、josn对象
expire(number)
时效,单位秒

$.localStorage.get(name)

获取本地缓存

语法

$.localStorage.get(name)

参数说明
name(string)
缓存名称

$.localStorage.dele(key)

删除/清空本地缓存,当key为true(非字符串)时,清空全部缓存

语法

$.localStorage.dele(key)

参数说明
name(string)
缓存名称

$.localStorage.change(function)

本地缓存更新回调

语法

$.localStorage.change(function(a){ if(a.key == "key1"){ alert("key1值发生变化"); } })

会话性本地缓存操作

$.sessionStorage.set(name,value)

设置本地缓存

语法

$.sessionStorage.set(name,value)

参数说明
name(string)
缓存名称
value(string/object)
缓存值,可字符串、数组、josn对象

$.sessionStorage.get(name)

获取本地缓存

语法

$.sessionStorage.get(name)

参数说明
name(string)
缓存名称

$.sessionStorage.dele(key)

删除/清空本地缓存,当key为true(非字符串)时,清空全部缓存

语法

$.sessionStorage.dele(key)

参数说明
name(string)
缓存名称

$.ua().browser()

获取浏览器名称及版本

语法

$.ua.browser()

返回参数说明
name浏览器名称(weixin/uc/360/qq/sogou/chrome/ie/edge...)
v版本号

$.ua().os()

获取操作系统名称及版本

语法

$.ua.os()

返回参数说明
name系统名称(win/mac/ios/android)
v版本号

$.ua().isWap()

判断手机端

语法

$.ua.isWap(true|false)

参数说明
boolean是否严格判断,为ture时,将对屏幕宽度进行判断。

$.winVS(title)

判断浏览器窗口状态,支持自定义提示语或方法

语法

$.winVS(title)

参数说明
title(string/function)
可以提示语,也可以自定义方法(传参:状态true/false)

实例

codewebstr.top

$.winVS("你现在不在这里");

$.winProhibit(object)

重置浏览器部分功能,单json参数或json数组
单json格式:{'key':重置功能名称,'fun':自定义方法,'param':非重置参数}
json数组格式:[{'key':重置功能名称,'fun':自定义方法,'param':非重置参数},{...}]

语法

$.winProhibit(object)

参数说明
object.key(string)
rightClick:右键
keyCode:指定按键
copy:复制
cut:剪切
paste:粘贴
print:打印
devTools:开发者工具
object.fun(function)
自定义方法
keyCode返回ASCII值
devTools返回booleans
object.param(array)
参数
rightClick,copy,cut,paste为非重置标签(支持标签名、类名、ID),如:['input','.input']
keyCode为需要重置按键的ASCII值
print的参数:{
  dom:打印区域,默认:.printBox;
  no:非打印元素,所有.noPrint均不被打印;
  start:打印开始的回调,可以做自定义更改内容。
}

实例

codewebstr.top

$.winProhibit([ {"key":"rightClick","fun":function(a){$.alert('你点击了右键,在左边菜单处右键试试')},"param":['ul','li']}, {"key":"keyCode","fun":function(a){$.alert('F12已经屏蔽')},"param":['123']}, {"key":"copy","fun":function(a){$.alert('你进行了复制操作,在左边菜单处选中复制试试')},"param":['ul','li']}, {"key":"devTools","fun":function(a){ a != devToolsStatus && (devToolsStatus = a,$.alert('DevTools已' + (a ? '打开' : '关闭')))}}, ]);

$(dom).scrollAnim(object)

元素加载过场动画

语法

$(dom).scrollAnim(object)

参数说明
object.dom(string)
动画的DOM,通常使用className,默认:.fl_animated,如:".className"
object.className(string)
指定动画的名称,元素属性data-anim-class缺省时使用,默认:fadeIn
object.loop(boolean)
是否循环,否:过场动画只加载一次
object.direction(string)
模式,vertical:竖屏,否则为横屏,可配合$.fn.xswitch使用
元素属性说明data-anim-class:过场动画类名称,推荐animate.min.css
data-anim-delay:延迟播放时间,单位秒,默认0
data-anim-duration:动画执行时间,单位秒,默认1

实例

codewebstr.top

<p class="fl_animated" data-anim-class="slideInLeft">第1动画</p> <p class="fl_animated" data-anim-class="fadeInRight" data-anim-delay="1">第2动画,延迟1秒播放</p> <p class="fl_animated" data-anim-class="fadeInRight" data-anim-duration="5">第3动画,指定动画时长为5秒</p> <p class="fl_animated" data-anim-class="fadeInRight" data-anim-delay="1" data-anim-duration="5">第4动画,延迟1秒播放,动画时长为5秒</p> <script> $(document).scrollAnim({loop:true}); </script>

$(dom).xswitch(object)

全屏滚动,滚屏效果

语法

$(dom).xswitch(object)

参数说明
object.section(string)
滚屏的DOM,通常使用className,默认:.section,如:".className"
object.page(string)
分屏导航,默认:.xs_nav
object.active(boolean)
分屏导航高亮的类名
object.index(string)
默认屏,默认:0
object.easing(string)
过场动画模式,默认:ease
object.duration(number)
过场动画速度,单位:毫秒,默认:500
object.loop(boolean)
是否循环,默认:false
object.pagination(boolean)
是否开启分屏导航,默认:false
object.keyboard(boolean)
是否按键控制,默认:true
object.direction(boolean)
模式,vertical:竖屏,否则为横屏,默认:vertical
object.callback(boolean)
回调,返回当前屏的索引(index)
其他说明可配置$(dom).scrollAnim(object)使用
PS:direction请保持一致

实例

codewebstr.top

<div class="main"> <div class="section"> <p class="fl_animated" data-anim-class="slideInLeft">第1屏动画进入视线</p> </div> <div class="section"> <p class="fl_animated" data-anim-class="fadeInLeft" data-anim-delay="1" data-anim-duration="5">第2-1屏动画进入视线,延迟播放</p> <p class="fl_animated" data-anim-class="fadeIn">第2-2屏动画进入视线</p> <p class="fl_animated" data-anim-class="slideInRight">第2-3屏动画进入视线</p> <p class="fl_animated" data-anim-class="slideInLeft">第2-4动画进入视线</p> </div> <div class="section"> <p class="fl_animated" data-anim-class="fadeInRight">第3屏动画进入视线</p> </div> </div> <script> $(".main").xswitch({ "pagination":true, "callback":function(a){ $.Msg(a) } }) $(".main").scrollAnim({loop:true});//可配合scrollAnim,达到更好的效果 //PS:请使用DIV包含住主体框架,否则translate3d是导致分屏导航fixed失效 </script>

$.formFilter(Dom, object)

对表单的数据进行初步验证。

语法

$.formFilter(Dom, object)

参数说明
Dom(string)
需要验证的表单DOM,支持类名/ID,如:".className" 或 "#formPost"
object.all(boolean)
是否全部验证,默认:false。单项逐步验证
当设置为true时,会将表单中所有需要验证的内容全部验证后返回信息。
object.msg(boolean)
是否提示框提示信息,默认:true。
当设置为false时,会返回包含错误数据的json数组。

返回数据(object)

参数说明
object.code(boolean)
表单元素内容的验证结果,false为验证不通过。
object.title(string)
msg为true是不返回此项。表单元素的标题名称,可通过data-title设置。
object.obj(object)
msg为true是不返回此项。表单元素的DOM对象。
object.msg(string)
msg为true是不返回此项。错误信息。
object.data(object)
msg为true返回此项。表单数据。

$.stringFormat(string,[...arg]);

对字符串的占位符格式化。

语法

$.stringFormat(string, json)

参数说明
string(string)
要进行格式化的字符串,占位符用{name}表示。
json占位符的替换值,json数组,暂不支持二维数组。

实例

codewebstr.top

var str=$.stringFormat("字符串占位符{arg1},占位符{arg2}",{'arg1':'a','arg2':'b'});

$(dom).serializeObject();

获取表单数据,自动数组化。

语法

$(dom).serializeObject()

$(dom).imglazy(object)

图片懒加载,自动匹配标签,非img标签使用background。

语法

$(dom).imglazy(object)

参数说明
object.attr(string)
图片地址属性,默认:data-src
object.error(string)
图片加载错误替换图片,请确保此图片存在
object.container(object)
滚动条Dom,默认$(window)
object.callback(function)
回调函数
object.timer(number)
图片加载间隔时间,单位:毫秒,默认:10毫秒
object.scrollDelay(number)
滚动条延时响应时间,单位:毫秒,默认:200毫秒

元素如果含有data-node=true属性,则为其加载图片内容(load方法)

实例

codewebstr.top

<img class="imglazy" data-src="img1.png"/> <script> $(".imglazy").imglazy(); </script>

浏览器通知

$.notify.init()

初始化,向用户询问通知

$.notify.checkAudio()

如果使用自定义通知声音,需调用此函数,触使用户主动行为

$.notify.send(object)

发生通知

语法

$.notify.send(object)

参数(object)说明
title(string)
通知名称
message(string)
消息内容
icon(string)
消息图标
sound(string)
自定义通知声音

$.openApp(object)

唤醒APP,如果打开失败则提示下载APP

语法

$.openApp(object)

参数(object)说明
name(string)
APP名称
tipDefault(string)
初始化提示文本
tipJump(string)
唤醒时提示文本
tipError(string)
唤醒失败提示文本
appUrl(string/json)
app唤醒链接,支持android和ios分别配置(json格式)
downUrl(string/json)
app下载链接,支持android和ios分别配置(json格式)
btnAutoHide(number)
是否自动隐藏APP按钮,单位毫秒,0表示不隐藏
callback(function)
唤醒事件回调(返回状态参数true/false)

插件配置参数

1、config配置

$.config(object)

参数说明
link(object)
url: 外部CSS链接,
media: 显示设备,默认ALL,
charset: 文件编码,默认UTF-8
ajaxPageDom(string)
异步加载页面的容器,默认.page_centent
ajaxConfig(object)
ajax配置,如:xhrFields和beforeSend

2、setsize

根据设备自动设置HTML文件字体大小

codewebstr.top

$.setsize();

1、$.closeModal()

关闭msg弹框(包括:$.Msg(),$.alert(),$.loading(),$confirm())

2、$.url

获取URL信息,格式:$.url.fun,如:$.url.getUrlFragment("url")

方法说明
getUrlFragment获取URL锚点
getAbsoluteUrl获取完整的绝对URL
getBaseUrl获取非锚点的URL
getParam获取URL参数

2、$.winEvent

对事件的扩展

2.1、$.winEvent.copy(object, str, param)

参数说明
objectcopy事件返回对象
str自定义内容
param布尔类型时:true为覆盖内容,false为追加内容;也可以是function,对复制的内容进行二次处理。

注意:dom的copy事件需return false;

3、$.historyAdd(object)

添加history

4、$.historyPopState(function, boolean)

监听历史记录popstate

5、$.fn.animateEnd(function)

监听元素动画结束

6、$.fn.transitionEnd(function)

监听元素CSS动画结束

7、$.downLoad(name, content)

将内容以文件方式下载