再改外链转换工具

再改外链转换工具

​

作者：matrix 被围观: 8,363 次 发布时间：2014-02-04 分类：零零星星 | 33 条评论 »

这是一个创建于 3130 天前的主题，其中的信息可能已经有所发展或是发生改变。

感觉以前的界面按钮有些小，正好改成3.0.3的css前端框架试试~。

>>外链转换工具

资源 ：

Bootstrap中文网： http://www.bootcss.com/  里面各种开源，各种介绍~

百度CDN公共库：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs

用的其中Bootstrap v3.0.3：http://libs.[baidu](https://www.hhtjim.com/tag/baidu).com/bootstrap/3.0.3/css/bootstrap.min.css

UI变动：

用Bootstrap v3.0.3就变成了响应式布局的，很不错。手机上操作方便，只是很少能用到。

提交按钮变到输入框旁。

把以前的input状态栏改为span。

状态栏下方的外链地址列表改为倒序排列，不用每次都翻滚动条。用JQ的insertAfter()方法解决。

右边增加zClip的复制功能（没错，就是那No.XX），方便各种懒。

for(i=0;i<url.length;i++){
if (url[i]=='') {continue;};
$("
<div class="\"><input id="\" class="\" name="\" type="\" value="\" /><span id="\" class="\">No."+eval(sumu + t)+"</span></div>
").insertAfter("#status");//JQ方法
$("#anniu").zclip({path:"http://pan.baidu.com/res/static/images/ZeroClipboard10.swf",copy:encodeURI(url[i]),afterCopy:function(){$(this).css("color","#777");$(this).text("已复制")}});//AJAX后加载.zclip方法
}

//AJAX输出后马上加载zclip方法，包含在输出列表的for循环里面。正如上面第4行就是zClip的复制功能代码。

参考：wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

顺手扒下来百度网盘复制功能的zClip flash：http://pan.[baidu](https://www.hhtjim.com/tag/baidu).com/res/static/images/ZeroClipboard10.swf 这文件不大，用度娘的就免的再上传了。

还有就是在很多a标签的情况下，以前用onclick="return addcon('http://pan.baidu.com/s/13isoZ')"来取的文本内容。

function addcon(nr) {
document.getElementById("pan_url").value = nr;
}

用jquery实现更简单。javascript标签中放代码：

$(document).ready(function(){
$(document).on("click","div#dizhi a",function(){
var lu = $(this).text();
document.getElementById("pan_url").value = lu;
});
})

其中第2行的“div#dizhi a”，表示选择范围是id为"dizhi"的div标签里面的a标签。现在就不用添加很多id、onclick，直接a标签包含需要获取的内容。哇咔咔 超级方便。

嗯，主要改了这些。看起来还不错。

MP3：