收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2594|回复: 6

[作品展示] Daily ToDo 一个简单的每日工作项管理小工具

[复制链接]
发表于 2016-1-14 21:49:12 | 显示全部楼层 |阅读模式
本帖最后由 yaohaixiao 于 2016-1-14 22:21 编辑

最近终于有空可以自己写点东西,就写了一个十分简单的工作项管理工具。虽然漫天飞的这类软件,不过自己还是想试试写一个,也方便每天记录自己的工作项,由于只是记录每天的,一个纯JS的就OK了。

演示地址:http://www.yaohaixiao.com/todo/
Fork on GitHub: https://github.com/yaohaixiao/DailyToDo

Daily ToDo

Daily ToDo


由于使用了semantic ui所以对低半分的IE支持的不好,一个简单的工具,这里贴出来也是为了跟大家交流,所有没有用什么MVC什么的,大家看看吧!很久没有写了,有点生疏了,希望大家拍砖吧!
 楼主| 发表于 2016-1-14 21:50:53 | 显示全部楼层
  1. if (typeof DONE !== 'object') {
  2.         /**
  3.          * [url=home.php?mod=space&uid=23715]@class[/url] DONE
  4.          * @static
  5.          */
  6.         var DONE = {};
  7. }

  8. /**
  9. * Returns the namespace specified and creates it if it doesn't exist
  10. *
  11. * [url=home.php?mod=space&uid=111085]@method[/url] namespace
  12. * @static
  13. * @returns {DONE}
  14. */
  15. DONE.namespace = function () {
  16.         var D = null,
  17.                 names;

  18.         $(arguments).each(function (i, arg) {
  19.                 names = ('' + arg).split('.');
  20.                 D = DONE;

  21.                 $(names).each(function (j, name) {
  22.                         // DONE is implied, so it is ignored if it is included
  23.                         if (j === 0 && name === 'DONE') {
  24.                                 D = DONE;
  25.                         }
  26.                         else {
  27.                                 D[name] = D[name] || {};
  28.                                 D = D[name];
  29.                         }
  30.                 });
  31.         });

  32.         return D;
  33. };

  34. /**
  35. * Registers a module with the DONE object
  36. * @method register
  37. * @static
  38. * @param {String}   name    the name of the module (event, slider, etc)
  39. * @param {Function} mainClass a reference to class in the module.  This
  40. *                             class will be tagged with the version info
  41. *                             so that it will be possible to identify the
  42. *                             version that is in use when multiple versions
  43. *                             have loaded
  44. * @param {Object}   data      metadata object for the module.  Currently it
  45. *                             is expected to contain a "version" property
  46. *                             and a "build" property at minimum.
  47. */
  48. DONE.register = function (name, mainClass, data) {
  49.         var mods = DONE.env.modules, m, v, b, ls, i;

  50.         if (!mods[name]) {
  51.                 mods[name] = {
  52.                         versions: [],
  53.                         builds: []
  54.                 };
  55.         }

  56.         m = mods[name];
  57.         v = data.version;
  58.         b = data.build;
  59.         ls = DONE.env.listeners;

  60.         m.name = name;
  61.         m.version = v;
  62.         m.build = b;
  63.         m.versions.push(v);
  64.         m.builds.push(b);
  65.         m.mainClass = mainClass;

  66.         // fire the module load listeners
  67.         for (i = 0; i < ls.length; i = i + 1) {
  68.                 ls[i](m);
  69.         }

  70.         // label the main class
  71.         if (mainClass) {
  72.                 mainClass.VERSION = v;
  73.                 mainClass.BUILD = b;
  74.         } else {
  75.                 // DONE.log("mainClass is undefined for module " + name, "warn");
  76.         }
  77. };


  78. /**
  79. * DONE.env is used to keep track of what is known about the DONE library and
  80. * the browsing environment
  81. * @class DONE.env
  82. * @static
  83. */
  84. DONE.env = DONE.env || {

  85.                 /**
  86.                  * Keeps the version info for all DONE modules that have reported themselves
  87.                  * @property modules
  88.                  * @type Object[]
  89.                  */
  90.                 modules: [],

  91.                 /**
  92.                  * List of functions that should be executed every time a DONE module
  93.                  * reports itself.
  94.                  * @property listeners
  95.                  * @type Function[]
  96.                  */
  97.                 listeners: []
  98.         };

  99. /**
  100. * Returns the version data for the specified module:
  101. *      <dl>
  102. *      <dt>name:</dt>      <dd>The name of the module</dd>
  103. *      <dt>version:</dt>   <dd>The version in use</dd>
  104. *      <dt>build:</dt>     <dd>The build number in use</dd>
  105. *      <dt>versions:</dt>  <dd>All versions that were registered</dd>
  106. *      <dt>builds:</dt>    <dd>All builds that were registered.</dd>
  107. *      <dt>mainClass:</dt> <dd>An object that was was stamped with the
  108. *                 current version and build. If
  109. *                 mainClass.VERSION != version or mainClass.BUILD != build,
  110. *                 multiple versions of pieces of the library have been
  111. *                 loaded, potentially causing issues.</dd>
  112. *       </dl>
  113. *
  114. * @method getVersion
  115. * @static
  116. * @param {String}  name the name of the module (event, slider, etc)
  117. * @return {Object} The version info
  118. */
  119. DONE.env.getVersion = function (name) {
  120.         return DONE.env.modules[name] || null;
  121. };

  122. (function ($) {
  123.         var HTML_CHARS = {
  124.                         'r': ' ',
  125.                         'n': ' ',
  126.                         't': ' ',
  127.                         '&': '&amp;',
  128.                         '<': '&lt;',
  129.                         '>': '&gt;',
  130.                         '"': '&quot;',
  131.                         "'": '&#x27;',
  132.                         '/': '&#x2F;',
  133.                         '`': '&#x60;'
  134.                 },
  135.                 _$ = $({});

  136.         DONE.lang = {
  137.                 _uid: -1,
  138.                 /**
  139.                  *
  140.                  * @returns {DONE.lang}
  141.                  */
  142.                 subscribe: function () {
  143.                         _$.on.apply(_$, arguments);

  144.                         return this;
  145.                 },
  146.                 /**
  147.                  *
  148.                  * @returns {DONE.lang}
  149.                  */
  150.                 unsubscribe: function () {
  151.                         _$.off.apply(_$, arguments);

  152.                         return this;
  153.                 },
  154.                 /**
  155.                  *
  156.                  */
  157.                 publish: function () {
  158.                         _$.trigger.apply(_$, arguments);
  159.                 },
  160.                 /**
  161.                  * 将数字或者数字字符串格式化为添加千分位分隔符的货币格式
  162.                  *
  163.                  * @method currency
  164.                  * @param {Number|String} str
  165.                  * @param {Number} [toFixed]
  166.                  * @returns {String}
  167.                  *
  168.                  * @example
  169.                  * <code>
  170.                  * <pre>
  171.                  * var cost = currency(1000000) // 1,000,000.00
  172.                  * var cost = currency(-100000000) // -1,000,000.00
  173.                  * var cost = currency(1000000, 4) // 1,000,000.0000
  174.                  * var cost = currency(89.244) // 89.24
  175.                  * var cost = currency(89.245) // 89.25
  176.                  * </pre>
  177.                  * </code>
  178.                  */
  179.                 currency: function (str, toFixed) {
  180.                         var EMPTY = '',
  181.                                 COMMA = ',',
  182.                                 DOT = '.',
  183.                                 MINUS = '-',
  184.                                 intParts = [],
  185.                                 result = EMPTY,
  186.                                 len = 0,
  187.                                 dectPart;

  188.                         toFixed = toFixed > 0 && toFixed <= 20 ? toFixed : 2;

  189.                         str = parseFloat((str + EMPTY).replace(/[^\d\.-]/g, EMPTY)).toFixed(toFixed) + EMPTY;

  190.                         intParts = str.split(DOT)[0].split(EMPTY).reverse();
  191.                         dectPart = str.split(DOT)[1];

  192.                         len = intParts.length;

  193.                         $(intParts).each(function (i, intPart) {
  194.                                 result += intPart + ((i + 1) % 3 == 0 && (i + 1) !== len && intParts[i + 1] !== MINUS ? COMMA : EMPTY);
  195.                         });

  196.                         return result.split(EMPTY).reverse().join(EMPTY) + DOT + dectPart;
  197.                 },
  198.                 /**
  199.                  * @method guid
  200.                  * @param {String} [prefix]
  201.                  * @returns {String}
  202.                  */
  203.                 guid: function (prefix) {
  204.                         var id;

  205.                         this._uid += 1;
  206.                         id = prefix ? prefix + '-' + this._uid : this._uid;

  207.                         return id;
  208.                 },
  209.                 /**
  210.                  * @method template
  211.                  * @param {Object} json
  212.                  * @param {String} html
  213.                  * @returns {String}
  214.                  */
  215.                 template: function (json, html) {
  216.                         var L = this,
  217.                                 templateHTML = '' + html;

  218.                         $.each(json, function (key, value) {
  219.                                 var replaceRegExp = new RegExp('\{' + key + '\}', 'ig');

  220.                                 templateHTML = templateHTML.replace(replaceRegExp, L.encodeHTML(value));
  221.                         });

  222.                         return templateHTML;
  223.                 },
  224.                 /**
  225.                  * @method encodeHTML
  226.                  * @param {String} html
  227.                  * @returns {String}
  228.                  */
  229.                 encodeHTML: function (html) {
  230.                         html = '' + html;

  231.                         return html.replace(/[&<>"'\/\r\n\t`]/g, function (match) {
  232.                                 return HTML_CHARS[match];
  233.                         });
  234.                 },
  235.                 /**
  236.                  * returns a (int) Number between start to end
  237.                  *
  238.                  * @method random
  239.                  * @param {Number} start
  240.                  * @param {Number} end
  241.                  * @returns {number}
  242.                  */
  243.                 random: function (start, end) {
  244.                         return Math.floor(Math.random() * (end - start) + start);
  245.                 }
  246.         };
  247. })(jQuery);

  248. DONE.register("done", DONE, {version: "0.1.0", build: "0810"});
  249. DONE.register("lang", DONE.lang, {version: "0.1.0", build: "0810"});
复制代码


由于工作的原因,个人写DONE时还是习惯性的借鉴了YUI的写法并且也直接复制了一些用得到的方法。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-1-14 21:51:35 | 显示全部楼层
  1. (function ($) {
  2.         /**
  3.          *
  4.          * @param {Object} config
  5.          * @param {String} [config.clsType]
  6.          * @param {String} config.tip
  7.          * @returns {DONE.Message}
  8.          * @constructor
  9.          */
  10.         DONE.Message = function (config) {
  11.                 this.attributes = {};

  12.                 this.wrapper = null;
  13.                 this.tip = null;
  14.                 this.closebar = null;

  15.                 this.showTime = 0;

  16.                 if ($.isPlainObject(config)) {
  17.                         this.init(config);
  18.                 }

  19.                 return this;
  20.         };

  21.         DONE.Message.defaults = {
  22.                 clsType: 'error',
  23.                 tip: '',
  24.                 showTime: 2500,
  25.                 beforeOpen: null,
  26.                 afterOpen: null,
  27.                 beforeClose: null,
  28.                 afterClose: null,
  29.                 autoClose: true,
  30.                 TEMPLATE: '<div class="ui message todo-message">' +
  31.                 '<i class="close icon"></i>' +
  32.                 '<p class="todo-message-text"></p>' +
  33.                 '</div>'
  34.         };

  35.         DONE.Message.prototype = {
  36.                 constructor: DONE.Message,
  37.                 set: function (config) {
  38.                         if ($.isPlainObject(config)) {
  39.                                 $.extend(this.attributes, config);
  40.                         }

  41.                         return this;
  42.                 },
  43.                 init: function (config) {
  44.                         this.set(DONE.Message.defaults).set(config)._init().render().attachEvents();

  45.                         return this;
  46.                 },
  47.                 _init: function () {
  48.                         var attrs = this.attributes,
  49.                                 $wrapper;

  50.                         $wrapper = this.wrapper = $(attrs.TEMPLATE);
  51.                         this.tip = $wrapper.find(".todo-message-text");
  52.                         this.closebar = $wrapper.find('.close');

  53.                         this.showTime = attrs.showTime;

  54.                         return this;
  55.                 },
  56.                 render: function () {
  57.                         var attrs = this.attributes,
  58.                                 type = attrs.clsType.toLowerCase(),
  59.                                 beforeOpen = attrs.beforeOpen,
  60.                                 $wrapper = this.wrapper,
  61.                                 width;

  62.                         $wrapper.addClass(type).attr('id', DONE.lang.guid('message'));

  63.                         this.tip.text(attrs.tip);

  64.                         $(document.body).append($wrapper);

  65.                         width = $wrapper.width();

  66.                         // 定位到屏幕正中央
  67.                         $wrapper.css({
  68.                                 'margin-left': -(width / 2)
  69.                         });

  70.                         if($.isFunction(beforeOpen)){
  71.                                 beforeOpen();
  72.                         }

  73.                         // 显示提示
  74.                         this.open();

  75.                         return this;
  76.                 },
  77.                 open: function () {
  78.                         var Message = this,
  79.                                 attrs = this.attributes,
  80.                                 afterOpen = attrs.afterOpen,
  81.                                 $wrapper = this.wrapper;

  82.                         // 显示提示
  83.                         setTimeout(function () {
  84.                                 $wrapper.animate({
  85.                                         'top': 0
  86.                                 }, 200, function () {
  87.                                         if($.isFunction(afterOpen)){
  88.                                                 afterOpen();
  89.                                         }

  90.                                         if (attrs.autoClose) {
  91.                                                 setTimeout(function () {
  92.                                                         Message.close();
  93.                                                 }, Message.showTime);
  94.                                         }
  95.                                 });
  96.                         }, 100);

  97.                         return this;
  98.                 },
  99.                 close: function () {
  100.                         var $wrapper = this.wrapper,
  101.                                 attrs = this.attributes,
  102.                                 beforeClose = attrs.beforeClose,
  103.                                 afterClose = attrs.afterClose;

  104.                         if($.isFunction(beforeClose)){
  105.                                 beforeClose();
  106.                         }

  107.                         // 显示3秒后关闭
  108.                         $wrapper.animate({
  109.                                 'top': -40
  110.                         }, 200, function () {
  111.                                 $wrapper.off().remove();

  112.                                 if($.isFunction(afterClose)){
  113.                                         afterClose();
  114.                                 }
  115.                         });

  116.                         return this;
  117.                 },
  118.                 attachEvents: function () {
  119.                         var Message = this,
  120.                                 EventData = {
  121.                                         context: Message
  122.                                 };

  123.                         this.closebar.on('click', EventData, this._onCloseBarClick);

  124.                         return this;
  125.                 },
  126.                 _onCloseBarClick: function (evt) {
  127.                         var Message = evt.data.context;

  128.                         Message.close();

  129.                         return Message;
  130.                 }
  131.         };

  132.         DONE.Message.info = function (tip) {
  133.                 return new DONE.Message({
  134.                         clsType: 'info',
  135.                         tip: tip
  136.                 });
  137.         };

  138.         DONE.Message.warning = function (tip) {
  139.                 return new DONE.Message({
  140.                         clsType: 'warning',
  141.                         tip: tip
  142.                 });
  143.         };

  144.         DONE.Message.alert = DONE.Message.warning;

  145.         DONE.Message.error = function (tip) {
  146.                 return new DONE.Message({
  147.                         clsType: 'error',
  148.                         tip: tip
  149.                 });
  150.         };

  151.         DONE.Message.success = function (tip) {
  152.                 return new DONE.Message({
  153.                         clsType: 'success',
  154.                         tip: tip
  155.                 });
  156.         };

  157.         // Tip 是 Message 的别名
  158.         DONE.Tip = DONE.Message;
  159. })(jQuery);

  160. DONE.register("message", DONE.Message, {version: "0.1.0", build: "0810"});
  161. DONE.register("tip", DONE.Tip, {version: "0.1.0", build: "0810"});
复制代码


自己写了一个简单的提示控件
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-1-14 21:53:04 | 显示全部楼层
  1. (function () {
  2.         var L = DONE.lang,
  3.                 CLS_NO_FOOTER = 'todo-modal-no-ft',
  4.                 CLS_HIDE = 'hidden';

  5.         DONE.Modal = function (config) {

  6.                 this.attributes = {};

  7.                 this.wrapper = null;
  8.                 this.header = null;
  9.                 this.icon = null;
  10.                 this.title = null;
  11.                 this.closebar = null;
  12.                 this.body = null;
  13.                 this.content = null;
  14.                 this.footer = null;
  15.                 this.buttons = [];
  16.                 this.overlay = null;

  17.                 this.width = 480;
  18.                 this.height = 320;

  19.                 if ($.isPlainObject(config)) {
  20.                         this.init(config);
  21.                 }

  22.                 return this;
  23.         };

  24.         DONE.Modal.defaults = {
  25.                 title: '窗口',
  26.                 content: '',
  27.                 hasClose: true,
  28.                 hasOverlay: false,
  29.                 autoDisplay: true,
  30.                 afterBuild: null,
  31.                 beforeClose: null,
  32.                 afterClose: null,
  33.                 buttons: [],
  34.                 TEMPLATE_WRAPPER: '<div class="todo-modal ' + CLS_HIDE + '" id="modal-{id}"></div>',
  35.                 TEMPLATE_HEADER: '<div class="todo-modal-hd"></div>',
  36.                 TEMPLATE_TITLE: '<h2 class="todo-modal-title">{title}</h2>',
  37.                 TEMPLATE_CLOSE: '<i class="close icon todo-modal-close" data-content="关闭窗口"></i>',
  38.                 TEMPLATE_BODY: '<div class="todo-modal-bd"></div>',
  39.                 TEMPLATE_CONTENT: '<div class="todo-modal-content"></div>',
  40.                 TEMPLATE_FOOTER: '<div class="todo-modal-ft"></div>',
  41.                 TEMPLATE_BUTTON: '<button type="button" data-action="{action}" class="small ui green button">{text}</button>',
  42.                 TEMPLATE_OVERLAY: '<div class="todo-modal-overlay"></div>'
  43.         };

  44.         DONE.Modal.prototype = {
  45.                 constructor: DONE.Modal,
  46.                 set: function (config) {
  47.                         if ($.isPlainObject(config)) {
  48.                                 $.extend(this.attributes, config);
  49.                         }

  50.                         return this;
  51.                 },
  52.                 init: function (config) {
  53.                         this.set(DONE.Modal.defaults).set(config)._init().render().attachEvents();

  54.                         return this;
  55.                 },
  56.                 _init: function () {
  57.                         var Modal = this,
  58.                                 attrs = this.attributes,
  59.                                 buttons = attrs.buttons;

  60.                         this.wrapper = $(L.template({
  61.                                 id: L.guid()
  62.                         }, attrs.TEMPLATE_WRAPPER));

  63.                         this.header = $(attrs.TEMPLATE_HEADER);

  64.                         this.title = $(L.template({
  65.                                 title: attrs.title
  66.                         }, attrs.TEMPLATE_TITLE));

  67.                         this.closebar = $(attrs.TEMPLATE_CLOSE);

  68.                         this.body = $(attrs.TEMPLATE_BODY);
  69.                         this.content = $(attrs.TEMPLATE_CONTENT);
  70.                         this.footer = $(attrs.TEMPLATE_FOOTER);

  71.                         if (buttons.length > 0) {
  72.                                 $(buttons).each(function (i, config) {

  73.                                         var $button = $(L.template({
  74.                                                 text: config.text,
  75.                                                 action: config.action
  76.                                         }, attrs.TEMPLATE_BUTTON));

  77.                                         if (config.btnCls) {
  78.                                                 $button.addClass(config.btnCls);
  79.                                         }

  80.                                         Modal.buttons.push($button);
  81.                                 });
  82.                         }

  83.                         this.overlay = $(attrs.TEMPLATE_OVERLAY);

  84.                         return this;
  85.                 },
  86.                 render: function () {
  87.                         var attrs = this.attributes,
  88.                                 afterBuild = attrs.afterBuild,
  89.                                 $buttons = this.buttons,
  90.                                 $wrapper = this.wrapper,
  91.                                 $header = this.header,
  92.                                 $footer = this.footer;

  93.                         $header.append(this.title);

  94.                         if (attrs.hasClose) {
  95.                                 $header.append(this.closebar);
  96.                         }

  97.                         this.body.append(this.content.html(attrs.content));

  98.                         $wrapper.append($header).append(this.body);

  99.                         if ($buttons.length > 0) {
  100.                                 $($buttons).each(function (i, button) {
  101.                                         $footer.append($(button));
  102.                                 });

  103.                                 $wrapper.append($footer);
  104.                         }
  105.                         else {
  106.                                 $wrapper.addClass(CLS_NO_FOOTER);
  107.                         }

  108.                         if (attrs.width) {
  109.                                 $wrapper.width(attrs.width);
  110.                         }

  111.                         if (attrs.height) {
  112.                                 $wrapper.height(attrs.height);
  113.                         }

  114.                         $(document.body).append($wrapper);

  115.                         if (attrs.hasOverlay) {
  116.                                 $(document.body).append(this.overlay);
  117.                         }

  118.                         if (attrs.autoDisplay) {
  119.                                 this.open().updateLayout();
  120.                         }

  121.                         if ($buttons.length > 0) {
  122.                                 this.renderCloseTip();
  123.                         }

  124.                         if ($.isFunction(afterBuild)) {
  125.                                 afterBuild(this);
  126.                         }

  127.                         return this;
  128.                 },
  129.                 updateLayout: function () {
  130.                         var $wrapper = this.wrapper,
  131.                                 $body = this.body,
  132.                                 wrapperEl = $wrapper[0],
  133.                                 wrapperWidth = wrapperEl.offsetWidth,
  134.                                 wrapperHeight = wrapperEl.offsetHeight,
  135.                                 headerHeight = this.header[0].offsetHeight,
  136.                                 footerHeight = 0,
  137.                                 bodyHeight = 0,
  138.                                 paddingTop = parseInt($body.css('padding-top'), 10),
  139.                                 paddingBottom = parseInt($body.css('padding-bottom'), 10);

  140.                         if (this.attributes.buttons.length > 0) {
  141.                                 footerHeight = this.footer[0].offsetHeight;

  142.                                 bodyHeight = wrapperHeight - headerHeight - paddingTop - paddingBottom - footerHeight;
  143.                         }
  144.                         else {
  145.                                 bodyHeight = wrapperHeight - headerHeight - paddingTop - paddingBottom;
  146.                         }

  147.                         this.body.height(bodyHeight);

  148.                         // 定位
  149.                         $wrapper.css({
  150.                                 'margin': '-' + (wrapperHeight / 2) + 'px 0 0 -' + (wrapperWidth / 2) + 'px'
  151.                         });

  152.                         return this;
  153.                 },
  154.                 renderCloseTip: function () {

  155.                         this.header.find(".todo-modal-close").popup({
  156.                                 position: 'top center'
  157.                         });

  158.                         return this;
  159.                 },
  160.                 open: function () {
  161.                         this.wrapper.removeClass(CLS_HIDE);
  162.                         this.overlay.removeClass(CLS_HIDE);

  163.                         this.updateLayout();

  164.                         return this;
  165.                 },
  166.                 close: function () {
  167.                         this.wrapper.addClass(CLS_HIDE);
  168.                         this.overlay.addClass(CLS_HIDE);

  169.                         return this;
  170.                 },
  171.                 off: function () {
  172.                         this.wrapper.off().remove();
  173.                         this.overlay.remove();

  174.                         return this;
  175.                 },
  176.                 isOpen: function () {
  177.                         return !this.wrapper.hasClass(CLS_HIDE);
  178.                 },
  179.                 attachEvents: function () {
  180.                         var Modal = this,
  181.                                 EventData = {
  182.                                         context: Modal
  183.                                 },
  184.                                 $buttons = this.buttons;

  185.                         this.closebar.on('click', EventData, this._onCloseClick);

  186.                         if ($buttons.length > 0) {
  187.                                 $($buttons).each(function (i, button) {
  188.                                         var $button = $(button);

  189.                                         $button.on('click', function (evt) {

  190.                                                 Modal._onButtonClick(Modal, i);

  191.                                                 evt.stopPropagation();
  192.                                                 evt.preventDefault();
  193.                                         });
  194.                                 });
  195.                         }

  196.                         return this;
  197.                 },
  198.                 _onCloseClick: function (evt) {
  199.                         var Modal = evt.data.context,
  200.                                 attrs = Modal.attributes,
  201.                                 isFunction = $.isFunction,
  202.                                 beforeClose = attrs.beforeClose,
  203.                                 afterClose = attrs.afterClose;

  204.                         if (isFunction(beforeClose)) {
  205.                                 beforeClose();
  206.                         }

  207.                         Modal.close();

  208.                         if (isFunction(afterClose)) {
  209.                                 afterClose();
  210.                         }

  211.                         evt.stopPropagation();
  212.                         evt.preventDefault();

  213.                         return Modal;
  214.                 },
  215.                 _onButtonClick: function (context, index) {
  216.                         var Modal = context,
  217.                                 attrs = Modal.attributes,
  218.                                 beforeClose = attrs.beforeClose,
  219.                                 afterClose = attrs.afterClose,
  220.                                 buttons = attrs.buttons,
  221.                                 config = buttons[index],
  222.                                 action = config.action,
  223.                                 callback = config.callback,
  224.                                 isFunction = $.isFunction;

  225.                         if (isFunction(callback)) {
  226.                                 callback(config, Modal);
  227.                         }

  228.                         if ((action === 'cancel' || action === 'close') || ((action === 'save' || action === 'enter' || action === 'ok') && config.autoClose)) {
  229.                                 if (isFunction(beforeClose)) {
  230.                                         beforeClose();
  231.                                 }

  232.                                 Modal.close();

  233.                                 if (isFunction(afterClose)) {
  234.                                         afterClose();
  235.                                 }
  236.                         }

  237.                         return Modal;
  238.                 }
  239.         };

  240.         // Todo: 完成 info() 方法
  241.         DONE.Modal.info = function(tip){

  242.         };

  243.         // Todo: 完成 alert() 方法
  244.         DONE.Modal.alert = function(tip){

  245.         };

  246.         DONE.Modal.warning = DONE.Modal.alert;

  247.         // Todo: 完成 confirm() 方法
  248.         DONE.Modal.confirm = function(tip){

  249.         };

  250.         // Todo: 完成 error() 方法
  251.         DONE.Modal.error = function(tip){

  252.         };

  253.         // Todo: 完成 success() 方法
  254.         DONE.Modal.success = function(tip){

  255.         };

  256.         DONE.Modal.loading = function(tip){

  257.         };

  258.         // Dialog 是 Modal 的别名
  259.         DONE.Dialog = DONE.Modal;
  260. })();

  261. DONE.register("modal", DONE.Modal, {version: "0.1.0", build: "0810"});
  262. DONE.register("dialog", DONE.Dialog, {version: "0.1.0", build: "0810"});
复制代码


有自己搞了一个简单的模态框,还有TODO的几个静态方法没有完成
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-1-14 21:53:35 | 显示全部楼层
  1. /**
  2. * Created by Robert on 2016/1/9.
  3. */
  4. (function () {
  5.         var CLS_HIDE = 'hidden';

  6.         DONE.DailyToDo.About = {
  7.                 defaults: {
  8.                         title: 'Daily ToDo',
  9.                         content: '<h2 class="todo-about-info-title">Daily ToDo 0.1.0</h2>' +
  10.                         '<p>Build #DTDL-010.0810, built on January 6, 2016</p>' +
  11.                         '<h2 class="todo-about-info-title">License</h2>' +
  12.                         '<p>Released under the <a href="http://opensource.org/licenses/MIT">MIT license.</a></p>' +
  13.                         '<h2 class="todo-about-info-title">Dependent Resources</h2>' +
  14.                         '<p class="todo-about-resource">'+
  15.                         'jQuery: <a href="http://jquery.com/">v1.11.3</a> '+
  16.                         'jQuery Cookie Plugin: <a href="https://github.com/carhartl/jquery-cookie">v1.4.1</a> '+
  17.                         'Semantic UI: <a href="http://www.semantic-ui.com/">v2.1.7</a> '+
  18.                         'iScroll: <a href="http://iscrolljs.com/">v5.1.3</a></p>' +
  19.                         '<p class="todo-copyright">Copyright &copy; 2016 <a href="http://www.yaohaixiao.com/">YAOHAIXIAO.COM</a>, All rights reserved.</p>',
  20.                         hasClose: false,
  21.                         hasOverlay: false,
  22.                         autoDisplay: false,
  23.                         TEMPLATE_WRAPPER: '<div class="todo-modal todo-about-dialog ' + CLS_HIDE + '" id="dialog-{id}"></div>',
  24.                         TEMPLATE_HEADER: '<div class="todo-modal-hd todo-about-hd"></div>',
  25.                         TEMPLATE_TITLE: '<h1 class="todo-modal-title todo-about-title"><i class="checkmark box icon"></i>{title}</h1>',
  26.                         TEMPLATE_BODY: '<div class="todo-modal-bd todo-about-bd"></div>',
  27.                         afterBuild: function (dialog) {
  28.                                 dialog.wrapper.find(".todo-about-link").popup({
  29.                                         position: 'top center'
  30.                                 });
  31.                         }
  32.                 },
  33.                 attributes: {},
  34.                 dialog: null,
  35.                 set: function (config) {
  36.                         if ($.isPlainObject(config)) {
  37.                                 $.extend(this.attributes, config);
  38.                         }

  39.                         return this;
  40.                 },
  41.                 init: function (config) {
  42.                         this.set(this.defaults).set(config)._init().render().attachEvents();

  43.                         return this;
  44.                 },
  45.                 _init: function () {
  46.                         var attrs = this.attributes;

  47.                         this.dialog = new DONE.Modal(attrs);

  48.                         return this;
  49.                 },
  50.                 render: function () {
  51.                         this.close();

  52.                         return this;
  53.                 },
  54.                 open: function () {
  55.                         this.dialog.open();

  56.                         return this;
  57.                 },
  58.                 close: function () {
  59.                         this.dialog.close();

  60.                         return this;
  61.                 },
  62.                 isOpen: function () {
  63.                         return this.dialog.isOpen();
  64.                 },
  65.                 attachEvents: function () {
  66.                         var About = this,
  67.                                 EventData = {
  68.                                         context: About
  69.                                 };

  70.                         // 点击其他位置关闭 About 窗口
  71.                         $(document.body).on('mouseup', EventData, this._onDocumentMouseUp);
  72.                 },
  73.                 _onDocumentMouseUp: function (evt) {
  74.                         var About = evt.data.context,
  75.                                 target = evt.target,
  76.                                 dialog = About.dialog;

  77.                         if (!About.isOpen()) {
  78.                                 return About;
  79.                         }

  80.                         if (dialog.wrapper.has(target).length === 0) {
  81.                                 About.close();
  82.                         }

  83.                         return About;
  84.                 }
  85.         };
  86. })();

  87. DONE.register("dailytodo.about", DONE.DailyToDo.About, {version: "0.1.0", build: "0810"});
复制代码


关于窗口
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-1-14 21:54:08 | 显示全部楼层
  1. /**
  2. * Created by Robert on 2016/1/9.
  3. */
  4. (function () {
  5.         var CLS_HIDE = 'hidden',
  6.                 iscrollConfig = {
  7.                         scrollbars: true,
  8.                         mouseWheel: true,
  9.                         interactiveScrollbars: true,
  10.                         shrinkScrollbars: 'scale',
  11.                         fadeScrollbars: true,
  12.                         resizeScrollbars: true
  13.                 };

  14.         DONE.DailyToDo.DailyTips = {
  15.                 defaults: {
  16.                         title: 'Tip of the Day',
  17.                         content: '<h2 class="todo-daily-tips-content-title"><i class="lightbulb icon"></i>Do You Know...?</h2>' +
  18.                         '<div class="todo-daily-tips-content">' +
  19.                         '<div class="todo-daily-tip">' +
  20.                         '<p>1. 只要点击软件右侧工具栏中的“<i class="add circle icon"></i>”按钮,便可快速地添加工作项。</p>' +
  21.                         '<p class="todo-daily-tips-img"><img src="img/tip-1.png" alt="轻松添加工作项" /></p>' +
  22.                         '</div>' +
  23.                         '</div>' +
  24.                         '<div class="todo-daily-tips-content hidden">' +
  25.                         '<div class="todo-daily-tip">' +
  26.                         '<p>2. 只需轻轻地双击工作项标题,即可进入编辑模式,编辑工作项。</p>' +
  27.                         '</div>' +
  28.                         '</div>' +
  29.                         '<div class="todo-daily-tips-content hidden">' +
  30.                         '<div class="todo-daily-tip">' +
  31.                         '<p>3. 编辑工作项时,只需敲击回车键或者点击TAB键即可自动保存工作项。</p>' +
  32.                         '</div>' +
  33.                         '</div>' +
  34.                         '<div class="todo-daily-tips-content hidden">' +
  35.                         '<div class="todo-daily-tip">' +
  36.                         '<p>4. 勾选即标记完成工作,锁定工作项,无法进行编辑。取消勾选便解锁,开启编辑模式,可再次编辑工作项。</p>' +
  37.                         '</div>' +
  38.                         '</div>' +
  39.                         '<div class="todo-daily-tips-content hidden">' +
  40.                         '<div class="todo-daily-tip">' +
  41.                         '<p>5. 鼠标放在工作项标题栏,即可见到“<i class="trash icon"></i>”按钮,点击删除按钮即可删除当前工作项。</p>' +
  42.                         '<p class="todo-daily-tips-img"><img src="img/tip-2.png" alt="删除当前工作项" /></p>' +
  43.                         '</div>' +
  44.                         '</div>' +
  45.                         '<div class="todo-daily-tips-content hidden">' +
  46.                         '<div class="todo-daily-tip">' +
  47.                         '<p>6. 保存过的工作项在清空工作项内容后,会自动恢复之前保存的工作项内容。</p>' +
  48.                         '</div>' +
  49.                         '</div>' +
  50.                         '<div class="todo-daily-tips-content hidden">' +
  51.                         '<div class="todo-daily-tip">' +
  52.                         '<p>7. Daily ToDoList 采用响应式布局,在不同分辨率和窗口尺寸发生变化时,程序都可以相应变化软件界面大小。</p>' +
  53.                         '</div>' +
  54.                         '</div>' +
  55.                         '</div>',
  56.                         hasClose: true,
  57.                         hasOverlay: false,
  58.                         TEMPLATE_TITLE: '<h2 class="todo-modal-title todo-daily-tips-title"><i class="checkmark box icon"></i>{title}</h2>',
  59.                         TEMPLATE_BODY: '<div class="todo-daily-tips-bd"></div>',
  60.                         TEMPLATE_FOOTER: '<div class="todo-modal-ft todo-daily-tips-ft"><div class="ui toggle checkbox todo-startup-checkbox" id="startup-checkbox"><input type="checkbox" class="todo-daily-tips-checkbox" checked="checked" /><label>启动显示</label></div></div>',
  61.                         width: 500,
  62.                         startupCheckbox: '#startup-checkbox',
  63.                         buttons: [
  64.                                 {
  65.                                         action: 'prev-tip',
  66.                                         text: '上一条'
  67.                                 },
  68.                                 {
  69.                                         action: 'next-tip',
  70.                                         text: '下一条'
  71.                                 },
  72.                                 {
  73.                                         action: 'close',
  74.                                         text: '关闭'
  75.                                 }
  76.                         ]
  77.                 },
  78.                 attributes: {},
  79.                 dialog: null,
  80.                 tips: null,
  81.                 startupCheckbox: null,
  82.                 prevButton: null,
  83.                 nextButton: null,
  84.                 tipScroll: null,
  85.                 set: function (config) {
  86.                         if ($.isPlainObject(config)) {
  87.                                 $.extend(this.attributes, config);
  88.                         }

  89.                         return this;
  90.                 },
  91.                 init: function (config) {
  92.                         this.set(this.defaults).set(config)._init().render().attachEvents();

  93.                         return this;
  94.                 },
  95.                 _init: function () {
  96.                         var DailyTodo = this,
  97.                                 attrs = this.attributes,
  98.                                 $footer;

  99.                         this.dialog = new DONE.Modal(attrs);
  100.                         this.tips = this.dialog.content.find('.todo-daily-tips-content');

  101.                         $footer = this.dialog.footer;

  102.                         this.startupCheckbox = $(attrs.startupCheckbox);

  103.                         this.prevButton = $footer.find('[data-action=prev-tip]');
  104.                         this.nextButton = $footer.find('[data-action=next-tip]');

  105.                         return this;
  106.                 },
  107.                 isStartup: function () {
  108.                         return $.cookie('isStartup');
  109.                 },
  110.                 render: function () {
  111.                         var $startCheckbox = this.startupCheckbox.find('.todo-daily-tips-checkbox');

  112.                         if (this.isStartup()) {
  113.                                 $startCheckbox.attr('checked', 'checked');
  114.                                 this.open();
  115.                         }
  116.                         else {
  117.                                 $startCheckbox.removeAttr('checked');
  118.                                 this.close();
  119.                         }

  120.                         return this;
  121.                 },
  122.                 prev: function () {
  123.                         var $tips = this.tips,
  124.                                 $curTip = $tips.filter(':visible'),
  125.                                 $prevTip = $tips.eq($curTip.index() - 2);

  126.                         if (!$prevTip[0]) {
  127.                                 $prevTip = $tips.last();
  128.                         }

  129.                         $curTip.addClass(CLS_HIDE);
  130.                         $prevTip.removeClass(CLS_HIDE);

  131.                         this.tipScroll = null;
  132.                         this.tipScroll = new IScroll($prevTip[0], iscrollConfig);

  133.                         return this;
  134.                 },
  135.                 next: function () {
  136.                         var $tips = this.tips,
  137.                                 $curTip = $tips.filter(':visible'),
  138.                                 $nextTip = $tips.eq($curTip.index());

  139.                         if (!$nextTip[0]) {
  140.                                 $nextTip = $tips.first();
  141.                         }

  142.                         $curTip.addClass(CLS_HIDE);
  143.                         $nextTip.removeClass(CLS_HIDE);

  144.                         this.tipScroll = null;
  145.                         this.tipScroll = new IScroll($nextTip[0], iscrollConfig);

  146.                         return this;
  147.                 },
  148.                 open: function () {
  149.                         var $tips = this.tips,
  150.                                 $curTip = $tips.eq(DONE.lang.random(0, $tips.length));

  151.                         this.dialog.open();

  152.                         $tips.addClass(CLS_HIDE);
  153.                         $curTip.removeClass(CLS_HIDE);

  154.                         this.tipScroll = null;
  155.                         this.tipScroll = new IScroll($curTip[0], iscrollConfig);

  156.                         return this;
  157.                 },
  158.                 close: function () {
  159.                         this.dialog.close();
  160.                 },
  161.                 isOpen: function () {
  162.                         return this.dialog.isOpen();
  163.                 },
  164.                 attachEvents: function () {
  165.                         var About = this,
  166.                                 EventData = {
  167.                                         context: About
  168.                                 };

  169.                         // 开始启动
  170.                         this.startupCheckbox.on("click", EventData, this._onStartupClick);

  171.                         // 上一条
  172.                         this.prevButton.on('click', EventData, this._onPrevButtonClick);

  173.                         // 下一条
  174.                         this.nextButton.on('click', EventData, this._onNextButtonClick);
  175.                 },
  176.                 _onStartupClick: function (evt) {
  177.                         var DailyTips = evt.data.context,
  178.                                 $checkbox = $(this).find('.todo-daily-tips-checkbox');

  179.                         if ($checkbox.attr('checked') === 'checked') {
  180.                                 $checkbox.removeAttr('checked');
  181.                                 $.removeCookie('isStartup');
  182.                         }
  183.                         else {
  184.                                 $checkbox.attr('checked', 'checked');
  185.                                 $.cookie('isStartup', 'true', {expires: 7});
  186.                         }

  187.                         return DailyTips;
  188.                 },
  189.                 _onPrevButtonClick: function (evt) {
  190.                         var DailyTips = evt.data.context;

  191.                         DailyTips.prev();

  192.                         return DailyTips;
  193.                 },
  194.                 _onNextButtonClick: function (evt) {
  195.                         var DailyTips = evt.data.context;

  196.                         DailyTips.next();

  197.                         return DailyTips;
  198.                 }
  199.         };
  200. })();

  201. DONE.register("dailytodo.dailytips", DONE.DailyToDo.DailyTips, {version: "0.1.0", build: "0810"});
复制代码


每日提示窗口
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-1-14 21:59:56 | 显示全部楼层
主控制器的代码多了就不贴出来了,自己到github上看吧,还没有细分模块,堆到一起了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-23 23:06 , Processed in 0.124686 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表