บทความแรกผมได้แนะนำ EASYUI ให้รู้จักกันไปแล้ว รอบนี้เรามา ติดและใช้งาน Messager plugin กันครับ ก่อนอื่นให้ไป
download และแตกไฟล์ไว้ใน project ของเราได้เลยครับ
- <head>
- <meta charset="UTF-8">
- <title>Basic Messager - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
- <link rel="stylesheet" type="text/css" href="../demo.css">
- <script type="text/javascript" src="../../jquery.min.js"></script>
- <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
- </head>
ที่ส่วนของ <head> ให้ใส่ตามโค้ดด้านบน
ดูที่โค้ดด้านล่าง
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Basic Messager - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="http://jeasyui.com/easyui/themes/icon.css">
- <link rel="stylesheet" type="text/css" href="http://jeasyui.com/css/demo1.css">
- <script type="text/javascript" src="http://jeasyui.com/easyui/jquery.min.js"></script>
- <script type="text/javascript" src="http://jeasyui.com/easyui/jquery.easyui.min.js"></script>
- </head>
- <body>
- <h2>แสดงข้อความ</h2>
- <div style="margin:20px 0;">
- <a href="#" class="easyui-linkbutton " id="msg" >แสดงข้อความ</a>
-
- </div>
- <script type="text/javascript">
- $('#msg').click(function(){
- $.messager.alert('แจ้งเตือน','สวัสดีชาวโลก');
- });
- </script>
- </body>
- </html>
เมื่อเข้าหน้าไฟล์ที่เราสร้างไว้ แล้วกดปุ่ม แสดงข้อความก็จะได้ alert ข้อความขึ้นมาให้เราดูเหมือนกับรูปด้านล่าง ง่ายหรือเปล่าครับ
บทความนี้หวังว่าจะมีประโยชน์กลับเพื่อน ๆ ทุกคนนะครับคราวหน้าจะมาแนะนำ plugin ของ easyui ต่างอื่น ๆ ให้ดูกันครับ
demo
ความคิดเห็น
แสดงความคิดเห็น