📄 正在查看：twcms/plugin/tw_links/links_index.htm
1{inc:header.htm}
2<style type="text/css">
3#link_tit{background:#E3F1F4;border-bottom:1px solid #B4DBF2}
4#link_tit ul li{padding-left:8px;height:32px;line-height:32px;font-weight:bold}
5#link_cont{position:relative;cursor:move}
6#link_cont ul li{height:32px;line-height:32px;padding:6px 0 0 8px}
7#link_cont ul li .inp{width:85%;vertical-align:top}
8#link_cont ul:hover{background:#FFFFBB}
9.link_l{float:left;width:25%}
10.link_c{float:left;width:55%}
11.link_r{float:left;width:15%}
12</style>
13
14<div class="m">
15 <div class="head">
16 <dl>
17 <input id="ready" onclick="link_ready()" type="button" value="增加" class="but1" />
18 <dd class="on">{$_title}</dd>
19 </dl>
20 </div>
21
22 <div class="p c2">
23 <div class="cc">
24 <div id="link_tit">
25 <ul class="cf">
26 <li class="link_l">网站名称</li>
27 <li class="link_c">网站 URL</li>
28 <li class="link_r">操作</li>
29 </ul>
30 </div>
31 <div id="link_cont">
32 {loop:$links $v $k}
33 <ul class="cf" key="{$k}">
34 <li class="link_l"><input type="text" onfocus="link_focus(this)" onblur="link_blur(this)" onchange="link_change(this)" class="inp name" value="{$v[name]}"></li>
35 <li class="link_c"><input type="text" onfocus="link_focus(this)" onblur="link_blur(this)" onchange="link_change(this)" class="inp url" value="{$v[url]}"></li>
36 <li class="link_r"><a class="but3" onclick="link_del(this)" href="javascript:;">删除</a></li>
37 </ul>
38 {/loop}
39 </div>
40 {if:empty($links)}<div class="sky warning bnote" style="margin-top:8px"><i></i><b>暂无链接</b></div>{/if}
41 </div>
42 </div>
43</div>
44<script type="text/javascript">
45//拖拽插件
46$.fn.kpdragsort = function(options) {
47 var container = this;
48
49 $(container).children().off("mousedown").mousedown(function(e) {
50 if(e.which != 1 || $(e.target).is("input, textarea, a") || window.kp_only) return; // 排除非左击和其他元素
51 e.preventDefault(); // 阻止选中文本
52
53 var x = e.pageX;
54 var y = e.pageY;
55 var _this = $(this); // 点击选中块
56 var w = _this.width();
57 var h = _this.height();
58 var w2 = w/2;
59 var h2 = h/2;
60 var p = _this.position();
61 var left = p.left;
62 var top = p.top;
63 var sTop = $(".p:first").scrollTop();
64 window.kp_only = true;
65
66 // 添加虚线框
67 _this.before('<div id="kp_widget_holder"></div>');
68 var wid = $("#kp_widget_holder");
69 wid.css({"border":"2px dashed #ccc", "height":_this.outerHeight(true)-4});
70
71 // 保持原来的宽高
72 _this.css({"width":w, "height":h, "position":"absolute", opacity: 0.8, "z-index": 999, "left":left, "top":top});
73
74 // 绑定mousemove事件
75 $(document).mousemove(function(e) {
76 e.preventDefault();
77
78 // 移动选中块
79 var l = left + e.pageX - x;
80 var t = top + ($(".p:first").scrollTop() - sTop) + e.pageY - y;
81 _this.css({"left":l, "top":t});
82
83 // 选中块的中心坐标
84 var ml = l+w2;
85 var mt = t+h2;
86
87 // 遍历所有块的坐标
88 $(container).children().not(_this).not(wid).each(function(i) {
89 var obj = $(this);
90 var p = obj.position();
91 var a1 = p.left;
92 var a2 = p.left + obj.width();
93 var a3 = p.top;
94 var a4 = p.top + obj.height();
95
96 // 移动虚线框
97 if(a1 < ml && ml < a2 && a3 < mt && mt < a4) {
98 if(!obj.next("#kp_widget_holder").length) {
99 wid.insertAfter(this);
100 }else{
101 wid.insertBefore(this);
102 }
103 return;
104 }
105 });
106 });
107
108 // 绑定mouseup事件
109 var _mouseup = function() {
110 $(document).off('mouseup').off('mousemove');
111
112 // 拖拽回位，并删除虚线框
113 var p = wid.position();
114 _this.animate({"left":p.left, "top":p.top}, 100, function() {
115 _this.removeAttr("style");
116 wid.replaceWith(_this);
117
118 check_sort(); // 检查排序是否已修改
119
120 window.kp_only = null;
121 if(parent) parent.document.onmouseup = null;
122 });
123 };
124 $(document).mouseup(_mouseup);
125 if(parent) parent.document.onmouseup = _mouseup;
126 });
127}
128
129//获取一列
130function get_line(name, url, isDel, key) {
131 var s = '<ul class="cf"'+ (key ? ' key="'+key+'"' : '') +'>';
132 s += '<li class="link_l"><input type="text" onfocus="link_focus(this)" onblur="link_blur(this)" onchange="link_change(this)" class="inp name" value="'+ (!name ? '' : name) +'"></li>';
133 s += '<li class="link_c"><input type="text" onfocus="link_focus(this)" onblur="link_blur(this)" onchange="link_change(this)" class="inp url" value="'+ (!url ? 'http://' : url) +'"></li>';
134 s += '<li class="link_r">';
135 s += isDel ? '<a class="but3" onclick="link_del(this)" href="javascript:;">删除</a>' : '<a class="but3" onclick="link_set(this)" href="javascript:;">确定</a> <a class="but3" onclick="link_cancel(this)" href="javascript:;">取消</a>';
136 s += '</li></ul>';
137 return s;
138}
139
140//获得焦点
141function link_focus(obj) {
142 var o = $(obj).parent().parent();
143 o.find(".inp").each(function() {
144 if(!$(this).attr("old")) $(this).attr("old", $(this).val());
145 });
146 o.find(".link_r").html('<a class="but3" onclick="link_set(this)" href="javascript:;">确定</a> <a class="but3" onclick="link_reducing(this)" href="javascript:;">取消</a>');
147}
148
149//失去焦点
150function link_blur(obj) {
151 var o = $(obj).parent().parent();
152 if(!o.attr("change")) {
153 o.find(".link_r").html('<a class="but3" onclick="link_del(this)" href="javascript:;">删除</a>');
154 }
155}
156
157//内容改变
158function link_change(obj) {
159 $(obj).parent().parent().attr("change", 1);
160}
161
162//增加一列
163function link_ready() {
164 $("#link_cont").prepend(get_line());
165}
166
167//取消一列
168function link_cancel(obj) {
169 $(obj).parent().parent().slideUp(500, function(){ $(this).remove(); });
170}
171
172//还原修改
173function link_reducing(obj) {
174 var o = $(obj).parent().parent();
175 o.find(".inp").each(function() {
176 $(this).val($(this).attr("old"));
177 });
178 o.removeAttr("change");
179}
180
181//增加/编辑链接
182function link_set(obj) {
183 var o = $(obj).parent().parent();
184 var name = o.find(".name").val();
185 var url = o.find(".url").val();
186 var key = o.attr("key");
187 twAjax.postd("index.php?u=links-set-ajax-1", {"name":name, "url":url, "key":key}, function(data){
188 twAjax.alert(data);
189 $(".ajaxtips u").click(function(){
190 if(twData.name != '') o.find("." + twData.name).focus();
191 });
192 if(window.twData.err==0) {
193 if($(".sky").length > 0) $(".sky").remove();
194 // key 有值为编辑
195 if(key) {
196 o.removeAttr("change");
197 o.find(".name").attr("old", name);
198 o.find(".url").attr("old", url);
199 o.find(".link_r").html('<a class="but3" onclick="link_del(this)" href="javascript:;">删除</a>');
200 }else{
201 o.remove();
202 $("#link_cont").append(get_line(name, url, true, twData.name));
203 }
204 $("#link_cont").kpdragsort();
205 }
206 });
207}
208
209//删除链接
210function link_del(obj) {
211 var o = $(obj).parent().parent();
212 var name = o.find(".name").val();
213 var key = o.attr("key");
214 twAjax.confirm("删除不可恢复，确定删除“<font color='red'>"+name+"</font>”？", function(){
215 twAjax.postd("index.php?u=links-del-ajax-1", {"key":key}, function(data){
216 twAjax.alert(data);
217 if(window.twData.err==0) o.remove();
218 });
219 });
220}
221
222//修改链接排序
223function link_sort() {
224 var keys = [];
225 $("#link_cont>ul").each(function(i) {
226 keys[i] = $(this).attr("key");
227 });
228 twAjax.postd("index.php?u=links-sort-ajax-1", {"keys":keys}, function(data){
229 twAjax.alert(data);
230 if(window.twData.err==0) setTimeout(function(){window.location.reload();}, 1000);
231 });
232}
233
234//检查排序是否已修改
235function check_sort() {
236 var len = $("#link_cont>ul").length;
237 var but = $("#link_sort").length;
238 for(var i = 0; i < len; i++) {
239 if(keys[i] !== $("#link_cont>ul").eq(i).attr("key")) {
240 if(!but) $(".head>dl").append('<input id="link_sort" onclick="link_sort()" type="button" value="保存排序" class="but1" />');
241 return;
242 }
243 }
244 if(but) $("#link_sort").remove();
245}
246
247var keys = [];
248$("#link_cont>ul").each(function(i){
249 keys[i] = $(this).attr("key");
250});
251$("#link_cont").kpdragsort();
252</script>
253</body>
254</html>
255