jQuery

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；

animate with curve

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

Dragable reference

<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

when scroll to bottom

$('.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

$('.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)

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

for dialog scroll disable background scroll

disable background scroll

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

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

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)

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

Date format

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

Regx test

// 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

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

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

(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);