使用HR標籤來調整文本區域的大小

我試圖創建一個可調整大小的textarea作爲句柄（類似於Stackoverflow編輯器）。使用HR標籤來調整文本區域的大小

我想有：

<div class="container"> 
    <textarea class='editor'></textarea> 
</div>

和

(function ($) { 
    $(function() { 
     $(".editor") 
      .wrap("<div class='resizable'></div>'") 
      .parent() 
      .append("<hr class='resizer ui-resizable-s'/>");  

     $(".resizable").resizable({ 
      handles: { 
       s: $(".resizer").get() 
      } 
     }); 
    }); 
})(jQuery);

但這並不作品。實際上並沒有發生。

如何解決這一問題？

僅供參考，有一個JSfiddle重現此問題。

來源

2015-04-17 Steve B

問題診斷和解決在這裏：http://stackoverflow.com/questions/958419/custom-resizable-handles-in-jquery-ui?rq=1 –

謝謝@BenRondeau，但正如你可以看到我自己的答案，這是一個jsFiddle問題...不是一個jQuery（你提供的鏈接非常接近我寫的） –

好吧，其實我的代碼工作，如果我手動注入jQuery和jQueryUI。

可能是jsFiddle的一個bug。

更新的jsfiddle：updated

更確切地說，我第一次嘗試使用的jsfiddle加入jQuery和jQuery用戶界面：

enter image description here

這沒有奏效。鉻控制檯顯示：

Uncaught TypeError: Cannot read property 'safari' of undefined$.widget._mouseDown @ jquery-ui.js:648(anonymous function) @ jquery-ui.js:582jQuery.event.dispatch @ jquery-compat-git.js:4894jQuery.event.add.elemData.handle @ jquery-compat-git.js:4551 67jquery-ui.js:656

Uncaught TypeError: Cannot read property 'msie' of undefined

但是如果我手動包括以下資源：

enter image description here

http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
http://code.jquery.com/jquery-2.1.3.min.js
http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

它按預期工作。

來源

2015-04-17 13:06:17

@Stewartside：完整的工作代碼是在問題中。只有外部資源的引用已經改變（使用jsFiddle UI，不使用標籤），這就是爲什麼我沒有複製問題 –

@Stewartside的代碼：你是對的。我用更多的細節更新了答案 –

使用HR標籤來調整文本區域的大小

回答

相關問題