_jquery دا ajax ئارقىلىق مەزمۇننى يۈكلەش دەرسلىكى
1-قەدەمدە بىز پاكىز بولغان ۋە ئاددى بولغان ئاساسلىق بۆلەكنى قۇرىمىز،بىزبۇبۆلەكنى container دەپ چاقىردۇق.
top:يەنى بۆلەك تىزىملىكىنى ئۆز ئىچىگە ئالىدۇ
  loading:يەنى يۈكلىنىش تەكچىسىنى ئۆز ئىچىگە ئالىدۇ
  content:يەنى نۆۋەتتىكى رايۇننىڭ مەزمۇنىنى ئۆچىگە ئالىدۇ
  ئەمدى بىز كودنى باشلايلى
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3. <head>  
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  5.     <meta name="keywords" content="yensdesign, tutorial, ajax, jquery, javascript, load content" />  
  6.     <meta name="description" content="How to load content via AJAX in jQuery - yensdesign.com"/>  
  7.     <title>How to load content via AJAX in jQuery. By yensdesign.com</title>  
  8.     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />  
  9. </head>  
  10. <body>  
  11.     <div id="container">  
  12.         <div id="top">  
  13.             <h1><a href="/">yensdesign - Tutorials, Web Design and Coding</a></h1>  
  14.             <ul id="menu">  
  15.                 <li id="home">Home</li>  
  16.                 <li id="news">News</li>  
  17.                 <li id="interviews">Interviews</li>  
  18.                 <li id="external">External</li>  
  19.             </ul>  
  20.             <span class="clear"></span>  
  21.         </div>  
  22.         <div id="loading">  
  23.             <img src="css/images/loading.gif" alt="Loading..." />  
  24.         </div>  
  25.         <div id="content">  
  26.             <h2>Home</h2>  
  27.             <p>  
  28.                 Lorem Ipsum is simply <a href="">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
  29.             </p>  
  30.             <p>  
  31.                 Lorem Ipsum is simply dummy text of the printing and <a href="">typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
  32.             </p>  
  33.         </div>  
  34.         <div id="footer">  
  35.             <p>Made by <a href="http://www.yensdesign.com">yensdesign.com</a>. We hope you find this tutorial useful for your personal projects :)</p>  
  36.         </div>  
  37.     </div>  
  38.     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>  
  39.     <script type="text/javascript" src="menu.js"></script>  
  40. </body>  
  41. </html>  
  42. </body>
مەزمۇننى كۆچۈرۈۋېلىشھىچقانداق ئالاھىدە ئىش يوق ،پەقەت ئوقۇشنى داۋاملاشتۇرسىڭزلا بولىد،css گە قاراڭ!
2-قەدەمدە css نى لايھىلەيمىز.
css نىڭ ئاساسلىق كودى مانا بۇيەردە،بىزنى بۇنى main.css دەپ چاقىردۇق!
  1.     @CHARSET "UTF-8";  
  2.     /******* GENERAL RESET *******/  
  3.     html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  
  4.     font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,  
  5.      tfoot, thead, tr, th, td {  
  6.     border: 0pt none;  
  7.     font-family: inherit;  
  8.     font-size: 100%;  
  9.     font-style: inherit;  
  10.     font-weight: inherit;  
  11.     margin: 0pt;  
  12.     padding: 0pt;  
  13.     vertical-align: baseline;  
  14.     }  
  15.     body{  
  16.         line-height: 14px;  
  17.         font-size: 12px;  
  18.         background: #fff;  
  19.         font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;  
  20.         margin: 0pt;  
  21.         cursor: default;  
  22.     }  
  23.     table{  
  24.         border-collapse: separate;  
  25.         border-spacing: 0pt;  
  26.     }  
  27.     caption, th, td{  
  28.         font-weight: normal;  
  29.         text-align: left;  
  30.     }  
  31.     blockquote:before, blockquote:after, q:before, q:after{  
  32.         content: "";  
  33.     }  
  34.     blockquote, q{  
  35.         quotes: "" "";  
  36.     }  
  37.     input, textarea, select{  
  38.         font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;  
  39.         font-size: 11px;  
  40.     }  
  41.     strong{  
  42.         font-weight: 700;  
  43.     }  
  44.     ul{  
  45.         list-style: outside;  
  46.     }  
  47.     a{  
  48.         cursor: pointer;  
  49.         color: #296ba5;  
  50.         text-decoration: none;  
  51.     }  
  52.     .clear{  
  53.         clear: both;  
  54.         height: 0;  
  55.         visibility: hidden;  
  56.         display: block;  
  57.     }  
  58.     /******* /GENERAL RESET *******/  
  59.     /******* REUSE *******/  
  60.     h1, h2, h3, h4, h5, h6{  
  61.         font-weight: 700;  
  62.         color: #6ea6fb;  
  63.         line-height: 1.8em;  
  64.     }  
  65.     h2{  
  66.         font-size: 22px;  
  67.     }  
  68.     /******* /REUSE *******/  
  69.     /******* CONTAINER *******/  
  70.     #container{  
  71.         width: 960px;  
  72.         margin: 0pt auto;  
  73.         color: #fff;  
  74.     }  
  75.     /******* /CONTAINER *******/  
  76.     /******* TOP *******/  
  77.     #top{  
  78.         margin: 0 auto;  
  79.         padding: 20px 0 0 0;  
  80.     }  
  81.     #top h1 a{  
  82.         background: transparent url(images/logo.jpg) no-repeat scroll left top;  
  83.         display: block;  
  84.         float: left;  
  85.         height: 46px;  
  86.         text-indent: -999999px;  
  87.         width: 205px;  
  88.     }  
  89.     /******* /TOP *******/  
  90.     /******* MENU *******/  
  91.     #top #menu{  
  92.         float: left;  
  93.         list-style-type: none;  
  94.         margin: 12px 0 0 26px;  
  95.     }  
  96.     #top #menu li{  
  97.         float: left;  
  98.         margin-right: 16px;  
  99.         text-transform: uppercase;  
  100.         color: #c2c2c2;  
  101.     }  
  102.     #top #menu li:hover{  
  103.         color: #6fa5fd;  
  104.         cursor: pointer;  
  105.     }  
  106.     /******* /MENU *******/  
  107.     /******* LOADING *******/  
  108.     #loading{  
  109.         text-align: center;  
  110.         visibility: hidden;  
  111.     }  
  112.     /******* /LOADING *******/  
  113.     /******* CONTENT *******/  
  114.     #content{  
  115.         color: #7e7e7e;  
  116.         margin: 0 0 20px 0;  
  117.         line-height: 1.3em;  
  118.         font-size: 11px;  
  119.     }  
  120.     #content p{  
  121.         margin-bottom: 0.7em;  
  122.     }  
  123.     #content a{  
  124.         font-weight: 700;  
  125.         color: #6fa5fd;  
  126.         border-bottom: 1px dotted #6fa5fd;  
  127.     }  
  128.     /******* /CONTENT *******/  
  129.     /******* FOOTER *******/  
  130.     #footer{  
  131.         background: #efefef;  
  132.         border: 1px solid #d0ccc9;  
  133.         padding: 10px;  
  134.         color: #7e7e7e;  
  135.         font-size: 11px;  
  136.         text-align: right;  
  137.     }  
  138.     /******* /FOOTER *******/  
مەزمۇننى كۆچۈرۈۋېلىشكۆرۈپ تۇرىۋاتىسىزكى بىز بۆلەكنىڭ تىزىملىكى ئۈچۈن link ئېلمىنتى ئىشلەتمىدۇق،بىنزىڭ ئۇنداق قىلىشمىزنىڭ ھاجىتى يوق،چۈنكى بىز بارلىق ئالاقىنى javascript ئارقىلىق كونترول قىلىمىز.
كىلىڭلار بالىلار ئەمدى بىز jquery قىسمىغا پىدائىيلارچە ئاتلىنايلى.
3-قەدەمدە بىز jquery ئارقىلق مەزمۇننى سېھرىلك ھالدا يۈكلەيمىز.
بىز يەنە سۆزلەيمىزكى بىزئىككى خىل ئۇسۇلدا مەزمۇننى يۈكلەيمىز:يەنى ئوخشاش ھۆججەتىكى ھەربىر رايۇننى جايلاشتۇرىمىز(section.html) ھەمدە بارلىق مەزمۇننى external.html دىن يۈكلەيمىز.
بىز ئاشۇ مەزمۇنى بىلەن ئىككى دانە سىرتقى ھۆججەت ھاسىل قىلىمىز(external) .
section.html بۇيەردە
  1.     <div id="section_home">  
  2.         <h2>Home</h2>  
  3.         <p>  
  4.             Lorem Ipsum is simply <a href="">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
  5.         </p>  
  6.         <p>  
  7.             Lorem Ipsum is simply dummy text of the printing and <a href="">typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
  8.         </p>  
  9.     </div>  
  10.       
  11.     <div id="section_news">  
  12.         <h2>News</h2>  
  13.         <p>  
  14.             We have released our forums, <a href="http://forums.yensdesign.com">check it out</a>!  
  15.         </p>  
  16.     </div>  
  17.       
  18.     <div id="section_interviews">  
  19.         <h2>Interviews section</h2>  
  20.         <p>  
  21.             We have interviewed Victor Espigares, creator of <a href="http://www.visualizeus.com">visualizeus</a>!  
  22.         </p>  
  23.     </div>  
مەزمۇننى كۆچۈرۈۋېلىشexternall.html بۇيەردە
  1. <div id="section_external">  
  2. <h2>External content!</h2>  
  3. In this case we are loading the External section from other external file, instead of use jQuery selectors in the sections.html file.</div>
مەزمۇننى كۆچۈرۈۋېلىشھەر بىر رايۇن ئۈچۈن ئوخشىمىغان بۆلەك ھاسىل قىلىش بىزگە ئۆزىمىز خالىغان مەزمۇننى يۈكلەشكە ياردەم بىرىدۇ،ئاساسلىق section.html ھۆججىتى ئۈچۈن
بىز ئۆزىمىزنىڭ menu.js ھۆججىتىگە قاراپ باقايلى ،ئەسلەڭكى بارلىق كودلار jquery ھادىسسىنىڭ ready سىدا بولىدۇ،جۈملىدىن فۇنكىسيە،چۈنكى بىز  jquery قوللانمىسنى ئۆزگەرگۈچى مىقداردا ئىشلىتىمىز،شۇنداقلا يەنە قايتىلايمەن،يازدىغان كودلار ready event دە بولىدۇ.
  1. $(document).ready(function(){  
  2.    // all the code goes here! including functions!!!  
  3. });
مەزمۇننى كۆچۈرۈۋېلىشئۆزگەرگۈچى مىقداردا jquery تاللىغۇچىسى ئىشلىتىلگەن ھەربىر قوللانمىنى ساقلايمىز.
بىز يۈكلەش تەكچىسىنى باشقۇرۇش ئۈچۈن ئىككى فۇنكىسيە ھاسىل قىلدۇق:يەنى hideloading() ۋە showloading(),بۇلار چىشتىلىق بولغان رايۇننى كۆرستىدۇ ۋە يۇشۇرىدۇ.
كودى بۇيەردە
  1. //يۈكلەش تەكچىسنى كۆرسىتىش  
  2. function showLoading(){  
  3.     loading  
  4.         .css({visibility:"visible"})  
  5.         .css({opacity:"1"})  
  6.         .css({display:"block"})  
  7.     ;  
  8. }  
  9. //يۈكلەش تەكچىسىنى يوشۇرۇش  
  10. function hideLoading(){  
  11.     loading.fadeTo(1000, 0);  
  12.     content.slideDown();  
  13. };
مەزمۇننى كۆچۈرۈۋېلىشتوغرا بولدىمۇ؟پەقەتلا تەقرىز!
بىز fadeOut نىڭ ئورنىغا fadeTo نى ئىشلەتتۇق چۈنكى fadeOut ھەرىكەت ئاخىرلاشقاندا display:none; نى قوللىنىدۇ،شۇڭلاشقا بىز تىزىملىك ھەربىر ئىلىمىنتدىكى Click event نى باشقۇرۇشىمىز كىرەك.
  1. //نى باشقۇرۇش click events  
  2. sections.click(function(){  
  3.     //show the loading bar  
  4.     showLoading();  
  5.     //load selected section  
  6.     switch(this.id){  
  7.         case "home":  
  8.             content.slideUp();  
  9.             content.load("sections.html #section_home", hideLoading);  
  10.             break;  
  11.         case "news":  
  12.             content.slideUp();  
  13.             content.load("sections.html #section_news", hideLoading);  
  14.             break;  
  15.         case "interviews":  
  16.             content.slideUp();  
  17.             content.load("sections.html #section_interviews", hideLoading);  
  18.             break;  
  19.         case "external":  
  20.             content.slideUp();  
  21.             content.load("external.html", hideLoading);  
  22.             break;  
  23.         default:  
  24.             //ئەگەر بۇيەردە تاللانغان رايۇن بولمىسا يۈكلەش تەكچىسىنى يورۇشۇ  
  25.             hideLoading();  
  26.             break;  
  27.     }  
  28. });
مەزمۇننى كۆچۈرۈۋېلىشبىز مەزمۇننى يۈكلىدۇق ۋە تاللانغان رايۇننى ئىزدىدۇق،شۇنداقلا بىز يۈكلەش تەكچىسىنى كۆرسىتىۋاتىمىز،بىز jquery تاللىغۇچىسىنى ئىزدەشكە ۋە سېرتقى ھۆججەتىكى (section.html)ئالاھىدە بۆلەكنى يۈكلەشكە ۋە مۇشۇ رايۇندىكى مەزمۇننى يۈكلەشكە ئىشلەتتۇق:يەنى home ,news,interviews قاتارلىقلار،يەنە باشقا تەرەپلەردە بىز external.htmlنىڭ بارلىق مەزمۇننى external(سېرتقى) رايۇنى ئۈچۈن يۈكلىدۇق.
شۇنداق قىلىپ بىزنىڭ jquery دا ajax ئارقىلىق مەزمۇن يۈكلەش دەرسىمىز ئاخرىلاشتى!
ئاللاھ خالىسا بۇ دەرسلىكنىڭ pdf نۇسخسى پات ئارىدا سىلەر بىلەن يۈز كۆرىشىدۇ!.
Smart tormahiri
blog counter
blog counter