23 | 访问 SUI 官方网站 24 |
25 |sui-label类名确定一个元素以label样式显示，再加之label-***可以区分不同状态的标识label
52 | ul.demo-operations.clearfix
53 | li
54 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
55 |
56 |
--------------------------------------------------------------------------------
/less/tag.less:
--------------------------------------------------------------------------------
1 | .sui-tag {
2 | list-style: none;
3 | font-size: 0;
4 | line-height: 0;
5 | padding: 5px 5px 0 5px;
6 | &>li, &>a {
7 | font-size: @baseFontSize;
8 | margin: 0 5px 5px 0;
9 | display: inline-block;
10 | overflow: hidden;
11 | color: @black;
12 | background: @btnBackgroundHighlight;
13 | padding: 0 7px;
14 | height: 20px;
15 | line-height: 20px;
16 | border: 1px solid #d1d1d1;
17 | white-space: nowrap;
18 | cursor: pointer;
19 | &:hover {
20 | color: @stepsCurrentColor;
21 | }
22 | &.tag-selected {
23 | color: @white;
24 | background: @stepsCurrentColor;
25 | border-color: #1c91d3;
26 | }
27 | .transition(color 0.2s ease-out);
28 | &.with-x {
29 | cursor: default;
30 | i {
31 | margin-left: 10px;
32 | cursor: pointer;
33 | font: normal 14px tahoma;
34 | display: inline-block;
35 | height: 100%;
36 | vertical-align: middle;
37 | }
38 | }
39 |
40 | }
41 | /*
42 | &.tag-hole {
43 | &>li, &>span {
44 | padding: 0 10px 0 15px;
45 | height: 28px;
46 | line-height: 28px;
47 | position: relative;
48 | &:before {
49 | content: '';
50 | position: absolute;
51 | width: 12px;
52 | height: 12px;
53 | left: -7px;
54 | top: 50%;
55 | margin-top: -7px;
56 | background: @white;
57 | border: 1px solid #d1d1d1;
58 | //border-width: 1px 1px 0 0;
59 | .border-radius(6px);
60 | }
61 | }
62 | }
63 | */
64 | }
65 |
--------------------------------------------------------------------------------
/less/code.less:
--------------------------------------------------------------------------------
1 | //
2 | // Code (inline and blocK)
3 | // --------------------------------------------------
4 |
5 |
6 | // Inline and block code styles
7 | code,
8 | .sui-code,
9 | pre,
10 | .sui-pre
11 | {
12 | padding: 0 3px 2px;
13 | #font > #family > .monospace;
14 | font-size: @baseFontSize - 2;
15 | color: @grayDark;
16 | .border-radius(3px);
17 | }
18 |
19 | // Inline code
20 | code,
21 | .sui-code
22 | {
23 | padding: 2px 4px;
24 | color: #d14;
25 | background-color: #f7f7f9;
26 | white-space: nowrap;
27 | }
28 |
29 | // Blocks of code
30 | pre,
31 | sui-pre
32 | {
33 | display: block;
34 | padding: (@baseLineHeight - 1) / 2;
35 | margin: 0 0 @baseLineHeight / 2;
36 | font-size: @baseFontSize - 1; // 14px to 13px
37 | line-height: @baseLineHeight;
38 | word-break: break-all;
39 | word-wrap: break-word;
40 | white-space: pre;
41 | white-space: pre-wrap;
42 | background-color: #f5f5f5;
43 | border: 1px solid #ccc; // fallback for IE7-8
44 | border: 1px solid rgba(0,0,0,.15);
45 | .border-radius(@baseBorderRadius);
46 |
47 | // Make prettyprint styles more spaced out for readability
48 | &.prettyprint {
49 | margin-bottom: @baseLineHeight;
50 | }
51 |
52 | // Account for some code outputs that place code tags in pre tags
53 | code, .sui-code {
54 | padding: 0;
55 | color: inherit;
56 | white-space: pre;
57 | white-space: pre-wrap;
58 | background-color: transparent;
59 | border: 0;
60 | }
61 | }
62 |
63 | // Enable scrollable blocks of code
64 | .pre-scrollable {
65 | max-height: 340px;
66 | overflow-y: scroll;
67 | }
68 |
--------------------------------------------------------------------------------
/docs/assets/js/application.js:
--------------------------------------------------------------------------------
1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
2 | // IT'S ALL JUST JUNK FOR OUR DOCS!
3 | // ++++++++++++++++++++++++++++++++++++++++++
4 |
5 | (function($) {
6 | "use strict";
7 | var parseCode = function(code) {
8 | //格式化代码，删除多余缩进空格，删除多余空行
9 | if(!code) return;
10 | code = code.replace(/^ *\n/g, '').replace(/\s+$/g, '')
11 | var indentNum = (/^\s+/.exec(code) || ["", ""])[0] .length
12 | return code.replace(new RegExp(' {'+indentNum+'}', 'g'), '')
13 | }
14 | // 侧边栏
15 | var $sidenav = $(".docs-sidenav").on("click", '> li', function(e) {
16 | var $li = $(e.currentTarget)
17 | if($li.hasClass(".active")) {
18 | return
19 | }
20 | $sidenav.find(".active").removeClass("active")
21 | $li.addClass("active")
22 | })
23 |
24 | //代码高亮
25 | $('.prettyprint').each(function() {
26 | var $this = $(this)
27 | var $target = $($this.data("target"))
28 | if(!$target[0]) return;
29 | $this.text(parseCode($target.html()))
30 | })
31 | $(function() {
32 | // make code pretty
33 | window.prettyPrint && prettyPrint()
34 | })
35 |
36 | //复制代码
37 | $(".copy-btn").each(function() {
38 | var $btn = $(this)
39 | var $target = $($btn.data("target"))
40 | var $li = $btn.parents("li")
41 | var $msg = $li.find(".sui-msg")
42 | if (!$msg[0]) {
43 | $msg = $('btn-group-vertical 控制按钮组垂直排列。
64 |
65 | ul.demo-operations.clearfix
66 | li
67 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
68 |
69 |
70 |
--------------------------------------------------------------------------------
/docs/templates/index.jade:
--------------------------------------------------------------------------------
1 | extends base_index
2 |
3 | block title
4 | title WQUI
5 |
6 | block head
7 | link(rel="stylesheet",href="assets/css/index.css")
8 | script(src='assets/js/index.js')
9 |
10 | block header
11 | +header('index')
12 |
13 | block content_wrap
14 | .jumbotron.intro
15 | .sui-container.brand-intro
16 | h1 WQUI
17 | p.sui-lead
18 | | WQUI 是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。
19 | br
20 | | 通过WQUI，可以非常方便的设计和实现精美的页面。
21 |
22 | p.btn-wrap.bounceInDown.animated
23 | a.sui-btn.btn-success.btn-lead(href='download.html') 立即下载 WQUI V1.0
24 |
25 | .jumbotron.components
26 | .sui-container
27 | .sui-row
28 | .span4
29 | .details.center
30 | h2 丰富的组件库
31 | ul.unstyled
32 | li 响应式栅格
33 | li icon font 字体图标
34 | li 按钮，表单，表格，提示
35 | li 标签页，步骤条，面包屑
36 | li 对话框，Tooltip，分页器
37 | li 更多组件敬请期待...
38 | .span8.center
39 | a(href='global.html')
40 | img(src='pictures/index-demo-components.png')
41 |
42 | .jumbotron.features
43 | .sui-container
44 | .sui-row
45 | .span4
46 | .details.center
47 | h2 为现代浏览器设计
48 | ul.unstyled
49 | li 扁平化设计
50 | li 响应式布局
51 | li icon font
52 | li CSS 特效
53 | li 兼容chrome,firfox,safari,ie8+等主流浏览器
54 | .span8.center
55 | img(src='pictures/index-demo-browsers.png')
56 |
57 | .jumbotron.bootstrap
58 | .sui-container
59 | .sui-row
60 | .span4
61 | .details.center
62 | h2 基于 bootstrap 2.3
63 |
64 | ul.unstyled
65 | li 基于 boostrap 2.3 ，有良好的代码结构和丰富的文档及示例
66 | li 引入了 icon font, grunt, jade 等新技术
67 |
68 | .span8.center
69 | img.bootstrap-logo(src='pictures/bootstrap-logo.png')
70 |
--------------------------------------------------------------------------------
/less/sui.less:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | /*!
4 | * Bootstrap v2.3.2
5 | *
6 | * Copyright 2013 Twitter, Inc
7 | * Licensed under the Apache License v2.0
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Designed and built with all the love in the world by @mdo and @fat.
11 | */
12 |
13 | // Core variables and mixins
14 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc
15 | @import "mixins.less";
16 |
17 | // CSS Reset
18 | @import "reset.less";
19 |
20 | // Grid system and page structure
21 | @import "scaffolding.less";
22 | @import "grid.less";
23 | @import "layouts.less";
24 |
25 | // Base CSS
26 | @import "type.less";
27 | @import "icons.less";
28 | @import "code.less";
29 | @import "forms.less";
30 | @import "checkbox.less";
31 | @import "msgs.less"; // 添加消息提示模块 @by kai 2014-01-20
32 | @import "tables.less";
33 |
34 | // Components: common
35 | @import "dropdowns.less";
36 | @import "wells.less";
37 | @import "component-animations.less";
38 | @import "close.less";
39 |
40 | // Components: Buttons & Alerts
41 | @import "buttons.less";
42 | @import "button-groups.less";
43 |
44 | // Components: Nav
45 | @import "navs.less";
46 | @import "navbar.less";
47 | @import "breadcrumbs.less";
48 | @import "pagination.less";
49 |
50 | // Components: Popovers
51 | @import "modals.less";
52 | @import "tooltip.less";
53 | @import "popovers.less";
54 | @import "datepicker.less";
55 | @import "timepicker.less";
56 |
57 | // Components: label，tag
58 | @import "label.less";
59 | @import "tag.less";
60 |
61 | // Components: Misc
62 | @import "progress-bars.less";
63 | @import "accordion.less";
64 | @import "carousel.less";
65 | @import "hero-unit.less";
66 | @import "loading.less";
67 |
68 | // steps
69 | @import "steps.less";
70 |
71 | //scharts
72 | @import "scharts.less";
73 |
74 | // Utility classes
75 | @import "utilities.less"; // Has to be last to override when necessary
76 |
77 | // responsive
78 | @import "responsive.less";
79 |
--------------------------------------------------------------------------------
/js/transition.js:
--------------------------------------------------------------------------------
1 | /* ===================================================
2 | * bootstrap-transition.js v2.3.2
3 | * http://getbootstrap.com/2.3.2/javascript.html#transitions
4 | * ===================================================
5 | * Copyright 2013 Twitter, Inc.
6 | *
7 | * Licensed under the Apache License, Version 2.0 (the "License");
8 | * you may not use this file except in compliance with the License.
9 | * You may obtain a copy of the License at
10 | *
11 | * http://www.apache.org/licenses/LICENSE-2.0
12 | *
13 | * Unless required by applicable law or agreed to in writing, software
14 | * distributed under the License is distributed on an "AS IS" BASIS,
15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 | * See the License for the specific language governing permissions and
17 | * limitations under the License.
18 | * ========================================================== */
19 |
20 |
21 | !function ($) {
22 |
23 | "use strict";
24 |
25 |
26 | /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
27 | * ======================================================= */
28 |
29 | $(function () {
30 |
31 | $.support.transition = (function () {
32 |
33 | var transitionEnd = (function () {
34 |
35 | var el = document.createElement('bootstrap')
36 | , transEndEventNames = {
37 | 'WebkitTransition' : 'webkitTransitionEnd'
38 | , 'MozTransition' : 'transitionend'
39 | , 'OTransition' : 'oTransitionEnd otransitionend'
40 | , 'transition' : 'transitionend'
41 | }
42 | , name
43 |
44 | for (name in transEndEventNames){
45 | if (el.style[name] !== undefined) {
46 | return transEndEventNames[name]
47 | }
48 | }
49 |
50 | }())
51 |
52 | return transitionEnd && {
53 | end: transitionEnd
54 | }
55 |
56 | })()
57 |
58 | })
59 |
60 | }(window.jQuery);
61 |
--------------------------------------------------------------------------------
/js/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | data-toggle="dropdown" 可以启用下拉功能。
43 | ul.demo-operations.clearfix
44 | li
45 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
46 |
47 |
48 | h2 通过JS调用
49 | ul.sui-nav.nav-tabs.nav-large
50 | li.active
51 | a(href='#demo2', data-toggle='tab') 示例
52 | li
53 | a(href='#code2', data-toggle='tab') 代码
54 | li
55 | a(href='#doc2', data-toggle='tab') 文档
56 |
57 | div.tab-content
58 | div.tab-pane.active#demo2
59 | div.bs-docs-example(style='height: 140px;')
60 | span.sui-dropdown#dropdown-demo2
61 | a.dropdown-toggle#drop2(role='button' href="#") 杭州
62 | ul#menu2.sui-dropdown-menu(role='menu' aria-labelledby="drop2")
63 | li(role="presentation")
64 | a(role="menuitem" tabindex="-1" href="#") 北京
65 | li(role="presentation")
66 | a(role="menuitem" tabindex="-1" href="#") 上海
67 | li(role="presentation")
68 | a(role="menuitem" tabindex="-1" href="#") 深圳
69 | script.
70 | $('#dropdown-demo2 .dropdown-toggle').dropdown()
71 | div.tab-pane#code2
72 | pre.prettyprint.linenums(data-target='#demo2>div')
73 | div.tab-pane#doc2
74 | p
75 | js直接调用 $().dropdown()
76 | p
77 | | 还提供一个 $().dropdown('toggle') 方法可以控制菜单的显示。
78 | ul.demo-operations.clearfix
79 | li
80 | a.copy-btn(href='javascript:void(0)', data-target='#demo2>div') 复制代码
81 |
--------------------------------------------------------------------------------
/docs/templates/pagination.jade:
--------------------------------------------------------------------------------
1 | extends base
2 |
3 | block title
4 | title 分页器
5 |
6 | block sidebar
7 | +sidebar('pagination')
8 |
9 | block content
10 | h1 分页器
11 |
12 | h2.sui-page-header 设计规范
13 |
14 | div.docs-description
15 | img(src='pictures/docs/pagination.png')
16 |
17 | ul.demo-operations.clearfix
18 | li
19 | a(href='#') 下载psd文件
20 |
21 | h2.sui-page-header 开发者文档
22 |
23 | p.sui-lead
24 | div
25 | a(href='pagination-js.html') 点击访问：pagination-JS组件
26 |
27 | ul.sui-nav.nav-tabs.nav-large
28 | li.active
29 | a(href='#demo1', data-toggle='tab') 示例
30 | li
31 | a(href='#code1', data-toggle='tab') 代码
32 | li
33 | a(href='#doc1', data-toggle='tab') 文档
34 |
35 | div.tab-content
36 | div.tab-pane.active#demo1
37 | div.bs-docs-example
38 | h2 小型分页器
39 | p.sui-lead
40 | | 当只有一页内容，且不超过5条时，可以只显示数字，把“上一页”和“下一页”拿掉。
41 | div.sui-pagination
42 | ul
43 | li.prev.disabled
44 | a(href='#') «
45 | li.active
46 | a(href='#') 1
47 | li
48 | a(href='#') 2
49 | li
50 | a(href='#') 3
51 | li
52 | a(href='#') 4
53 | li
54 | a(href='#') 5
55 | li.next
56 | a(href='#') »
57 | h2 常态分页器
58 | div.sui-pagination
59 | ul
60 | li.prev.disabled
61 | a(href='#') «上一页
62 | li.active
63 | a(href='#') 1
64 | li
65 | a(href='#') 2
66 | li
67 | a(href='#') 3
68 | li
69 | a(href='#') 4
70 | li
71 | a(href='#') 5
72 | li.dotted
73 | span ...
74 | li.next
75 | a(href='#') 下一页»
76 | div
77 | span 共10页
78 | span
79 | |到
80 | |
81 | |页
82 | h2 无页码分页器
83 | div.sui-pagination
84 | ul
85 | li.prev
86 | a(href='#') «上一页
87 | li.next
88 | a(href='#') 下一页»
89 | div.tab-pane#code1
90 | pre.prettyprint.linenums(data-target='#demo1>div')
91 | div.tab-pane#doc1
92 | | 所有形式的分页器都提供三种尺寸,除此之外，还有pagination-centered,,pagination-right 控制分页器的水平位置
93 | ul.demo-operations.clearfix
94 | li
95 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
96 |
97 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DPL
2 |
3 | ## 一，开发环境：
4 |
5 | ### Grunt
6 |
7 | 之前的make脚本已经被改成grunt，除了常规的[grunt安装](http://gruntjs.com/)，还需要安装[hogan](http://twitter.github.io/hogan.js/)用来编译文档模板。grunt 中已经配置了如下几个任务:
8 |
9 | * dist:编辑css和js,包含两个任务dist-js和dist-css
10 | * docs:编译文档, 因为依赖关系，所以编译文档实际上也会执行dist
11 | * test:代码检查和单元测试
12 | * default:默认任务，等价于 test + dist
13 | * watch:监控文件改动实时编译
14 |
15 | ** 因为我们的代码构建放在了服务器端，而服务器端使用的npm源是 [http://registry.npm.taobao.net](http://registry.npm.taobao.net)，所以建议把在自己的电脑上也设置这个源。**
16 |
17 | ### Gulp
18 |
19 | **gulp 暂时无人维护，不要用**
20 |
21 | ### iconfont
22 | 图标全部用iconfont实现。
23 |
24 | ### git协作：
25 |
26 | 分支说明
27 | * master分支用来发布代码，不要在master上做任何改动。
28 | * dev分支用来预发布，所有测试通过准备发布的代码都先merge进dev。
29 | * build分支包含了所有打包编译出的代码，用在不方便安装node的环境。
30 |
31 | 每个人新建一个自己的分支，比如开发btn的分支就叫btn，开发完成后向dev发送一个merge request，另一个同学review完代码之后点击merge即可提交到dev。
32 |
33 | 开发时候只需要执行 **grunt watch** 就可以，会自动编译代码并刷新页面。最后提交的时候要执行 **grunt test** 保证没有错误再提交。
34 |
35 |
36 | ## 二，文件结构：
37 | - .package: 编译后的js和css文件，这个被gitignore，执行grunt会自动生成。
38 | - docs：文档，文档是用mustache模板写的，mustache是一个无逻辑模板语言（官网：[mustache](http://mustache.github.io/)），用twitter自己写的一个编译器hogan来编译（[hogan](http://twitter.github.io/hogan.js/)）。 每个组件都有自己的demo，开发一个组件就在这里新建一个demo，这里用的是jade模板生成的，执行grunt docs会自动把docs/template下的jade模板编译到docs目录下的同名文件。其中base.jade是公用模板，其他模板都应该继承base。如果模板名字以com-开头或者以-com.jade结尾，则不会被编译为html，适合中间组件.
39 | docs中注意如下几个文件：
40 | - assets：只在docs中使用的静态文件放这里，和bootstrap代码相关的比如bootstrap.css和fonts是从外面cp进来的。
41 | - example：示例，这个是没有用模板来写的，后面如果有必要我会用mustache改造一下。每完成一个组件都应该在这里面写一个详细的例子（或者在less下面建一个demo文件夹更好点？）。
42 | - template：官网页面，这个是用mustache来写的，里面有一个base和若干pages。
43 |
44 | - fonts: 字体描述文件，icon font字体是支持包括ie6在内的所有主流浏览器，只是每个浏览器支持的字体描述文件格式不同，这里提供了全部四种格式。但是因为icon用了:before和content来实现，所以ie8以下的浏览器还是不支持的。
45 | - less：css源码（注意这里面的test没有测试框架的支持，人肉检查组件而已）
46 | 模块结构可以在bootstrap.less中看的非常清楚，直接看bootstrap.less的代码。
47 |
48 | - js：重点注意单元测试，需要先学习qunit的用法。每一个js模块都对应一个单元测试。js代码的提交一定要通过单元测试。grunt test或者直接访问index.html都可以。（目前grunt qunit会有一个超时bug，暂时去掉了）
49 |
50 |
51 | ## css组件规范：
52 |
53 | 1. 尺寸规范：
54 | 元素的尺寸由line-height,padding,border,margin组成，还有不影响元素本身大小的是font-size
55 | 所以广义的元素尺寸包括了上述五个因素。
56 | 我们把组件都分成四种大小：mini,small,default,large。这四种大小分别对应四种不同的font-size,line-height,padding,border和margin，这些是在variables中已经定义好的。
57 | 一些基础css组件可能包含全部的四种尺寸，比如btn和input，大部分组件都是其中一种尺寸。
58 | 当然很多时候一个组件无法对应这四种尺寸之一，那就直接写死常量。
59 | 这方面bootstrap做的不好，大部分都是写死在代码中的常量。
60 |
61 | 2. 颜色规范：
62 | 常用的颜色可能就十几种，定义在variables中，其他颜色最好能根据常用颜色算出来。这样换皮肤的话只需要把颜色配置换掉就好了。
63 | 比如btn-primary的颜色是这么定义的：
64 | @btnPrimaryBackground: @linkColor;
65 | @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
66 |
67 | 3. 浏览器分级
68 | 对浏览器分ABC级：
69 | A: 最优体验，视觉和功能完全保证
70 | B: 功能保证，无法保证视觉美观
71 | C: 不兼容
72 |
73 |
74 | 4. 命名规范：
75 |
76 | - css中除了变量用驼峰法，其他都是’-‘分割（3.0全部改成减号分割）
77 | - 一个组件有不同的样式，应该把每一种样式都作为一个追加的classname，而不是修改原有的class。即 .btn.btn-primary，而不是直接用.btn-primary替换.btn
78 | 最重要的是语义化命名，参见后文。
79 |
80 | ## js 插件开发规范：
81 |
82 | ## js：单元测试规范：
83 | TODO
84 |
--------------------------------------------------------------------------------
/docs/demos/icons.html:
--------------------------------------------------------------------------------
1 | sui-responsive.less文件即可。
28 |
29 | h2 1. 默认栅格系统
30 | ul.sui-nav.nav-tabs.nav-large
31 | li.active
32 | a(href='#demo1', data-toggle='tab') 示例
33 | li
34 | a(href='#code1', data-toggle='tab') 代码
35 | li
36 | a(href='#doc1', data-toggle='tab') 文档
37 |
38 | div.tab-content
39 | div.tab-pane.active#demo1
40 | div.bs-docs-example
41 | div.grid-demo
42 | div.sui-row
43 | - for (var x = 1; x <= 8; x++)
44 | div(class="span#{1}")=1
45 | div.sui-row
46 | - each x in [1, 2, 2, 3, ]
47 | div(class="span#{x}")=x
48 | div.sui-row
49 | - each x in [4, 4]
50 | div(class="span#{x}")=x
51 | div.sui-row
52 | - each x in [2, 6]
53 | div(class="span#{x}")=x
54 | div.tab-pane#code1
55 | pre.prettyprint.linenums(data-target='#demo1>div')
56 | div.tab-pane#doc1
57 | p
58 | | 默认栅格系统每一栏是定宽的，并且宽度可以根据屏幕宽度在几个固定值之间变化，区别于流式栅格系统的百分比宽度。
59 |
60 | ul.demo-operations.clearfix
61 | li
62 | a(href='#') 下载psd文件
63 | li
64 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
65 |
66 |
67 | h2 2. 流式栅格系统
68 | ul.sui-nav.nav-tabs.nav-large
69 | li.active
70 | a(href='#demo2', data-toggle='tab') 示例
71 | li
72 | a(href='#code2', data-toggle='tab') 代码
73 | li
74 | a(href='#doc2', data-toggle='tab') 文档
75 |
76 | div.tab-content
77 | div.tab-pane.active#demo2
78 | div.bs-docs-example
79 | div.grid-demo
80 | div.sui-row-fluid
81 | - for (var x = 1; x <= 8; x++)
82 | div(class="span#{1}")=1
83 | div.sui-row-fluid
84 | - each x in [1, 2, 2, 3, ]
85 | div(class="span#{x}")=x
86 | div.sui-row-fluid
87 | - each x in [4, 4]
88 | div(class="span#{x}")=x
89 | div.sui-row-fluid
90 | - each x in [2, 6]
91 | div(class="span#{x}")=x
92 | div.tab-pane#code2
93 | pre.prettyprint.linenums(data-target='#demo2>div')
94 | div.tab-pane#doc2
95 | p
96 | | 流式栅格系统每一栏的宽度都是其容器的百分比，因此会随着屏幕宽度的变化而不断变化，没有一个固定的宽度像素值。
97 |
98 | ul.demo-operations.clearfix
99 | li
100 | a(href='#') 下载psd文件
101 | li
102 | a.copy-btn(href='javascript:void(0)', data-target='#demo2>div') 复制代码
103 |
--------------------------------------------------------------------------------
/docs/templates/buttons.jade:
--------------------------------------------------------------------------------
1 | extends base
2 |
3 | block title
4 | title 按钮
5 |
6 | block sidebar
7 | +sidebar('btn')
8 |
9 | block content
10 | - var SIZES = ['xlarge', 'large', '', 'small']
11 | - var ROLES = [["", "默认"], ["primary", "首要"], ["success", "成功"], ["info", "信息"], ["warning", "警告"], ["danger", "危险"], ["link", "链接"]]
12 |
13 | h1 按钮
14 |
15 | h2.sui-page-header 设计规范
16 |
17 | div.docs-description
18 | img(src='pictures/docs/btn.png')
19 |
20 | ul.demo-operations.clearfix
21 | li
22 | a(href='#') 下载psd文件
23 |
24 | h2.sui-page-header 开发者文档
25 |
26 | p.sui-lead
27 | ul.unstyled
28 | li 按钮统一使用下面提供的高度和样式，最好不要自己添加新的尺寸和样式（但是可以把其中某些样式进行重载）。
29 | li 一般情况下推荐使用灰白色按钮，根据具体的页面和使用环境来选择。
30 | li 比较重要的操作或者需要用户明显注意到的地方使用蓝色按钮。
31 | li 黄色按钮请谨慎使用，在非常重要和特殊的情况下需要用户迅速发现并立即处理的时候使用，一个页面不能超过一个黄色按钮。
32 |
33 | ul.demo-operations.clearfix
34 | li
35 | a(href='#') 下载psd文件
36 |
37 | h2 1. 不同大小和功能的按钮
38 | ul.sui-nav.nav-tabs.nav-large
39 | li.active
40 | a(href='#demo1', data-toggle='tab') 示例
41 | li
42 | a(href='#code1', data-toggle='tab') 代码
43 |
44 | div.tab-content
45 | div.tab-pane.active#demo1
46 | div.bs-docs-example
47 |
48 | each s in SIZES
49 | - var classname = 'sui-btn'
50 | - var size = ''
51 | if s
52 | - size = 'btn-' + s
53 | each r in ROLES
54 | - var role = ''
55 | if r[0]
56 | - role = 'btn-' + r[0]
57 | | #{r[1]}
58 | |
59 | a(disabled class='sui-btn #{size}' href='javascript:void(0);') 禁用
60 | a(disabled class='sui-btn btn-text #{size}' href='javascript:void(0);') 禁用
61 | a(disabled class='sui-btn btn-link #{size}' href='javascript:void(0);') 禁用
62 | br
63 | br
64 | div.tab-pane#code1
65 | pre.prettyprint.linenums(data-target='#demo1>div')
66 |
67 | ul.demo-operations.clearfix
68 | li
69 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
70 |
71 |
72 | h2 2.带图标的按钮
73 | ul.sui-nav.nav-tabs.nav-large
74 | li.active
75 | a(href='#demo2', data-toggle='tab') 示例
76 | li
77 | a(href='#code2', data-toggle='tab') 代码
78 |
79 | div.tab-content
80 | div.tab-pane.active#demo2
81 | div.bs-docs-example
82 | each v in ROLES
83 | - var classname = 'sui-btn'
84 | if v[0]
85 | - classname += ' btn-' + v[0]
86 | if v[0] != 'link'
87 | |#{v[1]}
88 | |
89 |
90 | a.sui-btn.btn-text(href='javascript:void(0);')
91 | i.sui-icon.icon-pc-refresh
92 | a.sui-btn.btn-text.btn-default(href='javascript:void(0);')
93 | i.sui-icon.icon-pc-refresh
94 | | 刷新
95 | div.tab-pane#code2
96 | pre.prettyprint.linenums(data-target='#demo2>div')
97 |
98 | ul.demo-operations.clearfix
99 | li
100 | a.copy-btn(href='javascript:void(0)', data-target='#demo2>div') 复制代码
101 |
--------------------------------------------------------------------------------
/docs/examples/todo-create.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | data-toggle="tab" 或者 data-toggle="pill" 来开启标签切换功能.
46 | | 每一个tab对应的内容区域由tab的 href 或者 data-target 属性来指定。
47 |
48 | ul.demo-operations.clearfix
49 | li
50 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
51 |
52 |
53 | h2 2. 通过js调用
54 |
55 | ul.sui-nav.nav-tabs.nav-large
56 | li.active
57 | a(href='#demo2', data-toggle='tab') 示例
58 | li
59 | a(href='#code2', data-toggle='tab') 代码
60 | li
61 | a(href='#doc2', data-toggle='tab') 文档
62 | li
63 | a(href='#event2', data-toggle='tab') 事件
64 |
65 | div.tab-content
66 |
67 | div.tab-pane.active#demo2
68 | div.bs-docs-example
69 | ul.sui-nav.nav-tabs#tab-demo2
70 | li.active
71 | a(href='#index2') 首页
72 | li
73 | a(href='#profile2') 教程
74 | li
75 | a(href='#about2') 关于
76 | div.tab-content
77 | div.tab-pane.active#index2
78 | p qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
79 | div.tab-pane#profile2
80 | p Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park
81 | div.tab-pane#about2
82 | p Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
83 |
84 | script.
85 | $('#tab-demo2 a').click(function (e) {
86 | e.preventDefault();
87 | $(this).tab('show');
88 | })
89 |
90 | div.tab-pane#code2
91 | pre.prettyprint.linenums(data-target='#demo2>div')
92 | div.tab-pane#doc2
93 | | 通过在tab中的a标签上调用 tab("show") 方法来显示此tab对应的内容区域。
94 | | 每一个tab对应的内容区域由tab的 href 或者 data-target 属性来指定。
95 |
96 | div.tab-pane#event2
97 | table.sui-table.table-bordered
98 | tr
99 | th 事件
100 | th 说明
101 |
102 | tr
103 | td show
104 | td 在标签页显示之前触发，在shown事件之前。event.target 和 event.relatedTarget 分别是当前标签和上一个标签。
105 | tr
106 | td shown
107 | td 在标签页显示之后触发，在show事件之后。event.target 和 event.relatedTarget 分别是当前标签和上一个标签。
108 |
109 | ul.demo-operations.clearfix
110 | li
111 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
112 |
--------------------------------------------------------------------------------
/js/tab.js:
--------------------------------------------------------------------------------
1 | /* ========================================================
2 | * bootstrap-tab.js v2.3.2
3 | * http://getbootstrap.com/2.3.2/javascript.html#tabs
4 | * ========================================================
5 | * Copyright 2013 Twitter, Inc.
6 | *
7 | * Licensed under the Apache License, Version 2.0 (the "License");
8 | * you may not use this file except in compliance with the License.
9 | * You may obtain a copy of the License at
10 | *
11 | * http://www.apache.org/licenses/LICENSE-2.0
12 | *
13 | * Unless required by applicable law or agreed to in writing, software
14 | * distributed under the License is distributed on an "AS IS" BASIS,
15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 | * See the License for the specific language governing permissions and
17 | * limitations under the License.
18 | * ======================================================== */
19 |
20 |
21 | !function ($) {
22 |
23 | "use strict";
24 |
25 |
26 | /* TAB CLASS DEFINITION
27 | * ==================== */
28 |
29 | var Tab = function (element) {
30 | this.element = $(element)
31 | }
32 |
33 | Tab.prototype = {
34 |
35 | constructor: Tab
36 |
37 | , show: function () {
38 | var $this = this.element
39 | , $ul = $this.closest('ul:not(.dropdown-menu)')
40 | , selector = $this.attr('data-target')
41 | , previous
42 | , $target
43 | , e
44 |
45 | if (!selector) {
46 | selector = $this.attr('href')
47 | selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
48 | }
49 |
50 | if ( $this.parent('li').hasClass('active') ) return
51 |
52 | previous = $ul.find('.active:last a')[0]
53 |
54 | e = $.Event('show', {
55 | relatedTarget: previous
56 | })
57 |
58 | $this.trigger(e)
59 |
60 | if (e.isDefaultPrevented()) return
61 |
62 | $target = $(selector)
63 |
64 | this.activate($this.parent('li'), $ul)
65 | this.activate($target, $target.parent(), function () {
66 | $this.trigger({
67 | type: 'shown'
68 | , relatedTarget: previous
69 | })
70 | })
71 | }
72 |
73 | , activate: function ( element, container, callback) {
74 | var $active = container.find('> .active')
75 | , transition = callback
76 | && $.support.transition
77 | && $active.hasClass('fade')
78 |
79 | function next() {
80 | $active
81 | .removeClass('active')
82 | .find('> .dropdown-menu > .active')
83 | .removeClass('active')
84 |
85 | element.addClass('active')
86 |
87 | if (transition) {
88 | element[0].offsetWidth // reflow for transition
89 | element.addClass('in')
90 | } else {
91 | element.removeClass('fade')
92 | }
93 |
94 | if ( element.parent('.dropdown-menu') ) {
95 | element.closest('li.dropdown').addClass('active')
96 | }
97 |
98 | callback && callback()
99 | }
100 |
101 | transition ?
102 | $active.one($.support.transition.end, next) :
103 | next()
104 |
105 | $active.removeClass('in')
106 | }
107 | }
108 |
109 |
110 | /* TAB PLUGIN DEFINITION
111 | * ===================== */
112 |
113 | var old = $.fn.tab
114 |
115 | $.fn.tab = function ( option ) {
116 | return this.each(function () {
117 | var $this = $(this)
118 | , data = $this.data('tab')
119 | if (!data) $this.data('tab', (data = new Tab(this)))
120 | if (typeof option == 'string') data[option]()
121 | })
122 | }
123 |
124 | $.fn.tab.Constructor = Tab
125 |
126 |
127 | /* TAB NO CONFLICT
128 | * =============== */
129 |
130 | $.fn.tab.noConflict = function () {
131 | $.fn.tab = old
132 | return this
133 | }
134 |
135 |
136 | /* TAB DATA-API
137 | * ============ */
138 |
139 | $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
140 | e.preventDefault()
141 | $(this).tab('show')
142 | })
143 |
144 | }(window.jQuery);
145 |
--------------------------------------------------------------------------------
/js/tests/unit/button.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 |
3 | module("buttons")
4 |
5 | test("should provide no conflict", function () {
6 | var button = $.fn.button.noConflict()
7 | ok(!$.fn.button, 'button was set back to undefined (org value)')
8 | $.fn.button = button
9 | })
10 |
11 | test("should be defined on jquery object", function () {
12 | ok($(document.body).button, 'button method is defined')
13 | })
14 |
15 | test("should return element", function () {
16 | ok($(document.body).button()[0] == document.body, 'document.body returned')
17 | })
18 |
19 | test("should return set state to loading", function () {
20 | var btn = $('')
21 | equal(btn.html(), 'mdo', 'btn text equal mdo')
22 | btn.button('loading')
23 | equal(btn.html(), 'fat', 'btn text equal fat')
24 | stop()
25 | setTimeout(function () {
26 | ok(btn.attr('disabled'), 'btn is disabled')
27 | ok(btn.hasClass('disabled'), 'btn has disabled class')
28 | start()
29 | }, 0)
30 | })
31 |
32 | test("should return reset state", function () {
33 | var btn = $('')
34 | equal(btn.html(), 'mdo', 'btn text equal mdo')
35 | btn.button('loading')
36 | equal(btn.html(), 'fat', 'btn text equal fat')
37 | stop()
38 | setTimeout(function () {
39 | ok(btn.attr('disabled'), 'btn is disabled')
40 | ok(btn.hasClass('disabled'), 'btn has disabled class')
41 | start()
42 | stop()
43 | }, 0)
44 | btn.button('reset')
45 | equal(btn.html(), 'mdo', 'btn text equal mdo')
46 | setTimeout(function () {
47 | ok(!btn.attr('disabled'), 'btn is not disabled')
48 | ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
49 | start()
50 | }, 100)
51 | })
52 |
53 | test("should toggle active", function () {
54 | var btn = $('')
55 | ok(!btn.hasClass('active'), 'btn does not have active class')
56 | btn.button('toggle')
57 | ok(btn.hasClass('active'), 'btn has class active')
58 | })
59 |
60 | test("should toggle active when btn children are clicked", function () {
61 | var btn = $('')
62 | , inner = $('')
63 | btn
64 | .append(inner)
65 | .appendTo($('#qunit-fixture'))
66 | ok(!btn.hasClass('active'), 'btn does not have active class')
67 | inner.click()
68 | ok(btn.hasClass('active'), 'btn has class active')
69 | })
70 |
71 | test("should toggle active when btn children are clicked within btn-group", function () {
72 | var btngroup = $('')
73 | , btn = $('')
74 | , inner = $('')
75 | btngroup
76 | .append(btn.append(inner))
77 | .appendTo($('#qunit-fixture'))
78 | ok(!btn.hasClass('active'), 'btn does not have active class')
79 | inner.click()
80 | ok(btn.hasClass('active'), 'btn has class active')
81 | })
82 |
83 | test("should check for closest matching toggle", function () {
84 | var group = $("")
85 | , btn1 = $("")
86 | , btn2 = $("")
87 | , wrap = $("")
88 |
89 | wrap.append(btn1, btn2)
90 |
91 | group
92 | .append(wrap)
93 | .appendTo($('#qunit-fixture'))
94 |
95 | ok(btn1.hasClass('active'), 'btn1 has active class')
96 | ok(!btn2.hasClass('active'), 'btn2 does not have active class')
97 | btn2.click()
98 | ok(!btn1.hasClass('active'), 'btn1 does not have active class')
99 | ok(btn2.hasClass('active'), 'btn2 has active class')
100 | })
101 |
102 | })
103 |
--------------------------------------------------------------------------------
/js/validate-rules.js:
--------------------------------------------------------------------------------
1 | // add rules
2 | !function($) {
3 | Validate = $.validate;
4 | trim = function(v) {
5 | if (!v) return v;
6 | return v.replace(/^\s+/g, '').replace(/\s+$/g, '')
7 | };
8 | var required = function(value, element, param) {
9 | var $input = $(element)
10 | return !!trim(value);
11 | };
12 | var requiredMsg = function ($input, param) {
13 | var getWord = function($input) {
14 | var tagName = $input[0].tagName.toUpperCase();
15 | var type = $input[0].type.toUpperCase();
16 | if ( type == 'CHECKBOX' || type == 'RADIO' || tagName == 'SELECT') {
17 | return '选择'
18 | }
19 | return '填写'
20 | }
21 | return "请" + getWord($input)
22 | }
23 | Validate.setRule("required", required, requiredMsg);
24 |
25 | var prefill = function(value, element, param) {
26 | var $input = $(element)
27 | if (param && typeof param === typeof 'a') {
28 | var $form = $input.parents("form")
29 | var $required = $form.find("[name='"+param+"']")
30 | return !!$required.val()
31 | }
32 | return true
33 | }
34 | Validate.setRule("prefill", prefill, function($input, param) {
35 | var getWord = function($input) {
36 | var tagName = $input[0].tagName.toUpperCase();
37 | var type = $input[0].type.toUpperCase();
38 | if ( type == 'CHECKBOX' || type == 'RADIO' || tagName == 'SELECT') {
39 | return '选择'
40 | }
41 | return '填写'
42 | }
43 | if (param && typeof param === typeof 'a') {
44 | var $form = $input.parents("form")
45 | var $required = $form.find("[name='"+param+"']")
46 | if (!$required.val()) {
47 | return "请先" + getWord($required) + ($required.attr("title") || $required.attr("name"))
48 | }
49 | }
50 | return '错误'
51 | });
52 | var match = function(value, element, param) {
53 | value = trim(value);
54 | return value == $(element).parents('form').find("[name='"+param+"']").val()
55 | };
56 | Validate.setRule("match", match, '必须与$0相同');
57 | var number = function(value, element, param) {
58 | value = trim(value);
59 | return (/^\d+(.\d*)?$/).test(value)
60 | };
61 | Validate.setRule("number", number, '请输入数字');
62 | var digits = function(value, element, param) {
63 | value = trim(value);
64 | return (/^\d+$/).test(value)
65 | };
66 | Validate.setRule("digits", digits, '请输入整数');
67 | var mobile = function(value, element, param) {
68 | return (/^0?1[3|4|5|7|8][0-9]\d{8,9}$/).test(trim(value));
69 | };
70 | Validate.setRule("mobile", mobile, '请填写正确的手机号码');
71 | var tel = function(value, element, param) {
72 | return (/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,11})+$/).test(trim(value));
73 | };
74 | Validate.setRule("tel", tel, '请填写正确的电话号码');
75 | var email = function(value, element, param) {
76 | return (/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(trim(value)); //"
77 | };
78 | Validate.setRule("email", email, '请填写正确的email地址');
79 | var zip = function(value, element, param) {
80 | return (/^[1-9][0-9]{5}$/).test(trim(value));
81 | };
82 | Validate.setRule("zip", zip, '请填写正确的邮编');
83 | var date = function(value, element, param) {
84 | return (/^[1|2]\d{3}-[0-2][0-9]-[0-3][0-9]$/).test(trim(value));
85 | };
86 | Validate.setRule("date", date, '请填写正确的日期');
87 | var url = function(value, element, param) {
88 | var urlPattern;
89 | value = trim(value);
90 | urlPattern = /(http|ftp|https):\/\/([\w-]+\.)?[\w-]+\.(com|net|cn|org|me|io|info)/;
91 | if (!/^http/.test(value)) {
92 | value = 'http://' + value;
93 | }
94 | return urlPattern.test(value);
95 | };
96 | Validate.setRule("url", url, '请填写正确的网址');
97 | var minlength = function(value, element, param) {
98 | return trim(value).length >= param;
99 | };
100 | Validate.setRule("minlength", minlength, '长度不能少于$0');
101 | var maxlength = function(value, element, param) {
102 | return trim(value).length <= param;
103 | };
104 | Validate.setRule("maxlength", maxlength, '长度不能超过$0');
105 | }(window.jQuery)
106 |
--------------------------------------------------------------------------------
/less/progress-bars.less:
--------------------------------------------------------------------------------
1 | //
2 | // Progress bars
3 | // --------------------------------------------------
4 |
5 |
6 | // ANIMATIONS
7 | // ----------
8 |
9 | // Webkit
10 | @-webkit-keyframes progress-bar-stripes {
11 | from { background-position: 40px 0; }
12 | to { background-position: 0 0; }
13 | }
14 |
15 | // Firefox
16 | @-moz-keyframes progress-bar-stripes {
17 | from { background-position: 40px 0; }
18 | to { background-position: 0 0; }
19 | }
20 |
21 | // IE9
22 | @-ms-keyframes progress-bar-stripes {
23 | from { background-position: 40px 0; }
24 | to { background-position: 0 0; }
25 | }
26 |
27 | // Opera
28 | @-o-keyframes progress-bar-stripes {
29 | from { background-position: 0 0; }
30 | to { background-position: 40px 0; }
31 | }
32 |
33 | // Spec
34 | @keyframes progress-bar-stripes {
35 | from { background-position: 40px 0; }
36 | to { background-position: 0 0; }
37 | }
38 |
39 |
40 |
41 | // THE BARS
42 | // --------
43 |
44 | // Outer container
45 | .sui-progress {
46 | overflow: hidden;
47 | height: @baseLineHeight + 12px;
48 | margin-bottom: @baseMargin;
49 | background-color: #eee;
50 | .border-radius(@baseBorderRadius);
51 | border: none;
52 | position: relative;
53 |
54 | // Bar of progress
55 | .bar {
56 | width: 0%;
57 | height: 100%;
58 | padding: 6px 0;
59 | padding-left: 0;
60 | padding-right: 0;
61 | color: @white;
62 | float: left;
63 | font-size: 12px;
64 | text-align: center;
65 | text-shadow: 0 -1px 0 rgba(0,0,0,.25);
66 | background-color: @progressColor;
67 | .box-sizing(border-box);
68 | .transition(width .6s ease);
69 | }
70 |
71 | .bar-text {
72 | position: absolute;
73 | color: @textColor;
74 | text-align: center;
75 | width: 100%;
76 | padding: 2px 0;
77 | }
78 |
79 | //不同大小
80 | &.progress-small {
81 | height: @baseLineHeight;
82 | line-height: @baseLineHeight;
83 | font-size: @fontSizeSmall;
84 |
85 | .bar,
86 | .bar-text
87 | {
88 | padding: 0;
89 | }
90 | }
91 | &.progress-large {
92 | height: @lineHeightLarge + 14px;
93 | line-height: @lineHeightLarge;
94 | font-size: @fontSizeLarge;
95 | .bar {
96 | padding: 8px 0;
97 | }
98 | }
99 | &.progress-xlarge {
100 | height: @lineHeightXLarge + 14px;
101 | line-height: @lineHeightXLarge;
102 | font-size: @fontSizeXLarge;
103 | .bar {
104 | padding: 8px 0;
105 | }
106 | }
107 | }
108 |
109 | // Striped bars
110 | .progress-striped .bar {
111 | #gradient > .striped(@progressColor);
112 | .background-size(40px 40px);
113 | }
114 |
115 | // Call animation for the active one
116 | .sui-progress.active .bar {
117 | -webkit-animation: progress-bar-stripes 2s linear infinite;
118 | -moz-animation: progress-bar-stripes 2s linear infinite;
119 | -ms-animation: progress-bar-stripes 2s linear infinite;
120 | -o-animation: progress-bar-stripes 2s linear infinite;
121 | animation: progress-bar-stripes 2s linear infinite;
122 | }
123 |
124 |
125 |
126 | // COLORS
127 | // ------
128 |
129 | // Danger (red)
130 | .progress-danger .bar, .sui-progress .bar-danger {
131 | background-color: @progressDangerColor;
132 | }
133 | .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
134 | #gradient > .striped(@progressDangerColor);
135 | }
136 |
137 | // Success (green)
138 | .progress-success .bar, .sui-progress .bar-success {
139 | background-color: @progressSuccessColor;
140 | }
141 | .progress-success.progress-striped .bar, .progress-striped .bar-success {
142 | #gradient > .striped(@progressSuccessColor);
143 | }
144 |
145 | // Info (teal)
146 | .progress-info .bar, .sui-progress .bar-info {
147 | background-color: @progressInfoColor;
148 | }
149 | .progress-info.progress-striped .bar, .progress-striped .bar-info {
150 | #gradient > .striped(@progressInfoColor);
151 | }
152 |
153 | // Warning (orange)
154 | .progress-warning .bar, .sui-progress .bar-warning {
155 | background-color: @progressWarningColor;
156 | }
157 | .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
158 | #gradient > .striped(@progressWarningColor);
159 | }
160 |
--------------------------------------------------------------------------------
/docs/templates/tab.jade:
--------------------------------------------------------------------------------
1 | extends base
2 |
3 | block title
4 | title 标签页
5 |
6 | block sidebar
7 | +sidebar('tab')
8 |
9 | block content
10 |
11 | h1 标签页
12 |
13 | h2.sui-page-header 设计规范
14 |
15 | div.docs-description
16 | img(src='pictures/docs/tab.png')
17 |
18 | ul.demo-operations.clearfix
19 | li
20 | a(href='#') 下载psd文件
21 |
22 | h2.sui-page-header 开发者文档
23 |
24 | p.sui-lead
25 | | 三种不同大小的标签页，可以当做静态组件使用，引入js之后可以做动态的切换。
26 |
27 | h2 默认标签页
28 | ul.sui-nav.nav-tabs.nav-large
29 | li.active
30 | a(href='#demo1', data-toggle='tab') 示例
31 | li
32 | a(href='#code1', data-toggle='tab') 代码
33 | li
34 | a(href='#doc1', data-toggle='tab') 文档
35 | div.tab-content
36 | div.tab-pane.active#demo1
37 | div.bs-docs-example
38 | ul.sui-nav.nav-tabs
39 | li.active
40 | a 标签一
41 | li
42 | a(href='#') 标签二
43 | li
44 | a(href='#') 标签二
45 |
46 |
47 | h3 垂直
48 | ul.sui-nav.nav-tabs.nav-large.tab-vertical
49 | li
50 | a 语文
51 | li.active
52 | a(href='#') 数学
53 | li
54 | a(href='#') 英语
55 |
56 | div.tab-pane#code1
57 | pre.prettyprint.linenums(data-target='#demo1>div')
58 | div.tab-pane#doc1
59 | | 有三种尺寸: default, .nav-large, .nav-tabs-xlarge。通过在 li 标签上添加 .active 可以指定当前高亮的tab。nav-primary
99 |
100 | ul.demo-operations.clearfix
101 | li
102 | a.copy-btn(href='javascript:void(0)', data-target='#demo2>div') 复制代码
103 |
104 | h2 纯文字
105 | ul.sui-nav.nav-tabs.nav-large
106 | li.active
107 | a(href='#demo3', data-toggle='tab') 示例
108 | li
109 | a(href='#code3', data-toggle='tab') 代码
110 | div.tab-content
111 | div.tab-pane.active#demo3
112 | div.bs-docs-example
113 | ul.sui-nav.nav-tabs.tab-light
114 | li.active
115 | a 标签一
116 | li
117 | a(href='#') 标签二
118 | li
119 | a(href='#') 标签二
120 |
121 | h3 垂直
122 | ul.sui-nav.nav-tabs.tab-light.tab-vertical
123 | li
124 | a 前端
125 | li.active
126 | a(href='#') 后端
127 | li
128 | a(href='#') 运维
129 |
130 | div.tab-pane#code3
131 | pre.prettyprint.linenums(data-target='#demo3>div')
132 |
133 | ul.demo-operations.clearfix
134 | li
135 | a.copy-btn(href='javascript:void(0)', data-target='#demo3>div') 复制代码
136 |
137 | h2 带背景
138 | ul.sui-nav.nav-tabs.nav-large
139 | li.active
140 | a(href='#demo4', data-toggle='tab') 示例
141 | li
142 | a(href='#code4', data-toggle='tab') 代码
143 | div.tab-content
144 | div.tab-pane.active#demo4
145 | div.bs-docs-example
146 | ul.sui-nav.nav-tabs.tab-dark
147 | li.active
148 | a 标签一
149 | i.sui-icon
150 | li
151 | a(href='#') 标签二
152 | li
153 | a(href='#') 标签二
154 |
155 | h3 垂直
156 | ul.sui-nav.nav-tabs.tab-dark.tab-vertical
157 | li
158 | a 前端
159 | li
160 | a(href='#') 后端
161 | li.active
162 | a(href='#') 运维
163 | div.tab-pane#code4
164 | pre.prettyprint.linenums(data-target='#demo4>div')
165 |
166 | ul.demo-operations.clearfix
167 | li
168 | a.copy-btn(href='javascript:void(0)', data-target='#demo4>div') 复制代码
169 |
--------------------------------------------------------------------------------
/docs/templates/checkbox.jade:
--------------------------------------------------------------------------------
1 | extends base
2 |
3 | block title
4 | title 选框
5 |
6 | block sidebar
7 | +sidebar('checkbox')
8 |
9 | block content
10 |
11 | h1 单选框和复选框
12 |
13 | h2.sui-page-header 开发者文档
14 |
15 | p.sui-lead
16 | | 这是js重写的选框组件，兼容ie8+。但是使用此组件必须引入sui.js。此组件内部依然通过原生的checkbox和radio来实现，所以不会影响原生的表单操作。
17 | br
18 | | 注意，在使用此组件的时候不要通过直接修改input的方式来操作，而是通过checkbox api来调用。
19 |
20 | h2 通过data-api使用
21 |
22 | ul.sui-nav.nav-tabs.nav-large
23 | li.active
24 | a(href='#demo1', data-toggle='tab') 示例
25 | li
26 | a(href='#code1', data-toggle='tab') 代码
27 | li
28 | a(href='#doc1', data-toggle='tab') 文档
29 |
30 |
31 | div.tab-content
32 | div.tab-pane.active#demo1
33 | form.sui-form
34 | h3 复选框
35 | label.checkbox-pretty.inline.checked(data-toggle='checkbox')
36 | input(type='checkbox' checked='checked')
37 | span 鸣人
38 |
39 | label.checkbox-pretty.inline(data-toggle='checkbox')
40 | input(type='checkbox')
41 | span 佐助
42 |
43 | h3 单选框
44 | label.radio-pretty.inline.checked(data-toggle='radio')
45 | input(type='radio' checked='checked' name='radio')
46 | span 服装
47 |
48 | label.radio-pretty.inline(data-toggle='radio')
49 | input(type='radio' name='radio')
50 | span 电器
51 | label.radio-pretty.inline(data-toggle='radio')
52 | input(type='radio' name='radio')
53 | span 美食
54 |
55 | h3 半选
56 | label.checkbox-pretty.inline.halfchecked(data-toggle='radio')
57 | input(type='checkbox')
58 | span 半选
59 |
60 | h3 禁用
61 | label.checkbox-pretty.inline.checked.disabled(data-toggle='radio')
62 | input(type='checkbox' checked='checked' disabled)
63 | span 不可选
64 |
65 |
66 | div.tab-pane#code1
67 | pre.prettyprint.linenums(data-target='#demo1')
68 | div.tab-pane#doc1
69 | p
70 | | 通过添加 data-toggle='checobox' 或者 data-toggle='radio' 来启用。
71 | p
72 | | 在初始化的时候同时设置好input的属性和label的class，否则在js加载之后可能会闪一下或者会出现状态不一致。
73 |
74 |
75 | ul.demo-operations.clearfix
76 | li
77 | a.copy-btn(href='javascript:void(0)', data-target='#demo1>form') 复制代码
78 |
79 | h2 通过JS调用
80 |
81 | ul.sui-nav.nav-tabs.nav-large
82 | li.active
83 | a(href='#demo2', data-toggle='tab') 示例
84 | li
85 | a(href='#code2', data-toggle='tab') 代码
86 | li
87 | a(href='#doc2', data-toggle='tab') 文档
88 | li
89 | a(href='#api2', data-toggle='tab') API
90 |
91 |
92 | div.tab-content
93 | div.tab-pane.active#demo2
94 | form.sui-form
95 | h3 复选框
96 | label.checkbox-pretty.inline.checked#checkbox2(data-toggle='checkbox')
97 | input(type='checkbox' checked='checked')
98 | span 选项一
99 | div.op.sui-btn-group(style='display:block;margin-top: 15px;')
100 | a.sui-btn.btn-primary(name='check' href='javascript:void(0);') 选中
101 | a.sui-btn.btn-primary(name='uncheck' href='javascript:void(0);') 取消
102 | a.sui-btn.btn-primary(name='halfcheck' href='javascript:void(0);') 半选
103 | a.sui-btn.btn-primary(name='toggle' href='javascript:void(0);') toggle
104 | a.sui-btn.btn-primary(name='disable' href='javascript:void(0);') disable
105 | a.sui-btn.btn-primary(name='enable' href='javascript:void(0);') enable
106 | script.
107 | var $checkbox = $("#checkbox2").checkbox()
108 | $(".op").on("click", "a", function(e){
109 | var $a = $(e.currentTarget);
110 | $checkbox.checkbox($a.attr("name"))
111 | })
112 |
113 | div.tab-pane#code2
114 | pre.prettyprint.linenums(data-target='#demo2')
115 | div.tab-pane#doc2
116 | ul.unstyled
117 | li 要把checkbox当做一个组件来用，不要通过js直接修改input的属性，要通过checkbox api来调用。
118 | li 禁用状态会禁止用户的操作，但是不会禁止通过api来修改状态。
119 | li 半选状态其实就是未选中，所以不会向后台提交。
120 | div.tab-pane#api2
121 | table.sui-table
122 | thead
123 | tr
124 | th 方法
125 | th 说明
126 | tbody
127 | tr
128 | td check
129 | td 选中
130 | tr
131 | td uncheck
132 | td 取消选中
133 | tr
134 | td halfcheck
135 | td 半选
136 | tr
137 | td disable
138 | td 禁用
139 | tr
140 | td enable
141 | td 启用
142 |
143 | ul.demo-operations.clearfix
144 | li
145 | a.copy-btn(href='javascript:void(0)', data-target='#demo2>form') 复制代码
146 |
147 |
--------------------------------------------------------------------------------
/less/timepicker.less:
--------------------------------------------------------------------------------
1 | .timepicker {
2 | width: 100px;
3 | height: 228px;
4 | //border: 1px solid #ddd;
5 | position: relative;
6 | padding: 12px 20px;
7 | background: #fff;
8 | .clearfix();
9 | .picker-wrap {
10 | width: 40px;
11 | overflow: hidden;
12 | float: left;
13 | position: relative;
14 | z-index: 1
15 | }
16 | .picker-wrap:first-child {
17 | margin-right: 20px
18 | }
19 | .picker-btn {
20 | display: block;
21 | width: 50%;
22 | height: 27px;
23 | line-height: 25px;
24 | margin: 0 auto;
25 | text-align: center;
26 | position: relative;
27 | @top: 0px;
28 | .arrow,.arrow-bg{
29 | width: 0;
30 | height: 0;
31 | display: inline-block;
32 | position: absolute;
33 | left: 3px;
34 | }
35 | .arrow{
36 | border: 7px solid #bbb;
37 | }
38 | .arrow-bg{
39 | border: 7px solid #fff;
40 | }
41 | &.up{
42 | @top:0px;
43 | .arrow,.arrow-bg{
44 | border-left-color: transparent;
45 | border-top-color: transparent;
46 | border-right-color: transparent;
47 | }
48 | .arrow{
49 | top: @top;
50 | }
51 | .arrow-bg{
52 | top: @top + 1;
53 | }
54 | }
55 | &.down{
56 | @bottom: 0px;
57 | .arrow,.arrow-bg{
58 | border-left-color: transparent;
59 | border-right-color: transparent;
60 | border-bottom-color: transparent;
61 | }
62 | .arrow{
63 | bottom: @bottom;
64 | }
65 | .arrow-bg{
66 | bottom: @bottom + 1;
67 | }
68 | }
69 | }
70 | .picker-con {
71 | width: 100%;
72 | height: 174px;
73 | overflow: hidden;
74 | position: relative;
75 | // border: 1px solid red;
76 | .picker-innercon {
77 | position: absolute;
78 | top: 0;
79 | left: 0;
80 | width: 100%;
81 | -webkit-transition: .5s;
82 | transition: .5s;
83 | -webkit-touch-callout: none;
84 | -webkit-user-select: none;
85 | -khtml-user-select: none;
86 | -moz-user-select: none;
87 | -ms-user-select: none;
88 | user-select: none;
89 | }
90 | span {
91 | display: block;
92 | height: 35px;
93 | width: 100%;
94 | text-align: center;
95 | line-height: 35px;
96 | cursor: pointer;
97 | color: #bbb;
98 | &.current {
99 | color: #000;
100 | font-size: 16px
101 | }
102 | }
103 | }
104 | .timePicker-split {
105 | position: absolute;
106 | left: 20px;
107 | top: 50%;
108 | margin-top: -15px;
109 | height: 30px;
110 | width: 100px;
111 | z-index: 0;
112 | .hour-input,
113 | .minute-input{
114 | width: 38px;
115 | height: 28px;
116 | border: 1px solid #ececec;
117 | float: left;
118 | background: #f9f9f9;
119 | }
120 | .split-icon {
121 | width: 20px;
122 | height: 30px;
123 | line-height: 30px;
124 | float: left;
125 | text-align: center;
126 | color: #000;
127 | }
128 | }
129 | &.dropdown-menu{
130 | position: absolute;
131 | top: 0;
132 | left: 0;
133 | z-index: @zindexDropdown;
134 | float: left;
135 | display: none; // none by default, but block on "open" of the menu
136 | list-style: none;
137 | /* padding: 0;*/
138 | background-color: @dropdownBackground;
139 | border: 1px solid #ccc;
140 | border: 1px solid rgba(0,0,0,.2);
141 | .border-radius(0px);
142 | .box-shadow(0 5px 10px rgba(0,0,0,.2));
143 | -webkit-background-clip: padding-box;
144 | -moz-background-clip: padding;
145 | background-clip: padding-box;
146 | *border-right-width: 2px;
147 | *border-bottom-width: 2px;
148 |
149 | // Normally inherited from bootstrap's `body`
150 | color: #333333;
151 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
152 | font-size:13px;
153 | line-height: @baseLineHeight;
154 | }
155 | }
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | /* jshint node: true */
2 |
3 | var exec = require("child_process").exec;
4 |
5 | module.exports = function(grunt) {
6 | 'use strict';
7 | grunt.initConfig({
8 | pkg: grunt.file.readJSON('package.json'),
9 | banner: '/*dpl started*/',
10 | distRoot: grunt.option('target') || '.package',
11 | docsRoot: 'docs',
12 |
13 | jshint: {
14 | options: {
15 | jshintrc: 'js/.jshintrc'
16 | },
17 | gruntfile: {
18 | src: 'Gruntfile.js'
19 | },
20 | src: {
21 | src: ['js/*.js']
22 | },
23 | test: {
24 | src: ['js/tests/unit/*.js']
25 | }
26 | },
27 | browserify: {
28 | build: {
29 | files: {
30 | '<%= distRoot %>/js/<%= pkg.name %>.js': ['js/<%= pkg.name %>.js'],
31 | }
32 | }
33 | },
34 |
35 | uglify: {
36 | build: {
37 | options: {
38 | sourceMap: true
39 | },
40 | files: [{
41 | expand: true,
42 | cwd: '<%= distRoot %>/js/',
43 | src: ['**/*.js', '!*.min.js'],
44 | dest: '<%= distRoot %>/js/',
45 | ext: '.min.js'
46 | }]
47 | }
48 | },
49 |
50 | less: {
51 | options: {
52 | compile: true
53 | },
54 | sui: {
55 | src: ['less/<%= pkg.name %>.less'],
56 | dest: '<%= distRoot %>/css/<%= pkg.name %>.css'
57 | },
58 | suiMin: {
59 | options: {
60 | compress: true
61 | },
62 | src: ['less/<%= pkg.name %>.less'],
63 | dest: '<%= distRoot %>/css/<%= pkg.name %>.min.css'
64 | },
65 |
66 | docs: {
67 | files: [{
68 | expand: true,
69 | cwd: '<%= docsRoot %>/assets/less/',
70 | src: ['**/*.less'],
71 | dest: '<%= docsRoot %>/assets/css/',
72 | ext: '.css'
73 | }]
74 | }
75 | },
76 | jade: {
77 | docs: {
78 | options: {
79 | pretty: true
80 | },
81 | files: [
82 | {
83 | expand: true,
84 | cwd: '<%= docsRoot %>/templates',
85 | src: ['**/*.jade', '!base.jade', '!sidenav.jade', '!header.jade', '!com-*', '!*-com.jade', '!discuss.jade', '!foot.jade', '!head.jade'],
86 | dest: '<%= docsRoot %>',
87 | ext: '.html'
88 | },
89 | ],
90 | }
91 | },
92 | copy: {
93 | fonts: {
94 | files: [
95 | { expand: true, src: ['./fonts/*'], dest: '<%= distRoot %>/' },
96 | ]
97 | }
98 | },
99 | /*
100 | qunit: {
101 | options: {
102 | inject: 'js/tests/unit/phantom.js'
103 | },
104 | files: ['js/tests/*.html']
105 | },
106 | */
107 |
108 | connect: {
109 | server: {
110 | options: {
111 | port: 3000,
112 | base: '.'
113 | }
114 | }
115 | },
116 |
117 | watch: {
118 | options: {
119 | livereload: 3456
120 | },
121 | css: {
122 | files: 'less/*.less',
123 | tasks: ['less:sui', 'newer:copy']
124 | },
125 | js: {
126 | files: 'js/*.js',
127 | tasks: ['browserify', 'newer:copy']
128 | },
129 | docs: {
130 | files: '<%= docsRoot %>/templates/**/*.jade',
131 | tasks: ['newer:jade:docs']
132 | },
133 | docsCss: {
134 | files: '<%= docsRoot %>/assets/less/**/*.less',
135 | tasks: ['newer:less:docs']
136 | }
137 | }
138 | });
139 |
140 |
141 | // These plugins provide necessary tasks.
142 | grunt.loadNpmTasks('grunt-contrib-connect');
143 | grunt.loadNpmTasks('grunt-contrib-copy');
144 | grunt.loadNpmTasks('grunt-contrib-jade');
145 | grunt.loadNpmTasks('grunt-contrib-jshint');
146 | grunt.loadNpmTasks('grunt-contrib-watch');
147 | grunt.loadNpmTasks('grunt-browserify');
148 | grunt.loadNpmTasks('grunt-contrib-less');
149 | grunt.loadNpmTasks('grunt-contrib-uglify');
150 | grunt.loadNpmTasks('grunt-newer');
151 | // Test task.
152 | grunt.registerTask('test', ['jshint']);
153 |
154 | // JS distribution task.
155 | grunt.registerTask('dist-js', ['browserify', 'uglify']);
156 |
157 | // CSS distribution task.
158 | grunt.registerTask('dist-css', ['less']);
159 |
160 | // CSS distribution task.
161 | grunt.registerTask('dist-fonts', ['copy:fonts']);
162 |
163 | // Full distribution task.
164 | grunt.registerTask('dist', ['dist-css', 'dist-js', 'dist-fonts']);
165 | grunt.registerTask('docs', ['jade']); //必须先执行dist才能执行此任务
166 |
167 | // Default task.
168 | grunt.registerTask('default', ['test', 'dist', 'docs']);
169 | //local server and watch
170 | grunt.registerTask('local',['connect','watch']);
171 | }
172 |
--------------------------------------------------------------------------------
/less/tests/forms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | data-toggle='tree'通过在元素上加此属性自动初始化，并生成第一个select，必须在初始化之前指定数据源data-src="url" 通过ajax或jsonp方式获取数据的urldata-jsonp="true" 为true表示src的url为垮域请求，会以jsonp的形式发送data-val="[x,y,z]" 初始化的时候的初始值，注意xyz的值必须要能在srouce对象中找到$(element).data('tree').datas，element为data-toggle='tree'的元素，获取当前的值对象，格式为{value : [], option : []}，value代表select的value值，option表示显示的option的文字$(element).tree('setValue', [x,y,z]) 设置tree的值，参数同初始化的data-val相同
50 | h1 2. select，通过js调用初始化
51 |
52 | ul.sui-nav.nav-tabs.nav-large
53 | li.active
54 | a(href='#demo2', data-toggle='tab') 示例
55 | li
56 | a(href='#code2', data-toggle='tab') 代码
57 | li
58 | a(href='#doc2', data-toggle='tab') 文档
59 | li
60 | a(href='#api2', data-toggle='tab') API
61 |
62 | .tab-content
63 | .tab-pane.active#demo2
64 | .bs-docs-example
65 | .sui-tree-group.sui-form#treeGroup2
66 | script.
67 | $(function() {
68 | $('#treeGroup2').tree({
69 | src : 'http://10.68.111.150/php/demo/server/getCategory.json',
70 | placeholder : '-- 请选择 --',
71 | val : [2, 148, 152],
72 | jsonp : true
73 | });
74 | })
75 | .tab-pane#code2
76 | pre.prettyprint.linenums(data-target='#demo2>div')
77 | .tab-pane#doc2
78 | | 手动调用tree方法，并传入参数