移动端小功能杂记（三）

一. CSS有趣的样式

　　1. 去掉html5 <input type="search">的默认删除btn

input::-webkit-search-cancel-button {
  display: none;
}

input[type=search]::-ms-clear {
  display: none;
}

　　2. 去掉html5 <input type="number">的自动加减键

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

　　3. 模仿boostrap的input-group样式

var html = '<div class="main-form">' +
      '<div class="item item-redeemdate input-group">' +
      '<span class="input-group-span no-border-right">赎回确认时间</span>' +
      '<input class="txt-input txt-redeemdate no-border-left text-right" type="text" placeholder="请选择赎回时间" readonly>' +
      '</div>' +
      '<div class="item item-info">' +
      '<div class="info market-tips"></div>' +
      '</div>' +
      '<div class="item item-tips">' +
      '<div class="err-msg err-msg-marketprice"></div>' +
      '</div>' +
      '<div class="item item-marketprice input-group">' +
      '<span class="input-group-span no-border-right">赎回单位净值</span>' +
      '<input class="txt-input txt-marketprice no-border-left text-right" type="number" placeholder="输入保留四位小数">' +
      '<span class="input-group-span no-border-left txt-select" style="display:none;">' +
      '<img src="../images/marketprice-list-down.png" style="vertical-align:middle;height:6px;">' +
      '</span>' +
      '</div>' +
      '<div class="marketprice-list"><ul></ul></div>' +
      '<div class="item item-info redeem-ex" style="height:30px;display:none">' +
      '<div class="info" style="line-height:30px;">' +
      '<span class="redeem-info word-oneline"></span>' +
      '<div class="btn-redeem-all"><span>全部赎回</span></div>' +
      '</div>' +
      '</div>' +
      '<div class="item item-tips">' +
      '<div class="err-msg err-msg-amount"></div>' +
      '</div>' +
      '<div class="item item-amount input-group">' +
      '<span class="input-group-span no-border-right get-redeem-type">' +
      '<span id="amount-span" style="padding-right:8px;">赎回份额</span>' +
      '<img class="rotate-pic" src="../images/switch_action3.png" style="vertical-align:middle;height:14px;">' +
      '</span>' +
      '<input class="txt-input txt-amount no-border-left-right text-right" type="number">' +
      '<span id="amount-span-per" class="input-group-span no-border-left text-unit" style="color:#4F4F4F;">万份</span>' +
      '</div></div>';
    return html

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a,
button,
input {
  outline: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.input-group {
  display: table;
}

.input-group .input-group-span {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  padding: 6px 12px;
  text-align: left;
  color: #333333;
  background: #FFFFFF;
  border: 1px solid #dddddd;
  border-radius: 4px 0 0 4px;
  white-space: nowrap;
}

.input-group .no-border-right {
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
}

.input-group .no-border-left {
  border-left: none !important;
  border-radius: 0 4px 4px 0 !important;
}

.input-group .no-border-left-right {
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}

.text-unit {
  padding-left: 0px !important;
}

.main-form {
  padding: 0 16px;
}

.main-form .item .err-msg {
  padding-left: 2px;
  font-size: 13px;
  color: #f25454;
}

.main-form .item .info {
  padding: 0 3px;
  font-size: 12px;
  color: #b5b5b5;
}

.main-form .item {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
}

.main-form .item .txt-input {
  font-family: Microsoft YaHei, Arail, sans-serif;
  padding: 0 15px;
  width: 100%;
  height: 40px;
  line-height: normal;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background: #FFFFFF;
  font-size: 14px;
  color: #4F4F4F;
}

.main-form .item-btns-loading {
  display: none;
}

.main-form .item-btns .btn-save {
  display: inline-block;
  width: 100%;
  height: 43px;
  border-radius: 4px;
  background: #8e6cd1;
  text-decoration: none;
  line-height: 43px;
  text-align: center;
  font-size: 17px;
  color: #FFFFFF;
}

.main-form .item-btns .btn-loading {
  display: inline-block;
  width: 100%;
  height: 43px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #8e6cd1;
  text-decoration: none;
  line-height: 43px;
  text-align: center;
  font-size: 17px;
  color: #333333;
}

.main-form .item-btns .btn-loading span {
  margin-right: 8px;
}

.main-form .item-btns .btn-disabled {
  background: #e2e2e2;
  cursor: default;
  color: #bdbdbd;
}

　　4. 文字不换行并且多余部分...样式

.word-oneline {
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}

二. 移动端highstock报表的蛛网图，曲线图等

var ChartTool = {
  getAnalysisItem: function(items, keys, dict) {
    label: for (var i in items) {
      var item = items[i];
      if (item && item.length > 0 && keys.length == 0) {
        return item[item.length - 1];
      }
      if (item && item.length > keys.length) {
        for (var j in keys) {
          var key = keys[j];
          if (dict[key] != item[j]) {
            continue label;
          }
        }
        return item[item.length - 1];
      }
    }
    return false;
  },
  getAnalysisTableFontColor: function(value, symbol) {
    if (!value) {
      return 'font-color-grey'
    }
    if ($.type(value) === 'string') {
      var replaceSymbol = symbol ? symbol : '%';
      var number = $.trim(value.replace(replaceSymbol, ''));
    } else {
      var number = value;
    }
    if (isNaN(number) || number == 0) {
      return 'font-color-grey'
    }
    return number > 0 ? 'font-color-orange' : 'font-color-green';
  },
  handleTimeLineChartData: function(keys, chart, opts) {
    var timeLineKey = opts ? (opts.timeLineKey ? opts.timeLineKey : 'dates') : 'dates';
    if (!chart || !chart[timeLineKey] || chart[timeLineKey].length == 0) {
      return false;
    }
    var chartData = {};
    for (var i in keys) {
      var key = keys[i];
      if (!chart[key]) {
        return false;
      }
      chartData[key] = [];
      for (var j in chart[timeLineKey]) {
        try {
          var chartInitDate = chart[timeLineKey][j];
          var chartInitvalue = chart[key][j];
        } catch (e) {
          return false;
        }
        if (chartInitvalue === null) {
          continue
        }
        if (opts && opts.handleDate && $.type(opts.handleDate) == 'function') {
          var chartDate = opts.handleDate(chartInitDate);
        } else {
          var chartDate = chartInitDate;
        }
        if (opts && opts.handleValue) {
          if ($.type(opts.handleValue) == 'function') {
            var chartValue = opts.handleValue(chartInitvalue);
          } else if ($.type(opts.handleValue) == 'object' && opts.handleValue[key]) {
            var chartValue = opts.handleValue[key](chartInitvalue);
          } else {
            var chartValue = chartInitvalue;
          }
        } else {
          var chartValue = chartInitvalue;
        }
        chartData[key].push([chartDate, chartValue]);
      }
    }
    return chartData;
  },
  handleCategoryChartData: function(keys, chartInit, opts) {
    var categoryKey = opts ? (opts.categoryKey ? opts.categoryKey : 'bins') : 'bins';
    if (!chartInit || !chartInit[categoryKey] || chartInit[categoryKey].length == 0) {
      return false;
    }
    var chartData = {};
    var chart = $.extend(true, {}, chartInit);
    if (opts && opts.removeDataKey && chart[opts.removeDataKey]) {
      var newData = chart[opts.removeDataKey];
      for (var i = newData.length - 1; i >= 0; i--) {
        if (newData[i] == null) {
          chart[categoryKey].splice(i, 1);
          for (var j in keys) {
            chart[keys[j]].splice(i, 1);
          }
        }
      }
    }
    if (opts && $.type(opts.handleCategories) == 'function') {
      chartData['categories'] = opts.handleCategories(chart[categoryKey]);
    } else {
      chartData['categories'] = chart[categoryKey];
    }
    for (var i in keys) {
      var key = keys[i];
      if (!chart[key]) {
        return false;
      }
      chartData[key] = [];
      for (var j in chart[key]) {
        var chartInitvalue = chart[key][j];
        if (chartInitvalue == null) {
          var chartValue = 0;
        } else {
          if (opts && opts.handleValue) {
            if ($.type(opts.handleValue) == 'function') {
              var chartValue = opts.handleValue(chartInitvalue);
            } else if ($.type(opts.handleValue) == 'object' && opts.handleValue[key]) {
              var chartValue = opts.handleValue[key](chartInitvalue);
            } else {
              var chartValue = chartInitvalue;
            }
          } else {
            var chartValue = chartInitvalue;
          }
        }
        chartData[key].push(chartValue);
      }
    }
    return chartData;
  },
  getSeriesData: function(chartId, chartInfo, chartData, opts) {
    var seriesData = [],
      hasChartType = false;
    if (!opts || opts.chartType === undefined) {
      var keys = chartInfo[chartId]['lineKeys'];
    } else {
      var keys = chartInfo[chartId][chartType]['lineKeys'];
      hasChartType = true;
    }
    for (var i in keys) {
      var key = keys[i];
      if (!chartData[key] || chartData[key].length == 0) {
        continue; }
      var seriesObj = {
        name: (hasChartType ? chartInfo[chartId][chartType]['seriesName'][key] : chartInfo[chartId]['seriesName'][key]),
        data: chartData[key],
      };
      if (opts && $.type(opts.addMoreSeries) == 'function') {
        opts.addMoreSeries(seriesObj, i, key);
      }
      seriesData.push(seriesObj);
    }
    if (opts && $.type(opts.handleSeriesData) == 'function') {
      return opts.handleSeriesData(seriesData);
    }
    return seriesData;
  },
  getBaseChart: function(chartId, seriesData, opts) {
    return {
      chart: {
        renderTo: opts ? (opts.chartRenderId ? opts.chartRenderId : chartId) : chartId,
        height: opts ? (opts.chartHeight ? (opts.chartHeight === 'auto' ? null : opts.chartHeight) : 250) : 250,
        spacingBottom: opts ? (opts.spacingBottom !== undefined ? opts.spacingBottom : 10) : 10,
        spacingTop: opts ? (opts.spacingTop !== undefined ? opts.spacingTop : 10) : 10,
        spacingLeft: 12,
        spacingRight: 12,
      },
      credits: {
        enabled: false,
      },
      rangeSelector: {
        enabled: false,
      },
      tooltip: {
        enabled: true,
        shared: true,
        style: {
           180
        },
        formatter: function() {
          if (opts && opts.toolTipDateType == 'year') {
            var header = '<b>年份:' + Highcharts.dateFormat('%Y', this.x) + '</b>';
          } else if (opts && opts.toolTipDateType == 'date') {
            var header = '<b>时间:' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b>';
          } else {
            var header = '<b>' + this.x + '</b>';
          }
          $.each(this.points, function(i, point) {
            header += '<br/><span style="color:' + this.point.series.color + '">' +
              this.point.series.name + ':' + (opts ? (opts.handleTooltipValue ? opts.handleTooltipValue(this.point.series.name, this.y) : this.y) : this.y) + '</span>';
          });
          return header;
        }
      },
      xAxis: {
        labels: {
          style: {
            font: '10px Microsoft YaHei, Arail, sans-serif'
          }
        }
      },
      yAxis: {
        labels: {
          y: 4,
          style: {
            font: '10px Microsoft YaHei, Arail, sans-serif'
          },
          formatter: function() {
            return (opts ? (opts.formatteryAxisLabel ? opts.formatteryAxisLabel(this.value) : this.value) : this.value);
          }
        }
      },
      legend: {
        enabled: true,
        borderWidth: 0,
        itemDistance: 10,
        margin: opts ? (opts.legendMargin !== undefined ? opts.legendMargin : 10) : 10,
        itemStyle: {
          font: opts ? (opts.legendFont ? opts.legendFont : '9pt Microsoft YaHei, Arail, sans-serif') : '9pt Microsoft YaHei, Arail, sans-serif',
          color: '#666666',
        },
        itemHoverStyle: {
          color: '#004789'
        }
      },
      plotOptions: {
        series: {
          lineWidth: 1
        }
      },
      series: seriesData
    }
  },
  getLastTime: function(seriesData) {
    if (seriesData.length == 0) {
      return false;
    }
    var lastTime = 0;
    for (var i in seriesData) {
      var seriesObjData = seriesData[i]['data'];
      var seriesObjDataMaxTime = seriesObjData[seriesObjData.length - 1][0];
      lastTime = seriesObjDataMaxTime >= lastTime ? seriesObjDataMaxTime : lastTime;
    }
    return lastTime;
  },
  renderTimeLineChart: function(chartId, chartInfo, chartData, opts) {
    var seriesData = this.getSeriesData(chartId, chartInfo, chartData, opts);
    var lastTime = opts ? (opts.plotLastLine ? this.getLastTime(seriesData) : false) : false;
    return $.extend(true, {}, this.getBaseChart(chartId, seriesData, opts), {
      colors: ['#e02000', '#f9c436', '#0074f4'],
      chart: {
        pinchType: ''
      },
      xAxis: {
        gridLineWidth: 1,
        lineColor: '#000',
        tickColor: '#000',
        gridLineDashStyle: 'longdash',
        labels: {
          formatter: function() {
            if (opts && opts.chartxAxisLabelsFormatterType == 'year') {
              return Highcharts.dateFormat('%Y', this.value);
            }
            return Highcharts.dateFormat('%Y-%m-%d', this.value);
          }
        },
        plotLines: lastTime ? [{ color: '#d8d8d8',  1, value: lastTime }] : []
      },
      yAxis: (opts ? (opts.customyAxis ? opts.customyAxis({
        opposite: false,
        showLastLabel: true,
        tickPixelInterval: 40,
        lineColor: '#000',
        tickColor: '#000',
        lineWidth: 1,
        tickWidth: 1,
        labels: { style: { font: '10px Microsoft YaHei, Arail, sans-serif' } }
      }, chartId) : {
        opposite: false,
        showLastLabel: true,
        tickPixelInterval: 40,
        lineColor: '#000',
        tickColor: '#000',
        lineWidth: 1,
        tickWidth: 1,
        labels: { style: { font: '10px Microsoft YaHei, Arail, sans-serif' } }
      }) : {
        opposite: false,
        showLastLabel: true,
        tickPixelInterval: 40,
        lineColor: '#000',
        tickColor: '#000',
        lineWidth: 1,
        tickWidth: 1,
        labels: { style: { font: '10px Microsoft YaHei, Arail, sans-serif' } }
      }),
      scrollbar: { enabled: false },
      navigator: {
        enabled: opts ? (opts.enabledNavigator !== undefined ? opts.enabledNavigator : true) : true,
        margin: opts ? (opts.navigatorMargin ? opts.navigatorMargin : 10) : 10,
        height: opts ? (opts.navigatorHeight ? opts.navigatorHeight : 25) : 25,
        baseSeries: 0,
        xAxis: {
          labels: {
            enabled: false
          }
        }
      },
      plotOptions: {
        line: {
          cursor: 'pointer',
          shadow: false,
          states: {
            hover: {
              lineWidth: 1
            }
          }
        }
      }
    })
  },
  renderPolarChart: function(chartId, chartInfo, chartData, opts) {
    var categories = chartData['categories'];
    var seriesData = this.getSeriesData(chartId, chartInfo, chartData, opts);
    return $.extend(true, {}, this.getBaseChart(chartId, seriesData, opts), {
      colors: ['#0074f4', '#434348'],
      chart: {
        polar: true,
        type: 'line'
      },
      title: {
        text: null
      },
      pane: {
        size: '80%'
      },
      xAxis: {
        categories: categories,
        tickmarkPlacement: 'on',
        lineWidth: 0,
        labels: {
          style: {
            font: '11px Microsoft YaHei, Arail, sans-serif'
          }
        }
      },
      yAxis: {
        gridLineInterpolation: 'polygon',
        startOnTick: false,
        lineWidth: 0,
        tickPositions: opts ? (opts.chartyAxisTickPositions ? opts.chartyAxisTickPositions : null) : null,
        min: opts ? (opts.chartyAxisMin ? opts.chartyAxisMin : 0) : 0,
        max: opts ? (opts.chartyAxisMax ? opts.chartyAxisMax : 5) : 5,
        labels: {
          style: {
            font: '11px Microsoft YaHei, Arail, sans-serif'
          }
        }
      },
      legend: {
        enabled: seriesData.length > 1 ? true : false
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          },
          states: {
            hover: {
              lineWidth: 1
            }
          }
        }
      }
    })
  },
  renderColumnChart: function(chartId, chartInfo, chartData, opts) {
    var categories = chartData['categories'];
    var seriesData = this.getSeriesData(chartId, chartInfo, chartData, opts);
    if (!opts || opts.chartType === undefined) {
      var yAxisTitle = chartInfo[chartId]['yAxisTitle'];
    } else {
      var yAxisTitle = chartInfo[chartId][opts.chartType]['yAxisTitle'];
    }
    return $.extend(true, {}, this.getBaseChart(chartId, seriesData, opts), {
      colors: ['#0074f4', '#434348'],
      chart: {
        type: 'column'
      },
      title: {
        text: null
      },
      xAxis: {
        tickInterval: categories.length > (opts ? (opts.maxxAxisLabels ? opts.maxxAxisLabels : 5) : 5) ? Math.ceil(categories.length / (opts ? (opts.maxxAxisLabels ? opts.maxxAxisLabels : 5) : 5)) : 1,
        categories: categories,
      },
      yAxis: {
        labels: {
          x: -3
        },
        min: opts ? (opts.minyAxis ? opts.minyAxis : 0) : 0,
        title: {
          text: yAxisTitle
        }
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      }
    })
  },
  renderColumnRangeChart: function(chartId, chartInfo, chartData, opts) {
    var categories = chartData['categories'];
    var seriesData = this.getSeriesData(chartId, chartInfo, chartData, opts);
    if (!opts || opts.chartType === undefined) {
      var yAxisTitle = chartInfo[chartId]['yAxisTitle'];
    } else {
      var yAxisTitle = chartInfo[chartId][opts.chartType]['yAxisTitle'];
    }
    return $.extend(true, {}, this.getBaseChart(chartId, seriesData, opts), {
      colors: ['#0074f4', '#434348'],
      chart: {
        type: 'columnrange'
      },
      title: {
        text: null
      },
      xAxis: {
        tickInterval: categories.length > (opts ? (opts.maxxAxisLabels ? opts.maxxAxisLabels : 5) : 5) ? Math.ceil(categories.length / (opts ? (opts.maxxAxisLabels ? opts.maxxAxisLabels : 5) : 5)) : 1,
        categories: categories,
      },
      yAxis: {
        min: opts ? (opts.minyAxis ? opts.minyAxis : 0) : 0,
        title: {
          text: yAxisTitle
        },
        labels: {
          x: -3,
          y: opts ? (opts.chartyAxisY ? opts.chartyAxisY : 4) : 4,
        },
        showLastLabel: opts ? (opts.chartyAxisShowLastLabel ? opts.chartyAxisShowLastLabel : false) : false,
        tickPositions: opts ? (opts.chartyAxisTickPositions ? opts.chartyAxisTickPositions : null) : null,
        reversed: opts ? (opts.chartyAxisReversed ? opts.chartyAxisReversed : false) : false,
      },
      tooltip: ((opts && $.type(opts.customTooltip) == 'function') ? {
        formatter: function() {
          return opts.customTooltip(this);
        }
      } : {}),
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      }
    })
  }
};