【19】淘宝sdk——入门实战之淘宝默认搜索框修改

这次我们弄的是淘宝的默认搜索框，只要修改下样式就好了，系统默认的模块样式是在assets/stylesheets/global.css中

我们先载入模块。同样是950模块，我们在这里和那个轮播放在一起

<!-- 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"), // 官方默认轮播
                array('shortname' => 'shop.searchInShopHead', 'version' => '1.0-common', domId => "sousuo_01"),//750系统模块 搜索店内宝贝头部版
                array('id' => 'luenbo02', domId => "luenbo_02"), // 950图片轮播2模块
             );
         echo include_modules('luenbo_01_modules', $luenbo_01_modules);//引号里是坑名，后面是变量名
        ?>
    </div>

</div>

 模块弄好了，我们改下css就好了。

 /* ------------------------- 店铺搜索 from search.css ---------------------------- */
 
 
/* ---------------------------- 搜索店内宝贝头部版  from search-x.css ---------------- */
/* tshop-pbsm-ssish10c: 模块中心45号模块（shop.searchInShopHead）搜索店内宝贝头部版 */

.shop-search-x{ 100%; height:38px;clear:both;font-size:13px;}
.shop-search-x .bd{ height:22px; padding:7px 15px;border:#e6e6e6 solid 1px;line-height:22px;}
.shop-search-x .bd .search-x .form{ float:left;}
.shop-search-x .bd .search-x .form label{ float:left; color:#000; padding-right:8px;}
.shop-search-x .bd .search-x .form .text{float:left;160px; height:20px;color:#333;border:1px solid #e6e6e6; background: none; padding:0 6px;}
.shop-search-x .bd .search-x .form .button{ float:left; 50px; height:21px; text-align:center; color:#FFFFFF; border:0; background:#ff8808 url(../images/body/ss_bg.gif) repeat-x left center; margin:0 18px 0 8px;cursor:pointer; }
.shop-search-x .bd .search-x .keys{ float:left; font-weight:bold;}
.shop-search-x .bd .search-x .keys a{ color:#000; font-weight:normal;}
.shop-search-x .bd .search-x .keys a{ color:#333;}

/* ---------------------------- End of 搜索店内宝贝头部版 from  search-x.css ---------------- */

 要找到这个css样式，只要看那个注释中的（shop.searchInShopHead）【同时我们也发现这个名字和载入的模块中的'shortname'的值是一样的】，在编辑器中用搜索很快就能找到。

好了这个弄好了，我们看下效果图吧