**************HTML***************
DROP/DOWN MENU http://www.w3schools.com/tags/att_option_value.asp
ROOT URL ใส่ ../ หน้าลิงค์ เช่น "../images/ajax-loader.gif"
Form ถ้าไม่มี action เมื่อ Submit มันจะเรียกตัวมันเองซ้ำ
ทำให้ Input form รองรับเฉพาะไฟล์นามสกุลที่กำหนด
< input type="file" name="file[]" id="filename" accept="image/gif, image/jpeg, image/png, application/pdf, .xlsx, .xls, .doc, .docx" multiple >
************CSS****************
FADEIN/FADEOUT for div http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load
ทำให้ใส (where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.)
div {
opacity: 0.5;
}
*************JAVA SCRIPT**************
ปัญหาการพัฒนาเว็บส่วนมาก คือ การไม่สามารถโหลดไฟล์ JQuery หรือ .js ได้
(Failed to load resource: the server responded with a status of 404)
ปกติจะเรียกกันแบบ
< script src="js/jquery.min.js" >< /script >
ให้เราเปลี่ยนมาใช้
< script src="<%=ResolveClientUrl("~/js/")%>jquery.min.js" type="text/javascript" >< /script >
1.FADEIN/FADEOUT for id element http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css
2.CHECK FORM VALIDATE(ajax) http://jqueryfordesigners.com/index.html%3Fp=6.html
3.Upload multiple file http://stackoverflow.com/questions/19295746/how-to-upload-multiple-files-using-php-jquery-and-ajax
4.Upload multiple file with interface https://github.com/blueimp/jQuery-File-Upload/wiki
5.Detect when select file in upload buttom
$("#file").change(function(){
//submit the form here
});
6.Auto click buttom
$('#cancel').trigger('click');
7.Click button to do function
< button onclick="myFunction()" >Click me< /button >
8.ส่งค่า POST จาก jquery ให้ไฟล์ php
$('#send').click(function(){
// var clickBtnValue = $(this).val();
var ajaxurl = 'http://mis.cp.eng.chula.ac.th/u54isi/indexTest.php', //ปลายทางรับ post
data = {'action': 'clickBtnValue','fromName':'poo'}; //ข้อมูลที่จะส่งไป post
$.post(ajaxurl, data, function (response) {
// Response div goes here.
alert(response);
});
})
9. เรียกใช้ function ตลอดเวลา ทุกๆ 10000ms หรือ 10วิ
setInterval(functionName, 10000);
10.get ค่าใน html ของ id ต่างๆ
var bar = $('#idname').html();
11.ส่งค่าด้วย post ไปเรียก method ใน url (php) ที่กำหนด ตัวอย่างเรียก get_info แล้วอ่านคืนมาเป็น info
$.ajax({
url: 'ajax',
data: 'action=get_info&value=' + $('#curriculum').val() ,
dataType: 'json',
type: 'post',
success: function (info) {
depart.value = info.depart;
degree.value = info.degree;
fu.value = info.fu;
}
});
12.Foreach ใน javascript
http://blog.levelup.in.th/2010/06/30/javascripts-foreach-foreach-%E0%B9%83%E0%B8%99-javascript/
13.จับว่าเลิก focus element นี้แล้ว
$('#newPassword,#confirmPassword').focusout(function () {
alert('kuy');
if($('#newPassword').val() != $('#confirmPassword').val()) {
// $('#saveChange').disabled = true;
}
});
14.การ disabled ปุ่ม
$("#saveChange").prop('disabled',true);
15.ทำให้ค่าภายใน element เป็น html ที่ต้องการ
$('#sa').html(str_html);
16.
$(document).ready(function () {
//function ที่ต้องการ
});
17.การทำปุ่มอัพไฟล์แบบสวยๆ โดย boostrap
< div class="col-md-2" >
< form enctype="multipart/form-data" method="POST" >
< span class="btn btn-default fileinput-button" style="width: 100%" >
< i class="glyphicon glyphicon-cloud-upload" aria-hidden="true" >< /i>
< span>Import data< /span >
< input type="file" name="studentfile" id="studentfile"/ >
< /span>
< /form>
< /div>
< style>
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
/* Fixes for IE < 8 */
@media screen\9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}
}
< /style>
18.เรียกใช้ฟังก์ชั่นเมื่อเวลาผ่านไป 3000ms
setTimeout(function(){ alert("Hello"); }, 3000);
19.ไม่ให้ form จำรหัส ใส่นี้ในส่วน
< ?php
echo '$("#password").attr("autocomplete", "off");';
echo 'setTimeout('."'".'$("#password").val("");'."'".', 500);';
? >
19. reload
< script type="text/javascript" >
location.reload();
< /script >
ไม่มีความคิดเห็น:
แสดงความคิดเห็น