移动端小功能杂记（三）
一. 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: { width: 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', width: 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 } } }) } };
