Hỗ trợ Forumotion
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

You are not connected. Please login or register

Hỗ trợ Forumotion  » Tài Nguyên Forumotion » Tổng hợp Codes » Code » [Code] BBcode Column & Tab

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin
  • Administrator

Admin

Administrator


Admin
[Code] BBcode Column & Tab Empty

[Code] BBcode Column & Tab

on 13/12/2012

Admin
loading...

Demo:

[Code] BBcode Column & Tab 12-11-10

Cho vào CSS:

Code:
/* BBcode tab - www.fmvi.vn */
.fmvitab{display:none;margin:0 auto}
.fmvitab > tbody > tr > td > strong{cursor:pointer;display:inline-block;padding:5px 10px}
.fmvitab > tbody > tr > td > strong.active{background-color:#6F6E6E;color:#FFF;cursor:default}
.fmvitab > tbody > tr > td > ul{border:1px solid #DDD;list-style:none outside none;width:100%;margin:0!important;padding:10px}
.fmvitab > tbody > tr > td > ul > li{display:none}
.fmvitab > tbody > tr > td > ul > li.active{display:block}
/* BBcode column - www.fmvi.vn */
.fmvicolumn{width:100%}
.fmvicolumn > tbody > tr > td{padding:0 10px;vertical-align:top}
.fmvicolumn > tbody > tr > td.line{border-left:1px solid #131313}

Tạo JS mới:

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Code:
/* BBcode column & tab Copyright 2012 baivong - www.fmvi.vn */
$(function () {
  $("#text_edit .button2[value='Others']").after(' <img src="http://2img.net/i/fa/wysiwyg/separator.png" style="vertical-align:middle" /> <button class="button2" onclick="window.open('/h142-bbcode-tab-column?bbcode=column')" onmouseover="helpline('Column: [table class=fmvicolumn][tr][td]text[/td][td]text[/td][/tr][/table]')" type="button" title="Column"><img title="Column" src="http://i12.servimg.com/u/f12/17/70/81/78/text-c10.png" alt="Column" /></button> <button class="button2" onclick="window.open('/h142-bbcode-tab-column?bbcode=tab')" onmouseover="helpline('Tabs: [table class=fmvitab][tr][td][list][item=text]text[*][b]text[/b]text[/list][/td][/tr][/table]')" type="button" title="Tab"><img title="Tab" src="http://i12.servimg.com/u/f12/17/70/81/78/13553110.png" alt="Tab" /></button>');
  $("#text_editor_cmd_switchmode, .frm-buttons input[type='submit']").click(function () {
      $("#text_editor_textarea").val($("#text_editor_textarea").val().replace(/\[item\=(.*?)\]((\n|.)*?)\[\/item\]/gi, "[*][b]$1[/b]$2").replace(/\[tab(\swidth\=((\d{0,3}(px|em|%|pt)?)|auto)?)?\]((\n|.)*?)\[\/tab\]/gi, "[table class=fmvitab$1][tr][td][list]$5[/list][/td][/tr][/table]").replace(/\[td(\d{0,2}?)((line)?)\]((\n|.)*?)\[\/td\]/gi, "[td width=$1% class=$3]$4[/td]").replace(/\[column\]((\n|.)*?)\[\/column\]/gi, "[table class=fmvicolumn][tr]$1[/tr][/table]").replace(/\s(width=%)/gi, "").replace(/\s(class=\])/gi, "]"))
  });
  $(".fmvitab").each(function () {
      var a = $(this);
      a.find("td:first > ul > li > strong").prependTo(a.find("td:first"));
      a.show().find("td:first > ul > li:first, td:first > strong:first").addClass("active");
      a.find("td:first > strong").click(function () {
        var b = a.find("td:first > strong").index(this);
        a.find("td:first > ul > li, td:first > strong").removeClass("active");
        a.find("td:first > ul > li:eq(" + b + "), td:first > strong:eq(" + b + ")").addClass("active")
      })
  })
});

Tạo trang HTML:

ACP >> Modules >> HTML & JAVASCRIPT >> HTML pages management >> Create new HTML page:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="vi"
xml:lang="vi">
  <head>
      <title>BBcode tab & column | www.fmvi.vn</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <link rel="shortcut icon" type="image/x-icon" href="http://i48.servimg.com/u/f48/16/58/89/73/minilo10.png" />
      <meta name="title" content="BBcode tab" />
      <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="Vietnamese Forumotion" />
      <link rel="search" type="application/opensearchdescription+xml" href="http://www.forum-viet.com/vi/search/improvedsearch.xml" title="Search forums" />
      <style type="text/css">
#container{width:54.4em;margin:0 auto}
.item{border:1px solid #DDD;margin:10px 0;padding:10px 20px}
.item p{height:1.3em;line-height:1.3em;margin-top:2px}
.item input{1px solid #DDDDDD;display:inline-block;height:1.4em}
.control span{background-position:left center;background-repeat:no-repeat;cursor:pointer;display:inline-block;float:right;height:32px;margin-top:-3px;width:32px;padding:0 10px}
.plus{background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/plus10.png)}
.del{background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/delete10.png)}
.up{background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/arrow_11.png)}
.down{background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/arrow_10.png)}
element.style{background-color:#3D883C;border-color:#1E7D1D}
.button{background-color:#15A6FF;border:1px solid #0189DD;color:#FFF;cursor:pointer;margin:0 20px;padding:5px 20px}
.button:hover{background-color:#4F4F4F;border-color:#393939}
.fmvitab{display:none;margin:0 auto}
.fmvitab td > strong{cursor:pointer;display:inline-block;padding:5px 10px}
.fmvitab td > strong.active{background-color:#6F6E6E;color:#FFF;cursor:default}
.fmvitab ul{border:1px solid #DDD;list-style:none outside none;width:100%;margin:0!important;padding:10px}
.fmvitab li{display:none}
.fmvitab li.active{display:block}
fieldset{margin-bottom:20px;display:none}
fieldset legend{color:red;font-size:20px;font-variant:small-caps;font-weight:700;margin-top:-10px;text-shadow:1px 1px 1px #000}
#tiptip{background-color:#DFF0D8;background-image:url(http://r19.imgfast.net/users/1911/13/87/62/album/th/thongb10.png);background-position:10px center;background-repeat:no-repeat;border:1px solid #9CBBA9;color:#468847;text-shadow:0 1px 0 rgba(255,255,255,0.5);top:-40px;padding:7px 40px}
#tiptip a{text-decoration:none}
.fmvicolumn{width:100%}
label{float:left;padding-right:30px}
label span{padding-right:5px}
.fmvicolumn td{padding:0 10px}
.fmvicolumn td.line{border-left:1px solid #131313}
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        //<![CDATA[
        var _gaq = _gaq || [];
        _gaq.push(["_setAccount", "UA-26966514-1"]);
        _gaq.push(["_trackPageview"]);
        (function () {
            var ga = document.createElement("script");
            ga.type = "text/javascript";
            ga.async = true;
            ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(ga, s);
        })(); //]]>
       
      </script>
  </head>
  <body>
      <div id="container">
        <p id="tiptip">BBcode ©️ 2012 FMvi (<a rel="nofollow" target="_blank" href="http://www.fmvi.vn">www.fmvi.vn</a>)</p>
        <div>
        </div>
        <p style="text-align: center;">
            <span onclick="view()" id="view" class="button preview">
                <span>Hoàn thành</span>
              <span style="display: none;">Đặt lại độ rộng</span>
            </span>
            <span onclick="tryit()" id="try" class="button bbcode" style="background-color: rgb(61, 136, 60); border-color: rgb(30, 125, 29); display: none">Làm lại</span>
            <span onclick="inserbbtab()" id="insert" class="button insert" style="background-color: rgb(249, 82, 82); border-color: rgb(248, 45, 45); display: none">Lấy BBcode</span>
        </p>
        <fieldset>
            <legend>BBcode</legend>
            <textarea rows="10" cols="100" id="BBcode" style="width: 99%"></textarea>
        </fieldset>
        <fieldset>
            <legend>Xem trước</legend>
            <div id="preview"  style="width: 51.1em;"></div>
        </fieldset>
      </div>
<script type="text/javascript">
  function i2() {
      if (GetParam("bbcode") == "column") {
        return true
      } else if (GetParam("bbcode") == "tab") {
        return false
      } else {
        window.location.replace("http://www.fmvi.vn")
      }
  }
  if (i2()) {
      tip = "column";
      kk = '<label><span style="float: left">Đặt đường phân cách</span> <input style="" name="line" class="line" type="checkbox" /></label><label><span style="padding-right: 5px;">Chiều rộng cột </span><input value="" name="tabname" size="2" class="width" maxlength="2" type="text" /> % </label>'
  } else {
      tip = "tab";
      kk = '<input class="width" type="text" size="30" name="tabname" value="Tên tab" />';
  }
  zz = '<div class="item" style="border-color: green"><p style="float: left;">' + kk + '</p><p class="control" style="border: 0px none;"><span onclick="plus(this)" class="plus"></span><span onclick="del(this)" class="del"></span><span onclick="up(this)" class="up"></span><span onclick="down(this)" class="down"></span></p><textarea rows="10" cols="100">Nội dung ' + tip + '</textarea></div>';
  jQuery("#container div:first").html(zz + zz);
 
  function i1() {
      if (jQuery(".item").length == 1) {
        return false
      } else {
        return true
      }
  }
 
  function color() {
      jQuery(".item").css("border-color", "#DDD");
  }
 
  function plus(a) {
      color();
      jQuery(a).parents(".item").after(zz);
      jQuery("#tiptip").text("Thêm " + tip + " thành công.")
  }
 
  function del(a) {
      if (i1()) {
        color();
        jQuery(a).parents(".item").remove();
        jQuery("#tiptip").text("Đã xóa một " + tip + ".")
      } else {
        jQuery("#tiptip").text("Bạn cần tạo thêm " + tip + ".")
      }
  }
 
  function up(a) {
      if (i1()) {
        color();
        jQuery(a).parents(".item").css("border-color", "red").insertBefore(jQuery(a).parents(".item").prev());
        jQuery("#tiptip").text("Đã chuyển " + tip + " lên.")
      } else {
        jQuery("#tiptip").text("Bạn cần tạo thêm " + tip + ".")
      }
  }
 
  function down(a) {
      if (i1()) {
        color();
        jQuery(a).parents(".item").css("border-color", "blue").insertAfter(jQuery(a).parents(".item").next());
        jQuery("#tiptip").text("Đã chuyển " + tip + " xuống.")
      } else {
        jQuery("#tiptip").text("Bạn cần tạo thêm " + tip + ".")
      }
  }
 
  function tryit() {
      color();
      jQuery("#preview").text("");
      jQuery("#BBcode").val("");
      if (i2()) {
        jQuery("#view, .item").show();
        jQuery("#try, fieldset, #insert").hide();
      } else {
        jQuery("#view span:first, .item").show();
        jQuery("#view span:last, #try, fieldset, #insert").hide();
      }
      jQuery("#tiptip").html('BBcode ' + tip + ' ©️ 2012 FMvi (<a rel="nofollow" target="_blank" href="http://www.fmvi.vn">www.fmvi.vn</a>)')
  }
 
  function view() {
      if (i1()) {
        color();
        jQuery("#preview").text("");
        jQuery("#BBcode").val("");
        if (!i2()) {
            jQuery("#view span:first, .item").hide();
            jQuery("#view span:last, #try, #insert, fieldset").show();
            var si = prompt("Đặt chiều rộng cho " + tip + "\nĐơn vị px,em,pt,%", "auto");
            if (si == null || si == "") {
              si = "auto"
            }
        } else {
            jQuery("#view, .item").hide();
            jQuery("#try, #insert, fieldset").show();
        }
 
        jQuery(".item").each(function () {
            if (jQuery(this).find(".line:checked").length && !jQuery(this).is(":first-child")) {
              li = "line";
              wli = ' class="line"';
            } else {
              li = wli = ""
            }
            var te = jQuery(this).find(".width").val().replace(/"/g, '"').replace(/>/g, '>').replace(/</g, '<');
            var nd = jQuery(this).find("textarea").val().replace(/"/g, '"').replace(/>/g, '>').replace(/</g, '<');
            if (i2()) {
              if (te == "" || isNaN(te)) {
                  ze = te = ""
              } else {
                  ze = ' width="' + te + '%"';
              }
              jQuery("#preview").text(jQuery("#preview").text() + '<td' + ze + wli + '>' + nd + '</td>');
              jQuery("#BBcode").val(jQuery("#BBcode").val() + '[td' + te + li + ']' + nd + '[/td]');
            } else {
              jQuery("#preview").text(jQuery("#preview").text() + '<li><strong>' + te + '</strong>' + nd + '</li>');
              jQuery("#BBcode").val(jQuery("#BBcode").val() + '[item=' + te + ']' + nd + '');
            }
        });
        if (i2()) {
            jQuery("#preview").html('<table class="fmvicolumn"><tbody><tr>' + jQuery("#preview").text() + '</tr></tbody></table>');
            jQuery("#BBcode").val('[table class=fmvicolumn][tr]' + jQuery("#BBcode").val().replace(/"/g, '"').replace(/>/g, '>').replace(/</g, '<') + '[/tr][/table]');
        } else {
            jQuery("#preview").html('<table class="fmvitab" width="' + si + '"><tbody><tr><td align="left"><ul>' + jQuery("#preview").text() + '</ul></td></tr></tbody></table>');
            jQuery("#BBcode").val('[tab width=' + si + ']' + jQuery("#BBcode").val().replace(/"/g, '"').replace(/>/g, '>').replace(/</g, '<') + '[/list][/td][/tr][/table]');
            var jQueryfmvitab = jQuery(".fmvitab");
            jQueryfmvitab.find("li > strong").prependTo(jQueryfmvitab.find("td"));
            jQueryfmvitab.show().find("li:first, td>strong:first").addClass("active");
            jQueryfmvitab.find("td>strong").click(function () {
              var n = jQueryfmvitab.find("td>strong").index(this);
              jQueryfmvitab.find("li, td>strong").removeClass("active");
              jQueryfmvitab.find("li:eq(" + n + "), td>strong:eq(" + n + ")").addClass("active");
            });
        }
        jQuery("#tiptip").text("Tạo BBcode " + tip + " thành công.")
      } else {
        jQuery("#tiptip").text("Bạn phải tạo từ 2 " + tip + " trở lên.")
      }
  }
 
  function inserbbtab() {
      opener.document.getElementById('text_editor_textarea').value = opener.document.getElementById('text_editor_textarea').value + document.getElementById('BBcode').value;
      opener.document.post.message.focus();
      window.close()
  }
 
  function GetParam(name) {
      var match = new RegExp(name + "=([^&]+)", "i").exec(location.search);
      if (match == null) {
        match = new RegExp(name + "=(.+)", "i").exec(location.search)
      }
      if (match == null) {
        return null
      }
      match = match + "";
      result = match.split(",");
      return result[1]
  }
</script>
  </body>
</html>

Chú ý:

Sau khi tạo xong Trang HTML soạn thảo, bạn sẽ có 1 link dạng URL/hX-page
Với X là số thứ tự trang.
Thay số X đó vào số 142 trong code Javascript toàn diễn đàn
Bạn có thể truy cập Trang HTML soạn thảo theo 2 link sau:
URL/hX-page?bbcode=tab
URL/hX-page?bbcode=column

Viết bởi baivong - www.fmvi.vn

Trả lời nhanh

Message reputation : 100% (1 vote)

    No Comment.

    Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang Thông điệp [Trang 1 trong tổng số 1 trang]

    Hỗ trợ Forumotion  » Tài Nguyên Forumotion » Tổng hợp Codes » Code » [Code] BBcode Column & Tab

    Permissions in this forum:
    Bạn không có quyền trả lời bài viết