Как добавить действие onclick на прямоугольник, который меняет цвет для выбранной вкладки? - PullRequest
Новая
       1

Как добавить действие onclick на прямоугольник, который меняет цвет для выбранной вкладки?

0 голосов
/ 07 января 2012

Мне нужно добавить действие, онклик изменит его цвет (на серый). И тогда он будет оставаться серым до тех пор, пока не будет нажат на другую вкладку.

Я хочу показать вкладку в выбранном состоянии (имея серый цвет). Если вы щелкнете по другой вкладке, ее цвет изменится на серый, а ранее щелкните цвет вкладки, изменив ее на белый.

Это часть моего кода: enter image description here 

        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
        <style type="text/css" media="screen">
            #canvas {
                height: 300px;
                left: 50%;
                margin: -150px 0 0 -300px;
                position: absolute;
                top: 50%;
                width: 600px;
            }
            #paper {
                height: 300px;
                left: 0;
                position: absolute;
                top: 0;
                width: 300px;
            }
            #nsw, #vic, #wa, #sa, #nt, #qld, #tas {
                display: none;
                height: 400px;
                overflow: auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 300px;
            }
            h2 {
                text-align: center;
            }
        </style>
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var R = Raphael("paper", 700, 700);
            var attr = {
                fill: "#333",
                stroke: "#666",
                "stroke-width": 1,
                "stroke-linejoin": "round"
            };
            var aus = {};
            var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10;
            aus.nsw = R.rect(outsideRectX1+40, outsideRectY1+70, 120, 40,0);
            aus.vic = R.rect(outsideRectX1+160, outsideRectY1+70, 120, 40,0);
            aus.wa = R.rect(outsideRectX1+280, outsideRectY1+70, 120, 40,0);
            aus.sa = R.rect(outsideRectX1+400, outsideRectY1+70, 120, 40,0);

            var text3=R.text(outsideRectX1+75, outsideRectY1+85,"tab1").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'});
var text4=R.text(outsideRectX1+195, outsideRectY1+85,"tab2").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'});
var text5=R.text(outsideRectX1+315, outsideRectY1+85,"tab3").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'});
var text6=R.text(outsideRectX1+435, outsideRectY1+85,"tab4").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'});

            var current = null;
            for (var state in aus) {
                aus[state].color = Raphael.getColor();
                (function (st, state) {
                    st[0].style.cursor = "pointer";
                    st[0].click = function () {
                        current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                        st.animate({fill: st.color, stroke: "#ccc"}, 500);
                        st.toFront();
                        R.safari();
                        document.getElementById(state).style.display = "block";
                        current = state;
                    };

                })(aus[state], state);
            }
        };

        </script>
    </head>
    <body>
        <div id="canvas">
            <div id="paper"></div>
            <div id="nsw"> </div>
            <div id="vic">  </div>
            <div id="wa"></div>
            <div id="sa">             

        </div>

        </div>

    </body>
</html>

1 Ответ

0 голосов
/ 10 января 2012

Вот дистиллированная версия вашего кода, я удалил ненужные части, чтобы упростить работу: 

var R = Raphael("paper", 700, 700);
var aus = {};
aus.nsw = R.set()
aus.vic = R.set()
aus.wa = R.set()
aus.sa = R.set()
var boxattrs = {'cursor': 'pointer', 'fill' : "#fff"}
var attrs = {fill: '#000000', 'font-family':'Verdana', 'font-size':'14px', 'font-weight': 'bold', 'cursor': 'pointer'}
var outsideRectX1=30.5, outsideRectY1=30.5,outsideRectX2=220.5, outsideRectY2=480.5, outsideRectR=10.5;
var i = 0;

for (state in aus) {
  aus[state].push(R.rect((outsideRectX1+90)*i+80, outsideRectY1+70, 120, 40,0).attr(boxattrs));
  aus[state].push(R.text((outsideRectX1+90)*i+115, outsideRectY1+85,"tab" + (i+1)).attr(attrs));
  aus[state].click(highlight)
  i++;
}

function highlight() {
   for (state in aus) {
     if(aus[state][0].attr("fill") == "#CCCCCC") {
       aus[state][0].animate({fill: "#FFFFFF", "stroke": "#000"}, 300)
     }
   }
   node = (this.type == "rect") ? this : this.prev
   node.animate({fill: "#CCCCCC", "stroke": "#CCC"}, 300)
}

Вы можете посмотреть его вживую здесь http://jsfiddle.net/xYfXE/

...