常用组件

更新时间：2015/09/18 访问次数：88270

HTML编辑器
瀑布流
图片轮播组件示例
日历选择组件
简单图片缩放组件
开关灯组件
添加旺旺组件
淘宝地方数据三级联动组件
延迟加载组件
迷你登录框组件
SNS相关组件

HTML编辑器

实现html editor可以直接使用U站的官方组件。不需要写javascript，直接使用以下代码就能在自己的页面中嵌入editor组件。

在页面上添加class为kg_editorContainer的div，div包含class为ks-editor-textarea的textarea即可。 HTML代码：

<div class="kg_editorContainer"   data-config='{"width" : "你的组件宽度" , "height": "你的组件高度" }'>
<textarea name='content' class="ks-editor-textarea" tabindex="0" style="width:733px;height: 400px;">           
在这里编辑
</textarea>
</div>

其中textarea的class属性不可以修改，其他的属性和里面的内容都可以修改。（name可以修改成你要提交的参数名)

通过定义class为kg_editorContainer div的data-config属性可以定义编辑器的高度和宽度属性

data-config : {

"width" : "你的组件宽度" ,

"height": "你的组件高度"

}

效果如下所示：

瀑布流

瀑布流组件的Demo地址：http://uzappfunctiontest.uz.taobao.com/view/js/hand/waterfallStream.php?spm=0.0.0.0.QQreax

实现以上地址中的功能需要以下代码。

HTML代码：

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</p>

</div>

js代码：

图片轮播组件示例

由于tae做了安全上的控制，过滤了图片轮播组件，这里写了一个demo，以供大家参考。
图片轮播的Demo地址：http://taedemo.uz.taobao.com/d/swtich?spm=0.0.0.0.SXrmVE

1.html 代码：
<script src="/assets/javascripts/switch.js"></script>
<div class="banner">
    <div class="banner_bg"></div> 
    <a href="#" class="banner_info"></a> 
    <ul class="list"></ul>
   <div class="banner_list">
        <a href="#" target="_blank"><img src="/assets/images/p1.jpg" title="图片轮播1"
        alt="图片轮播" /></a>
        <a href="#" class="in" target="_blank"><img src="/assets/images/p2.jpg"
        title="图片轮播2" alt="图片轮播" ></a>
        <a href="#" class="in" target="_blank"><img src="/assets/images/p3.jpg"
        title="图片轮播3" alt="图片轮播" /></a>
        <a href="#" class="in" target="_blank"><img src="/assets/images/p4.jpg"
        title="图片轮播4" alt="图片轮播" /></a>
    </div>
</div>

2.js脚本

/**************************************************

* 用法：

*count:图片数量，

*wrapId:包裹图片的DIV的className

*ulId:按钮DIV class,

*infoId：信息栏

*stopTime：每张图片停留的时间

*SWTICH.scroll(count,wrapId,ulId,infoId,stopTime);

**************************************************/

var DOM = KISSY.DOM ;

var Anim = KISSY.Anim ;

var SWTICH = function() {

function id(name) {return DOM.query("."+name)[0];}

//遍历函数

function each(arr, callback, thisp) {

if (arr.forEach) {

arr.forEach(callback, thisp);

} else {

for (var i = 0, len = arr.length; i < len; i++)

callback.call(thisp, arr[i], i, arr);

}

function fadeIn(elem) {

DOM.removeClass(elem,"in");

var anim;

if(anim){

anim.stop();

}

// 启动动画

anim=Anim(elem,{filter:"alpha(opacity=1)",opacity:"1"});

anim.run();

}

function fadeOut(elem) {

var anim;

if(anim){

anim.stop();

}

// 启动动画

anim=Anim(elem,{filter:"alpha(opacity=0)",opacity:"0"});

anim.run();

DOM.addClass(elem,"in");

}

return {

//count:图片数量,wrapId:包裹图片的DIV,ulId:按钮DIV,infoId：信息栏，

//stopTime：每张图片停留的时间

scroll : function(count,wrapId,ulId,infoId,stopTime) {

var self=this;

var targetIdx=0;

//目标图片序号

var curIndex=0;

//现在图片序号

//添加Li按钮

var frag=document.createDocumentFragment();

console.log(frag);

this.num=[];

//存储各个li的应用，为下面的添加事件做准备

this.info=id(infoId);

for(var i=0;i<count;i++){

(this.num[i]=frag.appendChild(document.createElement("li"))).innerHTML=i+1;

}

console.log(id(ulId));

id(ulId).appendChild(frag);

//初始化信息

this.img = id(wrapId).getElementsByTagName("a");

this.info.innerHTML=self.img[0].firstChild.title;

this.num[0].className="on";

//设置banner_bg为透明

var banAnim=Anim(id("banner_bg"),{filter:"alpha(opacity=0.3)",opacity:"0.3"},0.01);

banAnim.run();

//将除了第一张外的所有图片设置为透明

each(this.img,function(elem,idx,arr){

if (idx!=0) {

DOM.addClass(elem,"in");

var anim;

if(anim){

anim.stop();

}

// 启动动画

anim=Anim(elem,{filter:"alpha(opacity=0)",opacity:"0"},0.01);

anim.run();

DOM.addClass(elem,"in");

}

});

//为所有的li添加点击事件

each(this.num,function(elem,idx,arr){

elem.onclick=function(){

self.fade(idx,curIndex);

curIndex=idx;

targetIdx=idx;

}

});

//自动轮播效果

var itv=setInterval(function(){

if(targetIdx<self.num.length-1){

targetIdx++;

}else{

targetIdx=0;

}

self.fade(targetIdx,curIndex);

curIndex=targetIdx;

},stopTime);

id(ulId).onmouseover=function(){ clearInterval(itv)};

id(ulId).onmouseout=function(){

itv=setInterval(function(){

if(targetIdx<self.num.length-1){

targetIdx++;

}else{

targetIdx=0;

}

self.fade(targetIdx,curIndex);

curIndex=targetIdx;

},stopTime);

}

fade:function(idx,lastIdx){

if(idx==lastIdx) return;

var self=this;

fadeOut(self.img[lastIdx]);

fadeIn(self.img[idx]);

each(self.num,function(elem,elemidx,arr){

if (elemidx!=idx) {

self.num[elemidx].className='';

}else{

id("list").style.background="";

self.num[elemidx].className='on';

}

});

this.info.innerHTML=self.img[idx].firstChild.title;

}

}();

SWTICH.scroll(4,"banner_list","list","banner_info",4000);

3.CSS

/**

swtichable css

**/

.taeapp .banner {position:relative; width:478px; height:286px;

border:1px solid #666; overflow:hidden;}

.taeapp .banner_list img {border:0px;}

.taeapp .banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter:Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px; }

.taeapp .banner_info{position:absolute; bottom:0; left:5px; line-height:30px;color:#fff;z-index:1001}

.taeapp .banner_text {position:absolute;width:120px;z-index:1002; right:3px;bottom:3px;}

.taeapp .banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=75);opacity:0.75; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;}

.taeapp .banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#fff 1px solid;background-color:#6f4f67;cursor:pointer}

.taeapp .banner ul li.on{ background-color:#900}

.taeapp .banner_list a{position:absolute;}

.taeapp .banner_list a.in{opacity:0;}

日历选择组件

实现日历选择组件可以直接使用U站的官方组件。

在页面上添加class为kg_datePicker的input即可。 html例子

<ul>

<li><strong>机票出发/返程日期选择</strong></li>

组件里面的data-config为json格式的字符串，具体的参数配置如下。

配置参数
date

概述

(默认值：当前日期) 日历初始日期

类型

Date String (日期字符串：2012-11-12)

count

概述

(默认值：2) 日历个数

类型

Number

selectedDate

概述

(默认值：空) 选择的日期

类型

String

minDate

概述

(默认值：null) 允许操作的最小日期

类型

String (日期字符串:2011-11-11)

maxDate

概述

(默认值：null) 允许操作的最大日期

类型

Date (日期对象) 或 String (日期字符串)

startDate

概述

(默认值：空) 开始时间

类型

String (日期字符串)

endDate

概述

(默认值：空) 结束时间

类型

String (日期字符串)

afterDays

概述

(默认值：0) 等价于设置minDate和maxDate，minDate未设置时取当前日期

类型

Number

message

概述

        (默认值：空) 提示信息
    类型
        String

triggerNode

概述

(默认值：空) 触发节点，支持批量设置，用半角逗号分隔。弹出式日历必选配置。例('#ID, .className, ...')

类型

String

finalTriggerNode

概述

(默认值：空) 最后触发节点，用于选择起始时间和结束时间互动，支持批量设置，用半角逗号分隔。例('#ID,.className, ...')

类型

String

finalTriggerMinDate

概述

最后触发节点的最小日期

类型

String : 2011-11-11

finalTriggerAfterDays

概述

(默认值：0) 等价于设置minDate和maxDate，设置最后触发节点的最多天数

类型

Number

isSelect

概述

(默认值：false) 是否开启下拉列表选择日期，如果开启，日历个数限制为1

类型

Boole

isDateInfo

概述

(默认值：true) 是否显示日期信息

类型

Boole

isDateIcon

概述

(默认值：true) 是否显示日期图标

类型

Boole

isHoliday

概述

(默认值：true) 是否显示节假日信息

类型

Boole

简单图片缩放组件

设置父容器的class为kg_imgBox,img标签class为kg_imgDD即可

如下所示：
<div class="kg_imgBox">
<img class="kg_imgDD" src="https://img.alicdn.com/imgextra/i1/10361016579368429/T1zbCTXfdmXXXXXXXX_!!413810361-0-tstar.jpg_290x10000.jpg" data-original-url="https://img.alicdn.com/imgextra/i1/10361016579368429/T1zbCTXfdmXXXXXXXX_!!413810361-0-tstar.jpg">
风要吹时
<img class="kg_imgDD" src="http://img04.taobaocdn.com/imgextra/i4/10361016579292275/T1RIGTXXBkXXXXXXXX_!!413810361-0-tstar.jpg_290x10000.jpg" data-original-url="https://img.alicdn.com/imgextra/i4/10361016579292275/T1RIGTXXBkXXXXXXXX_!!413810361-0-tstar.jpg">
<img class="kg_imgDD" src="http://img03.taobaocdn.com/imgextra/i3/10361018904480015/T1EGqnXap7XXXXXXXX_!!413810361-0-tstar.jpg_290x10000.jpg" data-original-url="http://img02.taobaocdn.com/imgextra/i3/10361018904480015/T1EGqnXap7XXXXXXXX_!!413810361-0-tstar.jpg">
</div>

开关灯组件

设置想要突出的标签class为kg_expose
在data-config属性以json格式配置背景颜色和透明度

 <div class="s-demo">
        <div class="kg_expose"
             data-config='{"bgcolor": "#000", "expose_trigger" : "kg_expose_trigger", "opacity": 0.8}'>
            <div class="item kg_expose_trigger"><input type="text" name="name" value="您的名字" class="input"/></div>
            <div class="item kg_expose_trigger"><textarea class="input">您的评论</textarea></div>
            <div class="ft">
                <button type="button">发表评论</button>
            </div>
        </div>
    </div>

添加旺旺组件

<span class="J_WangWang" data-icon="small" data-nick="梓晗"></span>

淘宝地方数据三级联动组件

必须设置第一个select标签的class为kg_province
然后在data-config使用json格式配置son和grandson对应的class即可

<h3 style="font-size:22px;border-bottom:1px solid #000; margin-bottom:15px">地址三级联动</h3>
<div class="section">
    <h4>淘宝官方省市区数据</h4>
    <select class="kg_province" data-config='{"son" : "kg_province2", "grandson" : "kg_province3"}'></select>
    <select class="kg_province2"></select>
    <select class="kg_province3"></select>
</div>

延迟加载组件

对于一个图片很多的站点，图片的延时加载可以很大地提升网页的加载速度。隆重推荐大家使用kissy的延迟加载组件，用以提升网站的加载速度。
同时，有效地压缩图片和合并小图片也可以很大地提升网站的访问速度，建议大家双管齐下。如何压缩可以百度哦。

图片的延迟加载
把图片的src属性去掉，替换成data-ks-lazyload属性，比如：
<img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/10361016579292275/T1RIGTXXBkXXXXXXXX_!!413810361-0-tstar.jpg_290x10000.jpg">

迷你登录框组件

/** 弹出mini登录框
* 钩子名称J_TB_Login
* 指定data-location登陆成功后跳转页面必须是uz的域名, 这个地方可以不填
*/

<input type="button" value="login" class="J_TB_Login" data-location="http://uzblog.uz.taobao.com/index.php?
spm=a2116.3036013.0.0.Yn21y0&nocache=1&m=Index&a=view&id=52">

SNS相关组件

sns关注组件
custom设置成87,userid要自己想办法获取，我们不会提供的。。你懂的。。。
<div class="sns-widget" data-friendfollow='{"userId":"738050584", "custom":"type=87"}'></div>
过段时间sns会提供直接使用旺旺名的关注组件，不过因为他们开发人手不够暂时搁置。

sns其他组件

FAQ

关于此文档暂时还没有FAQ

有用(4) 我要提问

开放平台

淘宝达人

常用组件

HTML编辑器

瀑布流

图片轮播组件示例

日历选择组件

简单图片缩放组件

开关灯组件

添加旺旺组件

淘宝地方数据三级联动组件

延迟加载组件

迷你登录框组件

SNS相关组件

sns其他组件

FAQ