मैं एक ऐप दिखाने के लिए एक वेबसाइट बना रहा हूं और उपयोगकर्ताओं को ऐप की विभिन्न विशेषताओं को देखने के लिए iPhone मॉकअप के माध्यम से क्लिक करने की अनुमति देना चाहता हूं।
मैं एक iPhone उपरिशायी है, एक के रूप में रखेपृष्ठभूमि-छवि, (.iphone) और एक स्क्रीन ग्रैब, जिसे पृष्ठ पर एक पृष्ठभूमि-छवि, (.स्क्रीन) के रूप में भी रखा गया है, लेकिन चाहते हैं कि उपयोगकर्ताओं को यह निर्दिष्ट करने में सक्षम होना चाहिए कि विशिष्ट बटन क्लिक करके स्क्रेंगराब क्या दिखाया गया है।
मैं स्वयं JQuery से परिचित नहीं हूं, लेकिन मुझे बताया गया है कि यह इसका एक संभावित समाधान होगा। मैं इसे कैसे प्राप्त करूंगा? मेरा कोड ... ...
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
किसी भी तरह की सहायता का स्वागत किया जाएगा।
संपादित करें: मैं "कुछ इसी तरह का एक उदाहरण मिला। यहाँ यह है ...संपर्क। एक थंबनेल पर क्लिक करें और यह iPhone पर दिखाता है।
उत्तर:
उत्तर № 1 के लिए 1मैं शायद इसे इस प्रकार सेट कर रहा हूँ:
<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>
<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$(".screenshots li").click(function() {
$(".fullsize div").hasClass($(this).attr("class")).css("background-image", "imgurl"));
});
</script>
उत्तर № 2 के लिए 1
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots"><a href="#" id="scr1">Screen 1</a></li>
<li class="screenshots"><a href="#" id="scr2">Screen 2</a></li>
</ul>
<script>
$(".screenshots a").click(function(){
switch($(this).attr("id")){
case "src1":
$(".iphone").css("background-image","url("image1.png")");
break;
case "src2":
$(".iphone").css("background-image","url("image2.png")");
break;
}
});
</script>
जवाब के लिए 0 № 3
$("li").click(function(){
$("div").css("background-image", "image/url/here.ext");
)};
जवाब के लिए 0 № 4
शब्दार्थ, आपके मार्कअप की तरह दिखना चाहिए:
<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>
<ul id="screenshot-nav">
<li><a href="#iphone">Screen 1</a></li>
<li><a href="#screen">Screen 2</a></li>
</ul>
यह एक क्लिक घटना को जोड़ने के बजाय वास्तविक लिंक का उपयोग करने के लिए अधिक उपयुक्त है li। इसके अलावा, इसे इस तरह से करने से कार्यक्षमता को जावास्क्रिप्ट के बिना भी काम करने की अनुमति मिलती है, जैसा कि बहुत कम से कम, उपयोगकर्ता बस सही स्क्रीनशॉट पर "कूद" जाएगा।
उस जगह के साथ, निम्नलिखित jQuery काम करना चाहिए:
$("#screenshot-nav a").click(function(){
$(".screenshot").hide();
$($(this).attr("href")).show();
});
हालाँकि, जब से आप इसे एक iPhone के लिए बना रहे हैं, आपको संभवतः jQuery के मोबाइल में देखना चाहिए, इसके बजाय, और विशेष रूप से touch इवेंट हैंडलर, के बजाय click.
जवाब के लिए 0 № 5
मैं एक एकल jQuery क्लिक हैंडलर का सुझाव देता हूं जो प्रत्येक के लिए वांछित छवि पृष्ठभूमि सेट कर सकता है:
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$(".screenshots").click(function(){
$(".screen").css("background-image", $(this).data("backgroundurl"));
});
</script>