หน้า: [1]
  พิมพ์  
ผู้เขียน หัวข้อ: smf - Text Area Resizer  (อ่าน 255 ครั้ง)
administrator
Administrator
Newbie
*****

พลังน้ำใจ100
ID Number: 1
กระทู้: 44


ดูรายละเอียด อีเมล์
« เมื่อ: 12 สิงหาคม 2011 01:24:26 »

Permalink: smf - Text Area Resizer
บทความโดย: Leonidas

ถ้าใครที่เคยมีปัญหา ขนาดของ text box เล็กไปและอยากจะขยาย ก็ลองมาทำวิธีนี้กันนะครับ

สำหรับ SMF 1.1.10 นะครับ ถ้าใครลง package ได้ก็ ไปหา download ได้ที่

http://custom.simplemachines.org/mods/index.php?mod=1979

สำหรับวิธี manual นะครับ

1. file name="$themedir/index.template.php"

หา
โค๊ด:[Select]
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>

2. file name="$themedir/Post.template.php"

หา
โค๊ด:[Select]
<textarea class="editor"

แทนที่ด้วย
โค๊ด:[Select]
<div class="text_editor"><textarea id="ta_text" class="editor"

และหา
โค๊ด:[Select]
, $message, '</textarea>

เพิ่มหลังที่หา
โค๊ด:[Select]
<div id="ta_text_resizer" onmousedown="textareaResizer(event);">&nbsp;</div></div>

3. file name="$themedir/Display.template.php"
หา
โค๊ด:[Select]
<textarea cols="75" rows="7" style="width: 95%; height: 100px;" name="message" tabindex="1"></textarea>

แทนที่ด้วย
โค๊ด:[Select]
<div class="text_editor"><textarea id="ta_text" cols="75" rows="7" style="width: 95%; height: 100px;" name="message" tabindex="1"></textarea><div id="ta_text_resizer" onmousedown="textareaResizer(event);">&nbsp;</div></div>

4. file name="$themedir/style.css"

ไปที่บรรทัดสุดท้าย ใต้ }
ให้เพิ่ม
โค๊ด:[Select]
/* TextareaResizer */
div.text_editor div {
  background: #e2e2e2 url(images/textareaResizer.gif) no-repeat;
  background-position: center;
  height: 6px;
  width: 96%;
  font-size: .01em;
  cursor: s-resize;
}

สร้างไฟล์ textareaResizer.js
ใส่โค๊ดนี้ลงไปใน file
โค๊ด:[Select]
// textareaResizer.js
// The script dynamically changes height of a textarea (actually any HTML element)
// (c) 2008 Leonid Shevtsov <leonid@shevtsov.me> (http://leonid.shevtsov.me)
// Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

var minH=50;// Minimal height of the field
var startH=0;
var startY=0;
var textarea=null;
var oldMouseMove=null;
var oldMouseUp=null;

function textareaResizer(e){
    if (e == null) { e = window.event }
    if (e.preventDefault) {
        e.preventDefault();
    };
    resizer = (e.target != null) ? e.target : e.srcElement;
    textarea = document.getElementById(
      resizer.id.substr(0,resizer.id.length-8)
    );
    startY=e.clientY;
    startH=textarea.offsetHeight;
    oldMouseMove=document.onmousemove;
    oldMouseUp=document.onmouseup;
    document.onmousemove=textareaResizer_moveHandler;
    document.onmouseup=textareaResizer_cleanup;
    return false;
}

function textareaResizer_moveHandler(e){
  if (e == null) { e = window.event }
  if (e.button<=1){
     curH=(startH+(e.clientY-startY));
     if (curH<minH) curH=minH;
     textarea.style.height=curH+'px';
     return false;
  }i
}

function textareaResizer_cleanup(e) {
  document.onmousemove=oldMouseMove;
  document.onmouseup=oldMouseUp;
}



แล้วนำไปใส่ไว้ใน Themes/default  หรือ foder Theme ที่คุณใช้

และนำรูปนี้ไปใส่ใน folder Themes/ชื่อธีมของคุณ/images

โค๊ด:[Select]
http://img61.imageshack.us/img61/2585/textarearesizer.gif

ผลลัพธ์ที่ได้

ก่อนทำ


หลัง


Credit : Leonidas
บันทึกการเข้า

หน้า: [1]
  พิมพ์  
 
กระโดดไป:  

สนับสนุนโดย SMF 1.1.14 | SMF © 2006-2009, Simple Machines LLC | Thai language by ThaiSMF
Google visited last this page 18 พฤษภาคม 2012 11:38:21