تطبيق للموقع ديالك ب jquery mobile

تطبيق للموقع ديالك ب jquery mobile


فأول تطبيق ب jquery mobile ولي اختارينا أنه يكون بسيط كبداية في إنتظار التطبيقات القادمة الي غادي تكون أكثر تعقيد غادي نقادو تطبيق خاص بموقع إلكتروني فالمهم هنا هو نتعلموا أساسيات برمجة التطبيقات ب jquery mobile والإستئناس بها.

نظرة سريعة بالفيديو

1- إنشاء مشروع جديد وإضافة الملفات الرئيسية

فكيف شفنا فالفيديو منبعد تحميل thème لي اختاريتي غادي تفتح الملف index.html فالمتصفح ديالك منبعد غادي نزيدو عليه تغييرات فأول حاجة :
- كنزيد الصفحة الرئيسية لي كنحددها ف jquery ب data-role لي كنعطيها page وكنعطيها ل id home منبعد كنحدد ل header ديال ل page دائما ب data-role.
- فوسط ل header كنزيد لقائمة لي كنحددها ب data-role navbar منبعد فوسطها كنزيد liste لي فيها كنزيد الروابط لي كنعطيهم الأيقونات لي غادي ياخدو بال data-icon ونوع ل animation لي غادي يدير ملي نضغط عليه ب data-transition وفل href كنعطيهم ل id ديال الصفحة الرئيسية والصفحات الأخرين لي غادي نزيد منبعد.
- ثم عندي data-role main لي فيها كيكون المحتوى ديال الصفحة ولي فوسطها زدت صورة وعطيتها class ui-shadow لي فقط كتزيدها واحد الظل.
- منبعد عندي ال footer لي كنحددو ب data-role footer ولي فيه روابط كيديو لمواقع التواصل الإجتماعي.
الكزد لي زدنا هو :

                                <html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website App</title>
	<link rel="stylesheet" href="css/blulime.min.css" />
	<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<div data-role="page" id="home">
		<div data-role="header">
			<h1>DCoding</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-transition="slide" data-icon="home">Accueil</a></li>
					<li><a href="#courses" data-transition="slide" data-icon="bullets">Cours</a></li>
					<li><a href="#contact" data-transition="slide" data-icon="mail">Contact</a></li>
				</ul>
			</div>
		</div>
		<div data-role="main" class="ui-content">
			<div class="ui-shadow">
				<img src="css/images/logo.jpg" alt="">
			</div>
		</div>
		<div data-role="footer" class="ui-content">
			<h3>DCoding©2018</h3>
			<div class="center">
				<a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
				<a href="#"><i class="fab fa-twitter-square fa-2x"></i></a>
				<a href="#"><i class="fab fa-youtube-square fa-2x"></i></a>
			</div>
		</div>
	</div>
                            

2- إضافة الكود الخاص بعرض الدروس

منبعد كنزيد الصفحة الخاصة بعرض الدروس فهاد الكود كامل ف index.html غير انا قسمت باش تفهمو كل صفحة على حدة.
فعندي مرة أخرى data-role page لي كنزيد بها صفحة كنعطيها  id courses ونفس الشي لي درنا فالصفحة الرئيسية كنزيد ل header والروابط.
منبعد عندي data-role main فين كاين المحتوى الرئيسي ولي فيه data-role listview لي كنزيد بها liste ولي فيها كنزيد الدروس لي فيهم الصورة والعنوان والتفاصيل نتا ممكن تزيد اي حاجة بغيتها.
منبعد عندي ل footer ولي هو نفسوا لي شفنا فالكود السابق.
تتمة الكود :

                                <div data-role="main" class="ui-content">
			<div data-role="listview">
				<li>
					<img src="css/images/html.jpg" alt="">
					<h3>Html & Css</h3>
					<p>cours html & css</p>
					<span class="blue"><i class="fa fa-arrow-right"></i></span>
				</li>
				<li>
					<img src="css/images/js.jpg" alt="">
					<h3>Javascript</h3>
					<p>cours javascript</p>
					<span class="blue"><i class="fa fa-arrow-right"></i></span>
				</li>
				<li>
					<img src="css/images/php.jpg" alt="">
					<h3>Php</h3>
					<p>cours php</p>
					<span class="blue"><i class="fa fa-arrow-right"></i></span>
				</li>
				<li>
					<img src="css/images/lvr.jpg" alt="">
					<h3>Laravel</h3>
					<p>cours laravel</p>
					<span class="blue"><i class="fa fa-arrow-right"></i></span>
				</li>
				<li>
					<img src="css/images/android.jpg" alt="">
					<h3>Android</h3>
					<p>cours android</p>
					<span class="blue"><i class="fa fa-arrow-right"></i></span>
				</li>
			</div>
		</div>
		<div data-role="footer" class="ui-content">
			<h3>DCoding©2018</h3>
			<div class="center">
				<a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
				<a href="#"><i class="fab fa-twitter-square fa-2x"></i></a>
				<a href="#"><i class="fab fa-youtube-square fa-2x"></i></a>
			</div>
		</div>
	</div>
                            

3- إضافة الكود الخاص بعرض فورم ل contact

منبعد كنزيد الصفحة الخاصة بعرض الفورم ديال ل contact 
فعندي مرة أخرى data-role page لي كنزيد بها صفحة كنعطيها  id contact ونفس الشي لي درنا فالصفحة السابقة كنزيد ل header والروابط.
منبعد عندي data-role main فين كاين المحتوى الرئيسي ولي فيه ل form لي عادية ب html.
منبعد كنزيد data-role collapsible لي ملي كنكليكي عليها كتعرض listview فيها الهاتف والعنوان كيف شفنا فالفيديو.
منبعد عندي ل footer ولي هو نفسوا لي شفنا فالكود السابق.
تتمة الكود :

                                <div data-role="page" id="contact">
		<div data-role="header">
			<h1>Contact</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-transition="slide" data-icon="home">Accueil</a></li>
					<li><a href="#courses" data-transition="slide" data-icon="bullets">Cours</a></li>
					<li><a href="#contact" data-transition="slide" data-icon="mail">Contact</a></li>
				</ul>
			</div>
		</div>
		<div data-role="main" class="ui-content">
			<form action="#">
				<label for="nom">Nom & Prénom</label>
				<input type="text" name="nom" id="nom" placeholder="Nom & Prénom">
				<label for="email">Email</label>
				<input type="text" name="email" id="email" placeholder="E-mail">
				<label for="message">Message</label>
				<textarea rows="5" cols="30" name="message" id="message" placeholder="Message"></textarea>
				<button type="submit"><i class="fa fa-envelope"></i> Envoyer</button>
			</form>
			<div data-role="collapsible" class="ui-content">
				<h3>Adresse & Téléphone</h3>
				<div data-role="listview">
					<li data-role="list-divider">Tél:22-22-22-22-22</li>
					<li data-role="list-divider">Adresse:14 rue afrah Taza.</li>
				</div>
			</div>
		</div>
		<div data-role="footer" class="ui-content">
			<h3>DCoding©2018</h3>
			<div class="center">
				<a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
				<a href="#"><i class="fab fa-twitter-square fa-2x"></i></a>
				<a href="#"><i class="fab fa-youtube-square fa-2x"></i></a>
			</div>
		</div>
	</div>
</body>
</html>
                            

4- إضافة الملف style.css

ف dossier css زيد ملف جديد سميه style.css لي فيه غادي يكون كود css زدتو باش قاديت بعض العناصر فالملف الرئيسي فيلا مكنتيش كتعرف css شوف الدورات ديال المبتدئين.
الكود لي زدنا هو :

                                    .center{
    text-align: center;
}
.center a {
    color: white;
    text-decoration: none;
}
.center a:hover{
    color: white;
}
.blue{
    color: #0071BC;
    cursor: pointer;
}
                                


بحث في الموقع


إشترك للتوصل بالجديد