设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 5003|回复: 9

[已解决] slider简单范例

[复制链接]
发表于 2008-1-13 21:53:12 | 显示全部楼层 |阅读模式

  1. <body>
  2. </body>
  3. <script language="javascript">
  4. //
  5. com = {};
  6. com.fox = {};
  7. com.fox.swing = {};

  8. com.fox.os = {};
  9. com.fox.os.Login = {};
  10. //
  11. $ = function (a,b,c)
  12. {
  13.         var o = document.createElement(b);
  14.         a.appendChild(o);
  15.         o.show = function ()
  16.         {
  17.                 o.style.display = "inline";
  18.         }
  19.         o.hide = function ()
  20.         {
  21.                 o.style.display = "none";
  22.         }
  23.         if(!!c)
  24.         {
  25.                 if(c.constructor == Function)
  26.                 {
  27.                         c.call(o);
  28.                 }
  29.         }
  30.         return o;
  31. }
  32. $import = function (file){
  33. }
  34. $package = function (a,b,c)
  35. {
  36.         a[b] = c;
  37. }
  38. //
  39. $extend = function (a,b)
  40. {
  41. //        a.call(b);
  42. //        b.prototype = new a();
  43.         return b;
  44. }
  45. $package(
  46.    com.fox.swing,
  47.    "JEvent",
  48.    function(){
  49.            this.addEventHandler = function (e,f,b){
  50.                    if(!this[e]){
  51.                            this[e] = [];
  52.                    }else{
  53.                            if(this[e].constructor != Array){
  54.                                    return false;
  55.                            }
  56.                    }
  57.                    if(b)this[e] = [];
  58.                    if(f.constructor == Function)this[e].push(f);
  59.            }
  60.            this.removeEventHandler = function (e,f){
  61.                    if(!this[e]) return;
  62.                    for(var i=0;i<this[e].length;i++){
  63.                            if(this[e][i] == f){
  64.                                    break;
  65.                            }
  66.                    }
  67.            }
  68.            this.runEventHandler = function (e){
  69.                    if(!this[e]){
  70.                            this[e] = [];
  71.                    }else{
  72.                            if(this[e].constructor != Array){
  73.                                    return false;
  74.                            }
  75.                    }
  76.                    for(var i=0;i<this[e].length;i++){
  77.                            this[e][i]();
  78.                    }
  79.            }
  80.    }
  81. );
  82. $package(
  83.    com.fox.swing,
  84.    "Sprite",
  85.    $extend(
  86.       com.fox.swing.JEvent,
  87.       function(){
  88.                   com.fox.swing.JEvent.call(this);
  89.                   var _this = this;
  90.                   window.dragBox = null;
  91.                   var timer = null;
  92.                   this.startDrag = function (e,x,y,width,height){
  93.                           var e = e || event;
  94.                           e.cancelBubble = true;
  95.                           if(timer != null)clearInterval(timer);
  96.                           this.runEventHandler("START_DRAG");
  97.                           this.parentNode.appendChild(this);
  98.                           dragBox = $(this.parentNode,"div");
  99.                           with(dragBox.style){
  100.                                   position = "absolute";
  101.                                   top = this.style.top;
  102.                                   left = this.style.left;
  103.                                   width = this.style.width;
  104.                                   height = this.style.height;
  105.                                   border = "1px dotted #000000";
  106.                           }
  107.                           dragBox.startY = e.clientY - parseInt(dragBox.style.top);
  108.                           dragBox.startX = e.clientX - parseInt(dragBox.style.left);
  109.                           document.onmousemove = function (e){
  110.                                   var e = e || event;
  111.                                   _this.runEventHandler("DRAGING");
  112.                                   dragBox.endY = e.clientY - parseInt(dragBox.startY);
  113.                                   dragBox.endX = e.clientX - parseInt(dragBox.startX);
  114.                                   if(dragBox.endX < x){
  115.                                           dragBox.endX = x;
  116.                                   }
  117.                                   if(dragBox.endX > x + width){
  118.                                           dragBox.endX = x + width;
  119.                                   }
  120.                                   if(dragBox.endY < y){
  121.                                           dragBox.endY = y;
  122.                                   }
  123.                                   if(dragBox.endY > y + height){
  124.                                           dragBox.endY = y + height;
  125.                                   }
  126.                                   dragBox.style.top = dragBox.endY;
  127.                                   dragBox.style.left = dragBox.endX;
  128.                       }
  129.                           document.onmouseup = function (e){
  130.                                   _this.stopDrag(e);
  131.                           }
  132.                   }
  133.                   this.stopDrag = function (e){
  134.                           document.onmousemove = null;
  135.                           document.onmouseup = null;
  136.                           this.runEventHandler("STOP_DRAG");
  137.                           this.parentNode.removeChild(dragBox);
  138.                           timer = setInterval(animation,10);
  139.                   }
  140.                   var animation = function(){
  141.                           var offsetX = (dragBox.endX - parseInt(_this.style.left))/10;
  142.                           var offsetY = (dragBox.endY - parseInt(_this.style.top))/10;
  143.                           if(Math.abs(offsetX)<1&&Math.abs(offsetY)<1){
  144.                                   _this.style.left = dragBox.endX;
  145.                                   _this.style.top = dragBox.endY;
  146.                                   clearInterval(timer);
  147.                           }else{
  148.                                   _this.style.left = parseInt(_this.style.left) + offsetX;
  149.                                   _this.style.top = parseInt(_this.style.top) + offsetY;
  150.                           }
  151. //                          info.value = dragBox.endX + ":" + parseInt(_this.style.left);
  152.                   }
  153.           }
  154.         )
  155. );
  156. $package(
  157.    com.fox.swing,
  158.    "JWindow",
  159.    $extend(
  160.       com.fox.swing.Sprite,
  161.       function(){
  162.                   com.fox.swing.Sprite.call(this);
  163.                   var _this = this;
  164.                   with(this){
  165.                           with(style){
  166.                                   position = "absolute";
  167.                                   top = "10px";
  168.                                   left = "10px";
  169.                                   width = "300px";
  170.                                   height = "200px";
  171.                                   border = "1px solid #000000";
  172.                                   background = "#eeeeee";
  173.                                   overflow = "hidden";
  174.                           }
  175.                   }
  176.                   this._title = $(this,"div");
  177.                   with(this._title){
  178.                           innerHTML = "标题!(西水很爱大家)";
  179.                           with(style){
  180.                                   color = "#ffffff";
  181.                                   background = "#3366cc";
  182.                           }
  183.                   }
  184.                   this.setSize = function (w,h){
  185.                           with(this)
  186.                           {
  187.                                   with(style){
  188.                                           width = w;
  189.                                           height = h;
  190.                                   }
  191.                           }
  192.                   }
  193.                   this.onmousedown = function (e){
  194.                           _this.parentNode.appendChild(_this);
  195.                   }
  196.                   this._title.onmousedown = function (e){
  197.                           _this.parentNode.appendChild(_this);
  198.                           _this.startDrag(e);
  199.                   }
  200.           }
  201.         )
  202. );
  203. $package(
  204.    com.fox.swing,
  205.    "JDialog",
  206.    $extend(
  207.       com.fox.swing.JWindow,
  208.       function(){
  209.                   com.fox.swing.JWindow.call(this);
  210.                   var _this = this;
  211.                   var pane = $(this,"div");
  212.                   pane.onmousedown = function (e){
  213.                           var e = e || event;
  214.                           e.cancelBubble = true;
  215.                   }
  216.                   this._labID = $(pane,"span");
  217.                   this._ID = $(pane,"input");
  218.                   $(pane,"br");
  219.                   this._labPWD = $(pane,"span");
  220.                   this._PWD = $(pane,"input");
  221.                   $(pane,"br");
  222.                   this._OK = $(pane,"button");
  223.                   this._CANCLE = $(pane,"button");
  224.                   with(this){
  225.                           with(_labID){
  226.                                   innerHTML = "用户:";
  227.                           }
  228.                           with(_labPWD){
  229.                                   innerHTML = "密码:";
  230.                           }
  231.                           with(_OK){
  232.                                   innerHTML = "确定";
  233.                           }
  234.                           with(_CANCLE){
  235.                                   innerHTML = "取消";
  236.                           }
  237.                   }
  238.           }
  239.         )
  240. );
  241. $package(
  242.    com.fox.swing,
  243.    "JTree",
  244.    $extend(
  245.       com.fox.swing.JEvent,
  246.       function(){
  247.                   com.fox.swing.JEvent.call(this);
  248.                   var _tree = this;
  249.                   this._json = {
  250.                     name:"系统管理",
  251.                         items:
  252.                         [
  253.                                 {name:"系统功能设置",arguments:"http://www.163.com/"},
  254.                                 {name:"人员权限设置",arguments:"http://www.51js.com/"},
  255.                                 {name:"客户及商品管理流程设置",arguments:"Application1.html"}
  256.                         ]
  257.                   };
  258.                   this._skin = "images/";
  259.                   this._images = {
  260.                           EMPTY:"empty.gif"
  261.                   };
  262.                   var Node = function (){
  263.                           var node = this;
  264.                           var Element = function (){
  265.                                   var element = this;
  266.                                   var ImageButton = function (){
  267.                                           var imageButton = this;
  268.                                           this._STATUS = {OPEN:"",CLOSE:""};
  269.                                           this.setStatusImage = function (open,close){
  270.                                                   this._STATUS = {OPEN:open,CLOSE:close};
  271.                                           }
  272.                                           this.open = function (){
  273.                                                   this.src = this._STATUS.OPEN;
  274.                                           }
  275.                                           this.close = function (){
  276.                                                   this.src = this._STATUS.CLOSE;
  277.                                           }
  278.                                   }
  279.                                   this._fill = "";
  280.                                   this._line = "";
  281.                                   this._icon = "";
  282.                                   this._text = "";
  283.                                   this.setStatusImage = function (open,close){
  284.                                   }
  285.                                   this.open = function (){
  286.                                   }
  287.                                   this.close = function (){
  288.                                   }
  289.                           }
  290.                           var List = function () {
  291.                                   var list = this;
  292.                                   this._items = [];
  293.                                   with(this){
  294.                                           with(style){
  295.                                                   display = "inline";
  296.                                                   border = "0px solid #000000";
  297.                                           }
  298.                                   }
  299.                           }
  300.                   }
  301.                   this._root = null;
  302.                   this.openAllNode = function (){
  303.                   }
  304.                   this.closeAllNode = function (){
  305.                   }
  306.                   this.setAllNodeStatus = function (){
  307.                   }
  308.                   this.getAllNodeByJSON = function (json){
  309.                           if(json.items&&json.items.constructor==Array){
  310.                                   for(var i=0;i<json.items.length;i++){
  311.                                           arguments.callee(json.items[i]) ;
  312.                                   }
  313.                           }
  314.                   }
  315.           }
  316.         )
  317. );
  318. var jWindow0 = $(document.body,"div",com.fox.swing.JWindow);
  319. jWindow0._title.innerHTML = "多子窗口演示!made by john";
  320. jWindow0.setSize(800,500);
  321. var jWindow1 = $(jWindow0,"div",com.fox.swing.JWindow);
  322. var jWindow2 = $(jWindow0,"div",com.fox.swing.JWindow);
  323. var jWindow3 = $(jWindow0,"div",com.fox.swing.JWindow);
  324. var jWindow4 = $(jWindow0,"div",com.fox.swing.JWindow);
  325. var jWindow5 = $(jWindow0,"div",com.fox.swing.JDialog);
  326. var jWindow6 = $(jWindow0,"div",com.fox.swing.JWindow);
  327. var jWindow7 = $(jWindow0,"div",com.fox.swing.JDialog);
  328. var jWindow8 = $(jWindow0,"div",com.fox.swing.JDialog);
  329. jWindow8.addEventHandler("DRAGING",function ()
  330. {
  331.         info.value = "Draging:("+dragBox.endX + "," + dragBox.endY+")";
  332. })
  333. var info = $(document.body,"input",com.fox.swing.Sprite);
  334. var slider = $(jWindow0,"div",com.fox.swing.Sprite);
  335. var bar = $(slider,"div",com.fox.swing.Sprite);
  336. with(slider.style){
  337.         position = "absolute";
  338.         top = "300px";
  339.         left = "300px";
  340.         width = "300px";
  341.         height = "20px";
  342.         border = "0px solid #bfbfbf";
  343.         background = "#9c9c9c";
  344. }
  345. with(bar.style){
  346.         position = "absolute";
  347.         top = "0px";
  348.         left = "0px";
  349.         width = "20px";
  350.         height = "20px";
  351.         border = "0px solid #000000";
  352.         background = "#336699";
  353. }
  354. bar.onmousedown = function (e){
  355.         this.startDrag(e,0,0,290,0);
  356. }
  357. var slider1 = $(jWindow0,"div",com.fox.swing.Sprite);
  358. var bar1 = $(slider1,"div",com.fox.swing.Sprite);
  359. with(slider1.style){
  360.         position = "absolute";
  361.         top = "50px";
  362.         left = "500px";
  363.         width = "20px";
  364.         height = "200px";
  365.         border = "0px solid #bfbfbf";
  366.         background = "#9c9c9c";
  367. }
  368. with(bar1.style){
  369.         position = "absolute";
  370.         top = "0px";
  371.         left = "0px";
  372.         width = "20px";
  373.         height = "10px";
  374.         border = "0px solid #000000";
  375.         background = "#336699";
  376. }
  377. bar1.onmousedown = function (e){
  378.         this.startDrag(e,0,0,0,190);
  379. }
  380. bar1.addEventHandler("DRAGING",function ()
  381. {
  382.         info.value = "Percent:"+Math.floor((dragBox.endY/190)*100)+"%";
  383. });
  384. var tree = $(jWindow0,"div",com.fox.swing.JTree);
  385. tree.getAllNodeByJSON(tree._json);
  386. alert("debug:success!");
  387. </script>
  388. 嘎嘎!休息,弄我的flash去了!
  389. los老大加入我们的群吧!
复制代码

[ 本帖最后由 kuku_john 于 2008-1-14 20:41 编辑 ]

评分

参与人数 1威望 +5 收起 理由
月影 + 5 蛮好的 :)

查看全部评分

发表于 2008-1-14 08:59:44 | 显示全部楼层
很好,很强大!
发表于 2008-1-14 19:07:49 | 显示全部楼层
水哥,群号码站内消息发给我
发表于 2008-1-14 19:29:18 | 显示全部楼层
我会在近期写一个拖放的例子,将有所改动:lol
 楼主| 发表于 2015-5-4 00:09:26 | 显示全部楼层
麻痹那么多年过去了,你写的列子呢!
发表于 2015-5-21 13:52:38 | 显示全部楼层
我只能说:人生无奈啊
 楼主| 发表于 2015-5-21 13:55:00 | 显示全部楼层
讨论技术啊,c#,js搞起啊。。。
发表于 2015-5-29 16:15:13 | 显示全部楼层
kuku_john 发表于 2015-5-21 13:55
讨论技术啊,c#,js搞起啊。。。

这么多年居然还记得^_^
话说,楼主还在做前端JavaScript吗?
 楼主| 发表于 2016-6-8 06:58:25 | 显示全部楼层
必须啊。。。升级了搞h5
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-6-23 00:41 , Processed in 0.109612 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表