$.Msg

消息提示

语法

$.Msg(center, time)

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

实例

codewebstr.top

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

$.loading

加载提示

语法

$.loading(center)

参数说明
center(string)必填
加载提示的文本信息

实例

codewebstr.top

$.loading("加载中");

$.alert

错误提示,警告提示

语法

$.alert(center, title, aftertitle)

参数说明
center(string) 必填
alert的文本信息
title(string)
标题
aftertitle(string)
副标题

实例

codewebstr.top

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

$.confirm

对话提示框

语法

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

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

实例

codewebstr.top

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

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切换吸顶

实例

codewebstr.top

/**
data-offset:距离顶部的距离
data-unit:单位,默认px**/
<div class="fixed_tab" data-offset="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");

$.addFavorite

添加网页到收藏夹

语法

$.addFavorite(url, title)

参数说明
url(url)
添加收藏夹的网址
title(string)
添加收藏夹网址的名称

实例

codewebstr.top

$.addFavorite("http://www.baidu.com","百度一下");

$.setHomepage

添加指定网址为主页

语法

$.setHomepage(url)

参数说明
url(url)
设置主页的网址

实例

codewebstr.top

$.setHomepage("http://www.baidu.com");

$.gettime

获取当前时间,多种选择

语法

$.gettime(config)

参数说明
config(string)
获取时间的参数
Y:年
M:月
D:日
H:时
I:分
S:秒
WK:星期几
NA:农历年
ZO:生肖
LC:农历

实例

codewebstr.top

$.gettime("Y M D H I S WK NA ZO LC");

$.checkform

输入数据验证

语法

$.checkform(content, type)

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

实例

codewebstr.top

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

$(dom).bar()

获取横向柱状统计图表

语法

$(dom).bar(object, color)

参数说明
object(object)
统计列表数据(二维数组或数组对象)
color(object)
柱子颜色表(数组)

实例

codewebstr.top

$(".test").bar([ ["张三",100,33.33], ["李四",200,66.67], ], ["#ff0000", "#fff000"]);

$(dom).ybar()

获取横向柱状统计图表

语法

$(dom).ybar(object, color)

参数说明
object(object)
统计列表数据(二维数组或数组对象)
color(object)
柱子颜色表(数组)

实例

codewebstr.top

$(".test").ybar([ ["张三",100,33.33], ["李四",200,66.67], ], ["#ff0000", "#fff000"]);

$.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('掉线了')

$.fullScreen(DOM,isFull)

设置全屏显示

语法

$.fullScreen(DOM,isFull)

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

$.setLocalStorage(name,value)

设置本地缓存

语法

$.setLocalStorage(name,value)

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

$.getLocalStorage(name)

获取本地缓存

语法

$.getLocalStorage(name)

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

$.ua()

判断浏览器,目前仅判断支付宝和微信

语法

$.ua()

返回参数说明
name(string)
alipay/wx

$.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:复制
shear:剪切
paste:粘贴
devTools:开发者工具
object.fun(function)
自定义方法
keyCode返回ASCII值
devTools返回booleans
object.param(array)
非屏蔽参数
rightClick,copy,shear,paste为非屏蔽标签(大写),如:['INPUT','TEXTAREA']
keyCode为需要屏蔽按键的ASCII值

实例

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>

插件配置参数

1、config配置

$.config(object)

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

2、setsize

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

codewebstr.top

$.setsize();