热门搜索：
该多好多好的规定
对诺贝尔物理学奖获得者的统计与分析_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
2页¥1.0010页免费27页免费6页¥2.006页免费 4页免费2页免费1页免费8页1下载券67页1下载券
喜欢此文档的还喜欢4页1下载券8页免费24页免费7页免费43页免费
对诺贝尔物理学奖获得者的统计与分析|对​诺​贝​尔​物​理​学​奖​获​得​者​的​统​计​与​分​析
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢代码规范指南
模板编写规范
出自淘宝网店铺开发者WIKI
对于一个设计师的页面来说，在淘宝上呈现的页面结构如下：
基于这样的页面结构：
淘宝要提供一个页面的框架，也就是页面的Layout，设计师设计的页面是Layout中的一部分，如在下面的位置：
&div id=&content&&&/div&
模板必需提供全局的CSS，Header和Footer，在任何一个设计的页面都会包含这三者。
3. CSS，Header和Footer还会被淘宝其他页面所使用，如评级、店铺留言等。
4. 页面包含模块，一部分模块是支持交互的，也就是卖家可以录入一些参数来改变模块的呈现
基于这个考虑，模板需要一个全局的配置文件，也就是site.xml，该文件包含了模块的详细信息，由于页面还可能涉及到模块，所以我们还要对各个模块进行定义，模块同时也是代码复用的基本单元，模块的配置文件为module.xml。
模板目录结构
模板目录结构是指模板各个资源目录划分，如下图：
目前主要分为已下记录类：
静态资源：都存放在assets目录，同时包括images和stylesheets两个子目录，静态资源引用需要以相对路径为准。另外本次升级新增加了extra.css文件，此文件可以设置页头和页面背景等。
模板文件：也就是模板文件，后缀名为.php或者.vm，依据所选择的模板语言，模板文件包括全局头，全局尾和各个文件的主体。页面文件不能形成子目录。
模块文件：不能包含其他资源文件，如果包含其他资源文件，需要来自淘宝相册的服务，模块主要就是模块的配置文件和其模块主体文件。所有模块都存放于modules目录下，系统模块名为taobao.module.xxx，设计师模块名由设计师随意定义，每个模块下存放对应模块的images/scripts/stylesheets。
元信息文件：如xml文件，screenshot文件等，模板为site.xml，模块为module.xml
在SDK中，htdocs可以同时包括多个模板，以不同的目录加以区分，SDK会自动识别这些模板并进行管理，如样例中的template1是模板的名称。
在htdocs的根目录下有一个dcsdk_functions.php的文件，所有SDK提供的函数都会在这里列出；还有一个site.xsd，这个是site.xml的xml
schema文件，主要是辅助进行site.xml编辑。
模板描述符文件详解
模板是超级旺铺的基础，主要是模板、模板版本、配置和资源这四项，每一个模板都有一个名称为site.xml的描述文件，包含一下信息：
基本信息：如模板语言、名称、描述、作品截图、作者、支持的网站、服务方式等
模板全局信息：如全局css，全局的页面header和footer等
风格信息：模板所包含的风格，都要在&styles&元素下进行声明
页面信息：一个模板包含多个页面，每一个页面的具体功能要说明清楚，如店铺的模板页面，那个是首页，那个是详情页等，都需要进行描述
模块信息：该模板所包含的模块以及各个模块的详细信息
参数信息：如果模板、页面和模块需要参数，这个参数是什么类型的，form该如何交互，这些也需要明确
此处发生细微变动，添加了themes、theme标签
&?xml version=&1.0& encoding=&GBK&?&
&site version=&1&&
&!—模板标识由系统自动生成 --&
&id& 2cddbab1e4115dac7facf3&/id&
&!—模板名称--&
&name&模板-1&/name&
&!—设计师信息--&
&author wangwang=&XX& url=&&&Jacky&/author&
&!—模板缩略图--&
&thumbnail&assets/images/frontpage.png&/thumbnail&
&!—模板语言--&
&language&php&/language&
&!—模板版本--&
&version&&/version&
&!—修改日志--&
&change-notes&
change log
&/change-notes&
&!—模板描述，不要超过100个字--&
&description&
description here
&/description&
&!—模板全局信息--&
&!—模板头部--&
&header&header.php&/header&
&!—模板尾部--&
&footer&footer.php&/footer&
&!—模板全局CSS文件--&
&css&assets/stylesheets/global.css&/css&
&!--新添加了theme标签 用于标示皮肤风格--&
&themes default=&red&&
&theme name=&default&&
&css&themes/default/extra.css&/css&
&rule&themes/default/default.json&/rule&
&theme name=&red&&
&css&themes/red/extra.css&/css&
&rule&themes/red/red.json&/rule&
&!—模板风格--&
&!—风格名称--&
&name&green&/name&
&!—风格缩略图--&
&thumbnail&assets/images/green.jpg&/thumbnail&
&!—风格CSS文件--&
&css&/assets/stylesheets/green.css&/css&
&!—模板参数信息--&
&parameters&
&param name=&demo& description=&只读属性-1& readonly=&true&&demo&/param&
&param name=&theme& description=&主题风格&&green&/param&
&/parameters&
&!—模板页面--&
&page type=&index&&
&name&首页&/name&
&file&index.php&/file&
&parameters&
&param description=&标题&&untitled&/param&
&/parameters&
&page type=&detail&&
&name&宝贝详情页&/name&
&file&detail.php&/file&
&page type=&article&&
&name&文章页面&/name&
&file&article.php&/file&
&page type=&other&&
&name&促销页面&/name&
&file&onsale.php&/file&
出于XML编写的方便，SDK为site.xml提供了XSD，只需要一个XML
Editor就可以完成XML校验和相关的代码提示。
文件说明：此次升级主要是主要是把文件配置由原先的php变成了json，配置文件的相关内容请注意，此文件在创建模板的时候会自动生成。
在模板中的模块都是集中在模板标准目录的modules目录中，可先参看
此次升级的重大改变：页面文件由php变更为json。如果对json数据结果不太了解，请参考 此处请注意kv对的引号，建议用sdk工具生成此文件。
首先先看页面json结构如下：
{&title&:&index&,
&layouts&:[
&type&: &grid-m&,
&modules&:
{&col-main&:[
{&moduleID&:&cuxiao&,&moduleVersion&:&1.0.0&}
&type&: &grid-s5m0&,
&modules&:
{&col-sub&:[
{&moduleID&:&taobao.module.category&,&moduleVersion&:&1.0-common&}
],&col-main&:[
{&moduleID&:&taobao.module.navigator&,&moduleVersion&:&1.0-common&},
{&moduleID&:&taobao.module.searchInShop&,&moduleVersion&:&1.0-common&},
{&moduleID&:&cuxiao&,&moduleVersion&:&1.0.0&}
（1）index页面对象中包含两个键值对，title标示页面，layouts标示布局
（2）layouts数组中的每一个对象{}都为一种布局，type标示布局分类，具体布局分类如下
（3）type存在8种类型：
a) 通栏布局950：grid-m
b)两栏布局190-750：grid-s5m0
c) 两栏布局750-190：grid-m0s5
d)三栏布局190-190-550：grid-e5s5m0
e) 三栏布局190-550-190：grid-e5m0s5
f) 三栏布局550-190-190：grid-m0e5s5
g）头部：head
h）尾部：foot
（4）modules标示所有模块，每个模块存放在对应的坑中，例子有190-550-190布局
a) col-main 为中间550区域
b) col-sub 为左边190边栏区域
c) col-extra 为右边190边栏区域
根据需求，将模块放入不同区域内
1. 引入模块
模块有两种类型，分别是系统模块和设计师自定义模块，下面分别说明如何引入系统模块和设计师自定义模块：
& 引入系统模块
include_system_module(&shop.picRound&,&1.0-common&,100);
其中include_system_module需要三个参数，第一个为“系统模块简称”，第二个为“系统模块版本”，第三个为domId,这里需要注意的是domId需要在页面内唯一。
& 引入自定义模块
include_local_module(&textbox&,101);
其中include_local_module有两个参数，第一个”textbox”为模块的名称，第二个为domId,这里需要注意的是domId需要在页面内唯一。
2. 引入片区
片区是设计师在页面预留的一块区域，卖家可以在坑里添加模块，具体引入坑的语法如下：
&div id=& navigator&
class=& J_TRegion&&
$topList=array('shortname'=&'shop.topList','version'=&'1.0-common',domId=&001);
$selfModule=array('id'=&'selfModule','domId'=&'001');
$modules=array($topList, $selfModule);
echo include_modules(&testModules&, $modules)
echo include_system_module(&shop.searchInShop&,&1.0-common&,002)
其中include_modules包含两个参数，第一个参数是片区对应的名称,第二个参数是片区里面引入的默认模块列表。
引入片区需要注意以下几点：
片区需要通过“J_TRegion”这个class来标识.
2. 片区里面也可以引入系统模块和引入自定义模块
& “J_TRegion”外模块引用规范
高级模板支持“J_TRegion（坑，片区）”外的模块，但线上目前会存在“片区”外模块丢失的问题；此问题预计在4月中旬修复。
片区外的模块的支持，只限于支持单个引用,即只能使用include_system_module,
include_local_module进行单个模块引入。使用include_modules
引入的模块在编辑的时候将被丢失。如具体例子如下图所示：
& “J_Region内模块的引用支持单个模块和多个模块
但目前线上使用include_local_module,
include_system_module的进行单个引入的模块在编辑都会丢失。此故障预计4月中解决。
同时设计师不被鼓励将include_local_module,
include_system_module
与include_modules连续使用。设计师更应该遵守不连续使用include_modules的约定。所有连续使用这样的代码引入的模块都可能存在丢失或者莫名奇妙增加的问题。如下图所示
3. 模板中加入模块配置
设计师经常会遇到这样的问题：在模板挖了坑，但是没有办法控制坑中能够添加哪些模块。现在在SDK模板中加入了新的配置规则，允许设计师精确配置自己坑中所支持的模块。
示例配置如下：
&?xml version=&1.0& encoding=&GBK&?&
&site version=&1&&
&id&9bbc59be4f23ca37b6bcf7&/id&
&name&xiaohu&/name&
&author wangwang=&& url=&&&&/author&
&thumbnail&assets/images/frontpage.png&/thumbnail&
&language&php&/language&
&version&1.0.0&/version&
&apply-sites&3,7&/apply-sites&
&change-notes&
change log
&/change-notes&
&description&
description
&/description&
&parameters&
&param name=&demo& description=&只读属性-1& readonly=&true& ptype=&text& formType=&text& label=&label&&demo&/param&
&param name=&theme& description=&主题风格& ptype=&text& formType=&text& label=&label&&green&/param&
&/parameters&
&header&header.php&/header&
&footer&footer.php&/footer&
&css&assets/stylesheets/global.css&/css&
&styles default=&gray&&
&name&gray&/name&
&thumbnail&/assets/images/frontpage.png&/thumbnail&
&css&assets/stylesheets/gray.css&/css&
&module shortname=&shop.searchInShop& version=&1.0-common&/&
&module shortname=&shop.topList& version=&1.0-common&/&
&module shortname=&shop.friendLink& version=&1.0-common&/&
&/support&
&placeholder name=&head-modules&&
&module shortname=&shop.itemCategory& version=&1.0-common&/&
&/support&
&/placeholder&
&placeholder name=&foot-modules&&
&module shortname=&shop.fileList& version=&1.0-common&/&
&module id=&side_sales&/&
&/support&
&/placeholder&
&page type=&index&&
&name&首页&/name&
&file&index.php&/file&
&thumbnail&assets/images/index.png&/thumbnail&
&description&sjgjweogj&/description&
&placeholder name=&sub-modules&&
&module shortname=&shop.itemCategory& version=&1.0-common&/&
&module shortname=&shop.fileList& version=&1.0-common&/&
&module id=&side_help&/&
&module id=&side_sales&/&
&/support&
&/placeholder&
在site节点下的rules中配置通用的模块和头部尾部模块，在page节点下的rules中配置具体页面下坑中支持的模块。
通用模块的配置不需要指定坑的名称，头，尾，页面中的模块配置需要指定到页面中的具体的坑名。
具体坑中支持哪些模块的计算方式是，通用配置集合与当前坑模块集合的并集。
模块配置支持系统模块和设计师自定义的模块两种模块类类型。
4. 宝贝详情页设计
宝贝详情页和其他页面不同，主要是设计师不再是设计整个页面，而是设计局部页面，这个主要是出于买家的统一感受。对于宝贝详情页来说，配置信息如下：
这里需要设置一个宝贝详情文件名称，目前这个文件不需要设置任何内容，留空即可，但是一定需要一个文件，主要是URL定位和以后的扩展，还有你需要设置两个section，名称分别为left和right，不能更改这两个名称，然后是这两个section对应的php文件。如果你需要设计多个detail文件，需要在site.xml中声明，配置不同的信息即可。
PHP Lite引擎详解
SDK提供的PHP环境并不是原生的PHP，而是使用Java模拟PHP环境，最终是由Java来负责PHP的渲染。PHP
Lite是PHP的精简版，主要用于SDK上，其目的是为设计师提供PHP的设计环境，同时确保服务器端的安全。
Php lite限制
PHP-lite 对PHP的执行的一些限制：
& 循环次数限制:100次(如 foreach,for,do,while
等循环语句的循环限制,当超过100次,则立马就结束循环)
自定义方法嵌套调用层数限制:100次(主要是防范无限递归调用,当超过调用层数限制,直接抛出异常)
& 循环嵌套调用层数限制:4层
(无论何种循环,都不能连套超过限制数,否则直接抛出异常)
以上限制皆为默认值,可以通过taobao_quercus_config.properties来配置合适的限制值
Php lite函数白名单
提供了PHP内置函数的白名单如下:
.caucho.quercus.lib.ArrayModule
getLoadedExtensions
array_change_key_case
array_chunk
array_combine
array_count_values
array_key_exists
key_exists
array_keys
array_fill
array_flip
array_filter
array_product
array_push
array_rand
array_reduce
array_reverse
array_search
array_shift
array_slice
array_splice
spliceImpl
array_unique
array_unshift
array_values
array_walk
array_walk_recursive
natcasesort
array_diff
array_fill_keys
array_diff_assoc
array_diff_key
array_diff_uassoc
array_diff_ukey
array_intersect
array_intersect_assoc
array_intersect_key
array_intersect_uassoc
array_intersect_ukey
array_merge
array_merge_recursive
array_multisort
array_udiff
array_udiff_assoc
array_udiff_uassoc
array_uintersect
array_uintersect_assoc
array_uintersect_uassoc
.caucho.quercus.lib.ClassesModule
call_user_method
call_user_method_array
class_exists
get_called_class
get_class_methods
get_class_vars
get_declared_classes
get_object_vars
get_parent_class
interface_exists
is_subclass_of
method_exists
property_exists
.caucho.quercus.lib.CtypeModule
getLoadedExtensions
ctype_alnum
ctype_alpha
ctype_cntrl
ctype_digit
ctype_graph
ctype_lower
ctype_print
ctype_punct
ctype_space
ctype_upper
ctype_xdigit
.caucho.quercus.lib.date.DateModule
cal_days_in_month
easter_date
easter_days
gettimeofday
gmstrftime
gregoriantojd
date_create
date_date_set
date_default_timezone_get
date_default_timezone_set
date_format
date_isodate_set
date_modify
date_offset_get
date_parse
date_sun_info
date_sunrise
date_sunset
date_time_set
date_timezone_get
date_timezone_set
timezone_abbreviations_list
timezone_identifiers_list
timezone_name_from_abbr
timezone_name_get
timezone_offset_get
timezone_open
.caucho.quercus.lib.ErrorModule
getIniDefinitions
debug_backtrace
error_reporting
restore_error_handler
set_error_handler
set_exception_handler
restore_exception_handler
trigger_error
user_error
.caucho.quercus.lib.HtmlModule
get_html_translation_table
htmlspecialchars_decode
htmlspecialchars
htmlentities
html_entity_decode
.caucho.quercus.lib.json.JsonModule
getLoadedExtensions
json_encode
json_decode
.caucho.quercus.lib.MathModule
base_convert
is_infinite
getrandmax
mt_getrandmax
.caucho.quercus.lib.regexp.RegexpModule
getLoadedExtensions
ereg_replace
getRegexpCacheSize
setRegexpCacheSize
compileRegexp
createRegexp
createRegexp
createRegexpArray
createRegexpArray
createEreg
createEreg
createEregi
createEregi
createUnicodeEreg
createUnicodeEreg
createUnicodeEregi
createUnicodeEregi
preg_last_error
preg_match
preg_match_all
pregMatchAllPatternOrder
preg_quote
preg_replace
preg_replace
eregReplaceImpl
eregi_replace
preg_replace_callback
preg_replace_callback
preg_split
sql_regcase
.caucho.quercus.lib.string.StringModule
addslashes
addcslashes
chunk_split
convert_cyr_string
convert_uudecode
convert_uuencode
count_chars
localeconv
money_format
number_format
quoted_printable_decode
str_ireplace
str_repeat
str_replace
str_shuffle
str_word_count
strcasecmp
strip_tags
stripcslashes
stripslashes
strnatcasecmp
strncasecmp
strtolower
strtoupper
substr_compare
substr_count
substr_replace
.caucho.quercus.lib.VariableModule
debug_zval_dump
get_defined_vars
get_resource_type
import_request_variables
is_callable
is_integer
is_numeric
is_resource
var_export
unserialize
模块编写规范
模块描述符文件详解
模板页面中会包含模块，每一个模块都有一个名称为”module.xml”的描述符文件，包含以下信息：
1． 基本信息：名称、版本号、change
log，描述、示意图等
2． moudle配置信息：module的元素类型采用html
5中的数据类型，如url, email，number，text,textArea,
htmlArea等，这些类型同时包含基本的校验信息
3． 其他等
此处发生细微修改，请设计师认真阅读：
添加了themes、theme标签,详情如下：
&?xml version=&1.0& encoding=&GBK&?&
&!—模块ID--&
&id&textbox&/id&
&!—模块名称--&
&name&文本块&/name&
&!—模块文件--&
&file&textbox.php&/file&
&!—模块缩略图--&
&thumbnail&assets/images/textbox.png&/thumbnail&
&!—模块描述--&
&description xsi:type=&xs:string& xmlns:xs=&http://www.w3.org/2001/XMLSchema& xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&&模块简短描述文字&/description&
&!—是否开启缓存--&
&requiredCache&true&/requiredCache&
&supportedWidth&950&/supportedWidth&
&!-- 用于标示模块的皮肤 --&
&themes default=&default&&
&!-- 以当前模板作为根目录的地址 --&
&theme name=&default&&
&css&assets/stylesheets/default.css&/css&
&theme name=&red&&
&css&assets/stylesheets/red.css&/css&
&parameters&
&param name=&pic_1& label=&轮播①图片地址& ptype=&text& formType=&text& description=&图片尺寸748*298& &../tshop-um-p-950-036/assets/images/image_picture1.jpg&/param&
&param name=&url_1& label=&链接地址& ptype=&text& formType=&text& description=&.& &#&/param&
&/parameters&
&!—模块参数--&
&parameters&
&param name=&title& description=&标题& type=&text&&标题-1&/param&
&param name=&content& description=&内容& type=&text&&内容-1&/param&
&/parameters&
下表为淘宝提供的系统模块，您可以自由在模板中添加。
是否默认显示
shop.pageBanner
1.0-common
自定义内容区
shop.selfDefining
1.0-common
宝贝推广区（自动）
shop.autoSpread
1.0-wangpu
shop.itemCategory
1.0-common
搜索店内宝贝
shop.searchInShop
1.0-common
搜索店内宝贝头部版
shop.searchInShopHead
1.0-common
shop.forumShow
1.0-common
装修模板区
shop.flashBanner
1.0-common
掌柜推荐宝贝
shop.itemRecommend
1.0-wangpu
shop.friendLink
1.0-common
shop.searchList
1.0-wangpu
宝贝推广区（手动）
shop.manualSpread
1.0-wangpu
宝贝排行榜
shop.topList
1.0-common
shop.picRound
1.0-common
shop.fileDir
1.0-common
shop.fileSearch
1.0-common
shop.fileList
1.0-common
文章列表默认
shop.fileListDefault
1.0-common
默认文章目录
shop.fileDirDefault
1.0-common
shop.fileDetail
1.0-common
SDK控制台提供了图形化界面来模块管理功能，方便设计师管理模块信息。功能包括添加模块、删除模块、修改模块。
1. 添加模块
启动SDK之后，通过点击“我的模板开发模块”，选择相应的模板。以“test123456”的模板为例，进入模板的详细页面。在页面的下方将看到模块列表，如下图所示：
点击“创建新模块”按钮，进入创建模块页面：
模块描述文件表单，其中带*号的不能留空的。填写如下信息:
模块ID：如“my_module”；
模块名称：如“我的模块”；
模块缩略图：填写模块的相对地址，如“assets/images/frontpage.png”；
描述信息：模块的描述信息。
模块类型：选择该模块的类型，默认是系统模块，如上图所示。当选择设计师模块时，显示下图：
模块ID：如“testmb”；
模块名称：如“测试模块”；
模块布局:(当模块类型为设计师模块时才显示)；
模块缩略图：填写模块的相对地址，如“assets/images/frontpage.png”；
模块描述：模块的描述信息。
非法操作的限制如下：
模块名称限制：不能为空，最多8个中文字符。
模块ID限制：不能为空，最长20个英文。
模块缩略图：可以为空。如果不为空的话，文件必须存在，并且不能使用绝对路径（比如D:\
DC_SDK\htdocs\template1\assets\images\my_module.png），并且文件必须为png，jpg或gif图片。
点击“保存”保存模块。保存之后，系统提示创建成功，并为设计师提供了编写规范，如下图：。
返回所有模块，可以看见我们刚新建的模块。如下图：
回顾目录结构，模块文件放置X:\DC_SDK\htdocs\test1234\modules（X表示SDK安装的硬盘盘符，默认是D盘）,如下图所示:
红框箭头指向的地方，在modules目录下建立了一个名为my_module的目录。在SDK后台创建模块时，SDK会根据用户输入模块的ID和系统自带的前缀“Tshop-um-”自动生成模块目录名称。新版SDK，创建模块，设计师模块目录名都会自动生成前缀。请注意，用户如果需要修改模块的ID时，模块目录名称不会随之变化。也就是说，模块的目录名称在创建时就确定了。
打开Tshop-um-testmb目录，会发现两个文件：模块配置文件（module.xml），模块页面文件（module.php)。其中模块页面文件默认是PHP文件（SDK目前只支持PHP页面）,文件名为用户输入模块的ID。
SDK创建模块时，其中，模块描述文件（module.xml）会自动添加XML
Schema验证文件，如图中红色框内容。通用的XML编辑器都带有Schema验证，设计师可以更好利用他们来修改模块文件，当然也可以通过GUI修改。
2. 删除模块
此处有细微改变，请设计师认真阅读：
新版SDK，删除模块不会自动备份。（请各位设计师删除的时候小心操作）。
SDK也提供删除模块的功能，被删除的模块不会再在模块信息页面显示。例如，我们想要删除掉新建的模块：我的模块。
在“模块信息页面”的模块管理中，在“我的模块”管理块中，点击“删除”。
点击之后，会有一个弹出框来确认删除。点击“确定”，SDK执行删除模块命令，重新导航到模板信息页面，同时，有红色的删除提示信息：“模块成功地删除，并且备份到了modules_backup目录。”如下图所示：
接下来，看一下模块目录下面的变化。回到modules目录，观察变化：
图中显示，“我的模块”并不在modules目录中了。但它们没有真的删除。SDK提供了一种人性化的模块管理，并不会真正地删除物理文件，而是备份到了改模板的modules_backup目录。
如果设计师需要恢复这个模块的话，可以把它复制（移动）到modules目录。这里，我们把“my_module”（我的模块）在移动到modules目录上面。然后重新查看“模板信息页面”，“我的模块”又会回到模块管理中。如下图所示：
3. 修改模块
此处有细微改变，请设计师认真阅读：
模块ID在新建好了以后是不能通过SDK编辑的，只能通过修改xml文件修改。当然，我们不建议XML编程经验尚浅的设计师手动修改模块的描述文件。
当设计需要调整模块信息时，可以通过“模块管理”中点击相应的模块管理块的“编辑”按钮。以“我的模块”为例，修改模块ID为：my_module_1
和模块描述：我的模板的描述,添加描述，然后保存。
修改后，查看“我的模块”的module.xml文件。内容如下：
其中，红框部分所示的为修改后的内容变化。
设计师可以修改参数来调整模块信息，也可以通过手动修改module.xml文件。请注意在手动修改时，如果设计师任意地修改它，即没有根据模块Schema文件（module.xsd）的规则的话，模块会被SDK丢弃（忽略）。
打开“我的模块”的module.xml文件。修改description内容，如下：
保存之后，再次进入“编辑”，可发现内容已自动更新。
我们不建议XML编程经验尚浅的设计师手动修改模块的描述文件。
模块配置说明
module.xml的内容如下：
下面是对module.xml的一些介绍：
模块标识，这里可以为任意字符串，但是要确保模板内的模块不要出现id相同的情况。
name：模块名称，主要是方便卖家进行模块选择
& file：对应的php文件
thumbnail：模块的缩略图，64x64，方便卖家进行模块选择
& description：模块描述
parameters：模块的渲染的基本流程为读取参数，调用底层服务，结合php文件输出html，所以参数是模块和卖家交互的重要部分。
不要用table来充当模块，否则效果将不明显或报错
module.xml配置文件的格式如下：
下面详细描述模块配置文件每个参数的含义：
id用来唯一的标识某一个模块，在引入模块的时候会通过此ID来引入模块，在同一个模板中，模块ID不能重复。
name: name代表模块的名称，此名称是为了卖家在后台添加模块的时候提示卖家对应的模块名称。 file:
file用来配置模块对应的php文件，此配置必须和模块的php文件同名，此项配置需要模块的后缀名。
thumbnail: thumbnail用来配置模块缩略图，模块缩略图在卖家添加模块的时候显示。
description: description用来配置模块描述。
param:param用来配置模块参数，配置的模块参数可以用来让卖家设置，参数设置中有如下几个参数需要配置：
参数名称用于在模板中通过$_MODULE[name]来引用
label: 用于在编辑模块的时候显示，方面卖家后台设置
description:用于参数描述，此参数用于以后扩展
此处有细微改变，请设计师认真阅读：
在ptype中，当参数值number时，返回的仍是字符串，所以各位设计师在做运算的时候不要先用intval进行转换一下。
ptype是参数类型的配置，此参数的目的主要是用于对卖家后台录入参数的校验，目前系统支持的ptype参数类型如下：
& text：文本类型参数，此参数系统默认最多256个字符
& textarea：文本域类型参数，此参数系统默认最多4000个字符
& htmlarea：代表一段html代码，此参数系统默认最多32KB
& url：url类型参数，系统默认最大长度256个字符
& date：此类型代表日期类型，后台会根据制定的日期格式进行校验
& email：此类型代表电子邮件，后台会校验是否是合法的邮件地址
& number：此类型是数值类型，后台会判断是否是合法的数值.
formType：
此处有细微改变，请设计师认真阅读：
当formType为checkbox（多选）时，返回多选的值是以英文逗号的形式分割的。
formType用来配置参数html类型，类型与html类型对应，用于在编辑模块的时候展示界面的DOM结构。目前系统主要支持如下几个类型：
& text: 类似于html的input type=”text”,用于卖家输入文本字段
& textarea:类似于html的textarea标签，用于卖家输入一段文本
类似于html的select标签，此参数的配置需要通过option来配置，比如写入如下配置：
它的展示效果如下图所示：
DOM、CSS规范
页面整体图示：
(1)页面包含页头、内容、页尾
(2)内容包含店铺页头、店铺内容、店铺页尾
(3)店铺内容包含多个布局，布局可以包含多个模块
对应的html结构：
开放的区域:
此处发生改变，新规范将class=”tb-shop”去掉了，所以如果老模板以tb-shop开头书写的css样式将会失效；设计师模块class不允许以”tb-”开头。
命名空间：
&div id=&content& class=&
&&/div&，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。
CSS选择器规范:
此处发生细节变动，请设计师认真阅读：所有的选择器必须包含模块名class，例如.custom-module-name
.title{}或者.col-sub .custom-module-name h3{} 设计师不能添加id选择器；比如#box
将被过滤。
选择器不能使用.tb,.tb-shop 官方保留选择器;
除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)
css 文件中选择器的属性及其值都支持大小写。
支持的伪类(支持的伪类、支持的伪元素都未发生改变，详情可见如下链接： )
:first-child
支持的伪元素
:first-letter
:first-line
特殊属性规则:
margin属性
Margin取值
支持负数值
内店自定义内容区
不支持负数值
外店自定义内容区
不支持负数值
完全自定义css
支持负数值
position属性
position去掉fixed支持，模板两遍悬浮组件由官方提供。
position取值
absolute | fixed | relative |
内店自定义内容区
外店自定义内容区
完全自定义css
absolute | fixed | relative |
层级z-index控制
此处发生重大变动，请设计师细心阅读：设计师允许使用的范围为1~99
tag、class、id、style 的相关变动
此处发生重大改变，请设计师细心阅读：
a) 允许tag、class
b) 不允许id、style、style标签
淘宝页头说明L:
店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150C旺铺支持的最大高度为250
如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250
例：商城宝贝详情页店招部分的样式
.ark .shop-banner {
max-height: 150
区块（片区、坑）
区块html结构示意图：
CSS规范：class=&main-wrap J_TRegion&
中，J_TRegion是设计区域时必须添加的样式，其他的样式名如”
main-wrap”是设计师可以自己添加的样式；
一个区块内可以添加多个模块。
页面显示：
CSS规范：class=&box J_TBox&
中，J_TBox是设计模块时必须添加的样式名，其他的样式名如”box”是设计师可以自己添加的样式。
自定义样式.box{……}中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式
建议不要用table来充当模块，否则效果将不明显或报错
dom结构建议，如下图所示：
绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示。
系统模块的样式可以通过如下地址访问可以看到
自动分类模块
页面显示：
页面代码：
页面显示：
页面代码：
宝贝排行榜
页面显示：
页面代码：
搜索列表页
页面显示：
页面代码：
淘宝店铺有系统布局
设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。
设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。
淘宝系统布局
系统提供的布局结构如下，总共有6种：
命名规则：
通栏布局（.grid-m）
两栏布局（.grid-sXm0）
三栏布局（.grid-sXm0eY）
系统布局的样式在这个样式文件中
命名含义如下：
当单元列的宽度为 40px 的倍数时，
sX 表示 col-sub 的宽度 = X * 40 - 10,
eY 表示 col-extra 的宽度 = Y * 40 - 10,
m0 表示 col-main 的宽度 = 总宽度 - (X + Y) * 40,
s m e 的顺序，可以按全排列排序，sXm0eY表示各列的排列顺序。
比如：总宽为 950px 时，.grid-e6m0s5 表示
col-extra(230) | col-main(510) | col-sub(190).
对应的样式为：
.grid-e6m0s5 .main-wrap { margin: 0 200px 0 240 }
.grid-e6m0s5 .col-sub { width: 190 margin-left: -190 }
.grid-e6m0s5 .col-extra { width: 230 margin-left: -100%;
当单元列的宽度不为40px的倍数时， sX和eY中的X 和 Y
直接表示宽度
比如：总宽为 950px 时，.grid-s120m0e50 表示
col-sub(120) | col-main(760) | col-extra(50),
对应的样式为：
.grid-s120m0e50 .main-wrap { margin: 0 130px 0 60 }
.grid-s120m0e50 .col-sub { width: 120 margin-left: -100%;
.grid-s120m0e50 .col-extra { width: 50 margin-left: -50
自定义布局示例：
通栏和两栏（左右栏）
说明：上层为通栏，下层为两栏（左右栏）
页面显示：
页面代码：
说明：总体分为两栏（左右栏）：绿色框为左侧栏，红色框为主栏，红色框主栏又分为左右两栏，黑色框部分
页面显示：
页面代码：
background-attachment
scroll | fixed
background-clip
border-box | padding-box | content-box |
background-color
background-image
none | url
background-origin
border | padding | content
background-position
left | center | right | top | center |
bottom | length | percentage
background-repeat
repeat | repeat-x | repeat-y |
border-width | border-style |
border-color
border-bottom
border-bottom-width | border-bottom-style
| border-bottom-color
border-bottom-color
color | transparent
border-bottom-style
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
border-bottom-width
thin | medium | thick |
border-color
color | transparent
border-left
border-left-width | border-left-style |
border-left-color
border-left-color
color | transparent
border-left-style
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
border-left-width
thin | medium | thick |
border-right
border-right-width | border-right-style |
border-right-color
border-right-color
color | transparent
border-right-style
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
border-right-width
thin | medium | thick |
border-style
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
border-top
border-top-width border-top-style
border-top-color
border-top-color
Color | transparent
border-top-style
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
border-top-width
thin | medium | thick |
border-width
border-top-width | border-right-width |
border-bottom-width | border-left-width
box-sizing
content-box | border-box
outline-color | outline-style |
outline-width
outline-color
color | invert
outline-offset
outline-style
none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
outline-width
thin | medium | thick |
aqua | black | blue | fuchsia | gray |
green | lime | maroon | navy | olive | orange | purple | red |
silver | teal | white | yellow
Transparent
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000，只有3位和6位）; rgb_number 规定颜色值为
rgb 代码的背景颜色（比如 rgb(255,0,0)，0到255）
letter-spacing
normal | length
line-height
normal | length | number |
percentage
text-align
left | right | center |
text-decoration
none | underline | overline |
line-through | blink
text-indent
length | percentage
text-overflow
clip | ellipsis
text-shadow
color | length | length |
text-transform
none | capitalize | uppercase |
unicode-bidi
normal | embed |
bidi-override
white-space
normal | pre | nowrap | pre-wrap |
word-spacing
normal | length
word-break
normal | break-all | keep-all
normal | break-word
writing-mode
lr-tb | tb-rl
font-style font-variant font-weight
font-size/line-height font-family
font-family
Arial | Arial Narrow | Book Antiqua |
Candara | Courier | Courier New | Helvetica | Monospace |
Sans-Serif | Serif | Simsun | Tahoma | Verdana | 宋体 | 幼圆 | 新宋体 | 隶书
| 黑体| 微软雅黑 | 华文楷体 | 华文行楷
xx-small | x-small | small | medium |
large | x-large | xx-large | smaller | larger | length |
percentage
font-size-adjust
none | number
font-stretch
normal | wider | narrower |
ultra-condensed | extra-condensed | condensed | semi-condensed |
semi-expanded | expanded | extra-expanded |
ultra-expanded
font-style
normal | italic | oblique
font-variant
normal | small-caps
font-weight
normal | wider | narrower |
ultra-condensed | extra-condensed | condensed | semi-condensed |
semi-expanded | expanded | extra-expanded |
ultra-expanded
auto | length | percentage
margin-bottom
auto | length | percentage
margin-left
auto | length | percentage
margin-right
auto | length | percentage
margin-top
auto | length | percentage
length | percentage
padding-bottom
length | percentage
padding-left
length | percentage
padding-right
length | percentage
padding-top
length | percentage
list-style
&ListStyle&
list-style-type
none | disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman | lower-alpha |
upper-alpha | lower-greek | lower-latin | upper-latin | hebrew |
armenian | georgian | cjk-ideographic | hiragana | katakana |
hiragana-iroha | katakana-iroha
list-style-position
inside | outside
list-style-image
none | url
marker-offset
auto | length
仅支持空串和\20
counter-increment
仅支持空串和\20
counter-reset
l仅支持空串和\20
auto | length | percentage
max-height
auto | length | percentage
auto | length | percentage
min-height
length | percentage
length | percentage
auto | length | percentage
auto | length | percentage
left | right | both | none
auto | rect (top, right, bottom,
default | auto | crosshair | pointer |
move | e-resize | ne-resize | nw-resize | n-resize | se-resize |
sw-resize | s-resize | w-resize | text | wait | help |
none | block | inline | inline-block |
list-item | run-in | compact | marker | table | inline-table |
table-row-group | table-header-group | table-footer-group |
table-row | table-column-group | table-column | table-cell |
table-caption
left | right | none
auto | length | percentage
visible | hidden | scroll |
overflow-x
visible | hidden | scroll |
overflow-y
visible | hidden | scroll |
absolute | fixed | relative |
auto | length | percentage
auto | length | percentage
vertical-align
baseline | sub | super | top | text-top |
middle | bottom | text-bottom | length | percentage
visibility
visible | hidden | collapse
auto | int
page-break-after
auto | always | avoid | left |
page-break-before
auto | always | avoid | left |
page-break-inside
auto | avoid
border-collapse
separate | collapse
border-spacing
length length
caption-side
top | bottom
empty-cells
hide | show
none | both | horizontal |
table-layout
automatic | fixed
normal | number | percentage
border-radius
&percentage& ]{1,4} [
-moz-border-radius
同border-radius
-webkit-border-radius
同border-radius
border-top-left-radius
&percentage& ] [
&length& |
&percentage& ]?
border-top-right-radius
同border-top-left-radius
border-bottom-right-radius
同border-top-left-radius
border-bottom-left-radius
同border-top-left-radius
-webkit-border-top-left-radius
&percentage& ] [
&length& |
&percentage& ]?
-webkit-border-top-right-radius
同border-top-left-radius
-webkit-border-bottom-left-radius
同border-top-left-radius
-moz-border-top-left-radius
&percentage& ] [
&length& |
&percentage& ]?
-moz-border-top-right-radius
同border-top-left-radius
-moz-border-bottom-right-radius
同border-top-left-radius
-moz-border-bottom-left-radius
同border-top-left-radius
-moz-transition
同transition
-moz-transition-property
同transition-property
-moz-transition-duration
同transition-timing-function
-moz-transition-timing-function
同transition-timing-function
-moz-transition-delay
同transition-delay
-webkit-transition
同transition
-moz-transition-property
同transition-property
-moz-transition-duration
同transition-duration
-moz-transition-timing-function
同transition-timing-function
-moz-transition-delay
同transition-delay
-webkit-transition
同transition
-webkit-transition-property
同transition-property
-webkit-transition-duration
同transition-duration
-webkit-transition-timing-function
同transition-timing-function
-webkit-transition-delay
同transition-delay
-o-transition
同transition
-o-transition-property
同transition-property
-o-transition-duration
同transition-duration
-o-transition-timing-function
同transition-timing-function
-o-transition-delay
同transition-delay
box-shadow
[,&shadow&]*
&shadow& is defined as: inset?
&color&? ]
-moz-box-shadow
同box-shadow
-webkit-box-shadow t
同box-shadow
-scrollbar-arrow-color
-scrollbar-shadow-color
-scrollbar-face-color
-scrollbar-3dlight-color
-scrollbar-darkshadow-color
scrollbar-highlight-color
-scrollbar-base-color
-scrollbar-track-color
-scrollbar-3d-light-color
为了能使设计师们sdk模板中的悬浮元素能很好地在ie6下显示，系统提供了ie6下position:fixed的支持（目前仅对sdk模板开放,开放起始日期为日），但是为了要使用系统提供的hack，设计师们需要按如下规范调整自己的模板：
不要在一个selector上同时写position:
和_position:absolute: 通过在module.xml中添加配置参数告知系统需要使用css
hack（这个目前不需要做，后续要做，目前只要是sdk模板系统会进行position:fixed的css
hack）,如果让系统进行css
hack修复position:fixed时，就不要再写_position:absolute了，否则系统不能再利用position:absolute进行ie6下的css
不支持的：.myww{position: right: 50
bottom: 50 _position:}
支持的：.myww{position: right: 50
bottom: 50 }
不要在内联style内写position: fixed:
在内联style内写position:
fixed,系统这样无法检测到，除position:fixed以外，其他的样式可以放在内联样式中
不支持的：&divclass=&myww
J_TBox& style=&position: right: 100 top:
50&&&/div&
支持的：&div&
class=&myww J_TBox& style=&right: 100 top:
50&& &/div&
&style&.myww{position:}&/style&
应用position:
fixed的element的right和bottom位置要注意，不要超过窗口的可视位置，若超过，用户在ie6下滑动滚动条，当滑动到页面底端的时候，滚动条不会停止滚动，而页面的内容即是空白。建议定位：可以通过right和bottom进行定位，当利用left和right进行定位时，最好不要让悬浮的元素的底端或右侧超出窗口一般的可视区域
HTML白名单
因为考虑到标签的id属性会和淘宝官方的标签id冲突，因此所有的的标签都不支持id属性
标准属性： class, title, style, dir, lang,
可选属性：
charset, coords href hreflang name rel rev
shape target type
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
&area&标签
标准属性： class, title, style, dir, lang,
可选属性：
alt, coords href nohref shape
标准属性： class, title, style, dir, lang,
&base&标签
标准属性： class, title, style, dir, lang,
必选属性：
支持属性：
&basefont&标签
标准属性： class, title, style, dir, lang,
可选属性：
color face size
标准属性： iclass, title, style, lang,
可选属性：
标准属性： class, title, style, dir, lang,
&blockquote& 标签
标准属性： class, title, style, dir, lang,
可选属性：
标准属性: class, title, style
&button&标签
标准属性： class, title, style, dir, lang,
xml:lang, tabindex
可选属性：
disabled, name, type, value,
&caption&标签
标准属性： class, title, style, dir, lang,
可选属性：
align span
&center&标签
标准属性： class, title, style, dir, lang,
&cite&标签
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
可选属性：
align char charoff span valign
&colgroup&
标准属性： class, title, style, dir, lang,
可选属性：
align char charoff span valign
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
可选属性：
cite datetime
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
标准属性： class, title, style, dir, lang,
&embed&标签
标准属性 class, title, style, dir, lang,
可选属性：
allowScriptAccess 的取值必须为nerver
allowNetworking flashvars height name quality src type var width
wmode border contenteditable style pluginspage play loop
&fieldset&
标准属性 class, title, style, dir, lang,
标准属性 class, title, style, dir, lang,
color face size
标准属性 class, title, style, dir, lang,
accept accept-charset enctype method name
&h1&--&h6&标签
标准属性 class, title, style, dir, lang,
标准属性 class, title, style, dir, lang,
align noshade size width
&marquee&标签
标准属性： class, title, style, dir, lang,
behavior direction scrolldelay
scrollamount loop width height vspace hspace bgcolor
标准属性 class, contenteditable, contextmenu,
dir, draggable, irrelevant, lang, ref, registrationmark, tabindex,
template, title
标准属性 class, title, style, lang,
align border height hspace ismap longdesc
usemap vspace width
&input&标签
标准属性 class, title, style, lang,
alt checked disabled maxlength name
readonly size src& tabindex type usemap value
标准属性 class, title, style, lang,
cite datetime
标准属性 class, title, style, lang,
&label&标签
标准属性 class, title, style, lang,
legend&标签
标准属性 class, title, style, lang,
标准属性 class, title, style,dir, lang,
type value
&link&标签
标准属性 class, title, style,dir, lang,
charset href hreflang media rel rev target
标准属性 class, title, style,dir, lang,
标准属性 class, title, style,dir, lang,
compact start type
&optgroup&标签
标准属性 class, title, style,dir, lang,
&option&标签
标准属性 class, title, style,dir, lang,
disabled label selected value
标准属性 class, title, style,dir, lang,
标准属性 class, title, style, dir, lang,
xml:lang, xml:space
标准属性 class, title, style,dir, lang,
标准属性 class, title, style,dir, lang,
&select&标签
标准属性 class, title, style, dir, lang,
xml:lang, accesskey, tabindex
disabled multiple name size
&small&标签
标准属性 class, title, style, dir,
&span&标签
标准属性 class, title, style, dir, lang,
&strike&标签
标准属性 class, title, style, dir, lang,
&strong&标签
标准属性 class, title, style, dir, lang,
&style&标签
标准属性 title, dir, lang,
标准属性 class, title, style, dir, lang,
标准属性 class, title, style, dir, lang,
&table&标签
标准属性 class, title, style, dir, lang,
align bgcolor border cellpadding
cellspacing frame rules summary width
&tbody&标签
标准属性 class, title, style, dir, lang,
align char charoff valign
标准属性 class, title, style, dir, lang,
abbr align axis bgcolor char charoff
colspan headers height nowrap rowspan scope valign width
&textarea&标签
标准属性 class, title, style, dir, lang,
xml:lang, tabindex, accesskey
disabled name readonly
&tfoot&标签
标准属性 class, title, style, dir, lang,
align char charoff valign
标准属性 class, title, style, dir, lang,
abbr align axis bgcolor char charoff
colspan headers height nowrap rowspan scope valign width
&thead&标签
标准属性 class, title, style, dir, lang,
align char charoff valign
标准属性 class, title, style, dir, lang,
align bgcolor char charoff
标准属性 class, title, style, dir,
标准属性 class, title, style, dir, lang,
标准属性 class, title, style, dir, lang,
compact type
标准属性 class, title, style, dir, lang,
&script src=&&
type=&text/javascript&/&
特殊元素规则
html 元素URL属性规则
支持相对路径
相对路径/开头
background
内店自定义内容区
支持相对路径
相对路径/开头
background
外店自定义内容区
支持相对路径
相对路径/开头
background
以上属性检查域名为true时，域名规则如下：
首先进行域名黑名单过滤，如果在黑名单则直接过滤，如果不在黑名单，然后再进行顶级域名白名单过滤，如果不在白名单则过滤。
顶级域名白名单如下：
域名黑名单：
CSS元素URL属性规则
sdk中CSS的url属性容许相对路径，这主要是方便设计师可以通过相对路径引用模板本身的图片文件，我们会在系统中对相对路径进行替换，最终换为绝对路径。
支持相对路径
相对路径/开头
内店自定义内容区
支持相对路径
相对路径/开头
外店自定义内容区
支持相对路径
相对路径/开头
完全自定义css
支持相对路径
相对路径/开头
Widget规范
实际的开发中需要用到一些功能比较丰富的主机，如图片轮播，tab标签等，这些组件都需要设计师写Javascript才能完成，考虑前期JavaScript是不对设计师开放的，所以淘宝要提供一些widget库，方便设计调用，形成特定的组件。
通过载入淘宝的js框架来渲染。
&div class=&J_TWidget&
data-type=&Slide& data-cfg=&{…}&&
我们会获取名字叫 J_TWidget 的元素, 并根据其类型和配置信息,
渲染相应的效果。
目前淘宝提供的widget 分为6种:
Tabs - 标签页
Slide - 卡盘
Carousel - 旋转木马
Accordion - 手风琴
Popup - 弹出层
Compatible - 兼容性组件
针对每种不同的动画效果需要通过配置不同的参数，配合不同的DOM结构。
以下依次介绍每种不同的动画效果的配置参数以及其DOM结构
Tabs - 标签页
所需DOM结构
本组件对DOM结构没有特殊要求，调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可，当然触点和内容都必须包含在唯一的外层容器里面。
class=&J_TWidget section&&
&ul class=&ks-switchable-nav&&
&li class=&ks-active&&标题 A&/li&
&li&标题 B&/li&
&li&标题 C&/li&
&li&标题 D&/li&
&div class=&ks-switchable-content&&
-----预先加载的内容---------
&div style=&display: none&&内容 B&/div&
&div style=&display: none&&内容 C&/div&
&div style=&display: none&&内容 D&/div&
组件调用方法
&div class=”J_TWidget”
data-widget-type=”Tabs”
data-widget-config=”{
'effect': 'fade',
'autoplay': true,
'circular': true
配置参数列表
参数可选值
none/fade/scrolly/scrollx
(默认值：none)
切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动
easeOutStrong/easeBoth
滚动的动画方方式
true/false (默认值：false)
是否开启倒计时样式
countdownFromStyle
设定倒计时最终样式
如: width:15px
表示进度条最终宽度,可先在CSS里对样式进行定义
对其进行轮播的目标列表的class值
contentCls
轮播列表所对应的内容列表的class值
自定义数值 (默认值：1)
延迟加载时间
.1 == 100ms
triggerType
mouse/click&&
(默认值：mouse)br
触发方式——
mouse：鼠标经过触发
click：鼠标点击触发
hasTriggers
true/false (默认值：true)
是否设置触发点
自定义数值 (默认值：1)
切换视图内有多少个panels
切换视图区域的大小。
一般不需要设定此值，仅当获取值不正确时，用于手工指定大小
activeIndex
自定义数值 (默认值：0)
默认激活的列表项
activeTriggerCls
自定义值 (默认值：active)
默认激活列表项的class值
true/false (默认值：true)
是否自动播放
true/false (默认值：true)
是否有循环滚动效果
自定义值（默认值：0.5）
.1 = 100ms
Slide卡盘效果
所需DOM结构
本组件需要将滚动的对象作为一个ul列表，包含在外层的容器中，同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
&div class=&J_TWidget section&&
&div class=&yslider-stage&&
&p&&a href=&#& target=&_blank&&&img src=&###&/&&/a&&/p&
&p&&a href=&#& target=&_blank&&&img src=&###&/&&/a&&/p&
&p&&a href=&#& target=&_blank&&&img src=&###&/&&/a&&/p&
&ul class=&yslider-stick&&
&li class=&selected&&&a href=&#& target=&_blank&&aaa&/a&&/li&
&li&&a href=&#& target=&_blank&&bbb&/a&&/li&
&li&&a href=&#& target=&_blank&&ccc&/a&&/li&
组件调用方法
&div class=”J_TWidget”
data-widget-type=”Slide”
data-widget-config=”{
'navCls': 'yslider-stick',
'contentCls': 'yslider-stage',
'activeTriggerCls': 'selected',
'delay': 0.2,
'effect': 'fade',
'easing': 'easeBoth',
'duration': 0.8,
'autoplay': false,
参数配置列表
参数可选值
none/fade/scrolly/scrollx
(默认值：none)
切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动
easeOutStrong/easeBoth
滚动的动画方方式
true/false (默认值：false)
是否开启倒计时样式
countdownFromStyle
设定倒计时最终样式
如: width:15px
表示进度条最终宽度,可先在CSS里对样式进行定义
对其进行轮播的目标列表的class值
contentCls
轮播列表所对应的内容列表的class值
自定义数值 (默认值：1)
延迟加载时间
.1 == 100ms
triggerType
mouse/click&&
(默认值：mouse)br
触发方式——
mouse：鼠标经过触发
click：鼠标点击触发
hasTriggers
true/false (默认值：true)
是否设置触发点
自定义数值 (默认值：1)
切换视图内有多少个panels
切换视图区域的大小。
一般不需要设定此值，仅当获取值不正确时，用于手工指定大小
activeIndex
自定义数值 (默认值：0)
默认激活的列表项
activeTriggerCls
自定义值 (默认值：active)
默认激活列表项的class值
自定义值（默认值：0.5）
.1 = 100ms
Carousel - 旋转木马
所需DOM结构
需要滚动的对象依次罗列，包含在内容区的容器中，同时需要两个不同ID的容器来分别包含上下翻页的按钮，另外可以将每一组内容再独自包含在一个ul列表中。
class=&section
J_TWidget&&
&span id=&scroller-prev& class=&prev disable&&& 上一页&/span&
&span id=&scroller-next& class=&next&&下一页 &&/span&
&div class=&scroller&&
&div class=&ks-switchable-content&&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&img alt=&& src=&###&/&
&ul class=&ks-switchable-nav&&
&li class=&ks-active&&&&/li&
&li&&&/li&
&li&&&/li&
组件调用方法
&div class=”J_TWidget”
data-widget-type=”Carousel”
data-widget-config=”{
'effect': 'scrollx',
'easing': 'easeOutStrong',
'steps': 5,
'viewSize': [680],
'circular': false,
'prevBtnCls': 'prev',
'nextBtnCls': 'next',
'disableBtnCls': 'disable',
参数配置列表
参数可选值
none/fade/scrolly/scrollx
(默认值：none)
切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动
easeOutStrong/easeBoth
滚动的动画方方式
true/false (默认值：false)
是否开启倒计时样式
countdownFromStyle
设定倒计时最终样式
如: width:15px
表示进度条最终宽度,可先在CSS里对样式进行定义
对其进行轮播的目标列表的class值
contentCls
轮播列表所对应的内容列表的class值
自定义数值 (默认值：1)
延迟加载时间，当前显示图片到切换其他图片动作开始，这中间的停留时间
.1 == 100ms
triggerType
mouse/click&&
(默认值：mouse)br
触发方式——
mouse：鼠标经过触发
click：鼠标点击触发
hasTriggers
true/false (默认值：true)
是否设置触发点
自定义数值 (默认值：1)
切换视图内有多少个panels
切换视图区域的大小。
一般不需要设定此值，仅当获取值不正确时，用于手工指定大小
activeIndex
自定义数值 (默认值：0)
默认激活的列表项
activeTriggerCls
自定义值 (默认值：active)
默认激活列表项的class值
true/false(默认：true)
prevBtnCls
上一页的class值
nextBtnCls
下一页的class值
disableBtnCls
按钮不可用的class值
自定义值(默认：0.5)
动画时长,一张图片开始切换到另一张图片显示的时间
.1 == 100ms
Accordion - 手风琴
所需DOM结构
需要将菜单中每个标题及其内容分别包含在对应的容器中，最外层容器有唯一的ID来标示组件。
&div class=&J_TWidget section&&
&div class=&ks-switchable-trigger ks-active&&&h3&标题A&/h3&&/div&
&div class=&ks-switchable-panel&&
&div class=&ks-switchable-trigger&&&h3&标题B&/h3&&/div&
&div class=&ks-switchable-panel& style=&display:&&
&div class=&ks-switchable-trigger&&&h3&标题C&/h3&&/div&
&div class=&ks-switchable-panel& style=&display:&&
&div class=&ks-switchable-trigger last-trigger&&&h3&标题D&/h3&&/div&
&div class=&ks-switchable-panel last-panel& style=&display:&&
组件调用方法
&div class=”J_TWidget”
data-widget-type=”Accordion”
data-widget-config=”{
'triggerType': 'click',
'multiple':true
配置参数列表
参数可选值
triggerCls
主列表的class值
列表所对应的内容列表的class值
triggerType
mouse/click (默认值：click)
触发方式——
mouse：鼠标经过触发
click：鼠标点击触发
true/false (默认值：false)
是否同时支持多面板展开
hasTriggers
true/false (默认值：true)
是否设置触发点
Popup - 弹出层
所需DOM结构
本组件作为一个弹出层的效果，通过预先设置一个隐藏的弹出层，并且设置该弹出层的触点，通过鼠标滑入和移出触点来展示和隐藏弹出层效果
&div class=&first-trigger&&我只是个触点而已，把鼠标滑到我身上&/div&
&div class=&J_TWidget hidden& data-widget-type=&Popup& data-widget-config=&{
'trigger':'.first-trigger',
'node':'.first-trigger',
'offset':[0,0],
'points':['cr','cc']
&div style=&background-color: height: 100 width: 100&&
我是一个弹出层
组件调用方法
&div class=&J_TWidget hidden& data-widget-type=&Popup& data-widget-config=&{
'trigger':'.first-trigger',
'node':'.first-trigger',
'offset':[0,0],
'points':['cr','cc']
配置参数列表
参数可选值
触点元素，就是鼠标滑过哪个元素的时候弹出当前的popup，支持class和id选择器的写法
node,points,offset 三个配置
node: ‘自定义’, // 参考元素。
popup与参考元素进行定位。和触点写法一样，
支持class和id选择器的写法
points: [tr,tl],
// ['tl', 'tr']表示popup的tl 与参考节点的 tr 对齐 ，
具体tl，tr表示的意义和值看下面截图,
t(top)，c(center), b(bottom),l(left),r(right)
offset: [0,0]
// 有效值为 [n, m] ， points对齐后，offset值，
一般可用于微调, n和m分别表示对齐两个点
在x,y坐标之间的偏移量
配置项align中的points的说明
触点与弹出层的对齐方式（align中的points配置）元素及参考元素上各自的九个不同位置点('tl',
'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br')
如下图所示:
代码，直接复制到自定义内容区里面，保存-预览就可以到效果了哈。大家发挥自己的想象力吧。
&div class=&first-trigger&&我只是个触点而已，把鼠标滑到我身上&/div&
&div class=&J_TWidget hidden& data-widget-type=&Popup& data-widget-config=&{
'trigger':'.first-trigger',
'node':'.first-trigger',
'offset':[0,0],
'points':['cr','cl']
&div style=&background-color: height: 100 width: 100&&
我是一个弹出层
代码，直接复制到自定义内容区里面，保存-预览就可以到效果了哈。大家发挥自己的想象力吧。
&div class=&first-trigger&&我只是个触点而已，把鼠标滑到我身上&/div&
&div class=&J_TWidget hidden& data-widget-type=&Popup& data-widget-config=&{
'trigger':'.first-trigger',
'node':'.first-trigger',
'offset':[0,0],
'points':['cr','cl']
&div style=&background-color: height: 100 width: 100&&
我是一个弹出层
触点目前只允许包含在#content内。不允许影响页头页尾：
Countdown - 倒计时
组件调用方法及所需DOM结构
&!-- 配置项中的class名前别忘了加点号哦 --&
&div class=&J_TWidget& data-widget-type=&Countdown&
data-widget-config=&{
'endTime': '20000',
'interval': 1000,
'timeRunCls': '.ks-countdown-run',
'timeUnitCls':{
'd': '.ks-d',
'h': '.ks-h',
'm': '.ks-m',
's': '.ks-s',
'i': '.ks-i'
'minDigit': 1,
'timeEndCls': '.ks-countdown-end'
&!-- 倒计时结束时隐藏--&
&!--可以写多个 --&
&div class=&ks-countdown-run&&
&span class=&ks-d&&&/span&天
&span class=&ks-h&&&/span&小时
&span class=&ks-m&&&/span&分
&!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 --&
&span class=&ks-s&&&/span&秒
&span class=&ks-i&&&/span&毫秒
&div class=&ks-countdown-run&&&/div&
&!-- 倒计时结束时显示--&
&!--可以写多个 --&
&div class=&ks-countdown-end&&
倒计时结束了,干点什么吧
把什么隐藏起来，或者把什么显示出来
&div class=&ks-countdown-end&&
配置参数列表
参数可选值
毫秒数（多少毫秒后倒计时结束），或者日期格式时间（格式：
11:01:01）
倒计时结束时间
例如：毫秒数： 'endTime': '
或 日期格式： 'endTime': '10000'
单位：毫秒，取值范围（&=100毫秒），默认值为1000毫秒
倒计时刷新间隔（单位为毫秒/次）即每隔多少毫秒刷新一次
例如：interval = 2000,
那么屏幕上的时间每次变化时会少两秒
timeRunCls
有此class名的标签，其内容在倒计时运行时显示,倒计时结束时隐藏
timeUnitCls
时间单位的组合值,每个时间单位的class名自定义
设定时间单位b标签的class
'd': '.ks-d', //天
'h': '.ks-h', //小时
'm': '.ks-m', //分
's': '.ks-s', //秒
'i': '.ks-i' //毫秒
数据类型：整数，取值范围（&=1），默认为1，
每个时间单位值显示的最小位数，意思是超过不截断，少则前面补0显示
例如：digit = 2
少于情形：2天4小时10分20秒，则应该显示02天04小时10分20秒
超过情形：400分20秒，则应该显示 400分20秒
timeEndCls
有此class名的标签，其内容在倒计时运行时隐藏,倒计时结束时显示
Compatibe -
兼容性组件
组件调用方法及所需DOM结构
兼容组件的第一个作用：ie 6的position:
&div class=&J_TWidget& data-widget-type=&Compatible& data-widget-config=&{'fixed':true}&
style=&position:top:50left:40&&
这是解决ie6的悬浮组件
第二种兼容的第二个作用：png在ie6下的透明
&div class=&J_TWidget&
style=&height:40width:40background-image: url(/tps/i1/T1g604XjdrXXXXXXXX-24-24.png);&
data-widget-type=&Compatible& data-widget-config=&{'png':true,'png_bg':true}&&
&!-- img标签透明 --&
&img class=&J_TWidget& src=&/tps/i1/T1g604XjdrXXXXXXXX-24-24.png&
data-widget-type=&Compatible& data-widget-config=&{'png':true,'png_tag':true}&/&
配置参数列表
参数可选值
可选值true / false，默认false
需要用兼容组件解决的问题，是否是ie
6下面的position:fixed
可选值true / false，默认false
需要用兼容组件解决的问题，是否是在ie 6下面的png透明
可选值true / false，默认false
需要透明的png图片，是否是背景图
可选值true / false，默认false
需要透明的png图片，是否是img标签元素
淘宝发布开源编辑器：KISSY Editor，和我们在 WordPress
后台使用的富文本编辑器 TinyMCE 一样，它可以让我们在线编辑和格式化文本，但是相比 TinyMCE KISSY Editor
更加轻巧，更加适合国内的网络环境。 KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY
目前基于 YUI 2.x 开发，目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件，目前已有 CSS
基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件。
目前kissy中开放，能直接调用的效果组件为switchable，其中包括四种widget，tabs（标签页），Slide（卡盘），Carousel（旋转木马），Accordion（手风琴）虽然只有四种效果，但实际上，通过kissy中开放的配置（对应sdk中的data-widget-config），以及不同的dom结构，与css控制，可以展示出各种各样的效果。下面是互联网中，部分电子商务网站首页的一些效果截图附件中会给出，sdk中如何通过淘宝提供的J_TWidget实现其中的效果。
其中“土豆今日焦点”这个组件中，当缩略图的切换时，上面的内容和左侧的大图同时切换，这个略微特殊一点，用到了两个slide，用一个ks-switchable-nav来控制两个ks-switchable-content的切换。
拿其中一个dom结构为例，kissy中开放效果，只要把握其中这样几点。
最外层dom结构：id为demo这个div标签，组件的最外层dom结构。
组件中的dom结构：包含在id为demo里面的div结构里面的结构。
class=”J_TWidget”：用来表示这个div是一个组件，我们要用kissy来渲染这个组件。
data-widget-type=&Tabs&:这个是用来告诉sdk，我们的widget组件要用什么方式来渲染。
data-widget-config=”{….}”: 这个是组件的相关配置，也是很灵活的一部分
class=”ks-switchable-nav” :
这个用来定义当前组件进行轮播的目标列表的class值。
PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子，方法为在data-widget-config中。
data-widget-config=&{ 'navCls':
'自定义的class'}&，这样也方便设计师定义样式。
class=&ks-switchable-content&：用来定义轮播列表所对应的内容列表的class值。
PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子，方法为在data-widget-config中,
data-widget-config=&{ 'contentCls':
'自定义的class'}&，这样也方便设计师定义样式class=”ks-active” :
当前正在轮播的对象（可以用这个来动态应用样式）
class=&J_TWidget&
data-widget-type=&Tabs&
data-widget-config=&{
'effect': 'none',
'autoplay': 'auto',
'circular': true
&ul class=&ks-switchable-nav&&
&li class=&ks-active&&标题 A&/li&
&li&标题 B&/li&
&li&标题 C&/li&
&li&标题 D&/li&
&li&标题 E&/li&
&div class=&ks-switchable-content&&
tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
&div style=&display:&&这里还可以放置一些图片，比如像百度首页下面的那个&/div&
&div style=&display:&&至于如何使用tab，大家可以尽情发挥&/div&
&div style=&display:&&这是最内容D ，这是最内容D&/div&
&div style=&display:&&
这个div里面放置任何你想要放的dom结构，你所要做的就是用过css，控制dom的展示
的J_TWidget源代码在附件中，直接在sdk中新建一个模板，然后覆盖其中的index.php，就可以看到效果了。代码很简单，就是按照规范写dom结构，然后用css控制下样式就ok了。相信你看完样例，就可以很好的使用我们提供的widget了。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。
说的太好了，我顶！
Copyright & 2014 www.51yue.net Corporation, All Rights Reserved
Processed in 0.2440 second(s), 3 db_queries,
0 rpc_queries