टेबल बटन पर क्लिक j-क्वेरी निर्दिष्ट स्थान पर ले जाता है - और फिर वापस ले जाता है

वोट
3

मैं 4x4 बटन की जरूरत है, और के बाद से मैं HTML में आदि नया हूँ, मैं आसान है, लेकिन पदावनत तालिका का उपयोग करने का फैसला किया। कारण मेरे लिए का उपयोग कर एक premade ऑनलाइन पाया मानते हुये, मैं एक नए संस्करण, कि मानते हुये (यह पुराने एक के साथ नहीं खुलेगा) फिट करने के लिए मेरी Jquery-फ़ाइल बदलना पड़ा। पूरे स्टाइलशीट बदल गया है, लेकिन यह है कि असली समस्या नहीं है। जब मैं यह मानते हुये खोलने के लिए मेरी बटन दबाते हैं, मेरी मेज क्या मूल रूप से जे एस फ़ाइल में मेरे द्वारा निर्दिष्ट किया गया था करने के लिए ले जाता है। फिर जब मैं यह मानते हुये बंद करते हैं, इसे वापस बदलने के आधे सेकंड लेता है।
क्यों मेरी जे एस (jQuery कोड) पोजीशनिंग नई jQuery के साथ शुरू से ही लागू नहीं होता?

<table id=tablediv>
<tbody>
 <tr>
    <td id=buttonfield style=width:25%;><button type=button id=button1class=button>1</button></td>
    <td style=width:25%;><button onclick=test() type=button id=button2class=button>2</button></td>
    <td style=width:25%;><button type=button id=button3class=button>3</button></td>
    <td style=width:25%;><button  type=button id=button4class=button>4</button></td>
      </tr>


  <tr>
       <td id=buttonfield2 style=width:25%;><button type=button id=button1class=button>5</button></td>
     <td style=width:25%;><button type=button id=button1class=button>6</button></td>
     <td style=width:25%;><button type=button id=button1class=button>7</button></td>
     <td style=width:25%;><button type=button id=button1class=button>8</button></td>
  </tr>

        <tr>
     <td id=buttonfield3 style=width:25%;><button type=button id=button1class=button>9</button></td>
     <td style=width:25%;><button type=button id=button1class=button>10</button></td>
     <td style=width:25%;><button type=button id=button1class=button>11</button></td>
     <td style=width:25%;><button type=button id=button1class=button>12</button></td>
  </tr>

  <tr>
       <td id=buttonfield4 style=width:25%;><button type=button id=button1class=button>13</button></td>
     <td style=width:25%;><button type=button id=button1class=button>14</button></td>
     <td style=width:25%;><button type=button id=button1class=button>15</button></td>
     <td style=width:25%;><button type=button id=button1class=button>16</button></td>
  </tr>

सीएसएस:

#tablediv {
    width:100%;
    height:80%;
}
#button1, #button2, #button3, #button4 {
    width:100%;
    height:100%; 
}
table {
    width:100%;
}

जे एस:

totalWidth =$('body').width();
totalHeight=$('body').height();

menuLength=(totalWidth*0.03);

$(#tablediv).css(padding-top, menuLength+(menuLength*0.50));
$(#buttonfield).css(height, menuLength+menuLength);
$(#buttonfield2).css(height, menuLength+menuLength);
$(#buttonfield3).css(height, menuLength+menuLength);
$(#buttonfield4).css(height, menuLength+menuLength); 

यह वही बटन करता है:

$(#button4).click(function() {
    $.mobile.changePage(fileBrowser.html);
});

मैं Jquery.js (jQuery जावास्क्रिप्ट पुस्तकालय v1.9.1) से करने के लिए अपने Jquery बदल

<link type=text/css href=jquery.mobile-1.3.0.min.css rel=stylesheet /> 
<script src=jquery-1.9.1.min.js type=text/javascript></script>  
<script src=jquery.mobile-1.3.0.min.js type=text/javascript></script>  

वर्ष jQuery फ़ाइल के साथ मूल लेआउट। (यह कैसे देखने के लिए माना जाता है)
मूल
नई jQuery के साथ लेआउट
नई
इस पूरे लेआउट चाल - अब, दूसरा मैं एक बटन दबाएँ मानते हुये खोलने के लिए (के बटन 1 मान लीजिए)। जब मैं यह मानते हुये बंद करते हैं, इसे वापस Picture2 लिए हो जाता है।
नई

क्या समस्या हो सकती है? मैं नहीं बल्कि, इस को हल करने के 4x4 divs (मेरी पहली लेआउट की तरह) बनाने के लिए कोशिश कर रहा से चाहते हैं, क्योंकि मैं तो बस एचटीएमएल-GUIs पर सबसे अच्छा अभी तक नहीं कर रहा हूँ जाएगा।

21/05/2013 को 18:12
उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
1

सबसे पहले, वेब विकास की अद्भुत दुनिया में आपका स्वागत है!

अब, किसी HTML तत्व में आईडी गुण प्रति पृष्ठ अद्वितीय होना चाहिए। आपका td तत्वों 'आईडी गुणों को अद्वितीय नहीं हैं। तुम भी इनलाइन स्टाइल से बचने की कोशिश, और के रूप में ज्यादा के रूप में आप कर सकते हैं सीएसएस फ़ाइल का उपयोग करना चाहिए।

मैं तुम्हारे लिए एक उदाहरण jsfiddle जहाँ मैं jQuery का उपयोग तालिका में पंक्तियों और स्तंभों की संख्या प्राप्त करने कर दिया है, और फिर ऊंचाई बटन के गद्दी की स्थापना। इस तरह आप जोड़ सकते हैं या आप के रूप में कृपया बटन निकाल सकते हैं, और jQuery कोड यकीन है कि बटन समान रूप से फैले हुए हैं कर देगा।

नोट: यह केवल जब तक प्रत्येक पंक्ति में कोशिकाओं की संख्या बराबर हैं काम करता है।

JsFiddle के लिए लिंक: http://jsfiddle.net/erichfosse/Qqhh2/6/

कोड:

HTML:

<table id="tablediv">
<tbody>
    <tr>
        <td><button type="button" class="button">1</button></td>
        <td><button type="button" class="button">2</button></td>
        <td><button type="button" class="button">3</button></td>
        <td><button type="button" class="button">4</button></td>
    </tr>

    <tr>
         <td><button type="button" class="button">5</button></td>
         <td><button type="button" class="button">6</button></td>
         <td><button type="button" class="button">7</button></td>
         <td><button type="button" class="button">8</button></td>
    </tr>

    <tr>
        <td><button type="button" class="button">9</button></td>
        <td><button type="button" class="button">10</button></td>
        <td><button type="button" class="button">11</button></td>
        <td><button type="button" class="button">12</button></td>
    </tr>

    <tr>
        <td><button type="button" class="button">13</button></td>
        <td><button type="button" class="button">14</button></td>
        <td><button type="button" class="button">15</button></td>
        <td><button type="button" class="button">16</button></td>
    </tr>
</tbody>

सीएसएस:

#tablediv {
    width: 100%;
}

जावास्क्रिप्ट:

var totalWidth = $('body').width();
var totalHeight = $('body').height();

var rows = $('tr').size();
var columns = $('td').size()/$('tr').size();

var distanceToNextButton = 8; // Adjust this to your needs
var leftOverVerticalSpace = 23; // Increase the number subtracted to make room for more stuff
var buttonHeight = (totalHeight/rows) - leftOverVerticalSpace; 
var buttonWidth = (totalWidth/columns) - distanceToNextButton;
var buttonVerticalPadding = (buttonHeight/2) - 8;
var buttonHorizontalPadding = (buttonWidth/2) - 8;

$(".ui-btn-inner").css("padding-top", buttonVerticalPadding);
$(".ui-btn-inner").css("padding-right", buttonHorizontalPadding/2);
$(".ui-btn-inner").css("padding-bottom", buttonVerticalPadding);
$(".ui-btn-inner").css("padding-left", buttonHorizontalPadding/2);
$(".ui-btn").css("height", buttonHeight);
$(".ui-btn").css("width", buttonWidth);
26/07/2013 को 15:34
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more