<! DOCTYPE html> <Html> <Head> <Link rel = "stylesheet" href = "css/ystep.css"> </Head> <Body> <Br> <! -- Ystep container --> <Div class = "ystep1"> </div> <Br> <Div class = "ystep2"> </div> <Br> <Div class = "ystep3"> </div> <Br> <Div class = "ystep4"> </div> <! -- Introduce jquery --> <Script src = "js/jquery. min. js"> </script> <! -- Introduce the ystep plug-in --> <Script src = "js/ystep. js"> </script> <Script> // Find the container that needs to load ystep based on the jQuery selector // The loadStep method can initialize ystep. $ (". Ystep1"). loadStep ({ // Ystep appearance size // Optional values: small and large Size: "small ", // Ystep color scheme // Optional values: green and blue Color: "green ", // Steps in ystep Steps :[{ // Step name Title: "initiate ", // Step content (this content will be displayed when you move the cursor to this step node) Content: "Real-name users/public welfare organizations initiate projects" },{ Title: "review ", Content: "review project by Le donation platform staff" },{ Title: "Raising funds ", Content: "The donation project is launched to receive public donations" },{ Title: "execution ", Content: "The project performer carries out rescue operations offline" },{ Title: "completion ", Content: "Project performer's report on the use of donations" }] }); $ (". Ystep2"). loadStep ({ Size: "large ", Color: "green ", Steps :[{ Title: "initiate ", Content: "Real-name users/public welfare organizations initiate projects" },{ Title: "review ", Content: "review project by Le donation platform staff" },{ Title: "Raising funds ", Content: "The donation project is launched to receive public donations" },{ Title: "execution ", Content: "The project performer carries out rescue operations offline" },{ Title: "completion ", Content: "Project performer's report on the use of donations" }] }); $ (". Ystep3"). loadStep ({ Size: "small ", Color: "blue ", Steps :[{ Title: "initiate ", Content: "Real-name users/public welfare organizations initiate projects" },{ Title: "review ", Content: "review project by Le donation platform staff" },{ Title: "Raising funds ", Content: "The donation project is launched to receive public donations" },{ Title: "execution ", Content: "The project performer carries out rescue operations offline" },{ Title: "completion ", Content: "Project performer's report on the use of donations" }] }); $ (". Ystep4"). loadStep ({ Size: "large ", Color: "blue ", Steps :[{ Title: "initiate ", Content: "Real-name users/public welfare organizations initiate projects" },{ Title: "review ", Content: "review project by Le donation platform staff" },{ Title: "Raising funds ", Content: "The donation project is launched to receive public donations" },{ Title: "execution ", Content: "The project performer carries out rescue operations offline" },{ Title: "completion ", Content: "Project performer's report on the use of donations" }] }); $ (". Ystep1"). setStep (2 ); $ (". Ystep2"). setStep (5 ); $ (". Ystep3"). setStep (3 ); </Script> </Body> </Html> |