返回文章

文章 2018

jQuery

早期的 jquery 使用记录

jQueryNotebook
本文目录18
  1. Common Used
  2. useful js plugin
  3. animate with curve
  4. Dragable reference
  5. Dragable
  6. when scroll to bottom
  7. rewrite bootstrap scrollspy
  8. remove 300ms delay (or use fastclick)
  9. for dialog scroll disable background scroll
  10. disable background scroll
  11. removerubbereffect
  12. safari window resize
  13. get current date (require jquery ui)
  14. Date format
  15. Regx test
  16. Blob to File for FormData
  17. js simple template compiler
  18. jquery plugin starter

Common Used

useful js plugin

  • bootstrap-datepicker.js:管理系统中用来做日期选择;

  • bootstrap.js:基于 bootstrap.js 的 js 组件,可以改造出功能更强的,我主要改造了 model.js 跟 tab.js;

  • jquery.validate.js:基于它结合 bootstrap.js 的 tooltip.js 做气泡式的表单校验;

  • crypto-js.js:加密解密;

  • moment.js:日期时间处理;

  • mustache.js:模板引擎 jquery.js 跟 seajs;

  • Normalize.css;

移动端还用了 swiper 跟 iscroll,前者可以做轮播,tab;后者用来模拟原生的触屏滚动。

animate with curve

html
<script src='https://github.com/weepy/jquery.path/raw/master/jquery.path.js'></script>

Dragable reference

html
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Dragable

http://stackoverflow.com/questions/15609776/restrict-drag-only-in-one-direction

when scroll to bottom

javascript
$('.rightSection,#store').scroll(function() {
  if (
    $(this).scrollTop() + $(this).innerHeight() + 60 >=
    $(this)[0].scrollHeight
  ) {
    $('.main-content').css({
      top: 0,
    });
  } else if ($(this).scrollTop() <= 60) {
    $('.main-content').css({
      top: 111,
    });
  }
});

rewrite bootstrap scrollspy

javascript
$('.rightSection').scrollspy({
  target: '#sidenav',
  offset: 40,
});

$('#sidenav a').on('click', function(event) {
  if (this.hash !== '') {
    event.preventDefault();
    var hash = this.hash;
    $('.rightSection').animate(
      {
        scrollTop:
          $(hash).offset().top -
          $('.rightSection>section:nth-child(1)').offset().top,
      },
      800
    );
  }
});

remove 300ms delay (or use fastclick)

javascript
$('.plusIcon').bind('tap', function(e) {
  e.target.click();
});

for dialog scroll disable background scroll

https://bumfo.github.io/dialog.html https://segmentfault.com/a/1190000005617307

disable background scroll

javascript
function disableScrolling(scrollChild, scrollParent) {
  $(scrollChild).on('touchstart', function(e) {
    $(scrollParent).css('overflow-y', 'hidden');
  });

  $(scrollChild).on('touchend', function(e) {
    $(scrollParent).css('overflow-y', 'scroll');
  });
}

removerubbereffect

javascript
function removeRubberEffect(element) {
  $(element).on('touchstart', function() {
    var top = $(element).scrollTop();
    var totalScroll = $(element)[0].scrollHeight;
    var currentScroll = top + $(element)[0].offsetHeight;
    if (top === 0) {
      $(element).scrollTop(1);
    } else if (currentScroll === totalScroll) {
      $(element).scrollTop(top - 1);
    }
  });
}

safari window resize

javascript
function resizeRightSection() {
  console.log('#################');
  //height for iphone
  var documentHeight = window.innerHeight
    ? window.innerHeight
    : $(window).height();
  var rightSectionHeight =
    documentHeight -
    $('#NavbarTop').height() -
    $('#storeTab').height() -
    $('#canplace').height();
  $('#productListWrap').height(rightSectionHeight);
  $('#sidenav>ul, .rightSectionContent').height(rightSectionHeight + 4);
}

get current date (require jquery ui)

javascript
$.datepicker.formatDate('yy-mm-dd', new Date());

Date format

text
new Date(currentDateMilli).format('yyyy-MM-dd HH:mm:ss');

Regx test

javascript
// zip
/^[ABCEGHJKLMNPRSTVXY]{1}\d{1}[A-Z]{1} *\d{1}[A-Z]{1}\d{1}$/.test(estimateZip)

// email
/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($('#input-email').val())

Blob to File for FormData

javascript
let blob = new Blob([JSON.stringify([0, 1, 2])], { type: 'application/json' });
let fileOfBlob = new File([blob], 'aFileName.json');
form.append('upload', fileOfBlob);

js simple template compiler

javascript
function compile(template) {
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  let script = `
  (function parse(data) {
    let output = "";
    function echo(html) {
      output += html;
    }
    ${template}
    return output;
  })
  `;
  return script;
}

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;
let parse = eval(compile(template));
parse({ supplies: ['broom', 'mop', 'cleaner'] });

jquery plugin starter

javascript
(function($) {
  'use strict';
  $.demoPlugin = function(el, options) {
    // To avoid scope issues, use 'plugin' instead of 'this'
    // to reference this class from internal events and functions.
    var plugin = this;

    // Access to jQuery and DOM versions of element
    plugin.$el = $(el);
    plugin.el = el;

    // Add a reverse reference to the DOM object
    plugin.$el.data('demoPlugin', plugin);
    plugin.init = function() {
      plugin.options = $.extend({}, $.demoPlugin.defaultSettings, options);
      // init function
    };
    // Run initializer
    plugin.init();
  };
  $.demoPlugin.defaultSettings = {};
  $.fn.demoPlugin = function(options) {
    return this.each(function() {
      new $.demoPlugin(this, options);
    });
  };
})(jQuery);
返回首页
上一篇CSS下一篇Magento

Discussion

留言与讨论

想法、补充和不同意见都欢迎。