ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก
css และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ
html ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป
ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript
jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
ตัวอย่าง การนำค่า จาก attribute ที่อยู่ใน element หนึ่ง ส่งไปให้กับ attribute ที่อยู่ในอีก element หนึ่ง
1.
โค้ด: เลือกทั้งหมด
<select class="selectpicker" id="name_player" name="">
<?php while ($r_play = mysqli_fetch_assoc($rstplay)) { // ดึงข้อมูลมาจากการ Query จากฐานข้อมูล (สามารถปรับเปลี่ยนได้ตามการใช้งาน)
<option value="<?php echo $r_play['play_id']; ?>" data-thumbnail="player_image/<?php echo $r_play['play_img'];?>" >
</option>
<?php } ?>
</select>
ตัวอย่าง : โคดส่ววนี้จะเป็นส่วนที่เป็น listbox สำหรับเลือกข้อมูล โดยในข้อมูลที่เลือกนั้นจะมีส่วนที่ที่เป็นรูปภาพด้วย รูปภาพ
Selection_999(2207).png
2.สร้าง tag ขึ้นมา เพื่อใช้สำหรับระบุตำแหน่งของ อีก attribute หนึ่งที่อยู่ต่าง element โดยจะระบุอยู่ที่ value
โค้ด: เลือกทั้งหมด
<input type="hidden" id="blockid" value="po_10">
3.สร้างปุ่มขึ้นมาเพื่อทำการกดยืนยัน สำหรับการส่งค่า
โค้ด: เลือกทั้งหมด
<div class="modal-footer">
<a class="btn btn-primary submita" >Submit</a>
<!-- <button type="submit" class="btn btn-primary" data-dismiss="modal">Submit</button> -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
4.สร้าง tag <script> ที่ด้านล่างข้อง tag html
<script>
------
</script>
5.สร้างฟังชั่น javascript ดังนี้
โค้ด: เลือกทั้งหมด
$('.submita').click(function(){
var selvalue = $('.selectpicker').val();
var blockid = $('#blockid').val();
var img = $('.selectpicker option:selected').attr('data-thumbnail');
var img_show = '<img src="./'+img+'" alt="Smiley face" height="42" width="42"><br>'
$('#'+blockid+' .setplayer').val(selvalue);
$('#'+blockid+' .showplayer').html(img_show);
$('#myModal').modal('hide');
});
ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2193-css-คืออะไร.html]css[/url] และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2026-html-คืออะไร.html]html[/url] ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป
ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript [url=https://www.mindphp.com/บทเรียนออนไลน์/สอน-jquery/2776-บทที่-1-jquery-คืออะไร.html]jquery[/url] หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
ตัวอย่าง การนำค่า จาก attribute ที่อยู่ใน element หนึ่ง ส่งไปให้กับ attribute ที่อยู่ในอีก element หนึ่ง
1.
[code]
<select class="selectpicker" id="name_player" name="">
<?php while ($r_play = mysqli_fetch_assoc($rstplay)) { // ดึงข้อมูลมาจากการ Query จากฐานข้อมูล (สามารถปรับเปลี่ยนได้ตามการใช้งาน)
<option value="<?php echo $r_play['play_id']; ?>" data-thumbnail="player_image/<?php echo $r_play['play_img'];?>" >
</option>
<?php } ?>
</select>
[/code]
ตัวอย่าง : โคดส่ววนี้จะเป็นส่วนที่เป็น listbox สำหรับเลือกข้อมูล โดยในข้อมูลที่เลือกนั้นจะมีส่วนที่ที่เป็นรูปภาพด้วย รูปภาพ
[attachment=0]Selection_999(2207).png[/attachment]
2.สร้าง tag ขึ้นมา เพื่อใช้สำหรับระบุตำแหน่งของ อีก attribute หนึ่งที่อยู่ต่าง element โดยจะระบุอยู่ที่ value
[code] <input type="hidden" id="blockid" value="po_10"> [/code]
3.สร้างปุ่มขึ้นมาเพื่อทำการกดยืนยัน สำหรับการส่งค่า
[code]
<div class="modal-footer">
<a class="btn btn-primary submita" >Submit</a>
<!-- <button type="submit" class="btn btn-primary" data-dismiss="modal">Submit</button> -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
[/code]
4.สร้าง tag <script> ที่ด้านล่างข้อง tag html
<script>
------
</script>
5.สร้างฟังชั่น javascript ดังนี้
[code]
$('.submita').click(function(){
var selvalue = $('.selectpicker').val();
var blockid = $('#blockid').val();
var img = $('.selectpicker option:selected').attr('data-thumbnail');
var img_show = '<img src="./'+img+'" alt="Smiley face" height="42" width="42"><br>'
$('#'+blockid+' .setplayer').val(selvalue);
$('#'+blockid+' .showplayer').html(img_show);
$('#myModal').modal('hide');
});
[/code]