瑞祥UI

退出
用户名

按钮

按钮分为大中小3个规格，分别为small、normal、large ; 颜色分为：灰色、蓝色、绿色、红色、橙色、白色 ; 状态分为：禁用及未禁用。

实例:

view source
print?
01.<div class="mb10">
02.    <input type="button" value="按钮" class="uiBtn-small uiBtn-gray">
03.    <input type="button" value="按钮" class="uiBtn-normal uiBtn-gray">
04.    <input type="button" value="按钮" class="uiBtn-large uiBtn-gray">
05.</div>
06.<div class="mb10">
07.    <input type="button" value="灰色按钮" class="uiBtn-normal uiBtn-gray">
08.    <input type="button" value="蓝色按钮" class="uiBtn-normal uiBtn-blue">
09.    <input type="button" value="绿色按钮" class="uiBtn-normal uiBtn-green">
10.    <input type="button" value="红色按钮" class="uiBtn-normal uiBtn-red">
11.    <input type="button" value="橙色按钮" class="uiBtn-normal uiBtn-orange">
12.    <input type="button" value="白色按钮" class="uiBtn-normal uiBtn-white">
13.</div>
14.<div class="mb10">
15.    <input type="button" value="灰色禁用" disabled="disabled" class="uiBtn-normal uiBtn-gray-no">
16.    <input type="button" value="蓝色禁用" disabled="disabled" class="uiBtn-normal uiBtn-blue-no">
17.    <input type="button" value="绿色禁用" disabled="disabled" class="uiBtn-normal uiBtn-green-no">
18.    <input type="button" value="红色禁用" disabled="disabled" class="uiBtn-normal uiBtn-red-no">
19.    <input type="button" value="橙色禁用" disabled="disabled" class="uiBtn-normal uiBtn-orange-no">
20.    <input type="button" value="白色禁用" disabled="disabled" class="uiBtn-normal uiBtn-white-no">
21.</div>

文本输入框、文本选择框

文本输入框及文本选择框的宽度尽量使用内容宽度（80、100、120、160、180、210、250）

实例:

view source
print?
01.<div class="mb10">
02.    <input class="width160" type="text" placeholder="默认">
03.    <input class="form-control width160" type="text" placeholder="focus有边框高亮">
04.    <div class="width160  uiText-failBorder dis-il-block">
05.        <input type="text" class="form-control col-md-12" placeholder="发生错误文本框">
06.    </div>
07.    <div class="width160  uiText-warnBorder dis-il-block">
08.        <input type="text" class="form-control  col-md-12" placeholder="需要警告文本框">
09.    </div>
10.</div>
11.<div class="mb10">
12.    <select class="width160">
13.        <option>选项一</option>
14.        <option>选项二</option>
15.        <option>选项三</option>
16.    </select>
17.    <select class="width250">
18.        <option>选项一</option>
19.        <option>选项二</option>
20.        <option>选项三</option>
21.    </select>
22.</div>

文本框组件

文本输入框及文本选择框的宽度尽量使用内容宽度（80、100、120、160、180、210、250）

实例:

￥
.00
@

自定义

view source
print?
01.<div class="clearfix uiHas-textIcon width250 ma10">
02.    <input type="text" class="form-control width250">
03.    <i class="uiText-adoptIcon bgIcon"></i>
04.</div>
05.<div class="clearfix uiHas-textIcon width250 ma10">
06.    <input type="text" class="form-control width250">
07.    <i class="uiText-failIcon bgIcon"></i>
08.</div>
09.<div class="clearfix uiHas-textIcon width250 ma10">
10.    <input type="text" class="form-control width250">
11.    <i class="uiText-warnIcon bgIcon"></i>
12.</div>
13.<div class="clearfix uiHas-textIcon width250 ma10">
14.    <input type="text" class="form-control width250">
15.    <i class="uiText-searchIcon bgIcon"></i>
16.</div>
17.<div class="clearfix uiHas-textIcon width250 ma10">
18.    <input type="text" class="form-control width250">
19.    <i class="uiText-timeIcon bgIcon"></i>
20.</div>
21.<div class="width120 ma10 uiText-selfAuto">
22.    <span class="uiText-reduceIcon1 bgIcon"></span>
23.    <input type="text" class="form-control  noradius" value="123">
24.    <span class="uiText-plusIcon1 bgIcon"></span>
25.</div>
26.<div class="width120 ma10 uiText-selfAuto">
27.    <input type="text" class="form-control norbradius" value="123">
28.    <div class="uiText-div">
29.        <span class="uiText-reduceIcon2 bgIcon"></span>
30.        <span class="uiText-plusIcon2 bgIcon"></span>
31.    </div>
32.</div>
33.<div class="width120 ma10 uiText-selfAuto">
34.    <div class="uiText-commonIcon uiText-commonIcon-left">￥</div>
35.    <input type="text" class="form-control noradius">
36.    <div class="uiText-commonIcon uiText-commonIcon-right">.00</div>
37.</div>
38.<div class="width120 ma10 uiText-selfAuto">
39.    <span class="uiText-commonIcon uiText-commonIcon-left">@</span>
40.    <input type="text" class="form-control nolbradius">
41.</div>
42.<div class="ma10 uiText-selfAuto width180">
43.    <div class="uiText-div relative">
44.        <p class="uiDropdown-toggle">自定义<em class="bgIcon"></em></p>
45.        <ul class="uiDropdown-menu">
46.            <li><a href="javascript">菜单一</a></li>  
47.            <li><a href="javascript">菜单二</a></li>  
48.            <li><a href="javascript">菜单三</a></li>  
49.        </ul>
50.    </div>
51.    <input type="text" placeholder="请输入关键字" class="form-control nolbradius">
52.</div>

图片上传，单选多选

实例:

view source
print?
01.<div class="clearfix mb10">
02.    <div class="fl uiImgUpload uiImgUpload-gblock mr10" style="width: 50px;height: 50px;">
03.        <a href="javascript:">
04.            <input type="file" value="" class="file">
05.            <em class="bgIcon file-ico"></em>
06.        </a>
07.    </div>
08.    <div class="fl uiImgUpload uiImgUpload-bblock" style="width: 50px;height: 50px;">
09.        <a href="javascript:">
10.            <input type="file" value="" class="file">
11.            <em class="bgIcon file-ico"></em>
12.        </a>
13.    </div>
14.</div>
15.<div class="mb10">
16.    <label class="uiRadio12"><input type="radio" name="a" class="uiRadio12-input">单选1</label>
17.    <label class="uiRadio12"><input type="radio" name="a" class="uiRadio12-input">单选2</label>
18.    <label class="uiRadio12"><input type="checkbox" class="uiRadio12-input">单选1</label>
19.    <label class="uiRadio12"><input type="checkbox" class="uiRadio12-input">单选2</label>
20.</div>
21.<div class="mb10">
22.    <label class="uiRadio14"><input type="radio" name="b" class="uiRadio14-input">单选1</label>
23.    <label class="uiRadio14"><input type="radio" name="b" class="uiRadio14-input">单选2</label>
24.    <label class="uiRadio14"><input type="checkbox" class="uiRadio14-input">单选1</label>
25.    <label class="uiRadio14"><input type="checkbox" class="uiRadio14-input">单选2</label>
26.</div>

table表格

实例:

序号 任务编号 执行人 连级名称 任务名称 预计得分 开始时间 结束时间 操作
01 Ant-Dlise-1 周慧文 UE/UX 网页界面设计 0 01-15 01-15
01 Ant-Dlise-1 周慧文 UE/UX 网页界面设计 0 01-15 01-15
序号 任务编号 执行人 连级名称 任务名称 预计得分 开始时间 结束时间 操作
01 Ant-Dlise-1 周慧文 UE/UX 网页界面设计 0 01-15 01-15
01 Ant-Dlise-1 周慧文 UE/UX 网页界面设计 0 01-15 01-15
序号 任务编号 执行人 连级名称 任务名称 预计得分 开始时间 结束时间 操作
01 Ant-Dlise-1 周慧文 UE/UX 网页界面设计 0 01-15 01-15
view source
print?
001.<table class="mt20 uiTable">
002.    <tbody>
003.        <tr>
004.            <th>序号</th>
005.            <th>任务编号</th>
006.            <th>执行人</th>
007.            <th>连级名称</th>
008.            <th>任务名称</th>
009.            <th>预计得分</th>
010.            <th>开始时间</th>
011.            <th>结束时间</th>
012.            <th>操作</th>
013.        </tr>
014.        <tr>
015.            <td>01</td>
016.            <td>Ant-Dlise-1</td>
017.            <td>周慧文</td>
018.            <td>UE/UX</td>
019.            <td>网页界面设计</td>
020.            <td>0</td>
021.            <td>01-15</td>
022.            <td>01-15</td>
023.            <td>
024.                <input type="button" value="按 钮" class="uiBtn-blue uiBtn-small">
025.            </td>
026.        </tr>
027.        <tr>
028.            <td>01</td>
029.            <td>Ant-Dlise-1</td>
030.            <td>周慧文</td>
031.            <td>UE/UX</td>
032.            <td>网页界面设计</td>
033.            <td>0</td>
034.            <td>01-15</td>
035.            <td>01-15</td>
036.            <td>
037.                <input type="button" value="按 钮" class="uiBtn-blue uiBtn-small">
038.            </td>
039.        </tr>
040.    </tbody>
041.</table>
042.<table class="mt20 uiTableLeft">
043.    <tbody>
044.        <tr>
045.            <th>序号</th>
046.            <th>任务编号</th>
047.            <th>执行人</th>
048.            <th>连级名称</th>
049.            <th>任务名称</th>
050.            <th>预计得分</th>
051.            <th>开始时间</th>
052.            <th>结束时间</th>
053.            <th>操作</th>
054.        </tr>
055.        <tr>
056.            <td>01</td>
057.            <td>Ant-Dlise-1</td>
058.            <td>周慧文</td>
059.            <td>UE/UX</td>
060.            <td>网页界面设计</td>
061.            <td>0</td>
062.            <td>01-15</td>
063.            <td>01-15</td>
064.            <td>
065.                <input type="button" value="按 钮" class="uiBtn-blue uiBtn-small">
066.            </td>
067.        </tr>
068.        <tr>
069.            <td>01</td>
070.            <td>Ant-Dlise-1</td>
071.            <td>周慧文</td>
072.            <td>UE/UX</td>
073.            <td>网页界面设计</td>
074.            <td>0</td>
075.            <td>01-15</td>
076.            <td>01-15</td>
077.            <td>
078.                <input type="button" value="按 钮" class="uiBtn-blue uiBtn-small">
079.            </td>
080.        </tr>
081.    </tbody>
082.</table>
083.<table class="mt20 uiTableRight">
084.    <tbody>
085.        <tr>
086.            <th>序号</th>
087.            <th>任务编号</th>
088.            <th>执行人</th>
089.            <th>连级名称</th>
090.            <th>任务名称</th>
091.            <th>预计得分</th>
092.            <th>开始时间</th>
093.            <th>结束时间</th>
094.            <th>操作</th>
095.        </tr>
096.        <tr>
097.            <td>01</td>
098.            <td>Ant-Dlise-1</td>
099.            <td>周慧文</td>
100.            <td>UE/UX</td>
101.            <td>网页界面设计</td>
102.            <td>0</td>
103.            <td>01-15</td>
104.            <td>01-15</td>
105.            <td>
106.                <input type="button" value="按 钮" class="uiBtn-blue uiBtn-small">
107.            </td>
108.        </tr>
109.    </tbody>
110.</table>

对话组件

实例:

这是聊天的文字这是聊天的文字这是聊天的文字
这是聊天的文字这是聊天的文字这是聊天的文字
这是回复聊天的文字
这是回复聊天的文字
view source
print?
01.<div class="relative uiTalkGray uiTalk34  mb10 mt10">
02.    <i class="uiTalk-icon uiTalk-icon-left"></i>
03.    <div class="uiTalk-iframe">这是聊天的文字这是聊天的文字这是聊天的文字</div>
04.</div>
05.<div class="relative uiTalkGray uiTalk30 mb10">
06.    <i class="uiTalk-icon uiTalk-icon-left"></i>
07.    <div class="uiTalk-iframe">这是聊天的文字这是聊天的文字这是聊天的文字</div>
08.</div>
09.<div class="relative clearfix uiTalkBlue uiTalk34 mb10">
10.    <i class="uiTalk-icon uiTalk-icon-right"></i>
11.    <div class="uiTalk-iframe fr">这是回复聊天的文字</div>
12.</div>
13.<div class="relative clearfix uiTalkBlue uiTalk30 mb10">
14.    <i class="uiTalk-icon uiTalk-icon-right"></i>
15.    <div class="uiTalk-iframe fr">这是回复聊天的文字</div>
16.</div>

tab切换组件

实例:

  • 选中项
  • 选中项一
  • 选中项二
  • 选中项
  • 选中项
  • 选中项
  • 选中项
  • 选中项一
  • 选中项二
  • 选中项三
  • 选中项
  • 选中项一
  • 选中项二
  • 选中项三
view source
print?
01.<ul class="clearfix uiTab1">
02.    <li class="uiTab1-active"><a href="javascript:">选中项</a></li>
03.    <li><a href="javascript:">选中项一</a></li>
04.    <li><a href="javascript:">选中项二</a></li>
05.    <li><a href="javascript:">选中项三</a></li>
06.</ul>
07.<ul class="clearfix uiTab2 mt20">
08.    <li class="uiTab2-active"><a href="javascript:">选中项</a></li>
09.    <li><a href="javascript:">选中项一</a></li>
10.    <li><a href="javascript:">选中项二</a></li>
11.    <li><a href="javascript:">选中项三</a></li>
12.</ul>
13.<ul class="clearfix uiTab3 mt20">
14.    <li class="uiTab3-active"><a href="javascript:">选中项</a></li>
15.    <li><a href="javascript:">选中项一</a></li>
16.    <li><a href="javascript:">选中项二</a></li>
17.    <li><a href="javascript:">选中项三</a></li>
18.</ul>
19.<ul class="clearfix uiTab4 mt20">
20.    <li class="uiTab4-active"><a href="javascript:">选中项</a></li>
21.    <li><a href="javascript:">选中项一</a></li>
22.    <li><a href="javascript:">选中项二</a></li>
23.    <li class="border-rNone"><a href="javascript:">选中项三</a></li>
24.</ul>
25.<!--js辅助算层级-->
26.<ul class="clearfix uiTab5 mt20">
27.    <li class="fl uiTab5-active">
28.        选中项
29.        <i class="uiTab-i"></i>
30.    </li>
31.    <li class="fl">
32.        选中项一
33.        <i></i>
34.    </li>
35.    <li class="fl">
36.        选中项二
37.        <i></i>
38.    </li>
39.</ul>
40.<ul class="clearfix uiTab6 mt20">
41.    <li class="fl uiTab6-active">
42.        <i class="fl uiTab-i1"></i>
43.        <div class="fl uiTab-type">选中项</div>
44.        <em class="fl uiTab-i2"></em>
45.    </li>
46.    <li class="fl">
47.        <i class="fl"></i>
48.        <div class="fl">选中项</div>
49.        <em class="fl"></em>
50.    </li>
51.    <li class="fl">
52.        <i class="fl"></i>
53.        <div class="fl">选中项</div>
54.        <em class="fl"></em>
55.    </li>
56.</ul>
57.<ul class="clearfix uiTab7 mt20">
58.    <li class="fl uiTab7-active uifirst">选中项</li>
59.    <li class="fl">选中项一</li>
60.    <li class="fl">选中项二</li>
61.    <li class="fl uilast">选中项三</li>
62.</ul>
63.<ul class="clearfix uiTab8 mt20 mb20">
64.    <li class="fl uiTab8-active">选中项</li>
65.    <li class="fl">选中项一</li>
66.    <li class="fl">选中项二</li>
67.    <li class="fl">选中项三</li>
68.</ul>

进度条及通知类提示

实例:

50%
60%
80%
6 6 6 6 6

6 6 6 6 6



6 6 6 6 6

99+ 99+ 99+ 99+ 99+
view source
print?
01.<div class="uiBar mt20">
02.    <span class="uiBar-hor bgRed" style="width: 632px; display: inline-block; overflow: hidden;"></span>
03.    <span class="uiBar-num">50%</span>
04.</div>
05.<div class="uiBar mt20">
06.    <span style="width: 758px; display: inline-block; overflow: hidden;" class="uiBar-hor bgBlue"></span>
07.    <span class="uiBar-num">60%</span>
08.</div>
09.<div class="uiBar mt20 mb20">
10.    <span style="width: 1011px; display: inline-block; overflow: hidden;" class="uiBar-hor bgGreen"></span>
11.    <span class="uiBar-num">80%</span>
12.</div>
13.<span class="uiPromt1-into bgBlue">6</span>
14.<span class="uiPromt1-fail bgRed">6</span>
15.<span class="uiPromt1-warn bgGreen">6</span>
16.<span class="uiPromt1-success bgOrange">6</span>
17.<span class="uiPromt1-ccc bgGray">6</span>
18.<br>
19.<br>
20.<span class="uiPromt2-into bgBlue">6</span>
21.<span class="uiPromt2-fail bgRed">6</span>
22.<span class="uiPromt2-warn bgGreen">6</span>
23.<span class="uiPromt2-success bgOrange">6</span>
24.<span class="uiPromt2-ccc bgGray">6</span>
25.<br>
26.<br>
27.<span class="uiPromt3-into bgBlue"></span>
28.<span class="uiPromt3-fail bgRed"></span>
29.<span class="uiPromt3-warn bgGreen"></span>
30.<span class="uiPromt3-success bgOrange"></span>
31.<span class="uiPromt3-ccc bgGray"></span>
32.<br>
33.<br>
34.<span class="uiPromt4-into bgBlue">6</span>
35.<span class="uiPromt4-fail bgRed">6</span>
36.<span class="uiPromt4-warn bgGreen">6</span>
37.<span class="uiPromt4-success bgOrange">6</span>
38.<span class="uiPromt4-ccc bgGray">6</span>
39.<br>
40.<br>   
41.<span class="uiPromt5-into bgBlue">99+</span>
42.<span class="uiPromt5-fail bgRed">99+</span>
43.<span class="uiPromt5-warn bgGreen">99+</span>
44.<span class="uiPromt5-success bgOrange">99+</span>
45.<span class="uiPromt5-ccc bgGray">99+</span>

翻页

实例:

< 1 2 3 ... 50 > 跳至
页
上一页 1 2 3 ... 50 下一页 跳至
页
< 1 2 3 ... 50 > 跳至
页
上一页 1 2 3 ... 50 下一页 跳至
页
view source
print?
01.<div class="uiPage1 tx-right mb10">
02.    <a href="javascript:;" class="ui-prev"><</a>
03.    <span class="uiPage1-active">1</span>
04.    <a href="javascript:;" class=" uiPage1-page ">2</a>
05.    <a href="javascript:;" class=" uiPage1-page">3</a>
06.    <span class="uiPage1-span ">...</span>
07.    <a href="javascript:;" class=" uiPage1-page">50</a>
08.    <a href="javascript:;" class="ui-next mr10">></a>
09.    <span class="uiPage-text">跳至</span>
10.    <div class="uiPage-value">
11.        <input type="text" class="form-control col-md-12">
12.    </div>
13.    <span class="uiPage-text">页</span>
14.    <input type="button" value="确 定" class="uiBtn-blue uiBtn-small">
15.</div>
16.<div class="uiPage1  tx-right mb10">
17.    <a href="javascript:;" class="ui-prev ">上一页</a>
18.    <span class="uiPage1-active ">1</span>
19.    <a href="javascript:;" class="uiPage1-page ">2</a>
20.    <a href="javascript:;" class="uiPage1-page ">3</a>
21.    <span class="uiPage1-span ">...</span>
22.    <a href="javascript:;" class="uiPage1-page ">50</a>
23.    <a href="javascript:;" class="ui-next mr10">下一页</a>
24.    <span class="uiPage-text ">跳至</span>
25.    <div class="uiPage-value ">
26.        <input type="text" class="form-control col-md-12">
27.    </div>
28.    <span class="uiPage-text ">页</span>
29.    <input type="button" value="确 定" class="uiBtn-blue uiBtn-small">
30.</div>
31.<div class=" tx-right mb10">
32.    <a href="javascript:;" class="ui-prev "><</a>
33.    <span class="uiPage1-active">1</span>
34.    <a href="javascript:;" class="uiPage1-page ">2</a>
35.    <a href="javascript:;" class="uiPage1-page ">3</a>
36.    <span class="uiPage1-span ">...</span>
37.    <a href="javascript:;" class="uiPage1-page ">50</a>
38.    <a href="javascript:;" class="ui-next  mr10">></a>
39.    <span class="uiPage-text  ">跳至</span>
40.    <div class="uiPage-value ">
41.        <input type="text" class="form-control col-md-12">
42.    </div>
43.    <span class="uiPage-text">页</span>
44.    <input type="button" value="确 定" class="uiBtn-blue uiBtn-small">
45.</div>
46.<div class="tx-right mb10">
47.    <a href="javascript:;" class="ui-prev">上一页</a>
48.    <span class="uiPage1-active">1</span>
49.    <a href="javascript:;" class="uiPage1-page">2</a>
50.    <a href="javascript:;" class="uiPage1-page">3</a>
51.    <span class="uiPage1-span">...</span>
52.    <a href="javascript:;" class="uiPage1-page">50</a>
53.    <a href="javascript:;" class="ui-next mr10">下一页</a>
54.    <span class="uiPage-text">跳至</span>
55.    <div class="uiPage-value">
56.        <input type="text" class="form-control col-md-12">
57.    </div>
58.    <span class="uiPage-text">页</span>
59.    <input type="button" value="确 定" class="uiBtn-blue uiBtn-small">
60.</div>

评分

此效果必须引用rxued.js，然后调用方法。

实例:

您的评分：分

您的评分：分

您的评分：分

view source
print?
01.<div class="star_scorePs1  clearfix">
02.    <div class="dis_il_block star_score fl">
03.        <a href="javascript:void(0)"></a>
04.        <a class="right" href="javascript:void(0)"></a>
05.        <a href="javascript:void(0)"></a>
06.        <a class="right" href="javascript:void(0)"></a>
07.        <a href="javascript:void(0)"></a>
08.        <a class="right" href="javascript:void(0)"></a>
09.        <a href="javascript:void(0)"></a>
10.        <a class="right" href="javascript:void(0)"></a>
11.        <a href="javascript:void(0)"></a>
12.        <a class="right" href="javascript:void(0)"></a>
13.    </div>
14.    <p class="fl ml10">您的评分：<span class="fenshu"></span>分</p>
15.    <div class="attitude fl ml10"></div>
16.</div>
17.<div class="star_scorePs2 clearfix">
18.    <div class="dis_il_block star_score fl">
19.        <a href="javascript:void(0)"></a>
20.        <a class="right" href="javascript:void(0)"></a>
21.        <a href="javascript:void(0)"></a>
22.        <a class="right" href="javascript:void(0)"></a>
23.        <a href="javascript:void(0)"></a>
24.        <a class="right" href="javascript:void(0)"></a>
25.        <a href="javascript:void(0)"></a>
26.        <a class="right" href="javascript:void(0)"></a>
27.        <a href="javascript:void(0)"></a>
28.        <a class="right" href="javascript:void(0)"></a>
29.    </div>
30.    <p class="fl ml10">您的评分：<span class="fenshu"></span>分</p>
31.    <div class="attitude fl ml10"></div>
32.</div>
33.<div class="star_scorePs3 clearfix">
34.    <div class="dis_il_block star_score fl">
35.        <a href="javascript:void(0)"></a>
36.        <a class="right" href="javascript:void(0)"></a>
37.        <a href="javascript:void(0)"></a>
38.        <a class="right" href="javascript:void(0)"></a>
39.        <a href="javascript:void(0)"></a>
40.        <a class="right" href="javascript:void(0)"></a>
41.        <a href="javascript:void(0)"></a>
42.        <a class="right" href="javascript:void(0)"></a>
43.        <a href="javascript:void(0)"></a>
44.        <a class="right" href="javascript:void(0)"></a>
45.    </div>
46.    <p class="fl ml10">您的评分：<span class="fenshu"></span>分</p>
47.    <div class="attitude fl ml10"></div>
48.</div>