小编Pat*_*rik的帖子

如何通过jQuery UI在DIV中调整SVG图像的大小？我想调整DIV的大小，并且不保留此DIV中SVG图像的长宽比。

jsFiddle示例

的HTML

   <div style="width: 100px; height:100px; border: 1px solid black;">
      <svg style="width:100%; height:100%; " version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340.156px" height="340.152px" viewBox="0 0 340.156 340.152" enable-background="new 0 0 340.156 340.152" xml:space="preserve">
          <path fill="#2121ed" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-opacity="0" class="path_vector_1" d="M340.156,170.078c0,93.926-76.146,170.074-170.077,170.074C76.146,340.152,0,264.004,0,170.078
    C0,76.146,76.147,0,170.079,0C264.011,0,340.156,76.146,340.156,170.078z">
          </path>
      </svg>
  </div>

jQuery的

$('div').resizable();

我需要将空格和新行转换为<"br /">和 .使用相同的格式将文本从TEXTAREA转换为DIV - 并使用相同的格式将onClick转换回TEXTAREA.怎么做 ？

jsFiddle DEMO

HTML

<div id="meText"><br />Click to edit <br />this text.<br /> And this line has space &nbsp on the begining.<br />How to convert space to &nbsp ? <br /> <br /></div>

CSS

#meText{
    margin: 20px;
    width: 300px;
    height: 200px;
    background: red;
    font-family: Arial;
    font-size: 13px;
}
textarea {
    margin: 20px;
    font-family: Arial;
    font-size: 13px;
}

jQuery的

$(function(){
    $("#meText").live('click',function(){
        var originalDiv = this;
        oldText = $(this).html().replace(/<br\s?\/?>/g,"\n");
        oldText = oldText.replace(/&nbsp;/g," ");
        $(this).replaceWith($("<textarea></textarea>").text(oldText).width($(this).width()).height($(this).height()).blur(function(){
            newText = $(this).val().replace(/\r\n|\r|\n/g,"<br />"); …

我想在jQuery中运行函数,但在完成后更改/重新定义此函数.

jsFiddle例子

HTML

<div id="test">TEST</div>

jQuery的

function yes() {
    alert('yes');

    // I dont know how, but i mean something like :
    //this.fn.function yes(){ 
    //   alert('no');
    //};
};

$('#test').click(function () {
    yes();
});

我需要"用户友好"的旋转,拖动和可调整大小的DIV.但是,当旋转此DIV时,RESIZE功能非常有效.不像图像编辑器.用户无法正确处理调整大小.怎么做？

jsFiddle示例

HTML:

<div id="blue"></div>

CSS:

#blue {
  top: 100px;
  left: 100px;
  width:200px;
  height:200px;
  background-color:blue;
  -ms-transform: rotate(120deg); /* IE 9 */
  -webkit-transform: rotate(120deg); /* Safari */
  transform: rotate(120deg);
}

jQuery的

$("#blue").resizable({
    aspectRatio: false,
    handles: 'ne, se, sw, nw'
});

$("#blue").draggable();