Thay vì một rank cho mỗi cấp bậc, với zzRank, bạn có thể tạo ra một bộ sưu tập rank dựa trên số bài viết của thành viên đó, có thể tùy biến bằng cách kết hợp điều kiện điểm thưởng và lượt cảm ơn.
zzPoll đem đến một giao diện bình chọn hiện đại và tiện lợi cho forumotion. Bạn sẽ không còn bị chuyển trang như trước, và kết quả sẽ được hiển thị ngay khi chọn.
Lưu trữ và cài đặt templates giờ đây trở nên đơn giản hơn bao giờ hết, nhờ tiện ích Forumotion backup templates. Tất cả thao tác đều được tiến hành tự động, việc của bạn chỉ là nhâm nhi tách trà và chờ kết quả.

Share
Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
avatar
Ban quản trị
Bài gửi Bài gửi : 19
Tiền Tiền : 10000049
Cảm ơn Cảm ơn : 10
Ngày tham gia Ngày tham gia : 22/05/2016
Xem lý lịch thành viênhttp://testduat.forumvi.com

normal [Code Forumotion] Button reply ảnh GIF

on Sat Sep 03, 2016 8:03 pm
Message reputation : 100% (2 votes)

DEMO :




JS:


Code:
(function() {
  if (window.gifactif) {
    if (window.console && console.warn) {
      console.warn('gifactif has already been initialized');
    }
    return;
  }
  // setup global object
  window.gifactif = {
    key : 'dc6zaTOxFJmzC', // PUBLIC BETA KEY
    limit : 26, // max image results
    delay : 200, // delay before searches commence (200ms)
    auto_close : true,
    // general language settings
    lang : {
      searching : 'Tìm kiếm...',
      not_found : 'Không tìm thấy kết quả.. <img src="http://i.imgur.com/oxhYW4c.png" style="margin:0;vertical-align:middle;"/>'
    },
    // dropdown markup
    dropDown : $(
      '<div>'+
        '<input type="text" id="gifactif_search" placeholder="Search for a GIF..." style="width:90%;"/>'+
        '<div id="gifactif_results" onscroll="gifactif.scrolling(this);"><div id="gifactif_images"></div></div>'+
        '<div id="giphy_attribution_mark"></div>'+
      '</div>'
    )[0],
    // initial setup of the SCEditor command
    init : function () {
      if ($.sceditor && window.toolbar) {
        // set the gifactif command
        $.sceditor.command.set('gifactif', {
          tooltip : 'Chèn ảnh GIF',
          // Dropdown and general functionality for gifactif
          dropDown : function (editor, caller, callback) {
            gifactif.reset();
            gifactif.editor = editor;
            gifactif.callback = callback;
            editor.createDropDown(caller, 'gifactif', gifactif.dropDown);
            $('#gifactif_search', gifactif.dropDown)[0].focus(); // focus the search area
          },
          // WYSIWYG MODE
          exec : function(caller) {
            var editor = this;
            $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
              editor.insert('[img]' + gif + '[/img]');
            });
          },
          // SOURCE MODE
          txtExec : function(caller) {
            var editor = this;
            $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
              editor.insertText('[img]' + gif + '[/img]');
            });
          }
        });
        // add gifactif to the editor toolbar
        toolbar = toolbar.replace('image,', 'image,gifactif,');
        // add CSS for button image and dropdown
        $('head').append(
          '<style type="text/css">'+
            '.sceditor-button-gifactif div { background-image:url(http://i35.servimg.com/u/f35/18/21/60/73/giphy10.png) !important; }'+
            '.sceditor-button-gifactif:after, .sceditor-button-gifactif:before { content:""; }'+ // Forumactif Edge override
            '#gifactif_results { width:300px; margin:10px auto; min-height:30px; max-height:300px; overflow-x:hidden; overflow-y:auto; }'+
            '.gifactif_imagelist { line-height:0; column-count:2; column-gap:3px; }'+
            '.gifactif_imagelist img { margin-bottom:3px; cursor:pointer; width:100%; }'+
            'html #giphy_attribution_mark { background:url(http://i35.servimg.com/u/f35/18/21/60/73/powere11.png) no-repeat 50% 50% transparent !important; height:22px !important; width:100%; !important; min-width:200px !important; display:block !important; visibility:visible !important; opacity:1 !important; }'+
          '</style>'
        );
      }
    },
    // search for a GIPHY gif
    search : function (query) {
      if (gifactif.timeout) {
        gifactif.abort(); // abort ongoing searches and requests
      }
      if (query) {
        // set a small timeout in case the user is still typing
        gifactif.timeout = window.setTimeout(function() {
          gifactif.reset(true, gifactif.lang.searching);
          gifactif.query = encodeURIComponent(query);
          gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
            // update global data such as page offsets for scrolling
            gifactif.request = null;
            gifactif.offset = data.pagination.offset + gifactif.limit;
            gifactif.offset_total = data.pagination.total_count;
            gifactif.reset(true); // reset HTML content
            gifactif.addGIF(data); // send data to be parsed
          });
        }, gifactif.delay);
      } else {
        gifactif.reset(true);
      }
    },
    // abort ongoing searches and requests
    abort : function () {
      if (gifactif.timeout) {
        window.clearInterval(gifactif.timeout);
        gifactif.timeout = null;
      }
      if (gifactif.request) {
        gifactif.request.abort();
        gifactif.request = null;
      }
    },
    // add gifs to the result list
    addGIF : function (data, loadMore) {
      // setup data and begin parsing results
      var gif = data.data,
          i = 0,
          j = gif.length,
          list = $('<div class="gifactif_imagelist" />')[0];
      if (j) {
        for (; i < j; i++) {
          list.appendChild($('<img id="' + gif[i].id + '" src="' + gif[i].images.fixed_width.url + '" />').click(gifactif.insert)[0]);
        }
      } else if (!loadMore) {
        gifactif.reset(true, gifactif.lang.not_found);
      }
      // add results to the result list
      $('#gifactif_results', gifactif.dropDown).append(list);
    },
    // listen to the scrolling so we can add more gifs when the user reaches the bottom
    scrolling : function (that) {
      if (that.scrollHeight - that.scrollTop === that.clientHeight) {
        gifactif.loadMore();
      }
    },
    // load more results once the user has scrolled through the last results
    loadMore : function () {
      if (gifactif.offset < gifactif.offset_total) {
        gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&offset=' + gifactif.offset + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
          gifactif.request = null;
          gifactif.offset = data.pagination.offset + gifactif.limit;
          gifactif.offset_total = data.pagination.total_count;
          gifactif.addGIF(data, true); // send data to be parsed
        });
      }
    },
    // inserts the gif into the editor
    insert : function () {
      // add the gif to the editor and close the dropdown
      gifactif.callback('http://media0.giphy.com/media/' + this.id + '/giphy.gif');
      if (gifactif.auto_close) {
        gifactif.editor.closeDropDown(true);
        gifactif.reset();
      }
    },
    // reset the dropdown fields
    reset : function (resultsOnly, newContent) {
      $('#gifactif_results', gifactif.dropDown).html(newContent ? newContent : '');
      if (!resultsOnly) {
        $('#gifactif_search', gifactif.dropDown).val('');
      }
    }
  };
  // bind keyup event to search input
  $('#gifactif_search', gifactif.dropDown)[0].onkeyup = function(e) {
    var k = e.keyCode;
    // ignore specific key inputs to prevent unnecessary requests
    if (k && (k == 16 || k == 17 || k == 18 || k == 20 || k == 37 || k == 38 || k == 39 || k == 40)) {
      return;
    } else {
      gifactif.search(this.value);
    }
  };
  // initilize gifactif
  $(gifactif.init);
}());

Tags: #button #reply


Được sửa bởi Admin ngày Sun Sep 04, 2016 3:56 pm; sửa lần 1.
avatar
Ban quản trị
Bài gửi Bài gửi : 19
Tiền Tiền : 10000049
Cảm ơn Cảm ơn : 10
Ngày tham gia Ngày tham gia : 22/05/2016
Xem lý lịch thành viênhttp://testduat.forumvi.com

normal Re: [Code Forumotion] Button reply ảnh GIF

on Wed Oct 12, 2016 7:26 pm
Message reputation : 100% (2 votes)
Good
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết