PDA

View Full Version : سوال: نحوه طراحی این فرم به چه صورت است


mohammad kafiyan
شنبه 20 خرداد 1391, 20:04 عصر
سلام به دوستان نحوه طراحی این فرم pop چگونه است و با چه چیزی طراحی شده است اگر نمونه کد یا مثال دارید لطف کنید و قرار دهید
و دیگری این design مربوط به textbox وdroplist چگونه انجام شده
نمونه لینک قرار دادم در پایین همین صفحه باز شده بر روی خرید کالا کلیک کنید تا متوجه شوید

http://www.clickbank24.com/store/mokhaberat.html
saadatieathar
شنبه 20 خرداد 1391, 21:58 عصر
سلام.
با جی کوئری میشه به این شکل فرم ،عکس و ... رو بار گذاری کرد.
من یه نمونه ساده می ذارم
وقتی روی یه لینک کلیک می کنی میاد یه صفحه دیگه رو به صورت آجاکس بارگذاری می کنه.


http://s3.picofile.com/file/7404401498/open_form_j.zip.html

در مورد text box هم به تکست باکس border داره ، بعد گردش کرده :
مثلا :


.sample input
{
border:1px solid;
-moz-border-radius:7px;
}

وقتی هم کلیک می کنی توی تکست باکس توی استایل خاصیت فوکوس یه رنگ دیگه ای به حاشیه داده و یه کم هم بهش سایه داده.
مثلا :


sample input:focus
{
border:1px solid #6dd1e9;
}
mohammad kafiyan
یک شنبه 21 خرداد 1391, 16:53 عصر
سلام دوست عزیز با تشکر از جوابتان
ولی به این صورت استفاده کردهم برای textbox جواب نگرفتم و فقط یک textbox ساده ایجاد کرد و دیگر اینکه droplist را چگونه ایجاد کنم و یا button و یا checkbox,radiobutton چگونه؟؟؟؟


<style type="text/css">
.sample input
{
border:1px solid;
-moz-border-radius:7px;
}
.sample input:focus
{
border:1px solid #6dd1e9;
}



<input type="text" class="sample" />
saadatieathar
یک شنبه 21 خرداد 1391, 17:27 عصر
سلام.
کد تکست باکس :


<style>
.sample input
{
border:1px solid;
-moz-border-radius:7px;
}
.sample input:focus
{
border:1px solid #6dd1e9;
}
</style>

text :

<div class="sample">
<input type="text" />
</div>



مثال droplist :



<form action="">
<select name="city">
<option value="teh">تهران</option>
<option value="shirzb">شیراز </option>
<option value="ahvaz">اهواز</option>
<option value="kerman">کرمان</option>
</select>
</form>


button :


<input type="submit" value="Submit" />


radiobutton :


<form action="">
<input type="radio" name="soal" value="male" /> بله <br />
<input type="radio" name="soal" value="female" />خیر
</form>

چک باکس:



<form action="">
<input type="checkbox" name="test" value="Bike" /> 1<br />
<input type="checkbox" name="test" value="Car" /> 2
</form>
mohammad kafiyan
دوشنبه 22 خرداد 1391, 11:41 صبح
با سلام دوست عزیز و تشکر از راهنمایی شما ولی این چیزی که من می خواستم نبود ، من طراحی همانند صفحه بالا که لینک اون را قرار دادم که textbox ها , droplist می خوام
مثلا چگونه droplist را داخل کادر حلال قرار داده با این دستور که مربوط به تگ div داده بودی فقط بروی textbox , button اعمال شد و تغییر بر روی droplist ندیدم
Saber Mogaddas
دوشنبه 22 خرداد 1391, 12:32 عصر
سلام
برای ساخت یه DropDown زیبا این پلاگین (http://jamielottering.github.com/DropKick/)JQuery پیشنهاد خوبی هست .
اگه تصمیم دارید که با Css این کار رو انجام بدید این لینک (http://cssglobe.com/post/8802/custom-styling-of-the-select-elements)و این لینک (http://bavotasan.com/2011/style-select-box-using-only-css/)مرجع خوبی هستن..
موفق باشی..
mohammad kafiyan
دوشنبه 22 خرداد 1391, 19:57 عصر
سلام با تشکر از شما
ولی من می خوام مثل سایت بالا که textbox , droplist,button در صفحه وجو داره ، طراحی انجام بدم
ولی هرچی روی کد های css آن کار کردم نشد
از jquery استفاده نکرده و از css3 استفاده شده
saadatieathar
دوشنبه 22 خرداد 1391, 21:43 عصر
شما اون کدی رو که استفاده کردی و کار نکرد رو بذار اینجا تا بررسی شه .
mohammad kafiyan
دوشنبه 22 خرداد 1391, 23:34 عصر
با سلام
بفرمایید دوست عزیز این هم همان کدی که گفتی که البته برای هر کدام از عناصر داخل یک div جدا قرار دادم



<style type="text/css">

.sample input
{
border:1px solid;
-moz-border-radius:3px;
font-size:20px;
}
.sample input:focus
{
border:1px solid #6dd1e9;
}

</style>
<script language="javascript" src="PECalendar.js"></script>
</head>
<body>
<form>
<div class="margin" width=10px height=10px >
<h1> some header </h1>
<p> some Text </p>

</div>
<br>
<div class="sample">
<input type="text"/>
</br>
</div>
<div class="sample">
<select name="city">
<option value="teh">تهران</option>
<option value="shirzb">شیراز </option>
<option value="ahvaz">اهواز</option>
<option value="kerman">کرمان</option>
</select>
</br>
</div>
<input type="radio" name="soal" value="male" /> بله
<input type="radio" name="soal" value="female" />خیر
</br>
<input type="checkbox" name="test" value="Bike" /> 1
<input type="checkbox" name="test" value="Car" /> 2
</br>
<input type="submit" value="Submit" />
</form>
</div>
</body>
lady64
سه شنبه 23 خرداد 1391, 08:22 صبح
منم هم از کد پست شماره 2 استفاده کردم ولی اتفاقی نیفتاد . همچنان input ساده هستش . با ie9 هم تست کردم.
saadatieathar
سه شنبه 23 خرداد 1391, 09:59 صبح
سلام.
تکست باکس که مشکلی نداشت و کدش کار می کرد.
لیست باز شو هم وقتی می خوای این استایل روش اعمال شه باید توی css بهش استایل بدی.
خود همون تکست باکس لینکی کهه دادید رو لیست باز شو :


<style type="text/css">

.sample input,select
{
border:1px solid #9c9c9c;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
min-width:170px;color:#4e4e4e;
padding:4px;font:1.1em Tahoma;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;transition:all 1s ease;
font:9pt tahoma;
height:30px;
direction:rtl;
text-align:right;
}


.sample input:focus
{
border-color:#678926;
box-shadow:0 0 3px #85a741;
color:#000
}
</style>

<div class="sample">
<form>
<input type="text" value="تست "/>
<br><br>
<select name="city">
<option value="teh">تهران</option>
<option value="shirzb">شیراز </option>
<option value="ahvaz">اهواز</option>
<option value="kerman">کرمان</option>
</select>

</form>
</div>
lady64
سه شنبه 23 خرداد 1391, 10:16 صبح
درست شد ، خیلی ممنونم.
mohammad kafiyan
سه شنبه 23 خرداد 1391, 13:36 عصر
واقعا تشکر می کنم از راهنمایی شما
حال می خواستم ببینم می تونم به
button , checkboc,radiobutton می شود استایل داد
saadatieathar
سه شنبه 23 خرداد 1391, 14:34 عصر
خواهش می کنم.
آره به این ها هم میهش استایلد اد.
مثلا به checkboc,radiobutton چجور استایلی می خوای بدی؟ ینی کلا می خوای چجوری باشه ؟
یه دکمه هم اضافه کردم به کد :


<style type="text/css">

.sample input,select
{
border:1px solid #9c9c9c;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
min-width:170px;color:#4e4e4e;
padding:4px;font:1.1em Tahoma;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;transition:all 1s ease;
font:9pt tahoma;
height:30px;
direction:rtl;
text-align:right;
}
.sample input:focus
{
border-color:#678926;
box-shadow:0 0 3px #85a741;
color:#000
}

.dokme input
{
font:8pt tahoma;
width:130px;
height:33px;
border:1px solid #7d7777;
background:#fff;
-moz-border-radius:8px;

}
.dokme input:hover
{
width:130px;
height:33px;
border:1px solid #000;
background:#75f1e4;
color:#ff00fc;
}



</style>

<div class="sample">
<form>
<input type="text" value="تست " class="text-box"/>
<br><br>
<select name="city">
<option value="teh">تهران</option>
<option value="shirzb">شیراز </option>
<option value="ahvaz">اهواز</option>
<option value="kerman">کرمان</option>
</select>
<br/>
<br/>




</form>
</div>

<div class="dokme">
<input type="submit" value="دکمه ارسال " />
</div>

<br>

<bR>
<div style="font:8pt tahoma;color:#6d1c6c;">
<input type="radio" name="soal" value="male" /> بله
<input type="radio" name="soal" value="female" />خیر

</div>