前端框架中的组件

起步

请在html头部引入以下文件，根据具体项目管理路径，对应其书写规范。如使用第三方插件，务必引用在jQuery文件之后

<link href="http://frontend.valsun.cn/css/jquery-public.css" rel="stylesheet" type="text/css" />
<script src="http://frontend.valsun.cn/js/jquery-1.10.1.js"></script>
<script src="http://frontend.valsun.cn/js/jquery-common.js"></script>

框架路径

下载压缩包的前端框架路径

按钮

支持自由搭配
此组件支持自由搭配样式用

实例更多>>

html:

<input type="button" name="Button" value="Button" class="uiBtnBlueFilL">
<input type="button" name="Button" value="Button" class="uiBtnGreenFilL">
<input type="button" name="Button" value="Button" class="uiBtnSblueFilL">

用法

只需要添加一个样式即可，样式如下：

class="uiBtnBlueFilL"

参数

名称	类别	描述
uiBtnBlueRigL	css	蓝色直角大
uiBtnBlueRigM	css	蓝色直角中
uiBtnBlueRigS	css	蓝色直角小
uiBtnBlueFilL	css	蓝色圆角大
uiBtnBlueFilM	css	蓝色圆角中
uiBtnBlueFilS	css	蓝色圆角小
uiBtGreenRigL	css	绿色直角大
uiBtnGreenRigM	css	绿色直角中
uiBtnGreenRigS	css	绿色直角小
uiBtnGreenFilL	css	绿色圆角大
uiBtnGreenFilM	css	绿色圆角中
uiBtnGreenFilS	css	绿色圆角小
uiBtnSblueRigL	css	深蓝色直角大
uiBtnSblueRigM	css	深蓝色直角中
uiBtnSblueRigS	css	深蓝色直角小
uiBtnSblueFilL	css	深蓝色圆角大
uiBtnSblueFilM	css	深蓝色圆角中
uiBtnSblueFilS	css	深蓝色圆角小
uiBtnOrangeRigL	css	橙色直角大
uiBtnOrangeRigM	css	橙色直角中
uiBtnOrangeRigS	css	橙色直角小
uiBtnOrangeFilL	css	橙色圆角大
uiBtnOrangeFilM	css	橙色圆角中
uiBtnOrangeFilS	css	橙色圆角小
uiBtnGreyRigL	css	灰色直角大
uiBtnGreyRigM	css	灰色直角中
uiBtnGreyRigS	css	灰色直角小
uiBtnGreyFilL	css	灰色圆角大
uiBtnGreyFilM	css	灰色圆角中
uiBtnGreyFilS	css	灰色圆角小
uiBtnOgeRedRigL	css	橘红色直角大
uiBtnOgeRedRigM	css	橘红色直角中
uiBtnOgeRedRigS	css	橘红色直角小
uiBtnOgeRedFilL	css	橘红色圆角大
uiBtnOgeRedFilM	css	橘红色圆角中
uiBtnOgeRedFilS	css	橘红色圆角小

按钮下拉菜单

支持自由搭配
此组件支持自由搭配样式

实例更多>>

SearchResults SearchResults SearchResults SearchResults SearchResults

html:

<button class="uiBtnSelBlueRigL" onclick="uiBtnSel(this)">Button<span></span></button>
<div class="uiBtnSelBlueRigL_Show">
<a href="#" target="_blank">SearchResults</a>
</div>

js:

function uiBtnSel(index){
    var setStop
    var $this = $(index);
    var $class = $this.attr('class');
    var $me = $('.'+$class+'_Show');
    var $thisHeight = $this.height();
    var $thisTop = $this.offset().top+$thisHeight;
    var $thisLeft = $this.offset().left;
    if($me.css('display') == 'none'){
        $me.css({'top':$thisTop,'left':$thisLeft});
        $me.stop().slideDown();
    };
    function mouseleave(){
        $me.stop().slideUp()
    };
    $me.mouseleave(function(){
        setStop = setTimeout(mouseleave,2000);
    });
    $this.mouseleave(function(){
        setStop = setTimeout(mouseleave,2000);
    });
    $me.mouseover(function(){
        clearTimeout(setStop);
    });
    $this.mouseover(function(){
        clearTimeout(setStop);
    });
};

用法

只需要添加两个样式和一个js事件即可，样式如下：

class="uiBtnSelBlueRigL"
class="uiBtnSelBlueRigL_Show"
onclick="uiBtnSel(this)"

参数

名称	类别	描述
uiBtnSelBlueRigL	css	蓝色直角大
uiBtnSelBlueRigM	css	蓝色直角中
uiBtnSelBlueRigS	css	蓝色直角小
uiBtnSelBlueFilL	css	蓝色圆角大
uiBtnSelBlueFilM	css	蓝色圆角中
uiBtnSelBlueFilS	css	蓝色圆角小
uiBtnSelGreenRigL	css	绿色直角大
uiBtnSelGreenRigM	css	绿色直角中
uiBtnSelGreenRigS	css	绿色直角小
uiBtnSelGreenFilL	css	绿色圆角大
uiBtnSelGreenFilM	css	绿色圆角中
uiBtnSelGreenFilS	css	绿色圆角小
uiBtnSelSblueRigL	css	深蓝色直角大
uiBtnSelSblueRigM	css	深蓝色直角中
uiBtnSelSblueRigS	css	深蓝色直角小
uiBtnSelSblueFilL	css	深蓝色圆角大
uiBtnSelSblueFilM	css	深蓝色圆角中
uiBtnSelSblueFilS	css	深蓝色圆角小
uiBtnSelBlueRigL_Show	css	下拉样式，只需要调用按钮样式再后面加上“_Show”即可对应
uiBtnSel(this)	js	鼠标点击 onclick="uiBtnSel(this)"

输入框

支持自由搭配
此组件支持自由搭配样式

实例更多>>

html:

<input type="text" name="text" value="" class="iptBlueRigL" placeholder="蓝色直角大输入框"/>

js:

带下拉输入框JS：
function input_sel_over(index){
$(index).children("div").show();
};
function input_sel_out(index){
$(index).children("div").hide();
};

用法

只需调用相对应的样式即可
注：如果需要更多输入框，请点击更多>> 进行浏览、查看使用说明及调用
样式下如：

class="iptBlueRigL"

参数

名称	类别	描述
iptBlueRigL	css	普通蓝色直角大输入框
iptBlueRigM	css	普通蓝色直角中输入框
iptBlueRigS	css	普通蓝色直角小输入框
iptBlueFilL	css	普通蓝色圆角大输入框
iptBlueFilM	css	普通蓝色圆角中输入框
iptBlueFilS	css	普通蓝色圆角小输入框
iptGreenRigL	css	普通绿色直角大输入框
iptGreenRigM	css	普通绿色直角中输入框
iptGreenRigS	css	普通绿色直角小输入框
iptGreenFilL	css	普通绿色圆角大输入框
iptGreenFilM	css	普通绿色圆角中输入框
iptGreenFilS	css	普通绿色圆角小输入框
iptSblueRigL	css	普通深蓝色直角大输入框
iptSblueRigM	css	普通深蓝色直角中输入框
iptSblueRigS	css	普通深蓝色直角小输入框
iptSblueFilL	css	普通深蓝色圆角大输入框
iptSblueFilM	css	普通深蓝色圆角中输入框
iptSblueFilS	css	普通深蓝色圆角小输入框
iptOrangeRigL	css	普通橙色直角大输入框
iptOrangeRigM	css	普通橙色直角中输入框
iptOrangeRigS	css	普通橙色直角小输入框
iptOrangeFilL	css	普通橙色圆角大输入框
iptOrangeFilM	css	普通橙色圆角中输入框
iptOrangeFilS	css	普通橙色圆角小输入框
iptOgeRedRigL	css	普通橘红色直角大输入框
iptOgeRedRigM	css	普通橘红色直角中输入框
iptOgeRedRigS	css	普通橘红色直角小输入框
iptOgeRedFilL	css	普通橘红色圆角大输入框
iptOgeRedFilM	css	普通橘红色圆角中输入框
iptOgeRedFilS	css	普通橘红色圆角小输入框
iptGreyRigL	css	普通灰色直角大输入框
iptGreyRigM	css	普通灰色直角中输入框
iptGreyRigS	css	普通灰色直角小输入框
iptGreyFilL	css	普通灰色圆角大输入框
iptGreyFilM	css	普通灰色圆角中输入框
iptGreyFilS	css	普通灰色圆角小输入框
iptGreyRigBorTpxL	css	普通灰色边框2px直角大输入框
iptGreyRigBorTpxM	css	普通灰色边框2px直角中输入框
iptGreyRigBorTpxS	css	普通灰色边框2px直角小输入框
iptGreyFilBorTpxL	css	普通灰色边框2px圆角大输入框
iptGreyFilBorTpxM	css	普通灰色边框2px圆角中输入框
iptGreyFilBorTpxS	css	普通灰色边框2px圆角小输入框
iptBlueIcoRigL	css	带图标蓝色直角大输入框
iptBlueIcoRigM	css	带图标蓝色直角中输入框
iptBlueIcoRigS	css	带图标蓝色直角小输入框
iptBlueIcoFilL	css	带图标蓝色圆角大输入框
iptBlueIcoFilM	css	带图标蓝色圆角中输入框
iptBlueIcoFilS	css	带图标蓝色圆角小输入框
iptGreenIcoRigL	css	带图标绿色直角大输入框
iptGreenIcoRigM	css	带图标绿色直角中输入框
iptGreenIcoRigS	css	带图标绿色直角小输入框
iptGreenIcoFilL	css	带图标绿色圆角大输入框
iptGreenIcoFilM	css	带图标绿色圆角中输入框
iptGreenIcoFilS	css	带图标绿色圆角小输入框
iptSblueIcoRigL	css	带图标深蓝色直角大输入框
iptSblueIcoRigM	css	带图标深蓝色直角中输入框
iptSblueIcoRigS	css	带图标深蓝色直角小输入框
iptSblueIcoFilL	css	带图标深蓝色圆角大输入框
iptSblueIcoFilM	css	带图标深蓝色圆角中输入框
iptSblueIcoFilS	css	带图标深蓝色圆角小输入框
		如需更多带元素输入框请点击更多

列表

支持自由搭配
此组件支持自由搭配样式

实例更多>>

List Item

Username or password is incorrect.

List Item

Username or password is incorrect.

List Item

Username or password is incorrect.

List Item

Username or password is incorrect.

html:

<div class="listBlueL">
    <a href="javascript:void(0);">
        <h2>List Item</h2>
        <span>Username or password is incorrect.</span>
    </a>
    ………
</div>

用法

只需要在class中加入需要调用的样式，比如要用蓝色列表（大），ui-list-bl 为列表蓝色（大）的样式，con 为列表，one 为列表第一行内容，two为列表第二行内容
样式下如：

class="listBlueL"

参数

名称	类别	描述
listBlueL	css	列表蓝色样式（大）
listBlueM	css	列表蓝色样式（中）
listBlueS	css	列表蓝色样式（小）
listGreenL	css	列表绿色样式（大）
listGreenM	css	列表绿色样式（中）
listGreenS	css	列表绿色样式（小）
listGblueL	css	列表蓝色渐变样式（大）
listGblueM	css	列表蓝色渐变样式（中）
listGblueS	css	列表蓝色渐变样式（小）

头部导航及左侧导航

支持自由搭配
此组件支持自由搭配样式

实例更多>>

点击查看实例

html:

<div class="navsGreen">
    <div class="top">
        <div class="con">
            <div class="left">
                <a href="javascript:void(0)" target="_blank">SHOP</a>
                ………
            </div>
            <div class="right">
                <a href="javascript:void(0)" target="_blank">US$</a>
                ………
            </div>
        </div>
        <div class="show">
            <div class="con">
                <div class="left">STYLE GUIDE</div>
                <div class="center">
                    <div class="centent">
                        <a href="javascript:void(0)" target="_blank">SHOP</a>
                        ………
                    </div>
                    ………
                </div>
                <div class="right">
                    <input type="text" name="text" value="" class="iptGreenRigM" placeholder="搜索">
                    <input type="button" name="Button" value="GO" class="uiBtnGreenRigM">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="left">
            <h2>DAILY NEW</h2>
            <div class="con">
                <div class="one">
                    <a href="javascript:void(0)" class="hover">LOOKLOOK</a>
                    <div class="two" style="display:block;">
                        <a href="javascript:void(0)" class="hover">- Apricot</a>
                        ………
                    </div>
                </div>
                ………
            </div>
        </div>
        <div class="right">
            自定义右侧内容
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

用法

只需要把所需要的导航html代码复制到您的代码中即可调用调用参数如下：

参数

名称	类别	描述
navsGreen	css	绿色导航
navsBlue	css	蓝色导航
navsBlack	css	黑色导航
其他	css	其他内部样式不可改变

路径导航

支持自由搭配
此组件支持自由搭配样式

实例更多>>

html:

<div class="ui-navs-bl">
    <div class="one"><a><span></span></a><span></span></div>
    <div class="two bl-thr"><a href="#">Leve 2</a><span></span></div>
    <div class="two"><a href="#">Leve 3</a><span></span></div>
    <div class="two"><a href="#">Leve 4</a><span></span></div>
</div>

用法

只需要在class中加入需要调用的样式，比如要用蓝色扁平化路径导航（大），ui-navs-bl 为蓝色扁平化路径导航（大），one 为 home 房子样式，two 为带链接路径样式，bl-thr 为第二个路径样式与左边距离拉大，样式如下：

class="ui-navs-bl"
class="one"
class="two"
class="bl-thr"

参数

名称	类别	描述
ui-radius-ltlb	css	左上与左下为圆角
ui-radius-rtrb	css	右上与右下为圆角
ui-navs-bl	css	蓝色扁平化路径导航（大）
ui-navs-bm	css	蓝色扁平化路径导航（中）
ui-navs-bs	css	蓝色扁平化路径导航（小）
bl-thr	css	蓝色扁平化第二个路径样式与左边距离拉大
ui-navs-gl	css	绿色扁平化路径导航（大）
ui-navs-gm	css	绿色扁平化路径导航（中）
ui-navs-gs	css	绿色扁平化路径导航（小）
gl-thr	css	蓝色扁平化第二个路径样式与左边距离拉大
ui-navs-gbl	css	蓝色渐变式路径导航（大）
ui-navs-gm	css	蓝色渐变式路径导航（中）
ui-navs-gs	css	蓝色渐变式路径导航（小）
gbl-thr	css	蓝色渐变式第二个路径样式与左边距离拉大
one	css	home 房子样式
two	css	带链接路径样式

面板

支持自由搭配
此组件支持自由搭配样式，可与列表、表格等组件搭配使用

实例更多>>

Introdution to Anatomy and Physiology

Principles & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & TerminologyPrinciples & Terminology

html:

<div class="panel-blue">
    <h3><span>标题</span></h3>
    <div>
        <span>
        内容
        </span>
    </div>
</div>

用法

需要在class中加入需要调用的样式，可以在面板内搭配表格、列表等其他组件一起使用

<div class="panel-blue">

参数

名称	类别	描述
panel-blue	css	蓝色面板
panel-darkGrey	css	深灰色面板
panel-gblue	css	为深蓝面板
其他	css	带表格面板，里面表格可直接调用表格组件点击查看表格组件

表格

支持自由搭配
此组件支持自由搭配样式，其中涵盖js，请务必按照文档中的方法调用

实例更多>>

表头固定

	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14

表头浮动

	SearchResults Awesome Comp0	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp1	Awesome1	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp2	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp3	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp4	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14
	SearchResults Awesome Comp	Awesome	Indonesia	9999miles	USED	100	CALL	16/05/14

html:

<table class="blue">
    <thead>
        <tr>
            <td width="30">
                <div class="checkbox" onclick="tableCheckbox(this)"><input name="" type="checkbox" /></div>
            </td>
            <td>SearchResults . Apple<br />Awesome Company Inc.</td>
            ………
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="checkbox" onclick="tableCheckbox(this)"><input name="" type="checkbox" /></div>
            </td>
            <td>SearchResults . Apple<br />Awesome Company Inc.</td>
            ………
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"></td>
        </tr>
    </tfoot>
</table>

用法

只需要在table标签上加上你所需要的表格样式即可，样式如下：

class="darkGrey"

参数

名称	类别	描述
darkGrey	css	深灰色表格样式
grey	css	灰色表格样式
blue	css	蓝色表格样式
tibetBlue	css	藏蓝色表格样式
purpleGrey	css	紫灰色表格样式
float="yes"	自定义	用于表格表头浮动效果，只需在table加上float="yes"即可让表头浮动，例：<table float="yes"></table>

自定义表单

支持自由搭配
此组件支持自由搭配样式，其中涵盖js，请务必按照文档中的方法调用

自定义表单中的html
自定义表单中隐藏了表单，并采用模拟时间来实现操作，调用时，请注意所有html和js的书写和规范

实例更多>>

SearchResults0

SearchResults1 SearchResults2 SearchResults3 SearchResults4 SearchResults5 SearchResults6 SearchResults7 SearchResults8

可用禁用

可用可用

禁用禁用

html:

<div class="sel_gs right10" onclick="sel_bs(this)" onmouseleave="sel_bs_out(this)">
    <span class="text">SearchResults0</span>
    <span class="button"></span>
    <div class="select">
        <a onclick="sel_bsa(this)">SearchResults1</a>
        <a onclick="sel_bsa(this)">SearchResults2</a>
        <a onclick="sel_bsa(this)">SearchResults3</a>
        <a onclick="sel_bsa(this)">SearchResults4</a>
        <a onclick="sel_bsa(this)">SearchResults5</a>
        <a onclick="sel_bsa(this)">SearchResults6</a>
        <a onclick="sel_bsa(this)">SearchResults7</a>
        <a onclick="sel_bsa(this)">SearchResults8</a>
    </div>
    <select>
        <option>SearchResults0</option>
    </select>
</div>

用法

需要在class中加入需要调用的样式，在一些标签中加入事件调用

<div class="sel_gs right10" onclick="sel_bs(this)" onmouseleave="sel_bs_out(this)">
复选、单选插件调用：
复选：$(selector).checkBox({color:'blue'}),默认为 blue，其他 green , deepBlue
单选：$(selector).radio({color:'blue'}),,默认为 blue，其他 green , deepBlue
禁用单/复选框调用：
只需在单复选框标签中添加自定义属性:stops="true"
如：<label dataCheckBox="trueGraGra"><input type="checkbox" name="1" stops="true" />禁用</label>

参数

名称	类别	描述
sel_bs	css	自定义表单蓝色下拉框
sel_gs	css	自定义表单绿色下拉框
sel_gbs	css	自定义表单渐变下拉框
color	string	复选框颜色参数值：blue,green,deepBlue,GrayBlack,PurpleGrayBlack,GraGra
color	string	单选框颜色参数值：blue,green,deepBlue,twoGray,BlueGray

按钮组

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

html:

<div class="ui-btnGro-fbl" btnGro="true">
    <input type="button" value="Left" class="ui-btnGro-L btnGroYes"/>
    <input type="button" value="Middle" class="ui-btnGro-M" />
    <input type="button" value="Right" class="ui-btnGro-R" />
</div>

用法

只需要在class中加入需要调用的样式，比如要用蓝色扁平化路径导航（大），ui-btnGro-fbl 为蓝色扁平化按钮组（大），如需调用中、小按钮组，只需把 ui-btnGro-fbl 里的 fbl 更改为 flm（中）、fls（小），样式如下：

class="ui-btnGro-fbl"
class="ui-btnGro-L"
class="ui-btnGro-M"
class="ui-btnGro-R"
class="btnGroYes"
btnGro="true"

参数

名称	类别	描述
ui-btnGro-radius	css	圆角
ui-btnGro-fbl	css	蓝色扁平化按钮组（大）
ui-btnGro-fbm	css	蓝色扁平化按钮组（中）
ui-btnGro-fbs	css	蓝色扁平化按钮组（小）
ui-btnGro-fgl	css	绿色扁平化按钮组（大）
ui-btnGro-fgm	css	绿色扁平化按钮组（中）
ui-btnGro-fgs	css	绿色扁平化按钮组（小）
ui-btnGro-gbl	css	灰色渐变按钮组（大）
ui-btnGro-gbm	css	灰色渐变按钮组（中）
ui-btnGro-gbs	css	灰色渐变按钮组（小）
ui-btnGro-L	css	左边按钮
ui-btnGro-M	css	中间按钮
ui-btnGro-R	css	右边按钮
btnGroYes	css	默认选中
true	自定义属性 btnGro	用于调用JS

图标

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

cloud16

W_cloOk16

W_cloFai16

W_cloDow16

W_cloUpl16

W_pin116

W_pin216

cloud16

B_cloOk16

B_cloFai16

B_cloDow16

B_cloUpl16

B_pin116

B_pin216

html:

<span class="WB16 W_cloud16"></span>

用法

只需要在class中加入需要调用的样式，比如大小为 16 * 16 ，WB16（通用图标样式），W_cloud16（W为白色图标，cloud为图标名称，16为图标大小），如需换成大、中图标，则把 WB16、W_cloud16 中的 16 换成 24（中：WB24、W_cloud24）、32（大：WB32、W_cloud32），如需换成黑色图标，则把 W_cloud16 中的 W 换成 B （黑色：WB16、B_cloud16），样式如下：

class="WB16"
class="W_cloud16"

参数

名称	类别	描述
WB16	css	通用样式（WB通用，16、24、32为图标大小）
W_cloud16	css	图标定位【W为白色图标，cloud图标名称，16为图标大小（大小分为16、24、32）】

输入框组

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

@

html:

<div class="ui-intGro-Lfsbl">
<span>@</span>
<input type="text" />
</div>

用法

只需要在class中加入需要调用的样式，比如带@符号的输入框，根据参数调用对应样式：ui-intGro-Lfsbl

class="ui-intGro-Lfsbl"

参数

名称	类别	描述
ui-intGro-Lfsbl	css	蓝色带@符号【符号在左边】输入框组（直角、大）
ui-intGro-Lfsbm	css	蓝色带@符号【文本在左边】输入框组（直角、中）
ui-intGro-Lfsbs	css	蓝色带@符号【文本在左边】输入框组（直角、小）
ui-intGro-Rfsbl	css	蓝色带@example.com【文本在右边】输入框组（直角、大）
ui-intGro-Rfsbm	css	蓝色带@example.com【文本在右边】输入框组（直角、中）
ui-intGro-Rfsbs	css	蓝色带@example.com【文本在右边】输入框组（直角、小）
ui-intGro-Lfsgl	css	绿色带@符号【符号在左边】输入框组（直角、大）
ui-intGro-Lfsgm	css	绿色带@符号【文本在左边】输入框组（直角、中）
ui-intGro-Lfsgs	css	绿色带@符号【文本在左边】输入框组（直角、小）
ui-intGro-Rfsgl	css	绿色带@example.com【文本在右边】输入框组（直角、大）
ui-intGro-Rfsgm	css	绿色带@example.com【文本在右边】输入框组（直角、中）
ui-intGro-Rfsgs	css	绿色带@example.com【文本在右边】输入框组（直角、小）
ui-intGro-Lfshl	css	灰色带@符号【符号在左边】输入框组（直角、大）
ui-intGro-Lfshm	css	灰色带@符号【文本在左边】输入框组（直角、中）
ui-intGro-Lfshs	css	灰色带@符号【文本在左边】输入框组（直角、小）
ui-intGro-Rfshl	css	灰色带@example.com【文本在右边】输入框组（直角、大）
ui-intGro-Rfshm	css	灰色带@example.com【文本在右边】输入框组（直角、中）
ui-intGro-Rfshs	css	灰色带@example.com【文本在右边】输入框组（直角、小）
ui-intGro-Lffbl	css	蓝色带@符号【符号在左边】输入框组（圆角、大）
ui-intGro-Lffbm	css	蓝色带@符号【文本在左边】输入框组（圆角、中）
ui-intGro-Lffbs	css	蓝色带@符号【文本在左边】输入框组（圆角、小）
ui-intGro-Rffbl	css	蓝色带@example.com【文本在右边】输入框组（圆角、大）
ui-intGro-Rffbm	css	蓝色带@example.com【文本在右边】输入框组（圆角、中）
ui-intGro-Rffbs	css	蓝色带@example.com【文本在右边】输入框组（圆角、小）
ui-intGro-Lffgl	css	绿色带@符号【符号在左边】输入框组（圆角、大）
ui-intGro-Lffgm	css	绿色带@符号【文本在左边】输入框组（圆角、中）
ui-intGro-Lffgs	css	绿色带@符号【文本在左边】输入框组（圆角、小）
ui-intGro-Rffgl	css	绿色带@example.com【文本在右边】输入框组（圆角、大）
ui-intGro-Rffgm	css	绿色带@example.com【文本在右边】输入框组（圆角、中）
ui-intGro-Rffgs	css	绿色带@example.com【文本在右边】输入框组（圆角、小）
ui-intGro-Lffhl	css	灰色带@符号【符号在左边】输入框组（圆角、大）
ui-intGro-Lffhm	css	灰色带@符号【文本在左边】输入框组（圆角、中）
ui-intGro-Lffhs	css	灰色带@符号【文本在左边】输入框组（圆角、小）
ui-intGro-Rffhl	css	灰色带@example.com【文本在右边】输入框组（圆角、大）
ui-intGro-Rffhm	css	灰色带@example.com【文本在右边】输入框组（圆角、中）
ui-intGro-Rffhs	css	灰色带@example.com【文本在右边】输入框组（圆角、小）
ui-selGro-Fsb	css	蓝色带下拉链接输入框组
ui-selGro-Fsg	css	绿色带下拉链接输入框组
ui-selGro-Fsh	css	灰色带下拉链接输入框组
LselFil	css	带下拉链接输入框组（上左、下左圆角）
RselFil	css	带下拉链接输入框组（上右、下右圆角）
ui-boxGro	css	带复选按钮输入框组
intGroT	css	带复选按钮输入框组（复选框样式）
intGroI	css	带复选按钮输入框组（文本框样式）
intBorRig	css	带复选按钮输入框组（无右边框）

分页

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

1 2 3 4

html:

<div class="ui-Page-Fbl">
    <ul>
        <li>
            <input type="button" value="<<" />
            <a href="" class="Page_A">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <input type="button" value=">>" />
            <input type="text" />
            <input type="button" value="Enter" />
        </li>
    </ul>
</div>

用法

只需要在class中加入需要调用的样式，根据参数调用对应样式：ui-Page-Fbl

class="ui-Page-Fbl"
class="Page_A"

参数

名称	类别	描述
ui-Page-Fbl	css	蓝色（大）
ui-Page-Fbm	css	蓝色（中）
ui-Page-Fbs	css	蓝色（小）
ui-Page-Fgl	css	绿色（大）
ui-Page-Fgm	css	绿色（中）
ui-Page-Fgs	css	绿色（小）
ui-Page-Fhl	css	深蓝色（大）
ui-Page-Fhm	css	深蓝色（中）
ui-Page-Fhs	css	深蓝色（小）
ui-Page-Forl	css	橙色（大）
ui-Page-Form	css	橙色（中）
ui-Page-Fors	css	橙色（小）
ui-Page-Fgyl	css	灰色（大）
ui-Page-Fgym	css	灰色（中）
ui-Page-Fgys	css	灰色（小）
Page_A	css	当前页样式

徽章

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

18 8

html:

<span class="ui-Badge-fbSCl">8</span>

用法

只需要在class中加入需要调用的样式，根据参数调用对应样式：ui-Badge-fbSCl，如需白色背景，在父级加上 ui-Badge 样式即可

class="ui-Badge-fbSCl"

参数

名称	类别	描述
ui-Badge-fbSCl	css	蓝色（大、半圆角）
ui-Badge-fbSCs	css	蓝色（小、半圆角）
ui-Badge-fbCl	css	蓝色（大、全圆角）
ui-Badge-fbCs	css	蓝色（小、全圆角）
ui-Badge-fhSCl	css	灰色（大、半圆角）
ui-Badge-fhSCs	css	灰色（小、半圆角）
ui-Badge-fhCl	css	灰色（大、全圆角）
ui-Badge-fhCs	css	灰色（小、全圆角）
ui-Badge-fbbSCl	css	深蓝色（大、半圆角）
ui-Badge-fbbSCs	css	深蓝色（小、半圆角）
ui-Badge-fbbCl	css	深蓝色（大、全圆角）
ui-Badge-fbbCs	css	深蓝色（小、全圆角）
ui-Badge	css	徽章为白色背景时，父级加上 ui-Badge 样式

缩略图

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

Apple Watch

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Apple Watch

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

html:

<div class="Thumbnail"><a href="#" class="ui-Thumbnail"><img src="images/ThuBna_1.jpg" /></a></div>

用法

只需要在class中加入需要调用的样式，只需在元素上加 ui-Thumbnail 样式即可

class="ui-Thumbnail"

参数

名称	类别	描述
ui-Thumbnail	css	只需在元素上加 ui-Thumbnail 样式即可

警告框

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

Well done! You successfully read this important alert message.

html:

<div class="ui-alert-blue">
<input type="button" value="X" title="关闭" alert="close"/>
Well done! <a href="javascript:void(0)">You successfully</a> read this important alert message.
</div>

用法

只需要在class中加入需要调用的样式，只需在元素上加 ui-alert-blue 样式即可，如果不需要手动关闭按钮，则把<input type="button" value="X" title="关闭" alert="close"/> 删除即可，如不需要链接，则把 a 标签删除即可

class="ui-alert-blue"

参数

名称	类别	描述
ui-alert-blue	css	蓝色
ui-alert-green	css	绿色
ui-alert-pink	css	粉红色

进度条

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

50%

html:

<div class="ui-progress-blue">
<div style="width:50%;">50%</div>
</div>

用法

只需要在class中加入需要调用的样式，只需在元素上加 ui-progress-blue 样式即可，如果不需要显示进度则把50%删除即可

class="ui-progress-blue"

参数

名称	类别	描述
ui-progress-blue	css	蓝色
ui-progress-green	css	绿色
ui-alert-orange	css	橘色
ui-alert-red	css	红色

媒体

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

html:

<div class="ui-media">
    <div class="ui-MedLeft ui-MedTop">
        <a href=""><img src="../../images/ThuBna_8.jpg" width="128" /></a>
    </div>
    <ul>
        <h4>Media heading</h4>
        <li>
            Cras sit amet nibh libero, <a href="javascript:void(0)">in gravida nulla</a>. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
        </li>
    </ul>
</div>

用法

只需要在class中加入需要调用的样式，只需在元素上加 ui-media ui-MedLeft ui-MedTop 样式即可

class="ui-media ui-MedLeft ui-MedTop"

参数

名称	类别	描述
ui-media	css	整体样式
ui-MedLeft	css	图片靠左
ui-MedRight	css	图片靠右
ui-MedTop	css	图片顶部对齐
ui-MedCtr	css	图片上下居中
ui-MedBtm	css	图片底部对齐

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

html:

<div class="ui-navBlue ui-Navigation">
    <div class="main" style="width:1000px;">
        <h3><a href="#"><img src="/images/logo_004.png" /></a></h3>
        <ul>
            <li>
                <a href="#">Home</a>
                <div>
                    <a href="#">SearchResults</a>
                </div>
            </li>
        </ul>
        <span>
            <input type="text" value="Search"/>
            <input type="button" value="Submit" />
        </span>
    </div>
</div>

用法

只需按格式标签添加及样式添加即可，导航内容可自定义

class="ui-navBlue ui-Navigation main"

参数

名称	类别	描述
ui-navBlue	css	蓝色导航条
ui-Navigation	css	用来调用js
main	css	导航居中

标签

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

普通新品热门自定义自定义自定义

html:

<span class="ui-label-sBlue">普通</span>

用法

只需一个span标签及添加样式即可，文字可自义定

class="ui-label-sBlue"

参数

名称	类别	描述
ui-label-sBlue	css	深蓝色背景
ui-label-green	css	绿色背景
ui-label-red	css	红色背景
ui-label-tBlue	css	天蓝色背景
ui-label-yellow	css	黄色背景
ui-label-grey	css	灰色背景

排版

支持链式调用
此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

html:

<div class="hero-unit">
    <h1>Hello, world!</h1>
    <p>
        This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
    </p>
    <p>
        <a href="javascript:void(0);" class="uiBtnSblueFilL">
            Learn more
        </a>
    </p>
</div>

用法

只需添加html和样式即可，按钮样式直接调用按钮组件样式

class="hero-unit"

参数

名称	类别	描述
hero-unit	css	排版样式
uiBtnSblueFilL	css	按钮组件样式

select下拉

此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

html:

<select class="selBlueRigL">
    <option>select1</option>
    <option>select2</option>
    <option>select3</option>
    <option>select4</option>
    <option>select5</option>
</select>

用法

只需添加样式即可

class="selBlueRigL"

参数

名称	类别	描述
selBlueRigL	css	蓝色直角大
selBlueRigM	css	蓝色直角中
selBlueRigS	css	蓝色直角小
selGreenRigL	css	绿色直角大
selGreenRigM	css	绿色直角中
selGreenRigS	css	绿色直角小
selSblueRigL	css	深蓝色色直角大
selSblueRigM	css	深蓝色色直角中
selSblueRigS	css	深蓝色色直角小
selBlueFilL	css	蓝色圆角大
selBlueFilM	css	蓝色圆角中
selBlueFilS	css	蓝色圆角小
selGreenFilL	css	绿色圆角大
selGreenFilM	css	绿色圆角中
selGreenFilS	css	绿色圆角小
selSblueFilL	css	深蓝色色圆角大
selSblueFilM	css	深蓝色色圆角中
selSblueFilS	css	深蓝色色圆角小

textarea文本域

此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

html:

<textarea class="tareaBlueRig" w="300" h="100"></textarea>

用法

只需添加样式即可

class="tareaBlueRig"

参数

名称	类别	描述
w	number	宽度
h	number	高度
tareaBlueRig	css	蓝色直角文本域
tareaBlueFil	css	蓝色圆角文本域
tareaGreenRig	css	绿色直角文本域
tareaGreenFil	css	绿色圆角文本域
tareaSblueRig	css	深蓝色直角文本域
tareaSblueFil	css	深蓝色圆角文本域
tareaOrangeRig	css	橙色直角文本域
tareaOrangeFil	css	橙色圆角文本域
tareaOgeRedRig	css	橘红色直角文本域
tareaOgeRedFil	css	橘红色圆角文本域
tareaGreyRig	css	灰色直角文本域
tareaGreyFil	css	灰色圆角文本域

file文件域

此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

html:

<div class="ui-file">
    <input type="button" value="选择文件" class="uiBtnOgeRedFilM" />
    <span></span>
    <input type="file"/>
</div>

用法

只需添加样式即可

class="ui-file"

参数

名称	类别	描述
ui-file	css	file文件域样式
uiBtnOgeRedFilM	css	按钮组件样式

滤镜

此组件支持链式调用

支持多次调用
此组件支持同一个页面多次调用

实例更多>>

fsds

html:

<div class="ui-filter">
<img src="images/ThuBna_1.jpg">
<span style="color:red;">fsds</span>
</div>

用法

只需添加样式即可

class="ui-filter"

参数

名称	类别	描述
ui-filter	css	灰色滤镜

各插件功能点

按钮
按钮下拉菜单
输入框
列表
导航
路径导航
面板
表格
自定义表单
按钮组
图标
输入框组
分页
徽章
缩略图
警告框
进度条
媒体
导航条
标签
排版
select下拉
textarea文本域
file文件域
滤镜

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget