我期待着创建一个非常简单的方式,允许用户在< div>之内写入,调整大小,定位或更改文本的颜色.我知道jQuery有点
我的HTML
<div class="canvas">
<div id ="u-test-id" class="u-test-class" contenteditable="true">
Testing
</div>
</div>
这里.canvas是< div>,有时它包含图像或其他背景颜色.我已经编写代码来改变< div class =“canvas”>的颜色和背景图像.
我需要的是用户可以很容易地输入文本,他可以根据自己的意愿进行风格化.请看图片：
这个形象我从mailchimp.在我们创建模板设计的mailchim中,它将提供我想要的相同的东西.这里用户可以添加文字,他可以旋转文字,更改字体族,颜色等.
其实颜色和字体家族的东西,我知道如何用jquery做这个.但是,我认为文本div的旋转是复杂的.怎么做这个轮换？
这里我不是要求代码,但是我想看到一个工作的演示,帮助我了解工作和学习jQuery.请任何人都可以提供此工作的示例,或者建议任何免费的jQuery插件或基本代码.
解决方法
我从
jsfiddle发现了这一点.让我们拭目以待,开始扩展你的功能
HTML
<div class='resizable draggable'>
<h1>Resize Me</h1>
<div class="ui-resizable-handle ui-resizable-nw"></div>
<div class="ui-resizable-handle ui-resizable-ne"></div>
<div class="ui-resizable-handle ui-resizable-sw"></div>
<div class="ui-resizable-handle ui-resizable-se"></div>
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
</div>
使用Javascript：
$('.resizable').resizable({
handles: {
'nw': '.ui-resizable-nw','ne': '.ui-resizable-ne','sw': '.ui-resizable-sw','se': '.ui-resizable-se','n': '.ui-resizable-n','e': '.ui-resizable-e','s': '.ui-resizable-s','w': '.ui-resizable-w'
}
});
$( '.draggable' ).draggable().on('click',function(){
if ( $(this).is('.ui-draggable-dragging') ) {
return;
} else {
$(this).draggable( 'option','disabled',true );
$(this).prop('contenteditable','true');
$(this).css('cursor','text');
}
})
.on('blur',function(){
$(this).draggable( 'option',false);
$(this).prop('contenteditable','false');
$(this).css('cursor','move');
});
CSS：
.draggable {
cursor: move;
}
.resizable {
border: 1px dashed #000000;
position: relative;
min-height: 50px;
}
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
position: absolute;
}
.ui-resizable-nw {
left: -5px;
top: -5px;
cursor: nw-resize;
}
.ui-resizable-ne {
top: -5px;
right: -5px;
cursor: ne-resize;
}
.ui-resizable-sw {
bottom: -5px;
left: -5px;
cursor: sw-resize;
}
.ui-resizable-se {
bottom: -5px;
right:-5px;
cursor: se-resize;
}
.ui-resizable-n {
top: -5px;
left:50%;
cursor: n-resize;
}
.ui-resizable-s {
bottom: -5px;
left: 50%;
cursor: s-resize;
}
.ui-resizable-w {
left:-5px;
top:calc(50% - 5px);
cursor: w-resize;
}
.ui-resizable-e {
right:-5px;
top:calc(50% - 5px);
cursor: e-resize;
}
