請問jquery ui 1.5.3 的resize的knobTheme怎麼在1.7.1中使用?

问题描述：

jquery ui 1.5.3 的resize的knobTheme在1.7.1中就被拿到了
有辦法將1.5.3拿到1.7.1中用嗎
[b]问题补充：[/b]
[code="java"]
o.knobTheme = {
'ui-resizable-handle': { background: '#F2F2F2', border: '1px solid #808080', height: '8px', width: '8px' },
'ui-resizable-n': { cursor: 'n-resize', top: '0px', left: '45%' },
'ui-resizable-s': { cursor: 's-resize', bottom: '0px', left: '45%' },
'ui-resizable-e': { cursor: 'e-resize', right: '0px', top: '45%' },
'ui-resizable-w': { cursor: 'w-resize', left: '0px', top: '45%' },
'ui-resizable-se': { cursor: 'se-resize', right: '0px', bottom: '0px' },
'ui-resizable-sw': { cursor: 'sw-resize', left: '0px', bottom: '0px' },
'ui-resizable-nw': { cursor: 'nw-resize', left: '0px', top: '0px' },
'ui-resizable-ne': { cursor: 'ne-resize', right: '0px', top: '0px' }
};
[/code]
這是1.5.3的

[code="java"]
.ui-resizable { position: relative;}
.ui-resizable-handle
{background: #F2F2F2; border: 1px solid #808080;height: 8px; width: 8px
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; top: 0px; left: 45%; }
.ui-resizable-s { cursor: s-resize; bottom: 0px; left: 45%; }
.ui-resizable-e { cursor: e-resize; right: 0px, top: 45%}
.ui-resizable-w { cursor: w-resize; left: 0px, top: 45% }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Slider
[/code]
我複製1.5.3的到1.7.1的沒有作用
[b]问题补充：[/b]
http://jqueryui.com/themeroller/
根本就沒有針對resize的設定
[b]问题补充：[/b]
之前的主題是用了resize的物件上下左右會有一個正方形的框框
[b]问题补充：[/b]
http://www.codeigniter.com.tw/images/xxx.jpg

像這樣
[b]问题补充：[/b]
[img]http://www.codeigniter.com.tw/images/xxx.jpg[/img]
[b]问题补充：[/b]
handles: 'all'
這個參數我有加
並沒有全部都出現
[b]问题补充：[/b]
handles: 'all'
不會出現像我圖片那張那種有正方形的點的

答

补充一下

[code="css"].ui-resizable-handle {font-size: 0.1px;z-index: 99999; display: block;position:absolute;background: #F2F2F2; border: 1px solid #808080;height: 8px; width: 8px}[/code]

ui-resizable-handle 的css代码改成这样,否则IE下显示会有问题.

ok,测试过了,IE,FF,opera下面显示都ok

答

官方上面现在都找不到1.5.3的主题了好像..所以不清楚153的主题与171有什么不同,不过你自己可以尝试一下,将153的resize替换到171的resize的css里面

你可以打开你下载到的171的主题包里的css,大概280行到290行之间,是resize的css代码,你对比一下,153的resize的css代码跟171的css代码有什么差别.

或者你可以贴出来让大家对比一下

答

[code="css"]
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
[/code]

这是171的主题CSS的代码,对比起来差距还是蛮多的,不知道你之前的主题是什么样子的?

官方提供了themeroller来自定义主题风格,你或许可以试试自己照着你所要的风格去生成一个主题?

答

发一下截图出来看看?或许可以帮你改进

答

哦....可能是因为官方默认的参数变化了吧,

$('.selector').resizable({ handles: 'all' });

这样试试,all的话就是指定了所有的可以拖动的方向.它就会出现所有方向都可以拖动的那个拖动柄,171默认的是只有右,下,还有右下.3个方向.

答

将你的1.7的部分的resizeable的代码改成这个样子:

[code="css"]

.ui-resizable { position: relative;}
.ui-resizable-handle {position:absolute;background: #F2F2F2; border: 1px solid #808080;height: 8px; width: 8px}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; top: 0px; left: 45%; }

.ui-resizable-s { cursor: s-resize; bottom: 0px; left: 45%; }

.ui-resizable-e { cursor: e-resize; right: 0px;top: 45%}

.ui-resizable-w { cursor: w-resize; left: 0px;top: 45% }

.ui-resizable-se { cursor: se-resize; right: 0; bottom: 0; }

.ui-resizable-sw { cursor: sw-resize; left: 0; bottom: 0; }

.ui-resizable-nw { cursor: nw-resize; left: 0; top: 0; }

.ui-resizable-ne { cursor: ne-resize; right: 0; top: 0;}
[/code]

然后再重新试试看?

請問jquery ui 1.5.3 的resize的knobTheme怎麼在1.7.1中使用?

相关推荐