phpwind9.0 前端交互API

Depended: wind.js, jQuery1.8.0

pw9.0前端核心
Wind组件方法
Wind.Util下的全局方法(global.js)

前端架构和目录说明

phpwind9.0前端架构图

phpwind9.0前端有了明确的HTML、CSS、JavaScript划分。从上图中可以看到,JS分为六大块:wind.js、jquery.js 、ui_libs、util_libs、pages、windeditor。

wind.js

见下文

jquery.js:

众所周知,目前最流行的JavaScript的库非jQuery莫属,这也正是我们选择jQuery的目的,旨在降低开发者的入门难度,更容易的进行二次开发。网上的jQuery教程太多,这里就不多介绍(推荐中文api)。

ui_libs/ 目录:

ui_libs包含了一系列我们在开发中常用的ui型组件。所谓UI型组件,就是指与UI呈现相关的组件,比如:tabs(选项卡)、datePicker(日历选择)、colorPicker(颜色先择)等等。

util_libs/ 目录:

util_libs包含了一系列我们在开发中常用的非UI型组件,所谓非UI型组件,就是指功能相关,不会呈现在界面上,不影响布局的组件,比如:dragdrop(拖拽)、ajaxForm(无刷新提交)、validate(表单验证)等等。

pages/ 目录:

page包含页面的业务逻辑脚本,比如:贴子阅读页的脚本、ajax的处理等等,一系列与具体业务相关的js独立文件。

windeditor/ 目录:

windeditor是NextWind中实现的开源富文本编辑器,它里面包含一个通用的富文本编辑器和一系列的NextWind相关插件,如:表情、附件上传、相片上传、UBB等插件。

wind.js

传统上,我们加载JS文件都是使用<script>标签:<script type="text/javascript" src="example.js"></script>。但是,它存在着严重的阻塞页面渲染问题,具体的阻塞原理请移步:浏览器内部工作原理或者google搜索:“页面阻塞渲染” 之类关键字。

wind.js就是为了解决脚本阻塞加载而生,使用异步、并行的方式来加载外部的javascript文件(通过gzip压缩后,wind.js文件为2.6KB)。使用示例:

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>wind.js⽰示例</title>
<script src="js/wind.js"></script>
</head>
<body>
<div id="container">
	……
</div>
<script>
Wind.js('/js/jquery.js', function(){
	//jquery加载完毕
});
</script>
</body>
</html>

可以看到,Wind.js是一个使用方法,Wind是全局的命名空间,它有如下几个方法:Wind.jsWind.cssWind.useWind.ready

Wind.js方法

wind.js方法用来加载独立的js⽂文件,使用方法如下:
<script>
Wind.js('/js/jquery.js', '/js/pages/common/global.js', function(){
	//index.js加载完毕
});
</script>
Wind.js方法支持多个js同时加载,多个js时使用参数方式隔开。

Wind.css方法

Wind.css⽅方法的作用是动态加载CSS文件,在开发中我们一般不需要异步加载CSS文件,因为CSS的加载是不会阻塞渲染的,通常在UI组件当中会用到Wind.css。

Wind.use方法

Wind.use方法是一个非常重要的方法,用它我们可以通过别名的方式来加载常用的js文件。比如:
<script>
Wind.use('jquery', 'tabs', function(){
	//tabs和jquery加载完毕
});
</script>
这样,我们就不用去记jquery在哪个目录下,只记住它的别名就OK了。在wind.js中,我们可以通过代码配置自己所需要的别名, 比如:
alias = {
	'jquery' : 'jquery',
	'global' : 'pages/common/global',
	'tabs' : 'ui_libs/tabs/tabs',
	'dialog' : 'ui_libs/dialog/dialog',
	'colorPicker' : 'ui_libs/colorPicker/colorPicker',
	'datePicker' : 'ui_libs/datePicker/datePicker'
}

Wind.ready方法

此方法与jQuery中的ready方法相似,但是有三种使用场景:
<script>
//场景一
Wind.ready(function(){
	//所有js队列加载完成后,执行callback
});

//场景二
Wind.ready(document, function(){
	//document加载完毕(相当于domReady),执行callback
});

//场景三
Wind.ready('example.js', function(){
	//example.js加载完成后,执行callback
});
</script>
如果一个页面中,你需要提早定义某事件,并不需要依赖jQuery时,以上方法将非常有用。

.colorPicker()

颜色选择器

示例

大个的

代码

html

<div class="mb10">
	<input type="text" class="input length_2 mr5 J_color_input">
	<span class="J_color_picker color_pick"><em style="background:#ff5500;"></em></span>
</div>
<div class="mb10">
	<span class="color_pick color_big J_color_picker"><em style="background:#ff5500;"></em>大个的</span>
</div>

js

Wind.use('jquery', 'colorPicker', function() {
	$('.J_color_picker').colorPicker({
		callback : function(color) {
			$(this).find('em').css('background', color);	//显示选择的显色
			$(this).prev('.J_color_input').val(color);		//写入要提交的表单值
		}
	});
});

.datePicker()

日期选择器(自定义ui控件)。

示例

代码

html

<input placeholder="选择日期" type="text" class="J_date" >

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var date_btns = $("input.J_date");
	if(date_btns.length) {
		Wind.use('datePicker',function() {
			date_btns.datePicker();
		});
	}
});

.dateSelect()

日期选择(浏览器的select控件)。

示例

选择生日:

代码

html

选择生日:
<select class="mr15 length_2 J_date_year">
	<option value="2012">2012年</option>
	……
	<option selected="" value="2002">2002年</option>
	……
</select>
<select class="mr15 length_2 J_date_month">
	<option value="1">1月</option>
	……
	<option selected="" value="6">6月</option>
	……
</select>
<select class="length_2 J_date_day">
	……
	<option selected="" value="7">7日</option>
	……
</select>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var date_select = $('.J_date_select');
	if (date_select.length) {
		Wind.use('dateSelect', function () {
			date_select.dateSelect();
		});
	}
});

.dialog()

对话框

代码

html

<input type="button" class="btn" value="alert弹窗" id="J_alert"/>
<input type="button" class="btn" value="confirm弹窗" id="J_confirm"/>
<input type="button" class="btn" value="弹url" id="J_openUrl"/>
<input type="button" class="btn" value="弹某个已知元素,或者弹出ajax请求的HTML" id="J_showHTML"/>

js

Wind.use('jquery', 'dialog',function() {
	$('#J_alert').on('click',function(e){
		var elem = e.currentTarget;
		Wind.dialog.alert('我是alert',function(){
			alert('你点了确定,我是原生alert');
			elem.focus();//关闭窗口后使原始按钮获取焦点
		});
	});
	
	//confirm
	$('#J_confirm').on('click',function(e){
		var elem = e.currentTarget;
		Wind.dialog.confirm('我是alert',function(e){
			alert('你点了确定');
			elem.focus();
		},function(){
			alert('你点了取消');
			elem.focus();
		});
	});
	
	//open url
	$('#J_openUrl').on('click',function(){
		Wind.dialog.open('http://www.baidu.com');
	});
	
	//showHTML
	$('#J_showHTML').on('click',function(){
		Wind.dialog.html('#J_dialog_html');
	});
	
	//注意,每一次调用都会返回一个dialog对象,可以调用它的close方法关闭当前窗口,如:
	var dialog = Wind.dialog.html('#J_dialog_html');
	dialog.close();
});

.emailAutoMatch(options)

email后缀自动匹配。

参数

options.emailDefaultArr:未输入@前的可匹配后缀,默认:
['@aliyun.com', '@qq.com', '@163.com', '@yahoo.com.cn', '@hotmail.com', '@gmail.com']
options.emailAllArr:输入@后的可匹配后缀,默认:
['qq.com', '163.com', 'yahoo.com.cn', 'hotmail.com', 'gmail.com', 'yahoo.com', 'yahoo.cn', '126.com', 'yeah.com', 'live.com', 'aliyun.com']

示例

代码

html

<input type="text" class="input J_email_match" name="email">

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var email_match = $('input.J_email_match');
	if(email_match.length) {
		email_match.attr('autocomplete', 'off');
		Wind.use('emailAutoMatch', function(){
			email_match.emailAutoMatch();
		});
	}
});

.gallerySlide()

幻灯片

示例

代码

html

<ul class="J_gallery_list">
	<li class="fl J_gallery_items "><a data-big="大图地址" href=""><img width="100" height="100" alt="" src="缩略图地址"></a></li>
	<li class="fl J_gallery_items "><a data-big="大图地址" href=""><img width="100" height="100" alt="" src="缩略图地址"></a></li>
</ul>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var gallery_list = $('ul.J_gallery_list');
	if(gallery_list.length && !designing) {
		Wind.use('gallerySlide', function(){
			gallery_list.gallerySlide();
		});
	}
});

.region(options)

地区选择

参数

options.type:类型。'region':地区选择(默认),'school'学校选择

示例

需要GV.URL.REGION的数据接口

代码

html

<div class="J_region_set">
	<span class="J_region_list">
		<span class="J_province"></span> <span class="J_city"></span> <span class="J_district"></span>
	</span>
	<a class="J_region_change" href="" data-did="" data-cid="" data-pid="">更改</a>
	<input type="hidden" value="" name="location" class="J_areaid">
</div>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var region_set = $('.J_region_set');
	if(region_set.length) {
		Wind.use('region', function(){
			$('a.J_region_change').region();
		});
	}
});

school

学校选择,基于.region()

示例

需要GV.URL.REGIONGV.URL.SCHOOL的数据接口

代码

html

<input type="text" placeholder="大学" class="J_plugin_school" data-rank="province" data-typeid="3">
<input type="hidden" value="" name="">

<input type="text" placeholder="中学&小学" class="J_plugin_school" data-rank="" data-typeid="">
<input type="hidden" value="" name="">

js

Wind.use('jquery', 'region', 'school', function(){
	$('input.J_plugin_school').region({
		type : 'school'
	});
});

.tabs()

tab选项卡

示例

选项卡1的内容
选项卡2的内容
选项卡3的内容

代码

html
<div class="J_tab_wrap">
	<div class="nav">
		<ul class="cc J_tabs_nav">
			<li><a href="#">选项卡1</a></li>
			<li><a href="#">选项卡2</a></li>
			<li><a href="#">选项卡3</a></li>
		</ul>
	</div>
	<div class="J_tabs_ct">
		<div class="p10">选项卡1的内容</div>
		<div class="p10">选项卡2的内容</div>
		<div class="p10">选项卡3的内容</div>
	</div>
</div>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var tab_wrap = $('.J_tab_wrap');
	if(tab_wrap.length) {
		Wind.use('tabs', function(){
			tab_wrap.each(function(){
				$(this).find('.J_tabs_nav').first().tabs($(this).find('div.J_tabs_ct').first().children('div'));
			});
		});
	}
});

.textCopy()

代码复制(基于zeroClipboard插件)

示例

代码

html

<input type="text" value="http://www.phpwind.net/" class="input length_6 mr5" id="J_clipboard_invite">
<a data-rel="J_clipboard_invite" href="javascript:;" class="btn J_clipboard_input">复制链接</a>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var clipboard_input = $('a.J_clipboard_input'); //复制按钮
	if(clipboard_input.length) {
		if(!$.browser.msie && !Wind.Util.flashPluginTest(9)) {
			if(confirm('您的浏览器尚未安装flash插件,代码复制不可用!点击确定下载')) {
				location.href = 'http://get.adobe.com/cn/flashplayer/';
			};
			return;
		}
		
		Wind.use('textCopy', function() {
			for(i=0, len=clipboard_input.length; i<len; i++) {
				var item = $(clipboard_input[i]);
				item.textCopy({
					content : $('#' + item.data('rel')).val()
				});
			}
		});
	}
});

.uploadPreview()

input:file图片上传预览(不支持IE)

示例

代码

html

<input name="" type="file" class="J_upload_preview">

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	if($("input.J_upload_preview").length) {
		Wind.use('uploadPreview',function() {
			$("input.J_upload_preview").uploadPreview();
		});
	}
});

.ajaxBtnDisable(btn), ajaxBtnEnable(btn, disabled)

ajaxBtnDisable:显示提交按钮为“**中...”并disabled;

ajaxBtnEnable:恢复为提交状态;

参数

ajaxBtnEnable(elem, 'disabled'):按钮默认为disabled状态

示例

代码

html

<button class="btn" id="J_ajaxBtnDisable" type="submit">提交</button>

js

Wind.use('jquery', 'global', function(){
	$('#J_ajaxBtnDisable').on('click', function(e){
		e.preventDefault();
		var $this = $(this);
		Wind.Util.ajaxBtnDisable($this);

		setTimeout(function(){
			Wind.Util.ajaxBtnEnable($this);
		}, 3000);
	});
});

.ajaxConfirm(options)

所有需要二次确认ajax提交操作(如删除),会调用Wind.dialog.confirm

示例

我是一条记录 (删除)

代码

html

<p>我是一条记录 (<a href="" id="J_ajaxConfirm">删除</a>)</p>

js

Wind.use('jquery', 'global', function(){
	$('#J_ajaxConfirm').on('click', function(e){
		e.preventDefault();
		var $this = $(this);
		
		Wind.Util.ajaxConfirm({
			elem : $this,
			href : this.href,
			msg : '真的删了噢?',
			callback : function(){
				//删除后回调
			}
		});
	});
});

.ajaxMaskShow(zindex)

显示ajax操作遮罩提示,如果有div#J_header会判断定位于其下方

参数

zindex:遮罩z值,默认12

示例

代码

html

<a href="" id="J_ajaxMaskShow">关注我</a>

js

Wind.use('jquery', 'global', function(){
	var timer;
	$('#J_ajaxMaskShow').on('click', function(e){
		e.preventDefault();
		var $this = $(this);
		Wind.Util.ajaxMaskShow();
		clearTimeout(timer);

		timer = setTimeout(function(){
			$('#J_ajaxmask').remove();
			$this.replaceWith('已关注');
		}, 3000);
	});
});

.ajaxTempError(data, follow, zindex)

ajax请求html模板报错判断,返回true则表示请求出错

参数

data:html返回的模板数据,请求失败则返回通用错误模板error.htm

follow:气泡提示的跟随显示元素

zindex:提示气泡z值,默认为css设置

示例

代码

html

<button class="btn" id="J_ajaxTempError">提交</button>

js

Wind.use('jquery', 'global', function(){
	$('#J_ajaxTempError').on('click', function(e){
		e.preventDefault();
		var $this = $(this),
			data = '<div class="reg_cont_wrap"><div class="reg_message reg_ignore"><ul class="mb10 f14">\
			<li id="J_html_error">操作失败</li>\
		</ul><div class="error_return"><a href="javascript:window.history.go(-1);">返回上一页</a> 或者 <a href="http://dev.wekit.net">回到首页</a></div></div></div>';

		if(Wind.Util.ajaxTempError(data, $this)) {
			//请求错误
			return;
		}
	});
});

.buttonStatus(input, btn)

按钮可用&不可用状态切换

参数

input:输入框(支持textarea

btn:按钮

示例

代码

html

<input id="J_buttonStatus_input">
<button class="btn" id="J_buttonStatus_btn">提交</button>

js

Wind.use('jquery', 'global', function(){
	Wind.Util.buttonStatus($('#J_buttonStatus_input'), $('#J_buttonStatus_btn'));
});

.clickToggle(options)

点击显示/隐藏列表

参数

options.elem:点击元素

options.list:隐藏元素

options.callback:显示后回调

options.callbackHide:隐藏后回调

示例

点我

代码

html

<a id="J_clicktoggle_me" href="#" style="width:50px;">点我</a>
<div id="J_clicktoggle_list" style="display:none;width:200px;" class="core_pop_wrap">
	<div class="core_pop">出现啦<br>出现啦<br>出现啦</div>
</div>

js

Wind.use('jquery', 'global', function(){
	Wind.Util.clickToggle({
		elem : $('#J_clicktoggle_me'),
		list : $('#J_clicktoggle_list'),
		callback : function(elem, list){
			list.css({
				left : elem.offset().left,
				top : elem.offset().top + elem.height()
			});
		}
	});
});

.cookieGet(name), cookieSet(name,value,days,domain)

获取/设置cookie值

参数

name:cookie名称

value:cookie值

days:有效期

domain:域

代码

html

<p><a id="J_cookieSet" href="#">设置cookie</a></p>
<p><a id="J_cookieGet" href="#">获取cookie值</a></p>

js

Wind.use('jquery', 'global', function(){
	$('#J_cookieSet').on('click', function(e){
		e.preventDefault();
		Wind.Util.cookieSet('test', 'hello', null, document.domain);
		Wind.dialog.alert('设置成功');
	});

	$('#J_cookieGet').on('click', function(e){
		e.preventDefault();
		Wind.dialog.alert('cookie名test<br>cookie值'+ Wind.Util.cookieGet('test'));
	});
});

.ctrlEnterSub(elem, btn)

ctrl+enter 提交表单

参数

elem:输入元素

btn:提交按钮

示例

代码

html

<p><textarea id="J_ctrlEnterSub_ta">按下ctrl+enter试试</textarea></p>
<p><button id="J_ctrlEnterSub_btn" class="btn">提交</button></p>

js

Wind.use('jquery', 'global', function(){
	$('#J_cookieSet').on('click', function(e){
		e.preventDefault();
		Wind.Util.cookieSet('test', 'hello', null, document.domain);
		Wind.dialog.alert('设置成功');
	});

	$('#J_cookieGet').on('click', function(e){
		e.preventDefault();
		Wind.dialog.alert('cookie名test<br>cookie值'+ Wind.Util.cookieGet('test'));
	});
});

.formBtnTips(options)

表单提交反馈提示(提交按钮旁显示)。

参数

options.error:是否失败(默认:false,否)

options.wrap:提示容器(按钮父标签)

options.msg:提示信息

options.callback:提交成功后回调

示例

代码

html

<form id="J_formBtnTips_form">
	<textarea>试试点击下面提交</textarea>
	<div><button id="J_formBtnTips_btn" type="submit" class="btn">提交</button></div>
	<input type='hidden' name='csrf_token' value='7b42c011e5c11033'/>
</form>

js

Wind.use('jquery', 'global', function(){
	$('#J_formBtnTips_form').on('submit', function(e){
		e.preventDefault();
		Wind.Util.formBtnTips({
			error : true,
			wrap : $('#J_formBtnTips_btn').parent(),
			msg : '这里显示出错信息'
		});
	});
});

.getVerifyTemp(options)

获取验证码模板(非弹窗)。

参数

options.wrap:验证码容器

options.afterClick:点击“换一个”后回调

示例

需要请求 GV.URL.VARIFY 接口

代码

html

<form>
	<textarea>页面载入后加载验证码</textarea>
	<div>
		<input placeholder="请输入验证码" class="input" type="text">
		<div id="J_verify_code"></div>
		<button class="btn" type="submit">提交</button>
	</div>
</form>

js

Wind.use('jquery', 'global', function(){
	//global.js
	var verify_code = $('#J_verify_code');
	if(verify_code.length) {
		Wind.Util.getVerifyTemp({wrap : verify_code});
	}
});

.hoverToggle(options)

鼠标hover元素时显示/隐藏另一个元素。

参数

options.elem:hover元素

options.list:隐藏元素

options.delay:显示延时(毫秒),默认200

示例

hover我

代码

html

<div id="J_hovertoggle_me" style="width:50px;">hover我</div>
<div id="J_hovertoggle_list" style="display:none;width:200px;" class="core_pop_wrap">
	<div class="core_pop">出现啦<br>出现啦<br>出现啦</div>
</div>

js

Wind.use('jquery', 'global', function(){
	Wind.Util.hoverToggle({
		elem : $('#J_hovertoggle_me'),
		list : $('#J_hovertoggle_list'),
		delay : 300
	});
});

.reloadPage(win)

强制刷新页面

参数

win:窗口对象

代码

html

<a href="" id="J_reloadPage">点我强制刷新页面</a>

js

Wind.use('jquery', 'global', function(){
	$('#J_reloadPage').on('click', function(e){
		e.preventDefault();
		Wind.Util.reloadPage(window);
	});
});

.resultTip(options)

操作通用小气泡提示

参数

options.error:是否错误,默认否 false

options.msg:提示内容

options.follow:跟随显示的元素

options.zindex:z值,默认10

options.callback:回调

代码

html

<p><a href="" id="J_resultTip_right">正确提示</a></p>
<p><a href="" id="J_resultTip_error">错误提示</a></p>

js

Wind.use('jquery', 'global', function(){
	$('#J_resultTip_right').on('click', function(e){
		e.preventDefault();
		var $this = $(this);
		
		Wind.Util.resultTip({
			msg : '这是正确提示',
			follow : $(this)
		});
	});

	$('#J_resultTip_error').on('click', function(e){
		e.preventDefault();
		var $this = $(this);

		Wind.Util.resultTip({
			error : true,
			msg : '这是错误提示',
			follow : $(this)
		});
	});
});

.showVerifyPop(subButton)

获取验证码弹窗模板(如发帖页),显示验证码的部分会调用Wind.Util.getVerifyTemp()

参考

subButton:提交按钮

示例

代码

html

<form id="J_showVerifyPop_form">
	<textarea>点击提交,弹出验证码</textarea>
	<div><button class="btn" type="submit" id="J_showVerifyPop_btn">提交</button></div>
</form>

js

Wind.use('jquery', 'global', function(){
	$('#J_showVerifyPop_form').on('submit', function(e){
		e.preventDefault();
		if(Wind.Util.showVerifyPop($('#J_showVerifyPop_btn'))) {
			//提交前验证码判断 未通过
			return;
		}

		$(this).find('textarea').val('已验证通过');
	});
});

.popPos(wrap)

弹窗居中定位显示(如果是显示插入dom或请求获取的html,建议使用Wind.dialog组件)

参考

wrap:弹窗容器

示例

显示弹窗

代码

html

<a href="" id="J_popPos_show" class="btn">显示弹窗</a>
<div style="display:none;position:absolute;width:200px;" class="wind_dialog core_pop_wrap" id="J_popPos_pop">
	<div class="pop_top J_pop_handle"><strong>弹窗</strong></div>
	<div class="pop_cont">我是一个弹窗</div>
	<div class="pop_bottom"><button class="btn btn_submit" type="button" id="J_popPos_close">关闭</button></div>
</div>

js

Wind.use('jquery', 'global', function(){
	$('#J_popPos_show').on('click', function(e){
		e.preventDefault();
		Wind.Util.popPos($('#J_popPos_pop'));
	});

	$('#J_popPos_close').on('click', function(e){
		e.preventDefault();
		$('#J_popPos_pop').hide();
	});
});

.postTip(options)

发送信息的提示(如快速发帖、消息窗私信)

参数

options.elem:定位元素

options.msg:提示信息

options.zindex:z值

options.callback:回调

示例

代码

html

<form id="J_postTip_form">
	<textarea style="width:500px;height:50px;border:1px solid #ccc;">试试点击下面的提交</textarea>
	<div><button class="btn" type="submit">提交</button></div>
</form>

js

Wind.use('jquery', 'global', function(){
	$('#J_postTip_form').on('submit', function(e){
		e.preventDefault();
		var ta = $(this).find('textarea');
		Wind.Util.postTip({
			elem : ta,
			msg : '提示信息',
			callback : function(){
				ta.val('你已经提交过了');
			}
		});
	});
});

.quickLogin(referer)

快捷登录弹窗

参数

referer:登录后的跳转地址,默认空(刷新页面)

示例

需要请求GV.URL.QUICK_LOGIN接口

代码

html

<a href="" class="J_qlogin_trigger">我的关注</a>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	if(!GV.U_ID) {
		$(document).on('click', 'a.J_qlogin_trigger, button.J_qlogin_trigger', function(e){
			e.preventDefault();
			var referer = $(this).data('referer');					//登录后跳转还是刷新
			Wind.Util.quickLogin(referer ? this.href : '');
		});
	}
});

小名片

调用的标签上要输出data-uid或者data-username

示例

小鸡爷爷

(静态数据)

代码

html

<a href="小名片模板接口地址" data-uid="292" class="J_user_card_show">小鸡爷爷</a>

<div id="J_user_card_292" class="pop_card J_pop_card" style="display:none;">
	…请求来的小名片模板…
</div>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var user_card_show = $('a.J_user_card_show');
	if(user_card_show.length) {
		Wind.js(GV.JS_ROOT+ 'pages/common/userCard.js?v=' + GV.JS_VERSION);
	}
});

写私信&发消息

调用的标签上需要输出data-name

示例

需要弹窗的模板接口地址

代码

html

<a data-name="admin" class="J_send_msg_pop" href="模板接口地址" rel="nofollow">写私信</a>

js

Wind.use('jquery', 'global', function(){
	//代码来自global.js
	var send_msg_btn = $('a.J_send_msg_pop');
	if(send_msg_btn.length && GV.U_ID && !designing) {
		Wind.js(GV.JS_ROOT+ 'pages/common/sendMsgPop.js?v='+ GV.JS_VERSION);
	}
});

生成用户标签input

示例

    代码

    html

    <div class="user_select_input cc J_user_tag_wrap">
    	<ul class="fl J_user_tag_ul"></ul>
    	<input type="text" data-name="生成input的name" class="J_user_tag_input">
    </div>
    

    js

    Wind.use('jquery', 'global', function(){
    	//代码来自global.js
    	if ($('.J_user_tag_wrap').length && !designing) {
    		Wind.js(GV.JS_ROOT+ 'pages/common/userTag.js?v=' + GV.JS_VERSION);
    	}
    });
    

    插入表情

    示例

    选择表情

    需要GV.URL.EMOTIONS的表情数据接口,此处为静态数据

    代码

    html

    <textarea class="textarea" id="J_emotions_ta"></textarea>
    <a data-emotiontarget="#J_emotions_ta" class="a_face J_insert_emotions" href="">选择表情</a>
    
    <div class="core_menu pop_show_mini" style="display:none;" id="J_emotions_pop">
    ……表情html
    </div>
    

    js

    Wind.use('jquery', 'global', function(){
    	//代码来自global.js
    	var insert_emotions = $('a.J_insert_emotions');
    	if(insert_emotions.length) {
    		Wind.js(GV.JS_ROOT+ 'pages/common/insertEmotions.js?v='+ GV.JS_VERSION, function(){
    			insert_emotions.on('click', function(e){
    				e.preventDefault();
    				insertEmotions($(this), $($(this).data('emotiontarget')));
    			});
    		});
    	}
    });