qq

css/common.css

@@ -0,0 +1,2663 @@
@charset "UTF-8";
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    min-width: 960px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, button, textarea, p, blockquote, th, td, form, pre {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: '微软雅黑 Regular', '微软雅黑', '宋体';
}
a:active, a:hover {
    outline: 0
}
img {
    display: inline-block;
    border: none;
    vertical-align: middle;
}
li {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    background-color: transparent
}
th {
    text-align: left
}
h1, h2, h3 {
    font-size: 14px;
    font-weight: 400;
}
h4, h5, h6 {
    font-size: 100%;
    font-weight: 400;
}
button, input, select, textarea {
    font-size: 100%;
}
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: 0;
}
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
/** 滚动条 **/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button:vertical {
    display: none;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background-color: #e2e2e2;
}
::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-thumb:vertical:hover {
    background-color: rgba(0, 0, 0, .35);
}
::-webkit-scrollbar-thumb:vertical:active {
    background-color: rgba(0, 0, 0, .38);
}
@font-face {
    font-family: 'jIcon';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg#iconfont') format('svg');
}
.icon, [class*=" icon-"], [class^="icon-"] {
    font-family: "jIcon" !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-resize:before {
    content: '\e667';
}
.icon-expand-full:before {
    content: '\e6a3';
}
.icon-arrows-alt:before {
    content: '\e6a3';
}
.icon-fullscreen:before {
    content: '\e6a3';
}
.icon-collapse-full:before {
    content: '\e682';
}
.icon-yinyang:before {
    content: '\e687';
}
.icon-taiji:before {
    content: '\e687';
}
.icon-window:before {
    content: '\e68e';
}
.icon-window-alt:before {
    content: '\e68f';
}
.icon-carousel:before {
    content: '\e6b0';
}
.icon-spinner-snake:before {
    content: '\e97b';
}
.icon-spinner-indicator:before {
    content: '\e97c';
}
.icon-check-board:before {
    content: '\e9b8';
}
.icon-bar-chart:before {
    content: '\f080';
}
.icon-bar-chart-o:before {
    content: '\f080';
}
.icon-github:before {
    content: '\f09b';
}
.icon-dot-circle:before {
    content: '\f192';
}
.icon-dot-circle-o:before {
    content: '\f192';
}
.icon-cube-alt:before {
    content: '\f1b2';
}
.icon-cubes:before {
    content: '\f1b3';
}
.icon-file-pdf:before {
    content: '\f1c1';
}
.icon-file-word:before {
    content: '\f1c2';
}
.icon-file-excel:before {
    content: '\f1c3';
}
.icon-file-powerpoint:before {
    content: '\f1c4';
}
.icon-file-image:before {
    content: '\f1c5';
}
.icon-file-photo:before {
    content: '\f1c5';
}
.icon-file-picture:before {
    content: '\f1c5';
}
.icon-file-archive:before {
    content: '\f1c6';
}
.icon-file-zip:before {
    content: '\f1c6';
}
.icon-file-audio:before {
    content: '\f1c7';
}
.icon-file-sound:before {
    content: '\f1c7';
}
.icon-file-movie:before {
    content: '\f1c8';
}
.icon-file-video:before {
    content: '\f1c8';
}
.icon-file-code:before {
    content: '\f1c9';
}
.icon-circle-o-notch:before {
    content: '\f1ce';
}
.icon-qq:before {
    content: '\f600';
}
.icon-wechat:before {
    content: '\f1d7';
}
.icon-weixin:before {
    content: '\f1d7';
}
.icon-history:before {
    content: '\f1da';
}
.icon-circle-thin:before {
    content: '\f1db';
}
.icon-sliders:before {
    content: '\f1de';
}
.icon-newspaper-o:before {
    content: '\f1ea';
}
.icon-calculator:before {
    content: '\f1ec';
}
.icon-paint-brush:before {
    content: '\f1fc';
}
.icon-area-chart:before {
    content: '\f1fe';
}
.icon-pie-chart:before {
    content: '\f200';
}
.icon-line-chart:before {
    content: '\f201';
}
.icon-toggle-off:before {
    content: '\f204';
}
.icon-toggle-on:before {
    content: '\f205';
}
.icon-diamond:before {
    content: '\f219';
}
.icon-venus:before {
    content: '\f221';
}
.icon-mars:before {
    content: '\f222';
}
.icon-server:before {
    content: '\f233';
}
.icon-music:before {
    content: '\e602';
}
.icon-search:before {
    content: '\e603';
}
.icon-envelope:before {
    content: '\e604';
}
.icon-heart:before {
    content: '\e605';
}
.icon-star:before {
    content: '\e606';
}
.icon-star-empty:before {
    content: '\e607';
}
.icon-user:before {
    content: '\e608';
}
.icon-film:before {
    content: '\e609';
}
.icon-th-large:before {
    content: '\e60a';
}
.icon-th:before {
    content: '\e60b';
}
.icon-th-list:before {
    content: '\e60c';
}
.icon-ok:before {
    content: '\e60d';
}
.icon-check:before {
    content: '\e60d';
}
.icon-remove:before {
    content: '\d7';
}
.icon-times:before {
    content: '\d7';
}
.icon-zoom-in:before {
    content: '\e60f';
}
.icon-zoom-out:before {
    content: '\e610';
}
.icon-off:before {
    content: '\e611';
}
.icon-cog:before {
    content: '\e613';
}
.icon-trash:before {
    content: '\e614';
}
.icon-home:before {
    content: '\e615';
}
.icon-file-o:before {
    content: '\e616';
}
.icon-file-alt:before {
    content: '\e616';
}
.icon-time:before {
    content: '\e617';
}
.icon-download-alt:before {
    content: '\e618';
}
.icon-download:before {
    content: '\e619';
}
.icon-upload:before {
    content: '\e61a';
}
.icon-inbox:before {
    content: '\e61b';
}
.icon-play-circle:before {
    content: '\e61c';
}
.icon-repeat:before {
    content: '\e61d';
}
.icon-refresh:before {
    content: '\e61e';
}
.icon-list-alt:before {
    content: '\e61f';
}
.icon-lock:before {
    content: '\e620';
}
.icon-flag:before {
    content: '\e621';
}
.icon-headphones:before {
    content: '\e622';
}
.icon-volume-off:before {
    content: '\e623';
}
.icon-volume-up:before {
    content: '\e625';
}
.icon-qrcode:before {
    content: '\e626';
}
.icon-barcode:before {
    content: '\e627';
}
.icon-tag:before {
    content: '\e628';
}
.icon-tags:before {
    content: '\e629';
}
.icon-book:before {
    content: '\e62a';
}
.icon-bookmark:before {
    content: '\e62b';
}
.icon-print:before {
    content: '\e62c';
}
.icon-camera:before {
    content: '\e62d';
}
.icon-font:before {
    content: '\e62e';
}
.icon-bold:before {
    content: '\e62f';
}
.icon-align-justify:before {
    content: '\e636';
}
.icon-list:before {
    content: '\e637';
}
.icon-picture:before {
    content: '\e63b';
}
.icon-pencil:before {
    content: '\e63c';
}
.icon-map-marker:before {
    content: '\e63d';
}
.icon-adjust:before {
    content: '\e63e';
}
.icon-tint:before {
    content: '\e63f';
}
.icon-edit:before {
    content: '\e640';
}
.icon-share:before {
    content: '\e641';
}
.icon-checked:before {
    content: '\e642';
}
.icon-move:before {
    content: '\e643';
}
.icon-arrows:before {
    content: '\e643';
}
.icon-step-backward:before {
    content: '\e644';
}
.icon-fast-backward:before {
    content: '\e645';
}
.icon-backward:before {
    content: '\e646';
}
.icon-play:before {
    content: '\e647';
}
.icon-pause:before {
    content: '\e648';
}
.icon-stop:before {
    content: '\e649';
}
.icon-forward:before {
    content: '\e64a';
}
.icon-fast-forward:before {
    content: '\e64b';
}
.icon-step-forward:before {
    content: '\e64c';
}
.icon-eject:before {
    content: '\e64d';
}
.icon-chevron-left:before {
    content: '\e64e';
}
.icon-chevron-right:before {
    content: '\e64f';
}
.icon-plus-sign:before {
    content: '\e650';
}
.icon-minus-sign:before {
    content: '\e651';
}
.icon-remove-sign:before {
    content: '\e652';
}
.icon-ok-sign:before {
    content: '\e653';
}
.icon-check-circle:before {
    content: '\e653';
}
.icon-question-sign:before {
    content: '\e654';
}
.icon-info-sign:before {
    content: '\e655';
}
.icon-remove-circle:before {
    content: '\e657';
}
.icon-ok-circle:before {
    content: '\e658';
}
.icon-check-circle-o:before {
    content: '\e658';
}
.icon-ban-circle:before {
    content: '\e659';
}
.icon-arrow-left:before {
    content: '\e65a';
}
.icon-arrow-right:before {
    content: '\e65b';
}
.icon-arrow-up:before {
    content: '\e65c';
}
.icon-arrow-down:before {
    content: '\e65d';
}
.icon-share-alt:before {
    content: '\e65e';
}
.icon-resize-full:before {
    content: '\e65f';
}
.icon-resize-small:before {
    content: '\e660';
}
.icon-plus:before {
    content: '\e661';
}
.icon-minus:before {
    content: '\e662';
}
.icon-asterisk:before {
    content: '\e663';
}
.icon-exclamation-sign:before {
    content: '\e664';
}
.icon-gift:before {
    content: '\e665';
}
.icon-leaf:before {
    content: '\e666';
}
.icon-eye-open:before {
    content: '\e668';
}
.icon-eye-close:before {
    content: '\e669';
}
.icon-warning-sign:before {
    content: '\e66a';
}
.icon-plane:before {
    content: '\e66b';
}
.icon-calendar:before {
    content: '\e66c';
}
.icon-random:before {
    content: '\e66d';
}
.icon-comment:before {
    content: '\e66e';
}
.icon-chevron-up:before {
    content: '\e670';
}
.icon-chevron-down:before {
    content: '\e671';
}
.icon-shopping-cart:before {
    content: '\e673';
}
.icon-folder-close:before {
    content: '\e674';
}
.icon-folder-open:before {
    content: '\e675';
}
.icon-resize-v:before {
    content: '\e676';
}
.icon-resize-h:before {
    content: '\e677';
}
.icon-bar-chart-alt:before {
    content: '\e678';
}
.icon-camera-retro:before {
    content: '\e679';
}
.icon-key:before {
    content: '\e67a';
}
.icon-cogs:before {
    content: '\e67b';
}
.icon-comments:before {
    content: '\e67c';
}
.icon-thumbs-o-up:before {
    content: '\e67d';
}
.icon-thumbs-o-down:before {
    content: '\e67e';
}
.icon-star-half:before {
    content: '\e67f';
}
.icon-heart-empty:before {
    content: '\e680';
}
.icon-signout:before {
    content: '\e681';
}
.icon-pushpin:before {
    content: '\e683';
}
.icon-external-link:before {
    content: '\e684';
}
.icon-signin:before {
    content: '\e685';
}
.icon-trophy:before {
    content: '\e686';
}
.icon-upload-alt:before {
    content: '\e688';
}
.icon-lemon:before {
    content: '\e689';
}
.icon-phone:before {
    content: '\e68a';
}
.icon-check-empty:before {
    content: '\e68b';
}
.icon-bookmark-empty:before {
    content: '\e68c';
}
.icon-phone-sign:before {
    content: '\e68d';
}
.icon-credit:before {
    content: '\e690';
}
.icon-rss:before {
    content: '\e691';
}
.icon-hdd:before {
    content: '\e692';
}
.icon-bullhorn:before {
    content: '\e693';
}
.icon-bell:before {
    content: '\e694';
}
.icon-certificate:before {
    content: '\e695';
}
.icon-hand-right:before {
    content: '\e696';
}
.icon-hand-left:before {
    content: '\e697';
}
.icon-hand-up:before {
    content: '\e698';
}
.icon-hand-down:before {
    content: '\e699';
}
.icon-circle-arrow-left:before {
    content: '\e69a';
}
.icon-circle-arrow-right:before {
    content: '\e69b';
}
.icon-circle-arrow-up:before {
    content: '\e69c';
}
.icon-circle-arrow-down:before {
    content: '\e69d';
}
.icon-globe:before {
    content: '\e69e';
}
.icon-wrench:before {
    content: '\e69f';
}
.icon-tasks:before {
    content: '\e6a0';
}
.icon-filter:before {
    content: '\e6a1';
}
.icon-group:before {
    content: '\e6a4';
}
.icon-link:before {
    content: '\e6a5';
}
.icon-cloud:before {
    content: '\e6a6';
}
.icon-beaker:before {
    content: '\e6a7';
}
.icon-cut:before {
    content: '\e6a8';
}
.icon-copy:before {
    content: '\e6a9';
}
.icon-paper-clip:before {
    content: '\e6aa';
}
.icon-save:before {
    content: '\e6ab';
}
.icon-sign-blank:before {
    content: '\e6ac';
}
.icon-bars:before {
    content: '\e6ad';
}
.icon-reorder:before {
    content: '\e6ad';
}
.icon-list-ul:before {
    content: '\e6ae';
}
.icon-list-ol:before {
    content: '\e6af';
}
.icon-table:before {
    content: '\e6b2';
}
.icon-magic:before {
    content: '\e6b3';
}
.icon-caret-down:before {
    content: '\e6b8';
}
.icon-caret-up:before {
    content: '\e6b9';
}
.icon-caret-left:before {
    content: '\e6ba';
}
.icon-caret-right:before {
    content: '\e6bb';
}
.icon-columns:before {
    content: '\e6bc';
}
.icon-sort:before {
    content: '\e6bd';
}
.icon-sort-down:before {
    content: '\e6be';
}
.icon-sort-up:before {
    content: '\e6bf';
}
.icon-envelope-alt:before {
    content: '\e6c0';
}
.icon-undo:before {
    content: '\e6c1';
}
.icon-dashboard:before {
    content: '\e6c3';
}
.icon-comment-alt:before {
    content: '\e6c4';
}
.icon-comments-alt:before {
    content: '\e6c5';
}
.icon-bolt:before {
    content: '\e6c6';
}
.icon-sitemap:before {
    content: '\e6c7';
}
.icon-umbrella:before {
    content: '\e6c8';
}
.icon-paste:before {
    content: '\e6c9';
}
.icon-lightbulb:before {
    content: '\e6ca';
}
.icon-exchange:before {
    content: '\e6cb';
}
.icon-cloud-download:before {
    content: '\e6cc';
}
.icon-cloud-upload:before {
    content: '\e6cd';
}
.icon-bell-alt:before {
    content: '\e6d1';
}
.icon-coffee:before {
    content: '\e6d2';
}
.icon-file-text-o:before {
    content: '\e6d4';
}
.icon-file-text-alt:before {
    content: '\e6d4';
}
.icon-building:before {
    content: '\e6d5';
}
.icon-double-angle-left:before {
    content: '\e6dc';
}
.icon-double-angle-right:before {
    content: '\e6dd';
}
.icon-double-angle-up:before {
    content: '\e6de';
}
.icon-double-angle-down:before {
    content: '\e6df';
}
.icon-angle-left:before {
    content: '\e6e0';
}
.icon-angle-right:before {
    content: '\e6e1';
}
.icon-angle-up:before {
    content: '\e6e2';
}
.icon-angle-down:before {
    content: '\e6e3';
}
.icon-desktop:before {
    content: '\e6e4';
}
.icon-laptop:before {
    content: '\e6e5';
}
.icon-tablet:before {
    content: '\e6e6';
}
.icon-mobile:before {
    content: '\e6e7';
}
.icon-circle-blank:before {
    content: '\e6e8';
}
.icon-quote-left:before {
    content: '\e6e9';
}
.icon-quote-right:before {
    content: '\e6ea';
}
.icon-spinner:before {
    content: '\e6eb';
}
.icon-circle:before {
    content: '\e6ec';
}
.icon-reply:before {
    content: '\e6ed';
}
.icon-folder-close-alt:before {
    content: '\e6ef';
}
.icon-folder-open-alt:before {
    content: '\e6f0';
}
.icon-expand-alt:before {
    content: '\e6f1';
}
.icon-collapse-alt:before {
    content: '\e6f2';
}
.icon-smile:before {
    content: '\e6f3';
}
.icon-frown:before {
    content: '\e6f4';
}
.icon-meh:before {
    content: '\e6f5';
}
.icon-gamepad:before {
    content: '\e6f6';
}
.icon-keyboard:before {
    content: '\e6f7';
}
.icon-flag-alt:before {
    content: '\e6f8';
}
.icon-flag-checkered:before {
    content: '\e6f9';
}
.icon-terminal:before {
    content: '\e6fa';
}
.icon-code:before {
    content: '\e6fb';
}
.icon-reply-all:before {
    content: '\e6fc';
}
.icon-star-half-full:before {
    content: '\e6fd';
}
.icon-location-arrow:before {
    content: '\e6fe';
}
.icon-crop:before {
    content: '\e6ff';
}
.icon-code-fork:before {
    content: '\e700';
}
.icon-unlink:before {
    content: '\e701';
}
.icon-question:before {
    content: '\e702';
}
.icon-info:before {
    content: '\e703';
}
.icon-shield:before {
    content: '\e70b';
}
.icon-calendar-empty:before {
    content: '\e70c';
}
.icon-rocket:before {
    content: '\e70e';
}
.icon-chevron-sign-left:before {
    content: '\e70f';
}
.icon-chevron-sign-right:before {
    content: '\e710';
}
.icon-chevron-sign-up:before {
    content: '\e711';
}
.icon-chevron-sign-down:before {
    content: '\e712';
}
.icon-html5:before {
    content: '\e713';
}
.icon-anchor:before {
    content: '\e714';
}
.icon-unlock-alt:before {
    content: '\e715';
}
.icon-bullseye:before {
    content: '\e716';
}
.icon-ellipsis-h:before {
    content: '\e717';
}
.icon-ellipsis-v:before {
    content: '\e718';
}
.icon-rss-sign:before {
    content: '\e719';
}
.icon-play-sign:before {
    content: '\e71a';
}
.icon-minus-sign-alt:before {
    content: '\e71c';
}
.icon-check-minus:before {
    content: '\e71d';
}
.icon-level-up:before {
    content: '\e71e';
}
.icon-level-down:before {
    content: '\e71f';
}
.icon-check-sign:before {
    content: '\e720';
}
.icon-edit-sign:before {
    content: '\e721';
}
.icon-external-link-sign:before {
    content: '\e722';
}
.icon-share-sign:before {
    content: '\e723';
}
.icon-compass:before {
    content: '\e724';
}
.icon-collapse:before {
    content: '\e725';
}
.icon-collapse-top:before {
    content: '\e726';
}
.icon-expand:before {
    content: '\e727';
}
.icon-dollar:before {
    content: '\e728';
}
.icon-yen:before {
    content: '\e729';
}
.icon-file:before {
    content: '\e72b';
}
.icon-file-text:before {
    content: '\e72c';
}
.icon-sort-by-alphabet:before {
    content: '\e72d';
}
.icon-sort-by-alphabet-alt:before {
    content: '\e72e';
}
.icon-sort-by-attributes:before {
    content: '\e72f';
}
.icon-sort-by-attributes-alt:before {
    content: '\e730';
}
.icon-sort-by-order:before {
    content: '\e731';
}
.icon-sort-by-order-alt:before {
    content: '\e732';
}
.icon-thumbs-up:before {
    content: '\e733';
}
.icon-thumbs-down:before {
    content: '\e734';
}
.icon-long-arrow-down:before {
    content: '\e736';
}
.icon-long-arrow-up:before {
    content: '\e737';
}
.icon-long-arrow-left:before {
    content: '\e738';
}
.icon-long-arrow-right:before {
    content: '\e739';
}
.icon-apple:before {
    content: '\e73a';
}
.icon-windows:before {
    content: '\e73b';
}
.icon-android:before {
    content: '\e73c';
}
.icon-linux:before {
    content: '\e73d';
}
.icon-sun:before {
    content: '\e742';
}
.icon-moon:before {
    content: '\e743';
}
.icon-archive:before {
    content: '\e744';
}
.icon-bug:before {
    content: '\e745';
}
.icon-zhifubao:before, .icon-alipay:before {
    content: '\e901';
}
.icon-zhifubao-square:before, .icon-alipay-square:before {
    content: '\e900';
}
.icon-taobao:before {
    content: '\e902';
}
.icon-weibo:before {
    content: '\e746';
}
.icon-renren:before {
    content: '\e747';
}
.icon-chrome:before {
    content: '\e76c';
}
.icon-firefox:before {
    content: '\e76d';
}
.icon-ie:before {
    content: '\e76e';
}
.icon-opera:before {
    content: '\e76f';
}
.icon-safari:before {
    content: '\e770';
}
.icon-node:before {
    content: '\e76a';
}
.icon-layout:before {
    content: '\e768';
}
.icon-usecase:before {
    content: '\e74a';
}
.icon-stack:before {
    content: '\e769';
}
.icon-branch:before {
    content: '\e74b';
}
.icon-chat:before {
    content: '\e74c';
}
.icon-chat-line:before {
    content: '\e74f';
}
.icon-comment-line:before {
    content: '\e74f';
}
.icon-chat-dot:before {
    content: '\e750';
}
.icon-cube:before {
    content: '\e751';
}
.icon-align-left:before {
    content: '\e633';
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.icon-spin {
    display: inline-block;
    -webkit-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
/** 初始化全局标签 **/
body {
    line-height: 24px;
    font: 14px Helvetica Neue, Helvetica, PingFang SC, \5FAE\8F6F\96C5\9ED1, Tahoma, Arial, sans-serif;
}
hr {
    height: 1px;
    margin: 10px 0;
    border: 0;
    background-color: #e2e2e2;
    clear: both;
}
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #777;
}
a cite {
    font-style: normal;
    *cursor: pointer;
}
/* 消除第三方ui可能造成的冲突 */
.cbox, .cbox * {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.bbox, .bbox * {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
.clear {
    clear: both;
    *zoom: 1;
}
.clear:after {
    content: '\20';
    clear: both;
    *zoom: 1;
    display: block;
    height: 0;
}
.inline {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
}
/* 三角形 */
.edge {
    position: absolute;
    width: 0;
    height: 0;
    border-style: dashed;
    border-color: transparent;
    overflow: hidden;
}
/* 单行溢出省略 */
.elip {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 屏蔽选中 */
.unselect {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.disabled, .disabled:hover {
    color: #d2d2d2 !important;
    cursor: not-allowed !important;
}
/* 纯圆角 */
.circle {
    border-radius: 100%;
}
.show {
    display: block !important;
}
.hide {
    display: none !important;
}
.min-show {
    position: absolute;
    width: 1px;
    height: 1px;
}
#g_info {
    position: absolute;
    z-index: 9999999;
    top: 0;
    width: 100%;
}
#g_loading {
    position: absolute;
    z-index: 9999998;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .5;
    background-color: #245269;
    filter: Alpha(opacity=50);
}
#g_loading div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px auto 0 -50px;
    font-family: jIcon;
    font-size: 100px;
}
#g_loading div i:before {
    font-size: 100px;
}
.err-ctn, .warn-ctn, .msg-ctn {
    color: #fff;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    position: relative;
    padding: 10px 20px 10px 10px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
}
.err-ctn {
    background-color: #e64525;
}
.warn-ctn {
    background-color: #df8f0e;
}
.msg-ctn {
    background-color: #03b8cf;
}
.err-ctn > i.icon:before, .warn-ctn > i.icon:before, .msg-ctn > i.icon:after {
    content: '\d7';
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.btn {
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 4px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42846154;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-transition: all .4s cubic-bezier(.175, .885, .32, 1);
    -o-transition: all .4s cubic-bezier(.175, .885, .32, 1);
    transition: all .4s cubic-bezier(.175, .885, .32, 1)
}
.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}
.btn:focus, .btn:hover {
    color: #353535;
    text-decoration: none
}
.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65
}
.btn {
    color: #353535;
    text-shadow: 0 1px 0 #fff;
    background-color: #f2f2f2;
    border-color: #bfbfbf
}
.btn.active, .btn:active, .btn:focus, .btn:hover, .open .dropdown-toggle.btn {
    color: #353535;
    background-color: #dedede;
    border-color: #a1a1a1;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .1)
}
.btn.active, .btn:active, .open .dropdown-toggle.btn {
    background-color: #ccc;
    background-image: none;
    border-color: #a6a6a6;
    -webkit-box-shadow: inset 0 4px 6px rgba(0, 0, 0, .15);
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, .15)
}
.btn.disabled, .btn.disabled.active, .btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover, .btn[disabled], .btn[disabled].active, .btn[disabled]:active, .btn[disabled]:focus, .btn[disabled]:hover, fieldset[disabled] .btn, fieldset[disabled] .btn.active, fieldset[disabled] .btn:active, fieldset[disabled] .btn:focus, fieldset[disabled] .btn:hover {
    background-color: #f2f2f2;
    border-color: #bfbfbf
}
/* layout */
.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -10px;
    margin-left: -10px;
    overflow: visible;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    float: left;
}
.col-1 {
    width: 8.33333333%;
}
.col-2 {
    width: 16.66666667%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33333333%;
}
.col-5 {
    width: 41.66666667%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33333333%
}
.col-8 {
    width: 66.66666667%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33333333%
}
.col-11 {
    width: 91.66666667%;
}
.col-12 {
    width: 100%;
}
.row::after {
    content: " ";
    display: table;
    clear: both;
}
.layer-shade {
    background-color: #000;
    opacity: .3;
    filter: alpha(opacity=30);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.layer-ctn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
/*.menu>.btn+.nav {
	margin-top:15px
}*/
/*.spa-menu>.nav>li {
	float:none
}*/
/*.spa-menu>.nav>li.nav-parent>a>.icon-fold {
	position:absolute;
	top:11px;
	right:10px;
	display:block;
	filter:alpha(opacity=45);
	opacity:.45;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s
}
.spa-menu>.nav>li.nav-parent>a:hover>.icon-fold{
	filter:alpha(opacity=75);
	opacity:.75
}*/
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.modal-ctrl {
    display: none;
}
.spa-modal > .centerModal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 90%;
    max-width: 90%;
    background-color: #fff;
    overflow: auto;
}
.spa-modal > .centerModal > .modal-ctrl {
    display: block;
}
.spa-modal > .centerModal > .modal-ctrl:after {
    display: table;
    content: '';
    clear: both;
}
.spa-modal > .centerModal > .modal-ctrl > .icon-times {
    float: right;
    font-size: 25px;
    padding: 10px;
    margin-right: 0px;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}
.nav > li {
    position: relative;
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 15px 15px;
}
.nav > li > a.nav-branch-hand {
    font-weight: bold;
}
.menu .icon.fold {
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: bold;
}
.menu .icon.fold:before {
    content: '\e6e3';
}
.menu .open > a > .icon.fold:before {
    content: '\e6e2';
}
.menu li.nav-parent > .nav {
    display: none;
}
.menu > .nav > li > .nav > li > a {
    padding-left: 35px;
}
.menu > .nav > li > .nav > li > .nav > li > a {
    padding-left: 55px;
}
.menu > .nav > li > .nav > li > .nav > li > .nav > li > a {
    padding-left: 75px;
}
.menu a.nav-hand:focus, .menu a.nav-hand:hover {
    /*background-color: #e4e4e4*/
    color: blue;
    background-color: #fff;
}
.menu .nav > li > a > i:first-child {
    display: inline-block;
    margin-right: 10px;
    color: grey
}
.menu .nav-hand.active {
    border-left: 3px solid red;
    border-top: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    background-color: #fff;
    color: blue;
    margin-right: -1px;
}
.menu li.open > .nav {
    display: block
}
.dd-ctn {
    overflow: visible;
}
.dd-drop {
    display: none;
}
.dd-ctn.open > .dd-drop {
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0px;
    z-index: 200;
    margin-top: -1px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 0 0 4px 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-top: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.item-caption {
    vertical-align: middle;
    text-align: right;
    padding-top: 10px;
    padding-right: 0px;
}
.item-caption.center {
    text-align: center;
}
.item-caption.required:after {
    content: ' *';
    color: red;
}
.form-item {
    font-size: 14px;
    position: relative;
    padding: 3px 0px;
}
.form-item,.form-item span,.form-item input,.form-item textarea{
    color:#000000;
}
.form-item.readOnly,.form-item.readOnly span,.form-item.readOnly input,.form-item.readOnly textarea{
    color:#555555;
}
.form-item.hidden {
    display: none;
}
.form-item.lable {}
/*
 * 
 */
.form-item.text {}
.form-item.select {}
.form-item > a.dd-hand, .form-item.text > input, .form-item.textarea > textarea {
    display: block;
    width: 100%;
    padding: 6px 6px;
    overflow: hidden;
    /*line-height: 1.53846154;*/
    line-height: 1.42846154;
/*    color: #555;*/
    background-color: #fff;
    background-image: none;
    text-decoration: none;
    vertical-align: middle;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
.form-item.select > a.dd-hand, .form-item.text > input, .form-item.date > a.dd-hand {
    height: 34px;
    white-space: nowrap;
}
.form-item > a.dd-hand > i.icon-drop {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}
.form-item > a.dd-hand > i.icon-drop:before {
    content: '\e671';
}
.form-item.open > .dd-hand > .icon-drop:before {
    content: '\e670';
}
.form-item > .dd-hand > .icon-close ,.form-item .dd-hand >ul>li>.icon-close {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 10px;
    cursor: pointer;
}
.form-item > a.dd-hand > span ~ i.icon-close:before,.form-item .dd-hand >ul>li>.icon-close:before {
    content: '\e652';
}
.form-item > a.dd-hand > span:empty ~ i.icon-close:before, {
    content: '';
}
.form-item.showOnly > a.dd-hand i.icon-close:before {
    content: '';
}
.form-item.mselect > .dd-hand > ul {
    float: left;
}
.form-item .dd-drop > ul {
    position: relative;
    max-height: 240px;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.form-item .dd-drop .branch-item > a {
    display: list-item;
    cursor: pointer;
    padding: 5px 10px;
    margin: 0;
    line-height: 15px;
    list-style: none;
    -webkit-transition: background-color .2s cubic-bezier(.175, .885, .32, 1);
    -o-transition: background-color .2s cubic-bezier(.175, .885, .32, 1);
    transition: background-color .2s cubic-bezier(.175, .885, .32, 1);
    -webkit-touch-callout: none;
    font-weight: bold;
    position: relative;
    padding-right: 20px;
}
.form-item .dd-drop .branch-item > ul {
    display: none;
}
.form-item .dd-drop .branch-item > a > i {
    position: absolute;
    top: 8px;
    right: 10px;
}
.form-item .dd-drop .branch-item > a > i:before {
    content: '\e64f';
}
.form-item .dd-drop .branch-item > a.open + ul {
    display: block;
    padding: 0 0 0 10px;
}
.form-item .dd-drop .branch-item > a.open > i:before {
    content: '\e64e';
}
.form-item .dd-drop .select-item {
    display: list-item;
    cursor: pointer;
    padding: 5px 10px;
    margin: 0;
    line-height: 15px;
    list-style: none;
    -webkit-transition: background-color .2s cubic-bezier(.175, .885, .32, 1);
    -o-transition: background-color .2s cubic-bezier(.175, .885, .32, 1);
    transition: background-color .2s cubic-bezier(.175, .885, .32, 1);
    -webkit-touch-callout: none;
}
.form-item .dd-drop .select-item:hover {
    color: #fff;
    background-color: #3280fc;
}
.form-item .dd-hand > ul > li {
    float: left;
    position: relative;
}
.form-item .select-caption {
    padding-right: 18px;
    float: left;
    padding: 2px 12px 2px 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    line-height: 1;
}
.form-item .dd-hand > ul > li>i.icon-close {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    height: 20px;
    padding: 0 3px 10px;
    font-size: 12px;
    line-height: 1;
}
.form-item .dd-hand>.placeholder{
	display:none;
}
.form-item .dd-hand>ul:empty~.placeholder,.form-item .dd-hand[code=""]>.placeholder{
	display:block;
	color:#A4A4A4;
}
.form-item.readOnly .placeholder,.form-item.showOnly .placeholder{
	color:transparent !important;
}
.form-item.checkbox {}
.form-item.radio {}
.form-item.textarea {}
.form-item.datetime {}
.form-item.date {}
.form-item.time {}
.form-item.year {}
.form-item.yearMonth {}
.form-item.month {}
.form-item.day {}
.form-item.monthDay {}
.form-item.date.dd-ctn > .dd-drop {
    left: 0;
    width: auto;
    min-width: 160px;
}
.form-item.date.dd-ctn > .dd-drop:before {
    top: -7px;
    left: 6px;
    position: absolute;
    display: inline-block;
    /*content: '';*/
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, .2);
    border-left: 7px solid transparent;
}
.form-item.dd-ctn .dd-drop .day td, form-item.dd-ctn .dd-drop .day th {
    width: 22px;
    height: 20px;
    padding: 6px 6px;
    text-align: center;
    border: none;
    border-radius: 4px;
}
.form-item.dd-ctn .dd-drop .day td, th.prev-year, th.prev-month, th.next-year, th.next-month {
    cursor: pointer;
}
.form-item.dd-ctn .dd-drop .day td:hover {
    background-color: blue;
    color: white;
}
.form-item.dd-ctn .dd-drop .day td.no-current-month {
    color: #CCCCCC;
}
.form-item.dd-ctn .dd-drop .day td.no-current-month:hover {
    background-color: #eee;
}
.form-item.text:not(.readOnly) > input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-item.readOnly i,.form-item.showOnly i{
	display:none !important;
}
.form-item.showOnly.text {
    padding: 10px 6px;
}
.form-item.showOnly > a.dd-hand {
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 transparent;
    box-shadow: 0 0 0 transparent;
}
.form-item.showOnly > a.dd-hand > i.icon:before {
    content: "";
}
.form-item.showOnly .select-caption {
    border-color: transparent;
}
.upload-form input {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    right: 0px;
    z-index: 10;
    font-size: 400px;
    opacity: .01;
    filter: Alpha(opacity=1);
    cursor: pointer;
}
.table {
    width: 100%;
    margin-bottom: 20px
}
.table td, .table th {
    padding: 8px;
    line-height: 1.53846154;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
    -webkit-transition: background .2s cubic-bezier(.175, .885, .32, 1);
    -o-transition: background .2s cubic-bezier(.175, .885, .32, 1);
    transition: background .2s cubic-bezier(.175, .885, .32, 1)
}
.table > thead > tr > th {
    vertical-align: bottom;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd
}
.table > tbody + tbody {
    border-top: 2px solid #ddd
}
.table-fixed {
    table-layout: fixed
}
.table-fixed td, .table-fixed th {
    overflow: hidden;
    white-space: nowrap
}
.table-fixed .nofixed, .table-fixed tfoot > tr > td, .table-fixed tfoot > tr > th {
    overflow: visible
}
.table-borderless td, .table-borderless th, .table-borderless thead > tr > th {
    border: none
}
.table-auto {
    width: auto;
    max-width: 100%
}
.table-condensed td, .table-condensed th {
    padding: 5px
}
.table-bordered {
    border: 1px solid #ddd
}
.table-bordered td, .table-bordered th {
    border: 1px solid #ddd
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9
}
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: #ebf2f9
}
table col[class*=col-] {
    display: table-column;
    float: none
}
table td[class*=col-], table th[class*=col-] {
    display: table-cell;
    float: none
}
.table tr.active > td, .table tr.active > th, .table tr > td.active, .table tr > th.active {
    background-color: #ffe7bc
}
.table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
    background-color: #ddf4df;
    border-color: #bae8b6
}
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th, .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover {
    background-color: #caeecd;
    border-color: #a8e1a3
}
.table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > thead > tr > td.danger, .table > thead > tr > th.danger {
    background-color: #ffe5e0;
    border-color: #ffc6c7
}
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th, .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover {
    background-color: #ffd0c6;
    border-color: #ffadad
}
.table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > thead > tr > td.warning, .table > thead > tr > th.warning {
    background-color: #fff0d5;
    border-color: #ffdcbc
}
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th, .table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover {
    background-color: #ffe7bc;
    border-color: #ffcea2
}
.table-responsive {
    min-height: .01%;
    overflow-x: auto
}
.table td.empty-desc {
    text-align: center;
    font-size: 30px;
}
.dt-pager {
    display: inline-block;
    padding: 0 10px;
    margin: 0px auto;
    list-style: none
}
.dt-pager li {
    display: inline;
}
.dt-pager li a {
    position: relative;
    float: left;
    padding: 5px 12px;
    margin-left: -1px;
    line-height: 1.53846154;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: default;
}
.dt-pager li.curr a {
    color: #fff;
    background-color: #3280fc;
    border-color: #3280fc;
}
.dt-pager li.active a {
    color: #145ccd;
    cursor: pointer;
}
.dt-pager li.disabled a {
    color: #ddd;
    pointer-events: none;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.opt-check .icon-st-check:before {
    content: '\e68b';
    cursor: pointer;
}
.opt-check .icon-st-check.checked:before {
    content: '\e642';
}
.modal-dialog {
    position: absolute;
    max-width: 90%;
    max-height: 90%;
    min-width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-dialog .modal-header {
    min-height: 16.54px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-dialog .modal-header .modal-title {
    margin: 0;
    line-height: 1.53846154;
    font-weight: 700;
}
.modal-dialog .modal-body {
    padding: 15px;
}
.modal-dialog .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-dialog .modal-footer button {
    margin-left: 10px;
}
.invalid-dict{
	color:red !important;
}

html/demo.html

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/common.css" />
		<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-6 form-item text readOnly" name="t1" placeholder="dfsafsdfsdfda" defVal="dfsasfds">
				</div>
				<div class="col-6 form-item text int readOnly" name="t2" defVal="12345">
				</div>
			</div>
			<div class="row">
				<div class="col-6 form-item select readOnly"  dictCode="bool" name="t3" placeholder="123456789">
				</div>
				<div class="col-6 form-item mselect tree " dictCode="tree"   placeholder="123456789" name="t4">
				</div>
			</div>
			<div class="row">
				<div class="col-6 form-item date readOnly" defVal="current" name="t5" placeholder="dfsafsdfsdfda">
				</div>
				<div class="col-6 form-item textarea readOnly"  name="t6" placeholder="dfsafsdfsdfda">
				</div>
			</div>
		</div>
		<button type="button" class="opt-btn btn">btn</button>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/util.js"></script>
		<script type="text/javascript" src="../js/dict.js"></script>
		<script type="text/javascript" src="../js/dropdown.js"></script>
		<script type="text/javascript" src="../js/form.js"></script>
		<script type="text/javascript" src="../js/text.js"></script>
		<script type="text/javascript" src="../js/select.js"></script>
		<script type="text/javascript" src="../js/date.js" ></script>
		<script type="text/javascript" src="../js/textarea.js" ></script>
		<script>
			$.use(["form", "dict"], function($f, $dict) {
				$dict.set("tree", [{ code: "0", caption: "否", enabled: true },
					{ code: "1", caption: "11否", enabled: true },
					{ code: "2", caption: "22否", enabled: true }, 
					{ code: "3", caption: "33否", enabled: true }, 
					{ code: "4", caption: "44否", enabled: true }, 
					{ code: "5", caption: "55否", enabled: true ,children:[{ code: "6", caption: "否", enabled: true }, 
					{ code: "7", caption: "否", enabled: true }, 
					{ code: "8", caption: "否", enabled: true }, 
					{ code: "9", caption: "否", enabled: true }, 
					{ code: "10", caption: "否", enabled: true }, ]}, 
					
					{ code: "11", caption: "666否", enabled: true },
				])
				var form = $f.build($(".container"));
				$(".opt-btn").on("click", function() {
					console.log(form.val());
				});
			})
		</script>
	</body>
</html>

js/codehtml.js

@@ -356,16 +356,16 @@ $.define(["jQuery", "doc", "body"], "code", function($, doc, $body) {
				}
			};
		},
		defBh = function(data) { return data; },
		parseCode(ele) = function(ele) {
			var hand = parseElement(ele),
				$ele = $(ele),
				bh = defBh,
				bh = util.nochange,
				lses = [];
			return $.extend(hand, {
				"val": function(data) {
					$ele.empty();
					data = bh(data);
					if(false === data) return this;
					$ele.empty();
					var docf = doc.createDocumentFragment();
					this.fill(docf, data);
					ele.appendChild(docf);
@@ -381,6 +381,11 @@ $.define(["jQuery", "doc", "body"], "code", function($, doc, $body) {
				"listen": function(h) {
					if(h) lses.push(h);
					return this;
				},
				"before": function(h) {
					if(h) {
						bh = h;
					}
				}
			});
		},

js/common.js

@@ -21,7 +21,7 @@ if(typeof jQuery === 'undefined') {
		try {
			var md = factory.apply(win, dm);
			mds[id] = md;
		} catch {
		} catch(err) {
			throw new Error("build model[" + id + "] error");
		}
	};
@@ -37,4 +37,4 @@ if(typeof jQuery === 'undefined') {
		}
		handle.apply(win, dm);
	};
})(jQuery, window, document);
})(jQuery, window, document);

js/datagrid.js

@@ -0,0 +1,52 @@
$.define(["jQuery", "util", "form", "code"], "dataGrid", function($, util, form, code) {
	var qf = ".dt-form",
		qt = ".dt-tpl",
		derr = {},
		dajaxCfg = {},
		build = function($e, options) {
			if($e.length && $e.length === 1) {
				var config = { e: derr, ajax: dajaxCfg };
				var ele = config.ele = $($e[0]);
				config.f = form.build(ele.find(qf));
				config.c = code.parseCode(ele.find(qt)[0]);
				config.uri = ele.attr("loadUri");
				if(options) {
					//						if(option.error) {
					//							config.e = option.error;
					//						}
					//						if(option.ajax) {
					//							config.ajax = option.ajax;
					//						}
					//						if(option.beforeFill) {
					//							config.c.before(option.beforeFill);
					//						}
					$.extend(config, options);
				}
				return {
					code: config.c;
					form: config f;
					load: function() {
						config.f.doGet(config.uri, function(data) {
							config.c.val(data);
						}, config.e, config.ajax);
					},
					error: function(eh) {
						config.e = eh;
					},
					beforeFill: function(h) {
						config.c.before(h);
					},
					ajaxConfig: function(cfg) {
						config.ajax = cfg;
					}
				}
			}
		};
	$.fn.dg = function(option) {
		if(this.length && this.length === 1) {
			return build(this, option);
		}
	};
	return { build: build };
});

js/date.js

@@ -0,0 +1,258 @@
$.use(["jQuery", "form", "doc", "util", "dropdown"], function($, form, doc, util, dd) {
	var readOnly = "readOnly",
		dd_ctn = "dd-ctn",
		dd_clean = "dd-clean",
		showOnly = "showOnly",
		modelName = 'date',
		def = "defVal",
		placeholder = "placeholder",
		required = "required",
		date_year = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
		date_leapYear = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
		date_isleap = function(y) {
			return(y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
		},
		date_validDate = function(v) {
			if(v.length != 8) return false;
			for(var i = 0; i < 8; ++i) {
				var c = v.charAt(i);
				if(c > '9' || c < '0') return false;
			}
			var m = parseInt(v.substring(4, 6)) - 1;
			if(m < 0 || m > 11) return false;
			var d = parseInt(v.substring(6, 8));
			var ym = date_isleap(parseInt(v.substring(0, 4))) ? date_leapYear : date_year;
			if(d < 1 || d > ym[m]) return false;
			return true;
		},
		date_fmt = function(v) {
			return(v > 9 ? "" : "0") + v;
		},
		date_MS_IN_DAY = 24 * 60 * 60 * 1000,
		date_incDay = function(d) {
			return new Date(d.getTime() + date_MS_IN_DAY);
		},
		date_decDay = function(d) {
			return new Date(d.getTime() - date_MS_IN_DAY);
		},
		date_dayFmt = function(d) {
			return "" + d.getFullYear() + date_fmt(d.getMonth() + 1) + date_fmt(d.getDate());
		},
		date_now = function() {
			var d = new Date();
			return "" + d.getFullYear() + date_fmt(d.getMonth() + 1) + date_fmt(d.getDate()) + date_fmt(d.getHours()) + date_fmt(d.getMinutes()) + date_fmt(d.getSeconds());
		},
		table_year = { an: "year", av: "" },
		table_month = { an: "month", av: "" },
		daySwitch = [""],
		thead = {
			tn: "thead",
			chs: [{
				tn: "tr",
				chs: [
					{ tn: "th", attrs: [{ an: "class", av: "prev-year" }], chs: [{ tn: "i", attrs: [{ an: "class", av: "icon-arrow-left" }] }] },
					{ tn: "th", attrs: [{ an: "class", av: "prev-month" }], chs: [{ tn: "i", attrs: [{ an: "class", av: "icon-chevron-left" }] }] },
					{ tn: "th", attrs: [{ an: "class", av: "switch" }, { an: "colspan", av: "3" }], chs: daySwitch },
					{ tn: "th", attrs: [{ an: "class", av: "next-month" }], chs: [{ tn: "i", attrs: [{ an: "class", av: "icon-chevron-right" }] }] },
					{ tn: "th", attrs: [{ an: "class", av: "next-year" }], chs: [{ tn: "i", attrs: [{ an: "class", av: "icon-arrow-right" }] }] }
				]
			}, {
				tn: "tr",
				chs: [
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["日"] },
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["一"] },
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["二"] },
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["三"] },
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["四"] },
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["五"] },
					{ tn: "th", attrs: [{ an: "class", av: "dow" }], chs: ["六"] },
				]
			}]
		},
		tbody = { tn: "tbody" },
		tfoot = { tn: "tfoot" },
		table = { tn: "table", attrs: [{ an: "class", av: "day" }, table_year, table_month], chs: [thead, tbody, tfoot] },
		date_drop = { tn: "div", attrs: [{ an: "class", av: "dd-drop date" }], chs: [table] },
		show_day = function($e, y, m) {
			table_year.av = "" + y;
			table_month.av = "" + (m + 1);
			daySwitch[0] = date_fmt(m + 1) + "月 " + y + "年";
			var dd = new Date();
			dd.setFullYear(y);
			dd.setMonth(m);
			dd.setDate(1);
			var dayInWeek = dd.getDay();
			tbody.chs = [];
			var weekDays = { tn: "tr" };
			var days = weekDays.chs = [];
			for(var i = 0; i < dayInWeek; ++i) {
				var cd = date_dayFmt(new Date(dd.getTime() - ((dayInWeek - i) * date_MS_IN_DAY)));
				days.push({ tn: "td", attrs: [{ an: "class", av: "no-current-month" }, { an: "day", av: "" + cd }], chs: [cd.substring(6, 8)] });
			}
			var ld = date_isleap(y) ? date_leapYear[m] : date_year[m];
			for(var i = 0; i < ld; ++i) {
				var cd = date_dayFmt(dd);
				days.push({ tn: "td", attrs: [{ an: "class", av: "day-item" }, { an: "day", av: "" + cd }], chs: [cd.substring(6, 8)] });
				if(dd.getDay() == 6) {
					tbody.chs.push(weekDays);
					weekDays = { tn: "tr" };
					days = weekDays.chs = [];
				}
				dd = date_incDay(dd);
			}
			dayInWeek = dd.getDay();
			if(dayInWeek) {
				for(var i = dayInWeek; i < 7; ++i) {
					var cd = date_dayFmt(dd);
					days.push({ tn: "td", attrs: [{ an: "class", av: "no-current-month" }, { an: "day", av: "" + cd }], chs: [cd.substring(6, 8)] });
					dd = date_incDay(dd);
				}
				tbody.chs.push(weekDays);
			}
			$e.find(".dd-drop").remove();
			util.appendChild($e[0], date_drop);
		},
		handCode = { an: "code", av: "" },
		pa = [""],
		jhref = { an: "href", av: "javascript:;" },
		dd_hand = { an: "class", av: "dd-hand" },
		icon_drop = { tn: "i", attrs: [{ an: "class", av: "icon icon-drop" }] },
		icon_close = { tn: "i", attrs: [{ an: "class", av: "icon icon-close" }] },
		a_placeHolder = { tn: "a", attrs: [jhref, { an: "class", av: placeholder }], chs: pa },
		hand = {
			tn: "a",
			attrs: [
				dd_hand,
				jhref,
				handCode,
			],
			chs: [
				icon_drop,
				{ tn: "span" },
				icon_close,
				a_placeHolder,
			]
		};
	form.register(function($e) {
		var cls = util.classCheck($e[0], [readOnly, showOnly, modelName, required]),
			rv;
		if(cls[modelName]) {
			var n = $e.attr("name") || $e.attr("id"),
				rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
			var dv = $e.attr(def) || "";
			$e.empty().addClass(dd_ctn).addClass(dd_clean);
			pa[0] = $e.attr(placeholder) || "请选择日期......";
			util.appendChild($e[0], hand);
			var $h = $e.children("a");
			var $span = $h.children("span");
			var date_change = function(val) {
				if(val) {
					if(val == "current") {
						val = date_now().substr(0, 8);
					}
					var dt = val.substring(0, 4) + "-" + val.substring(4, 6) + "-" + val.substring(6, 8);
					if(rv !== val) {
						$h.attr("code", val);
						$span.text(dt);
						rv=val;
					}
				} else {
					rv = "";
					$h.attr("code", "");
					$span.text("");
				}
			};
			date_change(dv);
			if(!(cls[readOnly] || cls[showOnly])) {
				$e.on("shown.dropdown", function(evt) {
					var dp_chs = [];
					var n = date_now();
					var val = rv ? (date_validDate(rv) ? rv : n) : n;
					show_day($e, parseInt(val.substring(0, 4)), parseInt(val.substring(4, 6)) - 1);
				});
				$e.find(".icon-close").on("click", function(evt) {
					date_change("");
					$e.addClass("dd-hold-once");
				});
				$e.on("click", ".day .day-item , .day .no-current-month", function() {
					date_change(this.getAttribute("day"));
				});
				$e.on("click", ".day .prev-year", function(e) {
					var date_tb = $e.find("table"),
						yv = parseInt(date_tb.attr("year")) - 1,
						mv = parseInt(date_tb.attr("month")) - 1;
					$e.addClass("dd-hold-once");
					show_day($e, yv, mv);
				});
				$e.on("click", ".day .prev-month", function(e) {
					var date_tb = $e.find("table"),
						yv = parseInt(date_tb.attr("year")),
						mv = parseInt(date_tb.attr("month")) - 2;
					if(0 > mv) {
						yv -= 1;
						mv = 11
					}
					$e.addClass("dd-hold-once");
					show_day($e, yv, mv);
				});
				$e.on("click", ".day .next-year", function(e) {
					var date_tb = $e.find("table"),
						yv = parseInt(date_tb.attr("year")) + 1,
						mv = parseInt(date_tb.attr("month")) - 1;
					$e.addClass("dd-hold-once");
					show_day($e, yv, mv);
				});
				$e.on("click", ".day .next-month", function(e) {
					var date_tb = $e.find("table"),
						yv = parseInt(date_tb.attr("year")),
						mv = parseInt(date_tb.attr("month"));
					if(mv === 12) {
						yv += 1;
						mv = 0
					}
					$e.addClass("dd-hold-once");
					show_day($e, yv, mv);
				});
			}
			return {
				name: n,
				get: function() {
					return rv?rv:undefined;
				},
				set: function(data) {
					change_date(data?data:"");
				},
				validate: function() {
					if(cls[required]) {
						if(!rv) {
							return "不可为空";
						}
					}
					return util.validate(rules, this);
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				},
				reset: function() {
					this.set(dv);
				},
				valid: function() { util.valid($e); },
				invalid: function(reson) {
					util.invalid($e);
					util.error(reson);
				}
			};
		}
	});
});

js/dict.js

@@ -1,23 +1,25 @@
$.define(["jQuery", "util"], "dict", function($, util) {
	var cache = {},
	var cache = { bool: [{ code: "0", caption: "否", enabled: true }, { code: "1", caption: "是", enabled: true }] },
		handCache = {},
		uri = "/ajax/sys/dict/item/",
		eh = {},
		config = { mask: false };
		load: function(code) {
		config = { mask: false },
		set = function(code, items) {
			cache[code] = items;
			var hs = handCache[code];
			if(hs && hs.length) {
				hs.forEach(function(h) {
					h(items);
				});
				delete handCache[code];
			}
		},
		load = function(code) {
			util.get(uri + code, null, function(data) {
				cache[code] = data;
				var hs = handCache[code];
				if(hs && hs.length) {
					for(var i = 0; i < hs.length; ++i) {
						hs[i](data);
					}
					delete handCache[code];
				}
				set(code, data);
			}, eh, config);
		};
	return {
		apply: function(code, hand) {
		},
		apply = function(code, hand) {
			var dict = cache[code];
			if(!dict) {
				var hs = handCache[dictCode];
@@ -30,7 +32,7 @@ $.define(["jQuery", "util"], "dict", function($, util) {
				hand(dict);
			}
		},
		refresh: function(code, hand) {
		refresh = function(code, hand) {
			if(hand) {
				var hs = handCache[code];
				if(!hs) {
@@ -44,43 +46,34 @@ $.define(["jQuery", "util"], "dict", function($, util) {
				load(code);
			}
		},
		getCap: function(items, code) {
		getCap = function(items, code) {
			for(var i = 0; i < items.length; ++i) {
				var item = items[i];
				if(code === item.code) {
					return item.caption;
				} else if(item.children && item.children.length) {
					var ret = get(item.children, code);
					var ret = getCap(item.children, code);
					if(ret) return ret;
				}
			}
			return false;
		},
		get:function(code){
		get = function(code) {
			return cache[code];
		},
		transfer: function($e, dict, code) {
			dict = dict || $e.attr("dict");
			code = code || $e.attr("code");
			if(dict && code) {
				this.apply(dict, function(items) {
					var cp = get(items, code);
					if(cp) {
						$e.removeClass("invalid-dict").text(cp);
					} else {
						$e.addClass("invalid-dict").text("不可翻译的");
					}
				});
			}
		},
		doTransfer: function() {
			$(".hand_dict").each(function() {
				var $this = $this;
				var dict = $this.attr("dictCode") || $this.attr("dict"),
					code = $this.attr("itemCode") || $this.attr("code");
		ret = {
			set: set,
			apply: apply,
			refresh: refresh,
			getCap: getCap,
			get: get,
			transfer: function($e, dict, code) {
				dict = dict || $e.attr("dict") || $e.attr("dictCode");
				code = code || $e.attr("code") || $e.attr("itemCode");
				if(dict && code) {
					this.apply(dict, function(items) {
						var cp = this.getCap(items, code);
					apply(dict, function(items) {
						var cp = getCap(items, code);
						if(cp) {
							$e.removeClass("invalid-dict").text(cp);
						} else {
@@ -88,8 +81,25 @@ $.define(["jQuery", "util"], "dict", function($, util) {
						}
					});
				}
				$this.removeClass("hand_dict");
			});
		}
	};
			},
			doTransfer: function() {
				$(".hand-dict").each(function() {
					var $this = $this;
					var dict = $this.attr("dict") || $this.attr("dictCode"),
						code = $this.attr("code") || $this.attr("itemCode");
					if(dict && code) {
						apply(dict, function(items) {
							var cp = getCap(items, code);
							if(cp) {
								$e.removeClass("invalid-dict").text(cp);
							} else {
								$e.addClass("invalid-dict").text("不可翻译的");
							}
						});
					}
					$this.removeClass("hand-dict");
				});
			}
		};
	return ret;
});

js/dropdown.js

@@ -11,13 +11,14 @@ $.define(["jQuery", "util", "doc"], "dropdown", function($, util, doc) {
		dd_drop = "dd-drop",
		q_dd_drop = ".dd-drop",
		dd_hold = "dd-hold",
		dd_hold_once = "dd-hold-once",readOnly="readOnly",showOnly="showOnly",
		dd_hold_once = "dd-hold-once",
		readOnly = "readOnly",
		showOnly = "showOnly",
		clearMenus = function(e) {
			if(e && e.which === 3) return
			$(q_dd_bg).remove();
			$(q_dd_ctn).each(function() {
				var $this = $(this),
					cls = util.classCheck(this, [open, dd_hold, dd_hold_once, dd_clean]);
				var $this = $(this),cls = util.classCheck(this, [open, dd_hold, dd_hold_once, dd_clean]);
				relatedTarget = {
					relatedTarget: this
				};
@@ -39,12 +40,12 @@ $.define(["jQuery", "util", "doc"], "dropdown", function($, util, doc) {
			var $this = $(this),
				$ddc = $this.parents(q_dd_ctn);
			if(!$ddc.length) return;
			var cls=util.classCheck($ddc[0],[open,q_readOnly,q_showOnly,dd_hold,dd_hold_once])
			var cls = util.classCheck($ddc[0], [open, readOnly, showOnly, dd_hold, dd_hold_once]);
			clearMenus();
			if(!cls[open]) {
				if(cls[readOnly] || cls[showOnly]) return;
				if(cls(dd_hold)) return false;
				if[cls[dd_hold_once]) {
				if(cls[dd_hold]) return false;
				if(cls[dd_hold_once]) {
					$ddc.removeClass(dd_hold_once);
					return false;
				}

js/form.js

@@ -1,6 +1,7 @@
$.define(["jQuery", "util"], "form", function($, util) {
	var impls = [],
		data_key = "jfw_base_form",
		/* default impl */
		di = function(val) {
@@ -53,8 +54,8 @@ $.define(["jQuery", "util"], "form", function($, util) {
						return items[name];
					},
					validate: function(vds) {
						if(vd(items)){
							return util.validate(rules,this);							
						if(vd(items)) {
							return util.validate(rules, this);
						}
						return false;
					},
@@ -86,7 +87,10 @@ $.define(["jQuery", "util"], "form", function($, util) {
						}
						var ret = {};
						for(key in items) {
							ret[key] = items[key].get();
							var tmp = items[key].get();
							if(undefined !== tmp) {
								ret[key] = tmp;
							}
						}
						return ret;
					},
@@ -140,13 +144,17 @@ $.define(["jQuery", "util"], "form", function($, util) {
				};
			}
			return null;
		}
		};
	$.fn.form = function(val) {
		if(this.length && this.length ===1) {
			return bf(this);
		}
	};
	return {
		build: bf,
		register: function(impl) {
			impls.push(impl)
		}
	};
});

js/pageDataGrid.js

@@ -0,0 +1,74 @@
$.define(["jQuery", "util", "form", "code", "pager"], "pageDataGrid", function($, util, form, code, pager) {
	var qf = ".dt-form",
		qt = ".dt-tpl",
		qp = ".dt-pager",
		derr = {},
		dajaxCfg = {},
		configPageIndex = function(fn, data) {
			if(fn && data　 && data.data && data.length) {
				var b = (data.pageNo - 1) * data.pageSize;
				data.data.forEach(function(obj) {
					++b;
					obj[fn] = b;
				});
			}
		},
		build = function($e, options) {
			if($e.length && $e.length === 1) {
				var config = { e: derr, ajax: dajaxCfg };
				var ele = config.ele = $($e[0]);
				config.f = form.build(ele.find(qf));
				config.c = code.parseCode(ele.find(qt)[0]);
				config.p = pager(ele.find(qp));
				config.uri = ele.attr("loadUri");
				config.pnn = ele.attr("pagerPrefix") ? "_pageNo" : "pageNo";
				config.psn = ele.attr("pagerPrefix") ? "_pageSize" : "pageSize";
				config.pageSize = parseInt(ele.attr("pageSize") || "1");
				config.pageNo = parseInt(ele.attr("pageNo") || "10");
				config.pageIndex = ele.attr("pageIndex");
				if(options) {
					$.extend(config, options);
				};
				var ret = {
					code: config.c;
					form: config f;
					load: function() {
						if(config.f.validate()) {
							config.cache = config.f.val();
							config.cache[config.pnn] = config.pageNo;
							config.cache[config.psn] = config.pageSize;
							this.reload();
						}
					},
					reload: function() {
						util.get(config.uri, config.cache, function(data) {
							configPageIndex(config.pageIndex, data);
							config.c.val(data.data);
							config.p.paint(data);
						}, config.e, config.ajax);
					},
					error: function(eh) {
						config.e = eh;
					},
					beforeFill: function(h) {
						config.c.before(h);
					},
					ajaxConfig: function(cfg) {
						config.ajax = cfg;
					}
				};
				config.p.onGo(function(no) {
					config.pageNo = no;
					ret.reload();
				});
				return ret;
			};
		};
	$.fn.pdg = function(option) {
		if(this.length && this.length === 1) {
			return build(this, option);
		}
	};
	return { build: build };
});

js/pager.js

@@ -0,0 +1,64 @@
$.define(["jQuery", "util"], "pager", function($, util) {
	var sli = { tn: "li", chs: [{ tn: "a", attrs: [{ an: "href", av: "javascript:;" }], chs: ["..."] }] };
	function li(clses, dpn, rpn) {
		return { tn: "li", attrs: [{ an: "class", av: clses }, { an: "no", av: "" + rpn }], chs: [{ tn: "a", attrs: [{ an: "href", av: "javascript:;" }], chs: ["" + dpn] }] };
	}
	function calc(data) {
		var pages = Math.ceil(data.total / data.pageSize),
			no = data.pageNo,
			i = no - 2,
			ret = [],
			clses, dpn, rpn;
		ret.push(li(no > 1 ? "active" ? "disabled", "«", no - 1));
		ret.push(li(no === 1 ? "curr" ? "active", "1", 1));
		if(no > 4) {
			ret.push(sli);
		}
		for(i = Math.max(2, no - 2); i < no; ++i) {
			ret.push(li("active", i, i));
		}
		if(no != 1) {
			ret.push(li("curr", no, no));
		}
		i = no + 1;
		var min = Math.min(pages, no + 3);
		for(; i < min; ++i) {
			ret.push(li("active", i, i));
		}
		if(pages - no > 3) {
			ret.push(sli);
		}
		if(pages != no) {
			ret.push(li("active", pages, pages));
		}
		ret.push(li(no != pages ? "active" ? "disabled", "»", no + 1));
		return ret;
	}
	return function($e) {
		var e = $e,
			h = util.noop;
		e.empty();
		return {
			paint: function(data) {
				e.empty();
				if(data.total) {
					util.appendChild(e[0], calc(data));
					e.children("li.active").on("click", function() {
						h(parseInt($(this).attr("no")));
					});
				}
			},
			onGo: function(goh) {
				if(goh) {
					h = goh;
				}
			}
		};
	};
});

js/select.js

@@ -2,6 +2,7 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
	var readOnly = "readOnly",
		showOnly = "showOnly",
		modelName = 'select',
		mModelName = "mselect",
		tInt = "int",
		tBool = "bool",
		tString = "string",
@@ -15,18 +16,22 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
		spanDictCode = { an: "dictCode", av: "" },
		pa = [""],
		jhref = { an: "href", av: "javascript:;" },
		dd_hand = { an: "class", av: "dd-hand" },
		icon_drop = { tn: "i", attrs: [{ an: "class", av: "icon icon-drop" }] },
		icon_close = { tn: "i", attrs: [{ an: "class", av: "icon icon-close" }] },
		a_placeHolder = { tn: "a", attrs: [jhref, { an: "class", av: placeholder }], chs: pa },
		hand = {
			tn: "a",
			attrs: [
				{ an: "class", av: "dd-hand" },
				dd_hand,
				jhref,
				handCode,
			],
			chs: [
				{ tn: "i", attrs: [{ an: "class", av: "icon icon-drop" }] },
				icon_drop,
				{ tn: "span", attrs: [spanCode, spanDictCode] },
				{ tn: "i", attrs: [{ an: "class", av: "icon icon-close" }] },
				{ tn: "a", attrs: [jhref, { an: "class", av: placeholder }], chs: pa }
				icon_close,
				a_placeHolder,
			]
		},
		seim = { an: "class", av: "select-item" },
@@ -34,33 +39,34 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
		buildTreeDrop = function(isQueried, items, pa) {
			items.forEach(function(item) {
				if(isQueried || item.enabled) {
					var li = { tn: "li", attrs: [], chs: [] };
					var li = {
						tn: "li",
						attrs: [{ an: "code", av: item.code }, { an: "caption", av: item.caption }],
						chs: []
					};
					if(item.children && item.children.length) {
						var bhand = { tn: "a", attrs: [], chs: [] };
						bhand.attrs.push({ an: "code", av: item.code });
						bhand.chs.push({ tn: "span", chs: [item.caption] });
						var bhand = {
							tn: "a",
							attrs: [{ an: "code", av: item.code }],
							chs: [{ tn: "span", chs: [item.caption] }]
						};
						li.attrs.push(sebi);
						li.chs.push(bhand);
						buildTreeDrop(isQueried, item.children, li.chs);
						var ul={tn:"ul",chs:[]};
						li.chs.push(ul);
						buildTreeDrop(isQueried, item.children, ul.chs);
					} else {
						li.attrs.push(seim);
						li.attrs.push({ an: "code", av: item.code });
						li.chs.push(item.caption);
					}
					pa.push(li);
				}
			});
		},
		//			}
		//			$ul.find(QF_SELECT_ITEM).on("click.jr_select_api", select_selectItem);
		//			$ul.find(QF_BRANCH_ITEM).on("click.jr_select_api", select_branchItem);
		//			return $ul;
		//	}
		singleShown = function($e, dictCode, clss, $h, $span) {
		buildShown = function($e, dictCode, clss) {
			return clss[tree] ? function(evt) {
				var items = dict.get(dictCode);
				var drop = { tn: "div", attrs[{ an: "class", av: "dd-drop" }], chs = [] };
				var drop = { tn: "div", attrs: [{ an: "class", av: "dd-drop" }], chs: [] };
				if(items) {
					var ul = { tn: "ul", chs: [] };
					buildTreeDrop(clss[queried], items, ul.chs);
@@ -69,27 +75,18 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
					drop.chs.push("loading.........");
				}
				util.appendChild($e[0], drop);
				if(items) {
					$e.find(".select-item").on("click", function() {
						var cc = this.getAttribute("code");
						$h.attr("code", cc);
						$span.attr("code", cc);
						$span[0].textContent = this.textContent;
					});
					$e.find(".branch-item").on("click", function(evt) {
						$(this).toggleClass("open");
						$e.addClass("dd-hold-once");
					});
				}
			} : function(evt) {
				var items = dict.get(dictCode);
				var drop = { tn: "div", attrs[{ an: "class", av: "dd-drop" }], chs = [] };
				var drop = { tn: "div", attrs: [{ an: "class", av: "dd-drop" }], chs: [] };
				if(items) {
					var ul = { tn: "ul", chs: [] };
					items.forEach(function(item) {
						if(clss[queried] || item.enabled) {
							this.push({ tn: "li", attr[seim, { an: "code": av: item.code }], chs: [item.caption] });
							this.push({
								tn: "li",
								attrs: [seim, { an: "code", av: item.code }, { an: "caption", av: item.caption }],
								chs: [item.caption]
							});
						}
					}, ul.chs);
					drop.chs.push(ul);
@@ -97,72 +94,81 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
					drop.chs.push("loading.........");
				}
				util.appendChild($e[0], drop);
				if(items) $e.find(".select-item").on("click", function(e) {
					var cc = this.getAttribute("code");
					$h.attr("code", cc);
					$span.attr("code", cc);
					$span[0].textContent = this.textContent;
				});
			};
		};
	from.register(function($e) {
		var cls = util.classCheck($e[0], [readOnly, showOnly, modelName, tInt, tBool, required, tree, queried]);
	form.register(function($e) {
		var cls = util.classCheck($e[0], [readOnly, showOnly, modelName, tInt, tBool, required, tree, queried]),
			rv;
		if(cls[modelName]) {
			var n = attr("name") || $e.attr("id"),
			var n = $e.attr("name") || $e.attr("id"),
				ve, rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
			var dv = $e.attr(def) || "",
				dictCode = $e.attr("dictCode") || "";
			rv = dv;
			if(!dictCode) { throw "Attribute[dictCode] is invalid"; }
			$e.empty().addClass("dd-ctn").addClass("dd-clean");
			handCode.av = spanCode.av = dv;
			spanDictCode.av = dictCode;
			pa[0] = $e.attr(placeholder) || "";
			pa[0] = $e.attr(placeholder) || "请选择......";
			util.appendChild($e[0], hand);
			var $h = $e.children("a");
			var $span = $h.children("span");
			var select_change = function(nv, cap, evt) {
				if(rv != nv) {
					rv = nv;
					$h.attr("code", rv);
					$span.attr("code", rv).text(cap).removeClass("invalid-dict");
					if(evt) {
						$e.addClass("dd-hold-once");
					}
				}
			};
			if(!(cls[readOnly] || cls[showOnly])) {
				$e.on("shown", singleShown($e[0], dictCode, cls, $h, $span));
				$e.find(".icon-close").on("click", function() {
					$e.addClass("dd-hold-once");
					$h.attr("code", "");
					$span.attr("code", "").text("");
				$e.on("shown.dropdown", buildShown($e, dictCode, cls));
				$e.find(".icon-close").on("click", function(evt) {
					select_change("", "", evt);
				});
				$e.on("click", "div .select-item", function() {
					select_change(this.getAttribute("code"), this.getAttribute("caption"));
				});
				if(cls[tree]) {
					$e.on("click", "div .branch-item>a", function(evt) {
						$(this).toggleClass("open");
						$e.addClass("dd-hold-once");
					});
				}
			}
			if(dv) {
				dict.tranfer($span, dictCode, dv);
			if(rv) {
				dict.transfer($span, dictCode, rv);
			} else {
				dict.apply(dictCode, util.noop);
			}
			return {
				name: n,
				get: function() {
					var vd = $h.attr("code");
					if(vd) {
						return css[tBool]?'1'===vd:cls[tInt]?parseInt(vd):vd;
					if((!cls[showOnly]) && rv) {
						return cls[tBool] ? '1' === rv : cls[tInt] ? parseInt(rv) : rv;
					}
				},
				set: function(data) {
					if(data){
						var cc = data===true?"1":(""+data);
						$h.attr("code",cc);
						$span.attr("code",cc);
						dict.transfer($span,dictCode,cc);
					}else if(data===false || data==0){
						$h.attr("code",'0');
						$span.attr("code",'0');
						dict.transfer($span,dictCode,'0');
					}else{
						$h.attr("code",'');
						$span.attr("code",'').text("");
					if(data) {
						var cc = data === true ? "1" : ("" + data);
						select_change(cc, "");
						dict.transfer($span, dictCode, cc);
					} else if(data === false || data === 0) {
						select_change("0", "");
						dict.transfer($span, dictCode, cc);
					} else {
						select_change("", "");
					}
				},
				validate: function() {
					if(cls[required]){
						if(!$h.attr("code")){
					if(cls[required]) {
						if(!rv) {
							return "不可为空";
						}
					}
@@ -170,7 +176,156 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				},
				reset: function() {
					this.set(dv);
				},
				valid: function() { util.valid($e); },
				invalid: function(reson) {
					util.invalid($e);
					util.error(reson);
				}
			};
		}
	});
	var selCap={an:"class",av:"select-caption"}, mhand = {
		tn: "a",
		attrs: [dd_hand],
		chs: [icon_drop, { tn: "ul" }, a_placeHolder]
	};
	form.register(function($e) {
		var cls = util.classCheck($e[0], [readOnly, showOnly, mModelName, tInt, required, tree, queried]);
		if(cls[mModelName]) {
			var n = $e.attr("name") || $e.attr("id"),
				rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
			var dv = [],
				rv = [],
				tmp = ($e.attr(def) || "").split(","),
				dictCode = $e.attr("dictCode") || "";
			if(!dictCode) { throw "Attribute[dictCode] is invalid"; }
			tmp.forEach(function(item) {
				if(item) {
					item = item.trim();
					if(item) {
						dv.push(item);
						rv.push(item);
					}
				}
			});
			$e.empty().addClass("dd-ctn").addClass("dd-clean");
			pa[0] = $e.attr(placeholder) || "请选择......";
			var lis = mhand.chs[1].chs = [];
			dv.forEach(function(item) {
				lis.push({
					tn: "li",
					attrs: [{ an: "code", av: item }],
					chs: [icon_close, { tn: "span", attrs: [{ an: "code", av: item},selCap] }]
				});
			});
			util.appendChild($e[0], mhand);
			var $ul = $e.find("ul");
			var mselect_add = function(nv, cp) {
				if(rv.indexOf(nv) > -1) {
					return false;
				}
				rv.push(nv);
				var li = {
					tn: "li",
					attrs: [{ an: "code", av: nv }],
					chs: [icon_close,
						{
							tn: "span",
							attrs: [{ an: "code", av: nv },selCap],
							chs: [cp]
						}
					]
				};
				util.appendChild($ul[0], li);
				return true;
			};
			var mselect_change = function(na) {
				rv = [], nlis = [];
				$ul.empty();
				na.forEach(function(item) {
					rv.push("" + item);
				});
				if(rv.length) {
					rv.forEach(function(item) {
						nlis.push({
							tn: "li",
							attrs: [{ an: "code", av: nv },selCap],
							chs: [icon_close, {
								tn: "span",
								attrs: [{ an: "code", av: item.code }, { an: "dict", av: dictCode }, { an: "class", av: "hand-dict" }],
								chs: [cp]
							}]
						});
					});
					util.appendChild($ul[0], nlis);
					dict.doTransfer();
				}
			};
			if(lis.length) {
				$ul.find("span").each(function() {
					dict.transfer($(this), dictCode);
				});
			} else {
				dict.apply(dictCode, util.noop);
			}
			if(!(cls[readOnly] || cls[showOnly])) {
				$e.on("shown.dropdown", buildShown($e, dictCode, cls));
				$ul.on("click", "li>i", function(e) {
					$e.addClass("dd-hold-one");
					var idx = rv.indexOf(this.parentNode.getAttribute("code"));
					if(idx > -1) {
						rv.splice(idx, 1);
					}
					$(this).parent().remove();
				});
				$e.on("click", "div .select-item", function() {
					if(!mselect_add(this.getAttribute("code"), this.getAttribute("caption"))) {
						$e.addClass("dd-hold-once");
					}
				});
				if(cls[tree]) {
					$e.on("click", "div .branch-item>a", function(evt) {
						$(this).toggleClass("open");
						$e.addClass("dd-hold-once");
					});
				}
			}
			return {
				name: n,
				get: function() {
					if((!cls[showOnly]) && rv.length) {
						var ret = [];
						rv.forEach(function(item) {
							ret.push(cls[tInt] ? parseInt(item) : item);
						});
						return ret;
					}
				},
				set: function(data) {
					mselect_change(data ? (data.length ? data : []) : []);
				},
				validate: function() {
					if(cls[required]) {
						if(!rv.length) {
							return "不可为空";
						}
					}
					return util.validate(rules, this);
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				},
				reset: function(data) {
					this.set(dv);
				},
@@ -181,6 +336,5 @@ $.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, d
				}
			};
		}
	});
});

js/spa.js

@@ -0,0 +1,410 @@
$.define(["jQuery", "util", "doc", "win", "body"], "spa", function($, util, doc, win, body) {
	var head = doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement,
		baseElement = head.getElementsByTagName("base")[0],
		ahref = { an: "href", av: "javascript:;" },
		spa_modal_index = 0,
		spa_css_ref = 0,
		resCache = {},
		cssCache = {},
		htmlCache = { "#": "#" },
		modelCache = {},
		scriptCache {}, resUri, menuUri, menuEle,
		main, mainEle,
		errHand = {
			"defErrHand": function(err) {
				showModal("_def_err_form", err);
			}
		},
		cfg = {
			error: errHand,
			ajaxCfg: { mask: true },
			mask: true,
			loadEnabled: true
		},
		load_res = function() {
			if(resUri) {
				util.get(resUri, null, function(data) {
					/**
					 * res =[{id:"",uri:"",css:"",script:""},{id:"",uri:"",css:"",script:""},...........]
					 */
					if(data && data.length) {
						data.forEach(function(item) {
							resCache[item.id] = item;
						});
					}
					menuUri ? load_menu() : showMain();
				}, cfg.error, cfg.ajaxCfg);
			}
		},
		load_menu = function() {
			util.get(menuUri, null, function(menu) {
				build_menu(menu);
				showMain();
			}, cfg.error, cfg.ajaxCfg);
		},
		build_menu = function(menu) {
			if(menuEle && emnuEle.length && menu && menu.length) {
				var ul = { tn: "ul", attrs: [{ an: "class", av: "nav nav-root" }], chs: [] };
				build_menu_item(ul.chs, menu);
				menuEle.empty();
				util.appendChild(menuEle[0], ul);
				menuEle.find(".nav-hand").on("click", function(e) {
					var $this = $(this);
					menuEle.find(".nav-hand.active").removeClass("active");
					$this.addClass("active");
					if($this.hasClass("spa-modal")) {
						showModal($this.attr("res"));
					} else {
						location.hash = "#" + $this.attr("res");
						showMain();
					}
				});
				menuEle.find(".nav-branch-hand").on("click", function(e) {
					var prt = $(this).parent();
					if(prt.hasClass("open")) {
						prt.removeClass("open");
					} else {
						prt.parent().children(".open").removeClass("open");
						prt.addClass("open");
					}
				});
			}
		},
		build_menu_item = function(po, items) {
			var item, res, caption, iconClass;
			items.forEach(function(item) {
				var li = { tn: "li" },
					attrs = li.attrs = [],
					chses = li.chs = [],
					lia = { tn: "a", attrs: [ahref], chs: [] };
				chses.push(lia);
				var ic = "icon-" + (item.icon || (item.res ? "book" : "branch"));
				lia.chs.push({ tn: "i", attrs: [{ an: "class", av: ic }] });
				lia.push(item.caption);
				var lac = "";
				if(item.res) {
					lia.attrs.push({ an: "res", av: item.res });
					lac = lac + (item.modal ? " nav-hand spa-modal" : " nav-hand");
					lia.attrs.push({ an: "class", av: lac })
				} else {
					lia.chs.push({ tn: "i", attrs: [{ an: "class", av: "icon fold" }] });
					lac = lac + " nav-branch-hand";
					attrs.push({ an: "class", av: "nav-parent" });
					var ul = { tn: "ul", attrs: [{ an: "class", av: "nav" }], chs: [] };
					chses.push(ul);
					build_menu_item(ul, item.children);
				}
				lia.attrs.push({ an: "class", av: lac });
				po.push(li);
			});
		},
		loadModelCss = function(model) {
			if(model.css) {
				var uri = model.css;
				if(cssCache[uri]) {
					cssCache[uri]['ref'] = cssCache[uri]['ref'] + 1;
				} else {
					++spa_css_ref;
					var css_id = "___spa_css_id_" + spa_css_ref;
					cssCache[uri] = { ref: 1, id: css_id };
					var link = doc.createElement('link');
					link.rel = 'stylesheet';
					link.href = model.css;
					link.media = 'all';
					link.setAttribute("id", css_id);
					head.appendChild(link);
				}
			}
		},
		showMainInternal = function(model) {
			cleanMain();
			main = model;
			loadModelCss(model);
			if(model.uri) {
				mainEle.html(htmlCache[model.uri]);
			}
			mainEle.attr("spa-model-id", model.id);
			if(model.factory && model.factory.main) {
				model.factory.main.call();
			}
		},
		showModalInternal = function(model, data) {
			loadModelCss(model);
			var ly = util.showModal(model.uri ? htmlCache[model.uri] : null);
			++spa_modal_index;
			ly.ctn.addClass("spa-modal").addClass("spa-modal-index-" + spa_modal_index).attr("spa-model-id", model.id);
			if(model.factory && model.factory.modal) {
				model.factory.modal(data);
			}
		},
		cacheModel = function(model) {
			var m = modelCache[model.id] = {};
			m.uri = model.uri;
			m.factory = model.factory;
			m.css = model.css;
			m.id = model.id;
			m.data = model.data;
			delete resCache[model.id];
			return m;
		},
		afterLoadByMain = function(model, data) {
			showMainInternal(cacheModel(model));
		},
		afterLoadByModal = function(model, data) {
			showModalInternal(cacheModel(model), data);
		},
		loadModel = function(model, handler, data) {
			if(htmlCache[model.uri || "#"]) {
				model.state = 11;
				if(model.script) {
					loadModelScript(model, handler, data);
				} else {
					handler(model, data);
				}
			} else {
				if(cfg.mask) {
					util.showLoading();
				}
				model.state = 10;
				$.ajax({ url: model.uri, dataType: "html", type: "GET" }).done(function(hc) {
					model.state = 11;
					htmlCache[model.uri] = hc;
					if(cfg.mask) {
						util.hideLoading();
					}
					if(model.script) {
						loadModelScript(model, handler, data);
					} else {
						handler(model, data);
					}
				}).fail(function(jqXHR, textStatus, errorThrown) {
					model.state = 12;
					if(cfg.mask) { util.hideLoading(); }
					cfg.error({
						code: "loadModelHtml_" + (textStatus || ""),
						msg: textStatus,
						detailMsg: textStatus,
						xhr: jqXHR,
						eObj: errorThrown,
						url: model.uri
					});
				});
			}
		},
		removeModelCss = function(model) {
			if(model.css) {
				var cm = cssCache[model.css];
				if(cm) {
					cm.ref = cm.ref - 1;
					if(!cm.ref) {
						var link = doc.getElementById(cm.id);
						if(link) link.parentNode.removeChild(link);
						delete cssCache[model.css];
					}
				}
			}
		},
		loadModelScript = function(model, handler, data) {
			model.factory = scriptCache[model.script];
			if(model.factory) {
				model.state = 31;
				handler.call(model, data);
				return;
			}
			var node = doc.createElement("script");
			node.async = true;
			node.src = model.script;
			node.charset = "UTF-8";
			var supportOnload = "onload" in node;
			if(cfg.mask) {
				util.showLoading();
			}
			window.spa_define = function(factoryBuilder) {
				model.state = 30;
				if(cfg.mask) {
					util.showLoading();
				}
				try {
					scriptCache[model.script] = model.factory = factoryBuilder();
					model.state = 31;
					if(cfg.mask) {
						util.hideLoading();
					}
				} catch(err) {
					model.state = 32;
					if(cfg.mask) {
						util.hideLoading();
					}
					cfg.error({
						code: "buildModelFactory_" + err.toString(),
						msg: err.toString() || "",
						detailMsg: err.toString() || "",
						url: model.script
					});
				}
				handler(model, data);
			};
			if(supportOnload) {
				node.onload = function() {
					if(model.state < 21) model.state = 21;
					node.onerror = null;
					node.onload = null;
					head.removeChild(node);
					if(cfg.mask) {
						util.hideLoading();
					}
				};
				node.onerror = function() {
					node.onload = null;
					node.onerror = null;
					head.removeChild(node);
					if(cfg.mask) {
						util.hideLoading();
					}
					if(model.state < 22) {
						model.state = 22;
						cfg.error({
							code: "loadModelScript_" + err.toString(),
							msg: err.toString() || "",
							detailMsg: err.toString() || "",
							url: model.script
						});
					}
				};
			} else {
				node.onreadystatechange = function() {
					if(/loaded|complete/.test(node.readyState)) {
						node.onreadystatechange = null;
						if(model.state < 21) {
							model.state = 21;
							var to = model.timeout || 1000;
							setTimeout(function() {
								if(model.state == 21) {
									model.state = 22;
									head.removeChild(node);
									if(cfg.mask) {
										util.hideLoading();
									}
									cfg.error({
										code: "loadModelScript_timeout",
										msg: "",
										detailMsg: "",
										url: model.script
									});
								}
							}, model.timeout || 1000);
						} else {
							head.removeChild(node);
							if(cfg.mask) {
								util.hideLoading();
							}
						}
					}
				};
			}
			model.state = 20;
			baseElement ?
				head.insertBefore(node, baseElement) :
				head.appendChild(node);
		},
		cleanMain = function() {
			if(main) {
				removeModelCss(main);
				if(main.factory && main.factory.mainDestory) { main.factory.mainDestory() };
				mainEle.empty();
				main = null;
			}
		},
		getModel = function(id) {
			return modelCache[id];
		},
		showModal = function(id, data) {
			var model = modelCache[id];
			if(model) {
				showModalInternal(model, data);
			} else {
				model = resCache[id];
				if(model) {
					loadModel(model, afterLoadByModal, data);
				} else {
					cfg.error({ code: "invalid_model", msg: "不正确的模块[" + id + "]", detailMsg: "不正确的模块[" + id + "]" });
				}
			}
		},
		showMain = function() {
			var id = win.location.hash;
			if(id && id.length > 1) {
				id = id.substring(1);
			} else return;
			if(main && id == main.id) return;
			if(main) {
				cleanMain();
			}
			var model = modelCache[id];
			if(model) {
				showMainInternal(model);
			} else {
				var model = resCache[id];
				if(model) {
					loadModel(model, afterLoadByMain);
				} else {
					cfg.error({ code: "invalid_model", msg: "不正确的模块[" + id + "]", detailMsg: "不正确的模块[" + id + "]" });
				}
			}
		},
		getLastModalIndex = function() {
			return spa_modal_index;
		},
		getLastModalCtn = function() {
			return $(".spa-modal-index-" + spa_modal_index);
		},
		getLastModalModel = function() {
			var ctn = $(".spa-modal-index-" + spa_modal_index);
			var id = modalCtn.attr("spa-model-id");
			return getModel(id);
		},
		closeModal = function() {
			var ctn = $(".spa-modal-index-" + spa_modal_index);
			var id = ctn.attr("spa-model-id");
			var inx = util.listModalIndex();
			if(ctn.hasClass("layer-" + inx)) {
				var model = modelCache[id];
				if(model) {
					if(model.factory.modalDestory) {
						model.factory.modalDestory.call(this);
					}
					if(model.css) {
						removeModelCss(model);
					}
					--spa_modal_index;
					util.closeModal();
				}
			} else {
				cfg.error({ code: "invalid_dir", msg: "can't close modal:has top layer", detailMsg: "can't close modal:has top layer" });
			}
		},
		build = function(config) {
			$.extend(cfg, config);
			resUri = cfg.resUri || body.attr("resUri");
			menuUri = cfg.resUri || body.attr("menuUri");
			mainEle = cfg.mainEle || $(".spa-main");
			menuEle = cfg.menuEle || $(".spa-menu");
			resCache = cfg.resCache || resCache;
			htmlCache = cfg.htmlCache || htmlCache;
			htmlCache["#"] = "#";
			if(cfg.loadEnabled) load_res();
		},
		ret = {
			build: build,
			closeModal: closeModal,
			getLastModalModel: getLastModalModel,
			getLastModalCtn: getLastModalCtn,
			getLastModalIndex: getLastModalIndex,
			showMain: showMain,
			showModal: showModal
		};
		$.spa=ret;
	return ret;
});

js/text.js

@@ -1,9 +1,21 @@
$.define(["jQuery", "form", "util"],"text",function($, form, util) {
	var trim="trim",readOnly="readOnly",showOnly="showOnly",modelName='text',tInt="int",tBool="bool",tFloat="float",tString="string",pw="password",def="defVal",placeholder="placeholder",required="required";	
	from.register(function($e) {
		var cls = util.classCheck($e[0],[modelName,trim,readOnly,showOnly,tInt,tBool,tFloat,pw,]);
$.use(["jQuery", "form", "util"], function($, form, util) {
	var trim = "trim",
		readOnly = "readOnly",
		showOnly = "showOnly",
		modelName = 'text',
		tInt = "int",
		tBool = "bool",
		tFloat = "float",
		tString = "string",
		pw = "password",
		def = "defVal",
		placeholder = "placeholder",
		required = "required";
	form.register(function($e) {
		var cls = util.classCheck($e[0], [modelName, trim, readOnly, showOnly, tInt, tBool, tFloat, pw, ]);
		if(cls[modelName]) {
			var n = $e.attr("name") || $e.attr("id"),ve, rules = [];
			var n = $e.attr("name") || $e.attr("id"),
				ve, rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
@@ -12,26 +24,41 @@ $.define(["jQuery", "form", "util"],"text",function($, form, util) {
			if(cls[showOnly]) {
				$e.text(dv);
			} else {
				ve = $("<input type='" + (cls[pw] ? pw :modelName) + "' />");
				var tmp = this.ele.attr(placeholder);
				ve = $("<input type='" + (cls[pw] ? pw : modelName) + "' />");
				var tmp = $e.attr(placeholder);
				if(tmp) ve.attr(placeholder, tmp);
				if(cls[readOnly]) ve.prop('readonly', "readonly");
				ve.val(dv);
				ve.appendTo($e);
			}
			return {
				name: n,
				get: function() {
					var vd = ve.val();
					if(vd) {
						return   cls[tInt] ? parseInt(vd):cls[tFloat]? parseFloat(vd):vd;
					if(!cls[showOnly]) {
						var vd = ve.val();
						if(vd) {
							if(cls[tInt]) {
								vd = parseInt(vd);
								if(!isNaN(vd)) { return vd };
							} else if(cls[tFloat]) {
								vd = parseFloat(vd);
								if(!isNaN(vd)) { return vd };
							} else {
								return vd;
							}
						}
					}
				},
				set: function(data) {
					if(cls[showOnly) $e.text(data) else ve.val(data);
					if(cls[showOnly]) {
						$e.text(data)
					} else {
						ve.val(data);
					}
				},
				validate: function() {
					if(cls[required]){
						if(!ve.val()){
					if(cls[required]) {
						if(!ve.val()) {
							return "不可为空或空字符串";
						}
					}
@@ -39,8 +66,8 @@ $.define(["jQuery", "form", "util"],"text",function($, form, util) {
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				}
				reset: function(data) {
				},
				reset: function() {
					this.set(dv);
				},
				valid: function() { util.valid($e); },

js/textarea.js

@@ -0,0 +1,70 @@
$.use(["jQuery", "form", "util"], function($, form, util) {
	var trim = "trim",
		readOnly = "readOnly",
		showOnly = "showOnly",
		modelName = 'textarea',
		def = "defVal",
		placeholder = "placeholder",
		required = "required";
	form.register(function($e) {
		var cls = util.classCheck($e[0], [modelName, trim, readOnly, showOnly]);
		if(cls[modelName]) {
			var n = $e.attr("name") || $e.attr("id"),
				ve, rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
			dv = $e.attr(def) || "";
			$e.empty();
			if(cls[showOnly]) {
				$e.text(dv);
			} else {
				ve = $("<textarea></textarea>");
				ve.attr("rows", $e.attr("rows") || "3");
				ve.attr("cols", $e.attr("cols") || "20");
				var tmp = $e.attr(placeholder);
				if(tmp) ve.attr(placeholder, tmp);
				if(cls[readOnly]) ve.prop("readonly", "readonly");
				ve.val(dv);
				ve.appendTo($e);
			}
			return {
				name: n,
				get: function() {
					if(!cls[showOnly]) {
						var vd = ve.val();
						return vd?(cls[trim]?vd.trim():vd):undefined;
					}
				},
				set: function(data) {
					if(cls[showOnly]) {
						$e.text(data)
					} else {
						ve.val(data);
					}
				},
				validate: function() {
					if(cls[required]) {
						var v=cls[trim]?ve.val().trim():ve.val();
						if(!v) {
							return "不可为空或空字符串";
						}
					}
					return util.validate(rules, this);
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				},
				reset: function() {
					this.set(dv);
				},
				valid: function() { util.valid($e); },
				invalid: function(reson) {
					util.invalid($e);
					util.error(reson);
				}
			};
		}
	});
});

js/util.js

@@ -1,4 +1,4 @@
$.define(["jQuery", "body", "win"], "util", function($, $body, win) {
$.define(["jQuery", "body", "win","doc"], "util", function($, $body, win,doc) {
	var rclass = /[\t\r\n\f]/g,
		noop = function() {},
		infoDiv = $("#g_info"),
@@ -16,7 +16,7 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
			this.ctn.empty();
			this.ctn.remove();
			this.prev.css("display", "block");
			_g_layer_curr = this.prev;
			layer_curr = this.prev;
		},
		fh = function(e) {
			$(this).parent().hide();
@@ -36,11 +36,11 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
			}
		},
		modal = function(ctn) {
			var inx = _g_layer_curr.index + 2,
			var inx = layer_curr.index + 2,
				ly = {
					index: inx,
					remove: layer_remove,
					prev: _g_layer_curr
					prev: layer_curr
				};
			ly.shade = $(
				"<div class='layer-shade layer-" + inx + "' style='z-index:" +
@@ -196,12 +196,12 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
				} else {
					rd.code = "" + rd.code;
					rd.url = pUrl;
					ajaxErrHand(ep, eh);
					ajaxErrHand(rd, eh);
				}
			};
			config.error = function(jqXHR, textStatus, errorThrown) {
				ajaxErrHand({
					code: textStatus,
					code: "err_"+(textStatus || ""),
					msg: textStatus,
					detailMsg: textStatus,
					xhr: jqXHR,
@@ -212,6 +212,11 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
			$.ajax(config).always(false !== config.mask ? unLoading : noop);
		},
		buildElement = function(pe, obj) {
			if($.isArray(obj)) {
				obj.forEach(function(item) {
					buildElement(pe, item);
				});
			}else{
			var e;
			if(typeof obj === 'string') {
				e = doc.createTextNode(obj);
@@ -226,10 +231,10 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
				}
				if(obj.chs && obj.chs.length) {
					obj.chs.forEach(function(ch) {
						buildElement(e,ch);
						buildElement(e, ch);
					});
				}
			}
			}}
		};
	return {
@@ -281,6 +286,7 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
			ajaxAccess("post", url, null, sh, eh, pOjb);
		},
		noop: noop,
		nochange:function(d){return d},
		returnTrue: function() {
			return true;
		},
@@ -316,11 +322,11 @@ $.define(["jQuery", "body", "win"], "util", function($, $body, win) {
		invalid: function($e) {
			$e.addClass("invald");
		},
		appendChild: function(e,obj) {
		appendChild: function(e, obj) {
			var docf = doc.createDocumentFragment();
			buildElement(docf,obj);
			buildElement(docf, obj);
			e.appendChild(docf);
		},
		
	};
});