項目過程中遇到的小問題

1.tab頁切換echarts圖表時圖表變形

var charts=new Array();
myChart.setOption(option);
charts.push(myChart);
//普遍的tab切換
	   $(window).resize(function() {
		          for(var i = 0; i < charts.length; i++) {
		              charts[i].resize();
		          }
		      });
//bootstrap的tab頁面切換
	    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	        for(var i = 0; i < charts.length; i++) {
	            charts[i].resize();
	        }
	    });

2.四級關聯

<div class="m-search modal-form ">
                    <div class="input-group">
                        <label for="" class="w80 f-ib f-fl">告警來源</label>
                        <select class="u-input" id="system" style="width: 400px;">
                            <option value="-1">-請選擇-</option>
                            <option value="0">北塔</option>
                            <option value="1">栅格動環</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="" class="w80 f-ib f-fl">源告警級别</label>
                        <select class="u-input " id="source" style="width: 400px;">
                            <option value="-1">-請選擇-</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="" class="w80 f-ib f-fl">映射告警級别</label>
                        <select class="u-input " id="map" style="width: 400px">
                            <option value="-1">-請選擇-</option>
                        </select>
                    </div>
                    <div class="input-group" >
                        <label for="" class="w80 f-ib f-fl">告警顔色</label>
                        <span id="color">無</span>
                    </div>
                </div>

var changeArr = new Array(3);
    var mapArr=new Array(3);
    changeArr[0] = new Array("緊急","進階","中級","低級","提示");
    changeArr[1] = new Array("一級","二級","三級");
    mapArr[0] = new Array("","緊急","主要","次要","警告");
    mapArr[1] = new Array("","一級","二級","三級");

    $("#system").change(function() {
        $("#source").empty();
        var changeID = this.value;
        if (changeID == -1) {
            $("#source").html("<option value=\"-1\">-請選擇-</option>");
        } else {
            for (var i = 0; i < changeArr[changeID].length; i++) {
                var option = document.createElement("option");
                option.innerText = changeArr[changeID][i];
                $("#source").append(option);
            }
        }
        $("#map").empty();
        var changeID = this.value;
        if (changeID == -1) {
            $("#map").html("<option value=\"-1\">-請選擇-</option>");
        } else {
            for (var i = 0; i < mapArr[changeID].length; i++) {
                var option = document.createElement("option");
                option.innerText = mapArr[changeID][i];
                $("#map").append(option);

            }
        }
        $('#map').change(function(){
            var res=$('#map').find('option:selected').val();
            console.log($('#color').html())
            console.log(res);
            if (res=='緊急'){
                $("#color").html('紅色')
            }
            if (res=='主要'){
                $("#color").html('橘紅色')
            }
            if (res=='次要'){
                $("#color").html('黃色')
            }
            if (res=='警告'){
                $("#color").html('藍色')
            }
            if (res=='一級'){
                $("#color").html('紅色')
            }
            if (res=='二級'){
                $("#color").html('藍色')
            }
            if (res=='三級'){
                $("#color").html('黃色')
            }
        })
    })

3.給被點選的li加背景顔色

.gray{background:#dcdcdc;}
$("ul li").click(function(){
            $(this).addClass("gray").siblings().removeClass("gray");
        });

4.datetimepicker中文譯

在datetimepicker前面加

$.fn.datetimepicker.dates['zh-CN'] = {
			days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
			daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
			daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
			months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			today: "今天",
			suffix: [],
			meridiem: ["上午", "下午"]
		};

5.通過按鈕增加或删除内容

<div id="day" class="f-fl">
		<span id="third" style="display: none;color: red;">最多添加3條</span><br />
				<div class="common-border" style="width: 200px;">
						<select name="start-time">
							<option value="0">00</option>
							<option value="1">01</option>
						</select>
					<span>時</span>
						<select name="end-time">
							<option value="0">00</option>
							<option value="30">30</option>
						</select>
						<span>分</span>
		<button type="button" class="u-btn circle f-mg5 editBtn addday"><i class="glyphicon glyphicon-plus"></i></button>
							</div>
						</div>
	//增加
	$('.addday').on('click', function() {
			if ($('.da').length > 1) {
				$('#third').show();
			} else {
				var addday = "<div class=\"common-border\ da\"  style=\"width: 200px;\">" +
					"<select name=\"start-time\">" +
					"<option value=\"0\">00</option>" +
					"<option value=\"1\">01</option>" +
					"</select>" +
					"<span>時</span>" +
					"<select name=\"end-time\">" +
					"<option value=\"0\">00</option>" +
					"<option value=\"30\">30</option>" +
					"</select>" +
					"<span>分</span>" +
					"<button type=\"button\" class=\"u-btn\ circle\ f-mg5\ editBtn \" id=\"daybtn\"><i class=\"glyphicon \  glyphicon-minus\"></i></button>" +
					"</div>"
				$('#day').append(addday);
			}
		});
//删除
		$(document).on('click', '#daybtn', function() {
			$(this).parents('.da').remove();
			$('#third').hide();
		})

6.多個相同的圖表

function ChartBar1(ID, datas) {
		var dom = document.getElementById(ID);
		var myChart = echarts.init(dom);
		var option2 = {}
		var charts = new Array();
		myChart.setOption(option2);
		charts.push(myChart);
		$(window).resize(function() {
			for (var i = 0; i < charts.length; i++) {
				charts[i].resize();
			}
		});

		$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
			for (var i = 0; i < charts.length; i++) {
				charts[i].resize();
			}
		});
		}
		var patchData4 = {
		value: []
		}
		ChartBar1('patch-year', patchData4);

7.bootstrap給标簽賦予頁面跳轉的data-href

$('body').on('click','span',function() {
		$('.w-h-mrgb0').load($(this).children('a').attr('data-href'));
	});

8.ip位址輸入框

.a3{
		background-color: transparent;
		width: 30px;
		border: none;
		text-align: center;
	}

<div class="input-group f-fl">
								    <div style="border-color:#d8d8d8;border-style:solid;"
								         class=" label2 u-input f-fl">
								        <input type="text" name="ip1" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								        <input type="text" name="ip2" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								        <input type="text" name="ip3" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								        <input type="text" name="ip4" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								    </div>
								    <div class="f-fl" style="line-height: 30px;">
								        --
								    </div>
								    <div style="border-color:#d8d8d8;border-style:solid;"
								         class=" label2 u-input f-fr">
								        <input type="text" name="ip1" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								        <input type="text" name="ip2" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								        <input type="text" name="ip3" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								        <input type="text" name="ip4" maxlength=3 class="a3" onkeyup="mask(this)"
								               onbeforepaste=mask_c()>.
								    </div>
								</div>

9.全選框和選擇框分開

<div class="col-md-6 static" style="border-right:1px solid #dcdcdc;">
						<div class="weui-cell-check-box  f-ib ">
						    <label for="all" class="m-checkbox widthAu f-ib  ">
						        <div class="weui-cell-hd">
						            <input type="checkbox" name="checkbox" class="weui-check all" id="all">
						            <i class="weui-icon-checked"></i>
						        </div>
						        <span class="weui-cell-bd">
						       全選
						   </span>
						    </label>
						</div>
						<div style="overflow-y: scroll;position: relative;">
                        <ul style="height: 500px;">
                            <li class="  weui-cell-check-box  ">
                                   <label for="checkbox100" class="m-checkbox widthAu f-ib">
                                       <div class="weui-cell-hd">
                                           <input type="checkbox" name="checkbox" class="weui-check" id="checkbox100">
                                           <i class="weui-icon-checked"></i>
                                       </div>
                                       <span class="weui-cell-bd">
											30分鐘吞吐量
										</span>
                                   </label>
							</li>
							<li class="  weui-cell-check-box  ">
							       <label for="checkbox101" class="m-checkbox widthAu f-ib">
							           <div class="weui-cell-hd">
							               <input type="checkbox" name="checkbox" class="weui-check" id="checkbox101">
							               <i class="weui-icon-checked"></i>
							           </div>
							           <span class="weui-cell-bd">
											30分鐘吞吐量
										</span>
							       </label>
							</li>
                        </ul>
					</div>
					</div>

10.上傳照片

<div  class="f-fl" >
		<img src="img/add.jpg" id="chose_btn"  style="width: 50px;height: 50px;">
		<input type="file" name="file" accept="image/*"  id="upload" style="display: none;">
</div>

$("#chose_btn").click(function () {
            $(this).parent().find("#upload").click(); //隐藏了input:file樣式後，點選頭像就可以本地上傳
              $(this).parent().find("#upload").on("change",function(){
              var objUrl = getObjectURL(this.files[0]) ; //擷取圖檔的路徑，該路徑不是圖檔在本地的路徑
              if (objUrl) {
                $(this).parent().find("#chose_btn").attr("src", objUrl) ; //将圖檔路徑存入src中，顯示出圖檔
              }

            });
          });
	 function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }

項目過程中遇到的小問題

繼續閱讀

使用canvas制作簡易的資料結構核心算法示範系統——線性表(三)——頭插法

【web素材】01-10款大氣的購物商城網站模闆

Jquery 拖動視窗

用js實作的一個加載中狀态的動态效果

jquery實作複制到剪貼闆通用

Jquery 實作複制到剪貼闆

ZeroClipboard2.2.0版本跨浏覽器複制（兼解決IE下相容問題）

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關

jQuery實作Ajax通訊的幾種常用方式

jqGrid的使用筆記：5. 事件

jQuery實作百度搜尋框

2010年終總結--技術篇

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

jquery_126_demo