編寫jq外掛

Rain_發表於2018-12-29

注意點

/**   * 編寫jQuery外掛注意事項   *  ;(function(){})(jQuery) 自執行函式   *  $.fn.extend({   *      名字為fun：function (引數){}   *    })   *   建立css   *   命名   *   預設引數   *   this指向   *   拼接字串   *    css最好直接寫行內   *   事件   */複製程式碼

 $.fn.extend({})複製程式碼

例子

html 呼叫

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>Document</title>
  </head>  <body>    <input type="text" class="good_ipt" />    <button class="good_btn">選擇商品編號</button>    <input type="text" class="shop_ipt" />    <button class="shop_btn">選擇店鋪編號</button>
    <script src="./jquery-1.12.4.js"></script>    <script src="./selsect.js"></script>
    <script>      var shopcall = function(res) {        //店鋪的回撥        console.log('店鋪的回撥',res)        $(".shop_ipt").val(res.dept_id);      };
      var goodcall = function(res) {        // 商品的回撥        console.log('商品的回撥',res)        $(".good_ipt").val(res.goods_id);      };


            // 公共介面部分      var pub_url = "http://teashop.yanxukj.com/malls/";                  $(".good_btn").on("click", function() {        // 查詢商品        $("body").goods({          cbk: goodcall, // 回撥函式          dept_id:'',          url: pub_url, // 公共介面部分          first_url: "api/getOneGoodTypeList", // 商品一級分類介面          second_url: "api/getTwoGoodTypeList", // 商品二級分類介面          third_url: "api/getThreeGoodTypeList", // 商品三級分類介面          tab_url: "api/getGoods", //查詢商品介面          pageSize: 5 // 每一個顯示條數        });              });      $(".shop_btn").on("click", function() {        // 店鋪         $("body").shop({           cbk: shopcall, // 回撥函式           url: pub_url, // 公共介面部分           first_url: "api/getDictionary", // 店鋪的分類介面 通過字典查詢           second_url: "api/getDictionary", // 查詢店鋪狀態           third_url: "api/getDictionary", // 部門等級查詢           tab_url: "api/getDept", //查詢店鋪介面           pageSize: 5 // 每一個顯示條數         });      });    </script>  </body></html>

複製程式碼

(function($) {  /**   * 編寫jQuery外掛注意事項   *  ;(function(){})(jQuery) 自執行函式   *  $.fn.extend({   *      名字為fun：function (引數){}   *    })   *   建立css   *   命名   *   預設引數   *   this指向   *   拼接字串   *    css最好直接寫行內   *   事件   */  /**   * 使用方法   * 引入jQuery   * $(dom節點).函式名字fun({引數})   */  $.fn.extend({
    goods: function(options) {      // console.log(options);      // 查詢一級分類      var first_obj = {};      console.log(options)      var pageNum = 1;      var pageSize = options.pageSize;      var dept_id = options.dept_id      //中轉搜尋引數      var parm = {        pageNum: pageNum,        pageSize: pageSize,        dept_id:dept_id        // goods_name:'',        // goods_type_one_id:'',        // goods_type_two_id:'',        // goods_type_three_id:''      };      console.log(parm)      // 表格查詢資料      var tab_obj = {}; // 介面返回的全部資料      var tab_arr = []; // 介面返回資料中的列表資訊
      /**       * 新增css       */      function loadCssCode(code) {        var style = document.createElement("style");        style.type = "text/css";        style.rel = "stylesheet";        try {          //for Chrome Firefox Opera Safari          style.appendChild(document.createTextNode(code));        } catch (ex) {          //for IE          style.styleSheet.cssText = code;        }        var head = document.getElementsByTagName("head")[0];        head.appendChild(style);      }
      var rain_css_str = `.rain_pannel_parent {          background-color: rgba(0, 0, 0, 0.4);          width: 100%;          height: 100%;          position: fixed;          top: 0;          left: 0;          right: 0;          bottom: 0;        }        .rain_pannel_child {          width: 1000px;          margin: 100px auto;          background-color: #f5f5f5;          padding: 10px;          border-radius: 5px;        }        .rain_pannel_head {          display: flex;          justify-content: flex-start;        }        .rain_ipt {          height: 40px;          width: 350px;          padding-left: 10px;          margin-right: 50px;          appearance: none;          border-radius: 2px;          border: 1px solid #ccc;          outline: none;        }        .rain_search {          height: 40px;          background-color: #f5f5f5;          border: 1px solid #ccc;          font-size: 16px;          line-height: 40px;          padding-right: 20px;          padding-left: 20px;          border-radius: 10px;        }        .rain_search:hover {          border-color: #9baef1;        }        .rain_search_parm {          margin-top: 10px;          display: flex;          justify-content: flex-start;        }
        .rain_parm_one {          height: 30px;          min-width: 100px;          background-color: #f5f5f5;          border: 1px solid #ccc;          line-height: 30px;          padding-right: 15px;          padding-left: 5px;          font-size: 14px;          margin: 5px 20px 5px 0px;          outline: none;        }
        .rain_parm_two {          height: 30px;          min-width: 100px;          background-color: #f5f5f5;          border: 1px solid #ccc;          line-height: 30px;          padding-right: 15px;          padding-left: 5px;          font-size: 14px;          margin: 5px 20px 5px 0px;          outline: none;        }
        .rain_parm_three {          height: 30px;          min-width: 100px;          background-color: #f5f5f5;          border: 1px solid #ccc;          line-height: 30px;          padding-right: 15px;          padding-left: 5px;          font-size: 14px;          margin: 5px 20px 5px 0px;          outline: none;        }
        .rain_result {          width: 100%;        }        .rain_pannel_table_parent {          width: 100%;          padding: 5px 0;        }        .rain_pannel_table {          width: 100%;          border: 1px solid #ccc;          border-collapse: collapse;        }
        .rain_tab_item {          width: 100%;          width: 300px;          display: block;          padding: 5px;          min-width: 20px;          overflow: hidden;          text-overflow: ellipsis;          white-space: nowrap;        }        .rain_pannel_table td {          border: 1px solid #ccc;        }        .rain_page{          display: flex;          justify-content: flex-end;          font-size: 12px;          color: #666;          align-items: center        }        .rain_back{          padding: 3px 10px;          border: 1px solid #ccc;          margin-right: 10px;          border-radius: 5px;        }        .rain_next{          padding: 3px 10px;          border: 1px solid #ccc;          margin-right: 10px;          border-radius: 5px;        }        .rain_write{          width: 150px;        }        .rain_write_page_ipt{          width: 30px;          height: 25px;          margin-right: 5px;          appearance: none;          border-radius: 2px;          border: 1px solid #ccc;          outline: none;          text-align: center;        }        input:wekit-autofill{          border: 1px solid #ccc        }        .pannel_close{          margin-left:30px        }        .rain_target{          padding: 3px 10px;          border: 1px solid #ccc;          margin-right: 10px;          border-radius: 5px;        }`;      loadCssCode(rain_css_str);      $(this).append(`          <div class="rain_pannel_parent">          <div class="rain_pannel_child">            <div class="rain_pannel_head">              <input type="text" class="rain_ipt" placeholder="輸入名稱/編號" />              <div class="rain_search">搜尋</div>              <div class="rain_search pannel_close "  >關閉</div>            </div>            <div class="rain_search_parm">              <div class="rain_parm_first">                <select class="rain_parm_one" name="first" id="rain_parn_first">                 <option class="rain_parm_one" value="">請選擇</option>                </select>              </div>              <div class="rain_parm_second">                <select class="rain_parm_two" name="second" id="rain_parn_second">                <option class="rain_parm_one" value="">請選擇</option>                </select>              </div>              <div class="rain_parm_third">                <select class="rain_parm_two" name="second" id="rain_parn_third">                  <option class="rain_parm_one" value="">請選擇</option>                </select>              </div>            </div>            <div class="rain_result">              <div class="rain_pannel_table_parent">
              </div>              <div class="rain_page" >                <div class='rain_back' >上一頁</div>                <div class='rain_next'>下一頁</div>                <div class='rain_write' >                  <span>前往</span> <input class='rain_write_page_ipt' type="text" ><span>頁</span> <span class='rain_target' >跳轉</span>                </div>                <div>共 <span class='rain_total_page' >0</span> 頁</div>              </div>            </div>          </div>        </div>      `);      $(".rain_page").hide();      console.log($(this));      Init(options.first_url, first_obj, BackOption1);      function Init(url, data, cbk) {        $.ajax({          type: "POST",          url: options.url + url,          contentType: "application/json",          data: JSON.stringify(data),          async: false,          success: function(res) {            console.log(res);            if (res.stateCode === "200") {              cbk(res.data);            } else {              // 報錯              alert(res.msg);            }          }        });      }
      // 一級回撥      function BackOption1(res) {        // console.log(res);        var arr = res;        var str = ``;        for (var x = 0; x < arr.length; x++) {          str =            str +            `<option class="rain_parm_one" value="` +            arr[x].good_type_one_id +            `">` +            arr[x].good_type_one_name +            `</option>`;        }        // console.log(str)
        $("#rain_parn_first").append(str);      }
      // 一級下拉框選中事件      $("#rain_parn_first").on("change", function() {        console.log("下拉框事件");        // console.log($(this).val());        var data = {          good_type_one_id: $(this).val()        };        parm.goods_type_one_id = $(this).val();        parm.goods_type_two_id = "";        parm.goods_type_three_id = "";
        // console.log(parm);        Init(options.second_url, data, BackOption2);      });
      // 二級回撥      function BackOption2(res) {        // console.log(res);        var arr = res;        var str = `<option class="rain_parm_one" value="">請選擇</option>`;        for (var x = 0; x < arr.length; x++) {          str =            str +            `<option class="rain_parm_one" value="` +            arr[x].good_type_two_id +            `">` +            arr[x].good_type_two_name +            `</option>`;        }
        // console.log(str)        $("#rain_parn_second")          .empty()          .append(str);
        var str_three = `<option class="rain_parm_one" value="">請選擇</option>`;
        // console.log(str)        $("#rain_parn_third")          .empty()          .append(str_three);      }
      // 二級下拉框選中事件      $("#rain_parn_second").on("change", function() {        console.log("下拉框事件");        // console.log($(this).val());        var data = {          good_type_two_id: $(this).val()        };
        parm.goods_type_two_id = $(this).val();
        parm.goods_type_three_id = "";        // console.log(parm);        Init(options.third_url, data, BackOption3);      });
      // 三級回撥      function BackOption3(res) {        console.log(res);        var arr = res;        var str = `<option class="rain_parm_one" value="">請選擇</option>`;        for (var x = 0; x < arr.length; x++) {          str =            str +            `<option class="rain_parm_one" value="` +            arr[x].good_type_three_id +            `">` +            arr[x].good_type_three_name +            `</option>`;        }
        // console.log(str)        $("#rain_parn_third")          .empty()          .append(str);      }
      // 三級下拉框選中事件      $("#rain_parn_third").on("change", function() {        console.log("下拉框事件");        // console.log($(this).val());        parm.goods_type_three_id = $(this).val();        // console.log(parm);      });
      // 搜尋事件      $(".rain_search").on("click", function() {        parm.goods_name = $(".rain_ipt").val();        // console.log(parm);        var _obj = parm;        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        console.log(_obj);        parm = _obj;        Init(options.tab_url, _obj, BackData);      });
      // 查詢資料的回撥      function BackData(res) {        console.log("查詢資料的回撥", res);        tab_obj = res;        tab_arr = res.list;
        if (res.list.length > 0) {          var tab_str = `<table class="rain_pannel_table" cellpadding="0" cellspacing="0">`;          for (var t = 0; t < tab_arr.length; t++) {            tab_str =              tab_str +              `            <tr data-id='` +              tab_arr[t].goods_id +              `' >              <td>                <span class="rain_tab_item">` +              tab_arr[t].goods_name +              `</span>              </td>              <td><span class="rain_tab_item">` +              tab_arr[t].sale_price +              `元</span></td>              <td><span class="rain_tab_item">` +              tab_arr[t].goods_unit_value +              `` +              tab_arr[t].goods_unit +              `</span></td>            </tr>            `;          }          tab_str = tab_str + `</table>`;          $(".rain_pannel_table_parent")            .empty()            .append(tab_str);          $(".rain_total_page").text(tab_obj.totalPage);          $(".rain_page").show();        } else {          $(".rain_pannel_table_parent")            .empty()            .append("暫無資料");          $(".rain_page").hide();        }
        //      }
      /**       * 上一頁的事件       */      $(".rain_back").on("click", function() {        var _obj = parm;        if (_obj.pageNum > 1) {          _obj.pageNum = _obj.pageNum - 1;        } else if (_obj.pageNum == 1) {          _obj.pageNum = 1;        }        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        console.log(_obj);        Init(options.tab_url, _obj, BackData);      });
      /**       * 下一頁       */      $(".rain_next").on("click", function() {        var _obj = parm;        if (_obj.pageNum >= 1) {          _obj.pageNum = _obj.pageNum + 1;          if (_obj.pageNum >= tab_obj.totalPage) {            _obj.pageNum = tab_obj.totalPage;          }        }        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        // console.log(_obj);        Init(options.tab_url, _obj, BackData);      });
      /**       * 輸入框事件       * 輸入的頁碼數在總頁碼數之外 則修改為最大頁碼數       */      $(".rain_write_page_ipt").on("blur", function() {        var _obj = parm;        if ($(this).val() > tab_obj.totalPage) {          $(this).val(tab_obj.totalPage);          _obj.pageNum = tab_obj.totalPage;        } else {          _obj.pageNum = $(this).val();        }
        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        console.log(_obj);      });
      /**       * 跳轉事件       */      $(".rain_target").on("click", function() {        var _obj = parm;        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        // console.log(_obj);        Init(options.tab_url, _obj, BackData);      });
      /**       * 表格選擇商品事件       */      $(".rain_pannel_parent").on("click", "tr", function() {        for (var m = 0; m < tab_arr.length; m++) {          if (tab_arr[m].goods_id == $(this).data("id")) {            options.cbk(tab_arr[m]);            // console.log(tab_arr[m])          }        }
        $(".rain_pannel_parent").remove();      });
      $('.pannel_close').on("click",function(){        $(".rain_pannel_parent").remove();      })      //    },    // 查詢店鋪    shop: function(options) {
      // console.log(options);
      var pageNum = 1;      var pageSize = options.pageSize;
      //中轉搜尋引數      var parm = {        pageNum: pageNum,        pageSize: pageSize      };
      // 表格查詢資料      var tab_obj = {}; // 介面返回的全部資料      var tab_arr = []; // 介面返回資料中的列表資訊
      /**       * 新增css       */      function loadCssCode(code) {        var style = document.createElement("style");        style.type = "text/css";        style.rel = "stylesheet";        try {          //for Chrome Firefox Opera Safari          style.appendChild(document.createTextNode(code));        } catch (ex) {          //for IE          style.styleSheet.cssText = code;        }        var head = document.getElementsByTagName("head")[0];        head.appendChild(style);      }
      var rain_css_str = `.rain_pannel_parent {          background-color: rgba(0, 0, 0, 0.4);          width: 100%;          height: 100%;          position: fixed;          top: 0;          left: 0;          right: 0;          bottom: 0;        }        .pannel_close{          margin-left:30px        }        .rain_pannel_child {          width: 1000px;          margin: 100px auto;          background-color: #f5f5f5;          padding: 10px;          border-radius: 5px;        }        .rain_pannel_head {          display: flex;          justify-content: flex-start;        }        .rain_ipt {          height: 40px;          width: 350px;          padding-left: 10px;          margin-right: 50px;          appearance: none;          border-radius: 2px;          border: 1px solid #ccc;          outline: none;        }        .rain_search {          height: 40px;          background-color: #f5f5f5;          border: 1px solid #ccc;          font-size: 16px;          line-height: 40px;          padding-right: 20px;          padding-left: 20px;          border-radius: 10px;        }        .rain_search:hover {          border-color: #9baef1;        }        .rain_search_parm {          margin-top: 10px;          display: flex;          justify-content: flex-start;        }                .rain_parm_one {          height: 30px;          min-width: 100px;          background-color: #f5f5f5;          border: 1px solid #ccc;          line-height: 30px;          padding-right: 15px;          padding-left: 5px;          font-size: 14px;          margin: 5px 20px 5px 0px;          outline: none;        }                .rain_parm_two {          height: 30px;          min-width: 100px;          background-color: #f5f5f5;          border: 1px solid #ccc;          line-height: 30px;          padding-right: 15px;          padding-left: 5px;          font-size: 14px;          margin: 5px 20px 5px 0px;          outline: none;        }                .rain_parm_three {          height: 30px;          min-width: 100px;          background-color: #f5f5f5;          border: 1px solid #ccc;          line-height: 30px;          padding-right: 15px;          padding-left: 5px;          font-size: 14px;          margin: 5px 20px 5px 0px;          outline: none;        }                .rain_result {          width: 100%;        }        .rain_pannel_table_parent {          width: 100%;          padding: 5px 0;        }        .rain_pannel_table {          width: 100%;          border: 1px solid #ccc;          border-collapse: collapse;        }                .rain_tab_item {          width: 100%;          width: 300px;          display: block;          padding: 5px;          min-width: 20px;          overflow: hidden;          text-overflow: ellipsis;          white-space: nowrap;        }        .rain_pannel_table td {          border: 1px solid #ccc;        }        .rain_page{          display: flex;          justify-content: flex-end;          font-size: 12px;          color: #666;          align-items: center        }        .rain_back{          padding: 3px 10px;          border: 1px solid #ccc;          margin-right: 10px;          border-radius: 5px;        }        .rain_next{          padding: 3px 10px;          border: 1px solid #ccc;          margin-right: 10px;          border-radius: 5px;        }        .rain_write{          width: 150px;        }        .rain_write_page_ipt{          width: 30px;          height: 25px;          margin-right: 5px;          appearance: none;          border-radius: 2px;          border: 1px solid #ccc;          outline: none;          text-align: center;        }        input:wekit-autofill{          border: 1px solid #ccc        }        .rain_target{          padding: 3px 10px;          border: 1px solid #ccc;          margin-right: 10px;          border-radius: 5px;        }`;      loadCssCode(rain_css_str);      $(this).append(`          <div class="rain_pannel_parent">           <div class="rain_pannel_child">            <div class="rain_pannel_head">              <input type="text" class="rain_ipt" placeholder="輸入名稱/編號" />              <div class="rain_search ">搜尋</div>              <div class="rain_search pannel_close">關閉</div>            </div>            <div class="rain_search_parm">              <div class="rain_parm_first">                <select class="rain_parm_one" name="first" id="rain_parn_first">                 <option class="rain_parm_one" value="">請選擇</option>                </select>              </div>              <div class="rain_parm_second">                <select class="rain_parm_two" name="second" id="rain_parn_second">                <option class="rain_parm_one" value="">請選擇</option>                </select>              </div>              <div class="rain_parm_third">                <select class="rain_parm_two" name="second" id="rain_parn_third">                  <option class="rain_parm_one" value="">請選擇</option>                </select>              </div>            </div>            <div class="rain_result">              <div class="rain_pannel_table_parent">                              </div>              <div class="rain_page" >                            <div class='rain_back' >上一頁</div>                <div class='rain_next'>下一頁</div>                <div class='rain_write' >                  <span>前往</span> <input class='rain_write_page_ipt' type="text" ><span>頁</span> <span class='rain_target' >跳轉</span>                </div>                <div>共 <span class='rain_total_page' >0</span> 頁</div>              </div>            </div>          </div>        </div>      `);      // 分頁的隱藏      $(".rain_page").hide();      // console.log($(this));
      function Init(url, data, cbk) {        $.ajax({          type: "POST",          url: options.url + url,          contentType: "application/json",          data: JSON.stringify(data),          async: false,          success: function(res) {            console.log(res);            if (res.stateCode === "200") {              cbk(res.data);            } else {              // 報錯              alert(res.msg);            }          }        });      }
      // 查詢表格資料      function InitData(url, data, cbk) {        $.ajax({          type: "POST",          url: options.url + url,          contentType: "application/json",          data: JSON.stringify(data),          async: false,          success: function(res) {            console.log(res);            cbk(res);          }        });      }
      // 1查詢店鋪型別分類      var first_obj = {        dictionary_type: "shop_type"      };      // Init("api/getDictionary", first_obj, BackOption1);      Init(options.first_url, first_obj, BackOption1);      // 店鋪型別回撥      function BackOption1(res) {        console.log(res);        var arr = res;        var str = `<option class="rain_parm_one" value="">請選擇</option>`;        for (var x = 0; x < arr.length; x++) {          str =            str +            `<option class="rain_parm_one" value="` +            arr[x].dictionary_id +            `">` +            arr[x].dictionary_name +            `</option>`;        }        // console.log(str)
        $("#rain_parn_first").empty().append(str);        // console.log($("#rain_parn_first"))      }
      // 2查詢店鋪狀態      var second_obj = {        dictionary_type: "shop_status"      };      // Init("api/getDictionary", second_obj, BackOption2);      Init(options.second_url, second_obj, BackOption2);      // 店鋪狀態回撥      function BackOption2(res) {        // console.log(res);        var arr = res;        var str = `<option class="rain_parm_one" value="">請選擇</option>`;        for (var x = 0; x < arr.length; x++) {          str =            str +            `<option class="rain_parm_one" value="` +            arr[x].dictionary_id +            `">` +            arr[x].dictionary_name +            `</option>`;        }
        // console.log(str)        $("#rain_parn_second")          .empty()          .append(str);      }
      // 3部門等級查詢      var third_obj = {        dictionary_type: "level"      };      // Init("api/getDictionary", third_obj, BackOption3);      Init(options.third_url, third_obj, BackOption3);      // 部門等級回撥      function BackOption3(res) {        // console.log(res);        var arr = res;        var str = `<option class="rain_parm_one" value="">請選擇</option>`;        for (var x = 0; x < arr.length; x++) {          str =            str +            `<option class="rain_parm_one" value="` +            arr[x].dictionary_id +            `">` +            arr[x].dictionary_name +            `</option>`;        }
        // console.log(str);        $("#rain_parn_third")          .empty()          .append(str);      }
      // 1店鋪型別下拉框選中事件      $("#rain_parn_first").on("change", function() {        // console.log("店鋪型別下拉框事件");        // console.log($(this).val());
        parm.dept_type_id = $(this).val();
        // console.log(parm);      });
      // 2查詢店鋪狀態下拉框選中事件      $("#rain_parn_second").on("change", function() {        // console.log("查詢店鋪狀態下拉框事件");        // console.log($(this).val());
        parm.dept_status_id = $(this).val();
        // console.log(parm);      });
      // 3部門等級下拉框選中事件      $("#rain_parn_third").on("change", function() {        // console.log("部門等級下拉框事件");        // console.log($(this).val());        parm.dept_level_id = $(this).val();        // console.log(parm);      });
      // 搜尋事件      $(".rain_search").on("click", function() {        parm.dept_name = $(".rain_ipt").val();        // console.log(parm);        var _obj = parm;        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        console.log(_obj);        parm = _obj;        // InitData("api/getDept", _obj, BackData);        InitData(options.tab_url, _obj, BackData);      });
      // 查詢資料的回撥      function BackData(res) {        console.log("查詢資料的回撥", res);        if (res.stateCode == "200") {          tab_obj = res.page;          tab_arr = res.page.list;        }        
        if (tab_arr.length > 0) {          var tab_str = `<table class="rain_pannel_table" cellpadding="0" cellspacing="0">`;          for (var t = 0; t < tab_arr.length; t++) {            tab_str =              tab_str +              `            <tr data-id='` +              tab_arr[t].dept_id +              `' >              <td>                <span class="rain_tab_item">` +              tab_arr[t].dept_name +              `</span>              </td>              <td><span class="rain_tab_item">` +              tab_arr[t].dept_level_name +              `</span></td>              <td><span class="rain_tab_item">` +              tab_arr[t].dept_status_name+              `</span></td>            </tr>            `;          }          tab_str = tab_str + `</table>`;          $(".rain_pannel_table_parent")            .empty()            .append(tab_str);          $(".rain_total_page").text(tab_obj.totalPage);          $(".rain_page").show();        } else {          $(".rain_pannel_table_parent")            .empty()            .append("暫無資料");          $(".rain_page").hide();        }
        //      }
      /**       * 上一頁的事件       */      $(".rain_back").on("click", function() {        var _obj = parm;        if (_obj.pageNum > 1) {          _obj.pageNum = _obj.pageNum - 1;        } else if (_obj.pageNum == 1) {          _obj.pageNum = 1;        }        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        // console.log(_obj);        // InitData("api/getDept", _obj, BackData);        InitData(options.tab_url, _obj, BackData);      });
      /**       * 下一頁       */      $(".rain_next").on("click", function() {        var _obj = parm;        if (_obj.pageNum >= 1) {          _obj.pageNum = _obj.pageNum + 1;          if (_obj.pageNum >= tab_obj.totalPage) {            _obj.pageNum = tab_obj.totalPage;          }        }        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        // console.log(_obj);        // InitData("api/getDept", _obj, BackData);        InitData(options.tab_url, _obj, BackData);      });
      /**       * 輸入框事件       * 輸入的頁碼數在總頁碼數之外 則修改為最大頁碼數       */      $(".rain_write_page_ipt").on("blur", function() {        var _obj = parm;        if ($(this).val() > tab_obj.totalPage) {          $(this).val(tab_obj.totalPage);          _obj.pageNum = tab_obj.totalPage;        } else {          _obj.pageNum = $(this).val();        }
        //判斷引數為空 則去掉        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        // console.log(_obj);      });
      /**       * 跳轉事件       */      $(".rain_target").on("click", function() {        var _obj = parm;        for (var x in _obj) {          if (!_obj[x]) {            delete _obj[x];          }        }        parm = _obj;        // console.log(_obj);        // InitData("api/getDept", _obj, BackData);        InitData(options.tab_url, _obj, BackData);      });
      /**       * 表格選擇商品事件       */      $(".rain_pannel_parent").on("click", "tr", function() {        for (var m = 0; m < tab_arr.length; m++) {          if (tab_arr[m].dept_id == $(this).data("id")) {            options.cbk(tab_arr[m]);          }        }
        $(".rain_pannel_parent").remove();      });
      $('.pannel_close').on("click",function(){        $(".rain_pannel_parent").remove();      })      //    }  });})(jQuery);複製程式碼

第二期：JQ外掛編寫入門（2）
2017-03-16
編寫node 外掛
2019-05-10
egg外掛編寫
2019-02-16
Phonegap外掛編寫
2012-07-02
eggjs外掛編寫
2019-03-04
JS
如何編寫 ProtoBuf 外掛 (一) ？
2022-01-09
如何編寫 ProtoBuf 外掛 (二) ？
2022-01-09
如何編寫 ProtoBuf 外掛 (三) ？
2022-01-09
vue外掛編寫小記
2018-03-24
Vue
編寫Ansj的Solr外掛
2014-02-25
Solr
Go - 如何編寫 ProtoBuf 外掛 (三) ？
2022-01-16
Go
Go - 如何編寫 ProtoBuf 外掛（二）？
2021-12-18
Go
Go - 如何編寫 ProtoBuf 外掛 (一) ？
2021-12-18
Go
編寫自己的Babel外掛（一）
2018-12-04
Babel
Vue 外掛編寫與實戰
2017-08-23
Vue
如何編寫一個Jquery外掛
2013-07-03
jQuery
如何編寫Node.js外掛
2014-08-02
Node.js
flutter外掛編寫及釋出流程
2021-03-29
Flutter
Flutter 外掛編寫必知必會
2018-12-26
Flutter
如何使用Python編寫vim外掛
2017-12-04
Python
phpstorm編寫程式碼特效外掛
2017-12-27
PHPORM特效
編寫最基本的Gradle外掛
2017-11-06
Gradle
編寫jquery常用外掛的基本格式
2015-03-01
jQuery
pual_bot 天氣外掛編寫
2014-06-25
自己動手編寫一個Mybatis外掛：Mybatis脫敏外掛
2020-08-11
MyBatis
jQ基礎篇–外掛開發入門
2017-03-08
Unity3D編輯器外掛編寫教程
2013-01-29
Unity3D
蜻蜓安全編寫外掛模組 webcrack 實踐
2022-05-10
Web
APISIX外掛如何編寫單元測試
2021-11-19
API
如何編寫一個 Pulsar Broker Interceptor 外掛
2023-12-12
編寫一個簡單的babel外掛
2018-03-25
Babel
教你如何用Swift編寫Xcode外掛
2016-01-04
SwiftXCode
編寫基於jQuery的外掛的方法
2016-03-21
jQuery
Simple JQuery Plugin Tab/簡易的jq tab外掛
2017-11-20
jQueryPlugin
從零開始編寫一個babel外掛
2019-03-04
Babel
從AST編譯解析談到寫babel外掛
2018-07-24
AST編譯Babel
看完你也想編寫自己的 react 外掛
2018-03-10
React
編寫優秀 jQuery 外掛的10個技巧
2015-05-05
jQuery

編寫jq外掛

相關文章