【17】淘宝sdk——入门实战之官方默认Widget轮播修改(一)
2012-06-14 14:19
567 查看
在了解官方默认Widget轮播制作之前,我们要想了解下index.php,这个文件我们在前面已经说过了,除了头部和脚部的文件(header.php和footer.php),首页其他的模块都放在这里,当然这里就要说到在index.php中的布局了,有950、750&190(190&750)这样的布局,那么现在我们就是要用到950的布局(grid-m)不懂的话可以看看assets/stylesheets/global.css文件,下面让我们来看看吧。
首先我们要在控制台上创建模块,再在index.php文件中载入模块,同时我们也要注意到模块布局是grid-m(这个就是说950)
好了,模块我们也载入了,下面我们来看看我们要怎么写我们的轮播吧
我们先去官方文档看下,我们的默认的轮播,我们选实例1(slide1)
这里你可以直接拷贝样式和css,但是我这里修改了下,看看我的吧
上面我偷了下懒,把代码写一起了,同时在输出图片的时候用到了循环,仔细看看,还能看出把图片地址和链接地址分开了的这种循环哦。同时轮播的参数请直接看官方文档。
上面弄好后,我们就看看module.xml
好了,现在就缺样式了,其实也很简单,也就是根据文档修改的,下面让我们看看吧。
这样我们的轮播就出来了,看看效果图吧(依旧是压缩过头了,呵呵,将就的看吧)
下面是素材
=========================================================================================
ps.官方默认Widget轮播slide1弄好了,下节也是轮播,但是比这个好看点,呵呵
我这里还是要说下,以后的都是这样的,讲的比较简单,但是东西都是那么店,多看下我前面讲的,其实都是差不多的东西,我不想说那么多重复的
首先我们要在控制台上创建模块,再在index.php文件中载入模块,同时我们也要注意到模块布局是grid-m(这个就是说950)
<!-- index.php --> <!-- 950通栏0 --> <div class="layout grid-m"> <div class="luenbo_01_modules J_TRegion"> <?php $luenbo_01_modules = array( array('id' => 'luenbo01', domId => "luenbo_01"), //官方默认Widget轮播slide1 ); echo include_modules('luenbo_01_modules', $luenbo_01_modules);//引号里是坑名,后面是变量名 ?> </div> </div>
好了,模块我们也载入了,下面我们来看看我们要怎么写我们的轮播吧
我们先去官方文档看下,我们的默认的轮播,我们选实例1(slide1)
这里你可以直接拷贝样式和css,但是我这里修改了下,看看我的吧
<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>> <div class="luenbo"> <div class="luenbo_01 J_TWidget section loading slide1" data-widget-type="Slide" data-widget-config="{'effect':'<? echo $_MODULE[guendong]?>','easing':'easeOutStrong','countdown':true}"> <ol class="ks-switchable-content"> <?php for ( $i = 1; $i < 5; $i++ ) { if ( $_MODULE['luenbo01_'.$i.'_1'] ) { echo '<li><a href="'. $_MODULE['luenbo01_'.$i.'_2'] .'"><img src="'. $_MODULE['luenbo01_'.$i.'_1'] .'" /> </a></li>'; }else{ echo '<li><a href="#"> <img alt="" width="950" height="350" border="0" src="assets/ad/950_'. $i .'.jpg" /> </a></li>'; } } ?> <!--下面注销的是写好的html--> <!--<li> <a href="#"><img width="950" height="350" border="0" src="assets/ad/950_1.jpg"/></a> </li> <li class="hidden"> <a href="#"><img alt="" width="950" height="350" border="0" src="assets/ad/950_2.jpg"/></a> </li> <li class="hidden"> <a href="#"><img alt="" width="950" height="350" border="0" src="assets/ad/950_1.jpg"/></a> </li> <li class="hidden"> <a href="#"><img alt="" width="950" height="350" border="0" src="assets/ad/950_2.jpg"/></a> </li>--> </ol> </div> </div> </div>
上面我偷了下懒,把代码写一起了,同时在输出图片的时候用到了循环,仔细看看,还能看出把图片地址和链接地址分开了的这种循环哦。同时轮播的参数请直接看官方文档。
上面弄好后,我们就看看module.xml
<?xml version="1.0" encoding="GBK" standalone="yes"?> <module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <id>luenbo01</id> <name>官方默认Widget轮播slide1</name> <file>luenbo01.php</file> <thumbnail>assets/images/index.png</thumbnail> <description>官方默认Widget轮播slide1</description> <requiredCache>true</requiredCache> <parameters> <param label="请选择动画效果" formType="select" readonly="false" description="默认为水平滚动" ptype="text" name="guendong"> <option selected="selected" value="scrollx">水平滚动</option> <option value="scrolly">垂直滚动</option> <option value="fade">淡隐淡现</option> <option value="none">无效果</option> </param> <param label="◆第一张图片路径┏" formType="text" readonly="false" description="┓图片1尺寸950*350像素" ptype="text" name="luenbo01_1_1"> assets/ad/950_1.jpg </param> <param label="第一张图片链接┗" formType="text" readonly="false" description="┛点击图片1打开的链接" ptype="text" name="luenbo01_1_2"> http://www.taobao.com/?1 </param> <param label="◆第二张图片路径┏" formType="text" readonly="false" description="┓图片2尺寸950*350像素" ptype="text" name="luenbo01_2_1"> assets/ad/950_2.jpg </param> <param label="第二张图片链接┗" formType="text" readonly="false" description="┛点击图片2打开的链接" ptype="text" name="luenbo01_2_2"> http://www.taobao.com/?2 </param> <param label="◆第三张图片路径┏" formType="text" readonly="false" description="┓图片3尺寸950*350像素" ptype="text" name="luenbo01_3_1"> assets/ad/950_1.jpg </param> <param label="第三张图片链接┗" formType="text" readonly="false" description="┛点击图片3打开的链接" ptype="text" name="luenbo01_3_2"> http://www.taobao.com/?3 </param> <param label="◆第四张图片路径┏" formType="text" readonly="false" description="┓图片4尺寸950*350像素" ptype="text" name="luenbo01_4_1"> assets/ad/950_2.jpg </param> <param label="第四张图片链接┗" formType="text" readonly="false" description="┛点击图片4打开的链接" ptype="text" name="luenbo01_4_2"> http://www.taobao.com/?4 </param> </parameters> </module>
好了,现在就缺样式了,其实也很简单,也就是根据文档修改的,下面让我们看看吧。
/*官方默认Widget轮播slide1*/ .slide1 { position: relative; width: 950px; height: 350px;overflow: hidden; } .slide1 .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; } .slide1 .ks-switchable-nav li {float: left;width: 16px;height: 16px;line-height: 16px;margin-left: 3px;background-color: #FCF2CF; border: 1px solid #F47500;color: #D94B01;text-align: center;cursor: pointer;} .slide1 .ks-switchable-nav li.ks-active {width: 18px;height: 18px;line-height: 18px;margin-top: -1px;color: #FFF;background-color: #FFB442;font-weight: bold;} .slide1 .ks-switchable-content li { height: 350px; width: 950px; overflow: hidden; } /* for countdown plugin */ .slide1 .ks-switchable-nav li, .slide1 .ks-switchable-trigger-content {position: relative;} .slide1 .ks-switchable-trigger-mask {position: absolute;right: 0;width: 18px;height: 18px;background-color: #FF9415;visibility: hidden} .slide1 .ks-active .ks-switchable-trigger-mask {visibility: visible}
这样我们的轮播就出来了,看看效果图吧(依旧是压缩过头了,呵呵,将就的看吧)
下面是素材
=========================================================================================
ps.官方默认Widget轮播slide1弄好了,下节也是轮播,但是比这个好看点,呵呵
我这里还是要说下,以后的都是这样的,讲的比较简单,但是东西都是那么店,多看下我前面讲的,其实都是差不多的东西,我不想说那么多重复的
相关文章推荐
- 【18】淘宝sdk——入门实战之官方默认Widget轮播修改(二)
- 【19】淘宝sdk——入门实战之淘宝默认搜索框修改
- 【22】淘宝sdk——入门实战之宝贝推荐模块
- [转]淘宝sdk——入门实战之footer.php制作
- 【12】淘宝sdk——入门实战之课前了解及心态
- 【23】淘宝sdk——入门实战之系统模块宝贝分类、宝贝排行榜、交流区
- [转]淘宝sdk——入门实战之header.php制作(二)
- 【16】淘宝sdk——入门实战之footer.php制作
- 【24】淘宝sdk——入门实战之左右悬浮模块
- 【25】淘宝sdk——入门实战之宝贝详情页
- 【13】淘宝sdk——入门实战之header.php制作(一)
- 【15】淘宝sdk——入门实战之header.php制作(三)
- 【14】淘宝sdk——入门实战之header.php制作(二)
- 【20】淘宝sdk——入门实战之分类导航和店铺公告
- 【21】淘宝sdk——入门实战之客服模块
- 淘宝设计师入门:设计师SDK环境配置
- 使用Flash Builder建SDK为3系列的项目默认为中文的修改方法
- 如何修改S60默认SDK?
- android studio如何修改默认的sdk的位置。、
- mybatis实战教程(mybatis in action),mybatis入门到精通(修改)