Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,482

HOME > PHP > PHP Forum > สอบถามเกี่ยวกับวิธีเขียน loading ของ isotope filter หน่อยครับ



 

สอบถามเกี่ยวกับวิธีเขียน loading ของ isotope filter หน่อยครับ

 



Topic : 135610



โพสกระทู้ ( 118 )
บทความ ( 0 )



สถานะออฟไลน์




คือ ผมอยากจะเพิ่มตัว loading เป็นพวก font awesome spin เข้าไปในตัวของ isotope filter เมื่อมีการกด checkbox ก็ให้มีการขึ้น loading ขึ้นมา เเล้วก็เเสดงข้อมูล สาเหตุที่ผมอยากจะเพิ่มตัว loading เข้าไปเนื่องจาก เมื่อใช้ตัว function ของisotope พวกข้อมูลที่อยู่ด้านล่างๆ เราจะไม่สามารถรู้ได้เลยว่ามันทำงานหรือเปล่า เวลาที่เรากด checkbox เลือก (ซึ่งจริงๆทางฝั่งโปรเเกรมมันก็ทำนั้นเเหละ เเต่ของมองในมุน user ละกันครับ) ซึ่งผมไม่เเน่ใจว่าสามารถที่จะเพิ่มตัว loading เข้าไปได้หรือเปล่า รบกวนขอคำเเนะนำ วิธีเขียนเพิ่มเติมหน่อยครับ

***ตัวอย่าง code ขอยกตัวอย่างของเว็ปไซต์นี้นะครับ เพื่อให้สามารถแก้ไขเเละใช้งานได้

https://codepen.io/desandro/pen/btFfG

Code (PHP)
body {
  font-family: sans-serif;
}

.item {
  width: 80px;
  height: 80px;
  padding: 5px;
  margin: 5px;
  color: white;
  float: left;
}

p {
  margin: 0;
}

#filter-display {
  font-size: 18px;
  padding: 0.5em;
  border: 1px solid #CCC;
  color: blue;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; color: black; }



Code (PHP)
<h1>Isotope combination filters with checkboxes</h1>

<div id="options">
  <div class="option-set" data-group="brand">
    <input type="checkbox" value=""        id="brand-all" class="all" checked /><label for="brand-all">all brands</label>
    <input type="checkbox" value=".brand1" id="brand1" /><label for="brand1">brand1</label>
    <input type="checkbox" value=".brand2" id="brand2" /><label for="brand2">brand2</label>
    <input type="checkbox" value=".brand3" id="brand3" /><label for="brand3">brand3</label>
    <input type="checkbox" value=".brand4" id="brand4" /><label for="brand4">brand4</label>
  </div>
  <div class="option-set" data-group="type">
    <input type="checkbox" value=""        id="type-all" class="all" checked /><label for="type-all">all types</label>
    <input type="checkbox" value=".type1" id="type1" /><label for="type1">type1</label>
    <input type="checkbox" value=".type2" id="type2" /><label for="type2">type2</label>
    <input type="checkbox" value=".type3" id="type3" /><label for="type3">type3</label>
    <input type="checkbox" value=".type4" id="type4" /><label for="type4">type4</label>
  </div>
  <div class="option-set" data-group="color">
    <input type="checkbox" value=""        id="color-all" class="all" checked /><label for="color-all">all colors</label>
    <input type="checkbox" value=".red" id="red" /><label for="red">red</label>
    <input type="checkbox" value=".blue" id="blue" /><label for="blue">blue</label>
    <input type="checkbox" value=".green" id="green" /><label for="green">green</label>
    <input type="checkbox" value=".yellow" id="yellow" /><label for="yellow">yellow</label>
  </div>
  <div class="option-set" data-group="size">
    <input type="checkbox" value=""        id="size-all" class="all" checked /><label for="size-all">all sizes</label>
    <input type="checkbox" value=".uk-size8" id="uk-size8" /><label for="uk-size8">uk-size8</label>
    <input type="checkbox" value=".uk-size9" id="uk-size9" /><label for="uk-size9">uk-size9</label>
    <input type="checkbox" value=".uk-size10" id="uk-size10" /><label for="uk-size10">uk-size10</label>
    <input type="checkbox" value=".uk-size11" id="uk-size11" /><label for="uk-size11">uk-size11</label>
  </div>
</div>

<p id="filter-display"></p>

<div id="container"></div>



Code (PHP)
/*jshint browser:true, undef: true, unused: true, jquery: true */

var $container;
var filters = {};

$(function(){

  $container = $('#container');

  createContent();

  var $filterDisplay = $('#filter-display');

  $container.isotope();
  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );

    var comboFilter = getComboFilter( filters );

    $container.isotope({ filter: comboFilter });

    $filterDisplay.text( comboFilter );
  });

});


var data = {
  brands: 'brand1 brand2 brand3 brand4'.split(' '),
  productTypes: 'type1 type2 type3 type4'.split(' '),
  colors: 'red blue yellow green'.split(' '),
  sizes: 'uk-size8 uk-size9 uk-size10 uk-size11'.split(' ')
};

function createContent() {
  var brand, productType, color, size;
  var items = '';
  // dynamically create content
  for (var i=0, len1 = data.brands.length; i < len1; i++) {
    brand = data.brands[i];
    for (var j=0, len2 = data.productTypes.length; j < len2; j++) {
      productType = data.productTypes[j];
        for (var l=0, len3 = data.colors.length; l < len3; l++) {
        color = data.colors[l];
        for (var k=0, len4 = data.sizes.length; k < len4; k++) {
          size = data.sizes[k];
          var itemHtml = '<div class="item ' + brand + ' ' +
            productType + ' ' + color + ' ' + size + '">' +
            '<p>' + brand + '</p>' +
            '<p>' + productType + '</p>' +
            '<p>' + size + '</p>' +
            '</div>';
            items += itemHtml;
        }
      }
    }
  }

  $container.append( items );
}


function getComboFilter( filters ) {
  var i = 0;
  var comboFilters = [];
  var message = [];

  for ( var prop in filters ) {
    message.push( filters[ prop ].join(' ') );
    var filterGroup = filters[ prop ];
    // skip to next filter group if it doesn't have any values
    if ( !filterGroup.length ) {
      continue;
    }
    if ( i === 0 ) {
      // copy to new array
      comboFilters = filterGroup.slice(0);
    } else {
      var filterSelectors = [];
      // copy to fresh array
      var groupCombo = comboFilters.slice(0); // [ A, B ]
      // merge filter Groups
      for (var k=0, len3 = filterGroup.length; k < len3; k++) {
        for (var j=0, len2 = groupCombo.length; j < len2; j++) {
          filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
        }

      }
      // apply filter selectors to combo filters for next group
      comboFilters = filterSelectors;
    }
    i++;
  }

  var comboFilter = comboFilters.join(', ');
  return comboFilter;
}

function manageCheckbox( $checkbox ) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[ group ];
  if ( !filterGroup ) {
    filterGroup = filters[ group ] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if ( isAll ) {
    delete filters[ group ];
    if ( !checkbox.checked ) {
      checkbox.checked = 'checked';
    }
  }
  // index of
  var index = $.inArray( checkbox.value, filterGroup );

  if ( checkbox.checked ) {
    var selector = isAll ? 'input' : 'input.all';
    $checkbox.siblings( selector ).removeAttr('checked');


    if ( !isAll && index === -1 ) {
      // add filter to group
      filters[ group ].push( checkbox.value );
    }

  } else if ( !isAll ) {
    // remove filter from group
    filters[ group ].splice( index, 1 );
    // if unchecked the last box, check the all
    if ( !$checkbox.siblings('[checked]').length ) {
      $checkbox.siblings('input.all').attr('checked', 'checked');
    }
  }

}





Tag : PHP, HTML5, JavaScript, Ajax, jQuery









ประวัติการแก้ไข
2020-10-08 14:40:04
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-10-08 14:39:48 By : worapong39 View : 96 Reply : 3
 

 

No. 1



โพสกระทู้ ( 1,447 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ดูอันนี้ครับ มีตัวอย่างให้แล้ว แค่ทำใน click/change event
https://carlosbonetti.github.io/jquery-loading/






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-08 14:56:37 By : PhrayaDev
 


 

No. 2



โพสกระทู้ ( 118 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-10-08 14:56:37
รายละเอียดของการตอบ ::
ส่วน loading สามารถเพิ่มเข้าไปได้เรียบร้อยเเล้วครับ ขอสอบถามเพิ่มเติมเกี่ยวกับ วิธีการเลือก checkbox เพื่อให้ตรวจสอบ min กับ max ถ้าตามตัวอย่างลิ้ง isotope ที่ผมแปะไว้ ถ้าหากผมเลือก brand 1 กับ เลือก brand 3 ถ้าตามโปรเเกรม มันก็จะเเสดง เฉพาะ ค่าที่เลือกไว้ เเต่้าหากต้องการจะเพิ่มลูกเล่น เข้าไป คือเมื่อกด ที่ brand 1 กับ brand 3 ก็ให้มีการติ๊กเลือก brand 2 ไปด้วย ตรงนี้พอจะมีเเนวทางหรือเปล่าครับ


s
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-08 17:38:27 By : worapong39
 

 

No. 3



โพสกระทู้ ( 1,447 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

แนวทางก็ศึกษา jQuery&JavaScript ให้เข้าใจครับ

ใน change event
Code (JavaScript)
var $checkbox = $( jQEvent.target );
var grp = $checkbox.parent().find('input');
if (grp[1].checked && !grp[2].checked && grp[3].checked && grp[2].checked != $checkbox.prop('checked')) {
  grp.eq(2).click();
}
// ...



ประวัติการแก้ไข
2020-10-08 20:08:04
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-08 20:05:39 By : PhrayaDev
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเกี่ยวกับวิธีเขียน loading ของ isotope filter หน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่