📄 正在查看：admin/view/default/navigate_index.htm
1{inc:header.htm}
2<style type="text/css">
3#nav_cont{position:relative}
4#nav_cont .list,#kp_widget_holder{padding:2px}
5#nav_cont .list ul{padding:4px;background:#ECF2F5;border:1px solid #C2D5E3;border-radius:5px;cursor:move}
6#nav_cont .list ul li{height:26px;line-height:26px;padding:2px 0 2px 2px}
7#nav_cont .list ul:hover{background:#FFFFBB}
8.nav_l{float:left;width:150px}
9.nav_l input{float:left;vertical-align:top}
10.nav_l .inp{width:108px}
11.nav_l .check_box{cursor:pointer;margin:6px 0 0 5px}
12.nav_c{float:left;width:50%}
13.nav_c .inp{width:90%}
14.nav_r{float:right;width:120px}
15.nav_r .but2{float:right;margin:3px 8px 0 0}
16.nav_rank_2{margin-left:50px}
17.nav_transport{display:none}
18
19/*对话框*/
20.outnav_tit{background:#E3F1F4;height:36px;line-height:36px;font-weight:bold;border-bottom:1px solid #B4DBF2}
21.case_type{padding:8px}
22.case_type a{display:inline;float:left;height:30px;line-height:30px;width:50px;background:#90CEF2;margin-right:5px;color:#fff;font-size:14px;text-align:center;border-radius:5px}
23.case_type a:visited{color:#fff}
24.case_type a:hover{background:#0D6EA7}
25.case_type a.on{background:#0B6092}
26#twdialog_content{_overflow-x:hidden}
27.category .col div{_margin-top:8px}
28</style>
29
30<div class="m">
31 <div class="head">
32 <dl>
33 <input id="add" type="button" value="增加" class="but1">
34 <dd class="on">{$_title}</dd>
35 </dl>
36 </div>
37
38 <div class="p c2">
39 <div class="cc">
40 {if:empty($nav_arr)}<div class="sky warning bnote"><i></i><b>暂无数据</b></div>{/if}
41 <div id="nav_cont">
42 {inc:navigate_content.htm}
43 </div>
44 </div>
45 </div>
46</div>
47
48<script id="add_link" type="text/html">
49 <div class="case_type cf">
50 <a href="javascript:set_type(0);" class="on">分类</a>
51 <a href="javascript:set_type(1);">链接</a>
52 </div>
53
54 <div id="category">
55 {if:empty($category_arr)}
56 <div style="padding:10px 15px;font-size:14px">暂无分类，请先到分类管理增加分类。</div>
57 {else}
58 {loop:$category_arr $arr $mid}
59 <div class="category">
60 <dl class="cat_tit">
61 <dd> {php} echo $mod_name[$mid];{/php}分类</dd>
62 </dl>
63
64 {loop:$arr $v}
65 <dl class="col" cid="{$v[cid]}" mid="{$v[mid]}">
66 <dd>
67 <div title="编号(cid): {$v[cid]} 分类名称: {$v[name]}">
68 {php} echo str_repeat(" ", $v['pre']-1);{/php}
69 <label><input type="checkbox" value="{$v[cid]}"> {$v[name]}</label>
70 </div>
71 </dd>
72 </dl>
73 {/loop}
74 </div>
75 {/loop}
76 {/if}
77 </div>
78
79 <div id="outnav" style="display:none">
80 <div class="outnav_tit"> 外部链接</div>
81 <table class="tb">
82 <tr>
83 <th class="th">名称</th>
84 <td class="col"><input name="name" type="text" class="inp w1" /></td>
85 </tr>
86 <tr>
87 <th class="th">链接</th>
88 <td class="col"><input name="url" type="text" value="http://" class="inp w1" /></td>
89 </tr>
90 <tr>
91 <th class="th">新窗口打开</th>
92 <td class="col"><input name="target" type="checkbox" checked="checked"></td>
93 </tr>
94 </table>
95 </div>
96</script>
97
98<script type="text/javascript">
99//拖拽插件
100$.fn.kpdragsort = function(options) {
101 var container = this;
102
103 $(container).children(".list").off("mousedown").mousedown(function(e) {
104 if(e.which != 1 || $(e.target).is("input, textarea, a") || window.kp_only) return; // 排除非左击和其他元素
105 e.preventDefault(); // 阻止选中文本
106
107 var x = e.pageX;
108 var y = e.pageY;
109 var _this = $(this); // 点击选中块
110 var w = _this.width();
111 var h = _this.height();
112 var w2 = w/2;
113 var h2 = h/2;
114 var p = _this.position();
115 var left = p.left;
116 var top = p.top;
117 var sTop = $(".p:first").scrollTop();
118 window.kp_only = true;
119 window.twoNav = null;
120
121 // 运输二级导航
122 if(!_this.is(".nav_rank_2")) {
123 var i = _this.index(".list");
124 var iObj = $("#nav_cont>.list");
125 var iSon = _this.children(".nav_transport");
126 for(++i; i<iObj.length; i++) {
127 if(!iObj.eq(i).is(".nav_rank_2")) break;
128 iObj.eq(i).appendTo(iSon);
129 }
130 if(iSon.children().length) iSon.show();
131 }
132
133 // 添加虚线框
134 _this.after('<div id="kp_widget_holder"></div>');
135 var wid = $("#kp_widget_holder");
136 wid.css({"border":"2px dashed #ccc", "height":_this.height()-4, "margin-left":_this.css("margin-left")});
137
138 // 保持原来的宽高
139 _this.css({"width":w, "height":h, "position":"absolute", opacity: 0.8, "z-index": 999, "left":left, "top":top});
140
141 // 绑定mousemove事件
142 $(document).mousemove(function(e) {
143 e.preventDefault();
144
145 // 移动选中块
146 var l = left + e.pageX - x;
147 var t = top + ($(".p:first").scrollTop() - sTop) + e.pageY - y;
148 _this.css({"left":l, "top":t});
149
150 var widPrevFun = function() {
151 var prev = wid.prev();
152 if(prev.is(_this)) return prev.prev();
153 return prev;
154 }
155
156 var widNextFun = function() {
157 var next = wid.next();
158 if(next.is(_this)) return next.next();
159 return next;
160 }
161
162 var rankOneFun = function() {
163 _this.attr("_rank", 1);
164 wid.css({"margin-left":0});
165 window.twoNav = 1;
166 }
167
168 var rankTwoFun = function() {
169 _this.attr("_rank", 2);
170 wid.css({"margin-left":50});
171 window.twoNav = 2;
172 }
173
174 // 当拖拽到第一个时变成一级 或 有下级时只能为一级
175 var widPrev = widPrevFun();
176 if(!widPrev.is(".list") || _this.find(".nav_transport>.list").length > 0) {
177 rankOneFun();
178 }else{
179 // 二级如果是最后一个时可以拖拽为一级
180 var winNext = widNextFun();
181 if(!winNext.is(".nav_rank_2")) {
182 if(left < l-50) {
183 rankTwoFun();
184 }else if(left > l) {
185 rankOneFun();
186 }
187 }else{
188 // 如果上一个对象是二级，那它直接为二级
189 if(widPrev.is(".nav_rank_2")) {
190 rankTwoFun();
191 }else{
192 // 如果下一个对象为二级，说明他有下级，那不能被代替
193 if(winNext.is(".nav_rank_2")) {
194 rankTwoFun();
195 }else{
196 if(left < l-50) {
197 rankTwoFun();
198 }else if(left > l) {
199 rankOneFun();
200 }
201 }
202 }
203 }
204 }
205
206 // 选中块的中心坐标
207 var ml = l+w2;
208 var mt = t+h2;
209
210 // 遍历所有块的坐标
211 $(container).children(".list").not(_this).each(function(i) {
212 var obj = $(this);
213 var p = obj.position();
214 var a1 = p.left;
215 var a2 = p.left + obj.width();
216 var a3 = p.top;
217 var a4 = p.top + obj.height();
218
219 // 移动虚线框
220 if(a1 < ml && ml < a2 && a3 < mt && mt < a4) {
221 if(!obj.next("#kp_widget_holder").length) {
222 wid.insertAfter(this);
223 }else{
224 wid.insertBefore(this);
225 }
226 }
227 });
228 });
229
230 // 绑定mouseup事件
231 var _mouseup = function() {
232 $(document).off('mouseup').off('mousemove');
233
234 // 拖拽回位，并删除虚线框
235 var p = wid.position();
236
237 if(window.twoNav) {
238 if(window.twoNav === 2) {
239 p.left = p.left + 50;
240 _this.addClass("nav_rank_2");
241 }else{
242 _this.removeClass("nav_rank_2");
243 }
244 }
245
246 _this.animate({"left":p.left, "top":p.top}, 100, function() {
247 _this.removeAttr("style");
248 wid.replaceWith(_this);
249
250 // 运输结束
251 _this.children(".nav_transport").removeAttr("style");
252 _this.find(".nav_transport>.list").insertAfter(_this);
253
254 window.kp_only = null;
255 if(parent) parent.document.onmouseup = null;
256
257 check_change();
258 });
259 };
260 $(document).mouseup(_mouseup);
261 if(parent) parent.document.onmouseup = _mouseup;
262 });
263}
264
265//添加分类
266$("#add").click(function(){
267 window.setType = 0;
268 window.addHeight = Math.max(350, document.documentElement.clientHeight-30);
269 $.twDialog({content:$("#add_link").html(), resizable:true, open:true, modal:true, width:600, height:addHeight, minW:500});
270
271 //提交
272 $("#twdialog_button>.ok").click(function(){
273 if(window.setType == 0) {
274 //添加分类
275 var cate = [];
276 $(".category input[type='checkbox']").each(function(i) {
277 if(this.checked) {
278 cate[i] = [$(this).parent().text(), $(this).val()];
279 }
280 });
281 twAjax.postd("index.php?u=navigate-add_cate-ajax-1", {"cate":cate}, function(data){
282 twAjax.alert(data);
283 nav_reload();
284 });
285 }else{
286 //添加链接
287 var name = $("#outnav input[name='name']").val();
288 var url = $("#outnav input[name='url']").val();
289 var target = $("#outnav input[name='target']")[0].checked ? 1 : 0;
290 twAjax.postd("index.php?u=navigate-add_link-ajax-1", {"name":name, "url":url, "target":target}, function(data){
291 twAjax.alert(data);
292 nav_reload();
293 });
294 }
295 });
296});
297
298//删除
299function nav_del(obj) {
300 var o = $(obj).parent().parent().parent();
301 var name = o.find(".name").val();
302 var key = o.attr("_key");
303 var s_end = (!o.is(".nav_rank_2") && o.next().is(".nav_rank_2")) ? "及下级导航" : "";
304 twAjax.confirm("删除不可恢复，确定删除“<font color='red'>"+name+"</font>”" + s_end +"？", function(){
305 twAjax.postd("index.php?u=navigate-del-ajax-1", {"key":key}, function(data){
306 twAjax.alert(data);
307 nav_reload();
308 });
309 });
310}
311
312//重新加载
313function nav_reload() {
314 if(window.twData.err==0) {
315 $.twDialog("remove");
316 setTimeout(function() {
317 twAjax.get("index.php?u=navigate-get_navigate_content&r="+time(), function(html){
318 $(".sky").remove();
319 $("#nav_cont").html(html);
320 init_load();
321 });
322 }, 500);
323 }
324}
325
326//初始加载
327function init_load() {
328 $("#nav_cont").kpdragsort();
329 window.keys = get_navi();
330 $("input[type='checkbox']").change(check_change);
331 $("input[type='text']").focusin(nav_change).focusout(check_change);
332}
333
334//内容改变
335function nav_change() {
336 if(!$("#nav_change").length) $(".head>dl").append('<input id="nav_change" onclick="nav_save()" type="button" value="保存修改" class="but1" />');
337}
338
339//保存修改
340function nav_save() {
341 twAjax.postd("index.php?u=navigate-nav_save-ajax-1", {"navi":get_navi()}, function(data){
342 twAjax.alert(data);
343 if(window.twData.err==0) setTimeout(function(){ window.location.reload(); }, 1000);
344 });
345}
346
347//获取所有数据
348function get_navi() {
349 var navi = [];
350 $("#nav_cont>.list").each(function(i) {
351 var cid = $(this).attr("_cid");
352 var name = $(this).find(".name").val();
353 var url = $(this).find(".url").val();
354 var target = $(this).find("input[type='checkbox']")[0].checked ? 1 : 0;
355 var rank = $(this).attr("_rank");
356 navi[i] = [cid, name, url, target, rank];
357 });
358 return navi;
359}
360
361//检查参数是否改变
362function check_change() {
363 var len = $("#nav_cont>.list").length;
364 for(var i = 0; i < len; i++) {
365 var obj = $("#nav_cont>.list").eq(i);
366 var cid = obj.attr("_cid");
367 var name = obj.find(".name").val();
368 var url = obj.find(".url").val();
369 var target = obj.find("input[type='checkbox']")[0].checked ? 1 : 0;
370 var rank = obj.attr("_rank");
371
372 try{
373 var keys = window.keys;
374 if(keys[i][0] !== cid || keys[i][1] !== name || keys[i][2] !== url || keys[i][3] !== target || keys[i][4] !== rank) {
375 nav_change();
376 return;
377 }
378 }catch(e){}
379 }
380 if($("#nav_change").length) $("#nav_change").remove();
381}
382
383// 选择类型
384function set_type(type) {
385 var h;
386 if(type == 0) {
387 $("#outnav").hide();
388 $("#category").show();
389 h = window.addHeight;
390 window.setType = 0;
391 }else{
392 $("#category").hide();
393 $("#outnav").show();
394 h = 275;
395 window.setType = 1;
396 }
397 $("#twdialogbox").css("height", h);
398 $("#twdialog_content").css("height", h-64);
399 $(".case_type>a").removeAttr("class");
400 $(".case_type>a").eq(type).addClass("on");
401}
402
403init_load();
404</script>
405</body>
406</html>
407