列表排序_商城常用_SDCMS - UI前端Html5组件

<div class="ui-orderby">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

<div class="ui-orderby ui-orderby-red">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

<div class="ui-orderby ui-orderby-yellow">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

<div class="ui-orderby ui-orderby-blue">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

<div class="ui-orderby ui-orderby-green">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

<div class="ui-orderby ui-orderby-info">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

<div class="ui-orderby ui-orderby-black">
    <ul>
        <li><a href="#">默认排序</a></li>
        <li class="active"><a href="#">销量<i class="ui-icon-down"></i></a></li>
        <li><a href="#">价格<i class="ui-icon-down"></i></a></li>
        <li><a href="#">日期<i class="ui-icon-down"></i></a></li>  
    </ul>
</div>

列表排序

默认效果

颜色