JS hook

所谓js hook 就是在页面加载完成后,默认通过遍利html节点,执行各种JS方法
优淘TAE系统配置大约一二十种js hook,熟练掌握,这样能使不会写代码的同学也能调用各种JS,简单去实现一些常用的功能
所有hook的className都是_下划线开头

 

class

节点标签

调用说明

参数说明

调用实例

_loading

img

延迟加载图片

data-ks-lazyload=图片地址

<img data-ks-lazyload="_250x250.jpg"  class="_loading" >

_start_time

不限

自动倒计时

data-time= 1445337975 值为unix时间截(必填)
data-text=显示的名称如距结束,倒计时
data-type=分格的类型,如:或是|或是其它
data-tag=内部HTML标签的tag,如b,i

 

<div class="_start_time" data-time="1453954943"></div>

_hover_img

不限

鼠标移动自动显示内部图片

在当前节点内部需添加a>img标签即可
data-top=向顶部偏移多少像素
data-left=向左偏移多少像素,默认为50%

<div class="cl _hover_img" style="width:300px;height:300px;background:#000;"><a href="#"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1QfKxXBXcXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" ></a></div>

_dateline

input:text

点击后弹出时间选择器

value=1445337975,有value则会自动加载时间,没有就空

<input name="start_time" value="" type="text" class="_dateline">

_confirm

a

点击后弹出确定对话框

data-msg=是否确定删除?
href=确定后打开的URL

<a href="/index.php" class="_confirm" data-msg="您确定删除吗?">删除</a>

_ajax_dialog

不限

点击后执行ajax请求后弹窗

data-url=请求的url

<a href="/index.php?m=ajax&a=sign" class="_ajax_dialog" >签到</a>

_show_dialog

不限

点击节点后弹窗

data-msg=您今天共获得10个积分
data-status= success成功功标,info无图标,error=错误图标,不填则默认是error

<a href="/index.php?m=ajax&a=sign" class="_showDialog" data-msg="您今天共获得10个积分" data-status="success" >点击查看</a>

_go_top

不限

点击后返回顶部

data-class=鼠标移动后增加或移除的className,
data-hide=1 禁止跟随滚动条显示或隐藏

<a href="#" class="_go_top" >返回顶部</a>

_click_show

不限

点击后显示或隐藏某个节点

data-show=点击后显示的节点类名
data-hide=点击后隐藏的节点类名

<a href="#" class="_click_show" data-hide=".hpz_headd" >隐藏头部</a>

_check_form

不限

点击后自动检查当前表单的各种字段是否合法

仅能验证input和textarea两种
data-msg=验证不成功后的弹窗提示(可空)
data-type=多种校验方式如下(必填)
email=邮箱,phone=手机号码,tell=电话号码,idcard=身份证号码,qq=验证QQ,number=数字,zip=邮编,int=是否整数,data=是否日期,chinese=是否中文,truename=中文姓名,url=是否网址,ip=是否ip地址,char=是否一个字母,username=是否一个合法用户名,wangwang=是否旺旺账号,alipay=是否支付主宝账号,address=是否一个地址,yzm=是否验证码,tag或title或null=验证内容是否为空,picurl=是否一个正规图片地址,kw=搜索的关键字

<form action="" method="POST"  id="search_form">
<input placeholder="搜精品女装试试" type="text" class="so_kw" data-type="kw" name="kw" />
<input type="submit" class="srh-sub so_web _check_form" url="/index.php?a=search" value="搜本站" >
</form>

更多例子验证可查看默认模板中搜索框,或是会员登录,注册页面的表单

_onsubmit

不限

点击后提交当前父节点的表单

data-form=要验证的表单类名或ID,可空
如留则是向上查找最新的表单

<form action="" method="POST"  id="search_form">
<input value="服装" type="text" class="so_kw"name="kw" />
<a href="" class="_onsubmit">立即查找</a></form>

_wangwang

a

自动生成旺旺链接和图标

data-wangwang=淘宝账号昵称(二者任选一即可,必填)
data-nick==淘宝账号昵称(二者任选一即可)
data-img=是否生成图片(任意值),默认为生成生成

<a class="_wangwang" data-nick="把淘宝空"></a>

_qq

a

自动生成QQ链接和图标

data-qq=QQ号码(必填)
data-img=是否生成图片(任意值) ,默认为生成生成
data-title=生成的title值

<a class="_qq" data-qq="85914984"></a>

_check_login

不限

点击后验证是否登录了站点

登录陆了站点不进行任何拦截操作
未登录,则会弹窗提示进行登录

<a href="#" class="_check_login">是否登录</a>

_duoshuo

div

自动加载多说评论组件

data-id= 当前页面的ID,不填则默认会从URL中获取

<div class="_duoshuo" data-id="123"></div>

_share

不限

自动调用百度分享组件

data-id= 当前页面的ID,不填则默认会从URL中获取
data-size=大小(16|24|32)
data-style=图标颜色0,1,2
data-picurl=分享的图片地址
data-desc=分享的描述
data-title=分享的标题
data-more=任意值则不显示更多
data-count=任意值则不显示统计数
data-url=分享的URL(不填或空则默认是当前页面)

最复杂的例子
<div class="_share" data-id="123" data-desc="这是分享的描述" data-title="分享的标题" data-count="0" data-more="0" data-picurl="http://img02.taobaocdn.com/bao/uploaded/i2/T1QfKxXBXcXXXXXXXX_!!0-item_pic.jpg" data-style="2" data-size="24" data-url="http://www.uz-system.com/"></div>

最简单的例子
<div class="_share" data-id="123" ></div>

yzm

img

点击后自动刷新验证码

当前页面需要有一个img的元素,且类名为yzm_img

<div class="cl"><img src="/index.php?m=ajax&a=yzm" alt="" class="yzm_img ">
<a href="#" class="yzm">刷新</a></div>

_auto_ad

不限

自动生成全屏广告图

data-picurl=图片的链接地址
data-url=点击图片后打开的URL
url如不填或留空则图片不添加链接

<div class="_auto_ad" data-picurl="https://gdp.alicdn.com/imgextra/i1/2050471937/
TB2sdLifXXXXXceXpXXXXXXXXXX_!!2050471937.jpg" data-url=""></div>

 

 

 

 

 

 

还有更多待同学们自行发掘了

 

 

优淘TAE系统(2)群    本页地址:   http://help.uz-system.com/?id=159 有问题请前往论坛提问 http://bbs.uz-system.com/